@layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .reading-container {
                height: calc(100vh - 6rem);
            }
            .border-vintage {
                border-color: #D4B483;
            }
            .bg-vintage {
                background-color: #F5E8D0;
            }
        }
        
        /* 确保中文显示正常 */
        body {
            font-family: 'Noto Serif SC', 'SimSun', 'Microsoft YaHei', serif;
            color: #3A2E24; /* 新增易读文本颜色 */
        }
        
        /* 主背景渐变 */
        body {
            background: linear-gradient(135deg, #FAF6EF 0%, #FAF3E0 50%, #F5E8D0 100%); /* 优化背景色 */
        }
        
        /* 暗黑模式样式 */
        body.dark-mode {
            background: linear-gradient(135deg, #1A1510 0%, #2C241B 50%, #3A2E24 100%);
            color: #E8D8C3;
        }
        
        body.dark-mode .bg-white {
            background-color: #2C241B;
        }
        
        body.dark-mode .bg-gray-50 {
            background-color: #1A1510;
        }
        
        body.dark-mode .text-primary {
            color: #E8D8C3;
        }
        
        body.dark-mode .text-gray-600 {
            color: #B8A089;
        }
        
        body.dark-mode .text-gray-500 {
            color: #C9B8A3;
        }
        
        body.dark-mode .border-b,
        body.dark-mode .border-t {
            border-color: #5C4033;
        }
        
        body.dark-mode .annotation {
            background-color: #3A2E24;
            color: #E8D8C3;
        }
        
        /* 卡片阴影效果 */
        .shadow-vintage {
            box-shadow: 0 4px 12px rgba(44, 24, 16, 0.08), 0 1px 3px rgba(44, 24, 16, 0.05);
        }
        
        /* 顶部导航栏样式 */
        .header-nav {
            background: linear-gradient(to right, #2C1810, #5C4033);
            color: #FDF6E3;
            box-shadow: 0 2px 10px rgba(44, 24, 16, 0.15);
        }
        
        body.dark-mode .header-nav {
            background: linear-gradient(to right, #3A2E24, #2C241B);
        }
        
        /* 生僻字样式 - 修改：移除交互效果，仅保留基本样式 */
        .rare-char {
            color: #7D5A4F; /* 易读强调色 */
            font-weight: 600;
        }
        
        body.dark-mode .rare-char {
            color: #B8A089;
        }
        
        /* 按钮样式优化 */
        .btn-vintage {
            background: linear-gradient(to bottom, #8B7355, #5C4033);
            color: #FDF6E3;
            border: 1px solid #5C4033;
            transition: all 0.3s ease;
        }
        
        .btn-vintage:hover {
            background: linear-gradient(to bottom, #9C8365, #6C5033);
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(92, 64, 51, 0.2);
        }
        
        .btn-vintage.active {
            background: linear-gradient(to bottom, #CD7F32, #8B7355);
            box-shadow: inset 0 2px 4px rgba(44, 24, 16, 0.2);
        }
        
        /* 段落分隔线 */
        .section-divider {
            border-top: 1px dashed #D4B483;
            margin: 1rem 0;
        }
        .note {background:white;margin-bottom:20px;}
        .bottom {margin-bottom:20px;}
	
	.nav {
            text-align: center;
            padding: 1rem 0;
            background-color: rgba(215, 204, 200, 0.3);
            border-bottom: 1px solid rgba(121, 85, 72, 0.2);
        }

        .nav a {
            color: var(--secondary);
            text-decoration: none;
            padding: 0.5rem 1rem;
            transition: all 0.3s;
        }

        body.dark-mode .section-divider {
            border-top: 1px dashed #8B7355;
        }
        
        body.dark-mode .note {
            background: #3A2E24;
            margin-bottom:20px;
        }
        
        /* 注释框样式 - 修改：移除所有注释框 */
        .annotation-box {
            display: none;
        }
        
        /* 暗黑模式下原文和译文容器样式 */
        body.dark-mode .reading-container {
            background-color: #2C241B; /* 暗黑模式内容背景色 */
            border-color: #5C4033; /* 暗黑模式边框颜色 */
        }
        
        body.dark-mode .reading-content p {
            color: #E8D8C3; /* 暗黑模式文字颜色 */
        }
        
        body.dark-mode .reading-content h2 {
            color: #CD7F32; /* 暗黑模式标题颜色 */
        }
        
        body.dark-mode .text-readable-accent {
            color: #CD7F32; /* 暗黑模式下强调色 */
        }
        
        /* 暗黑模式下按钮样式调整 */
        body.dark-mode .bg-beige\/30 {
            background-color: rgba(58, 46, 36, 0.3); /* 深色背景 */
            border-color: rgba(92, 64, 51, 0.4); /* 深色边框 */
            color: #B8A089; /* 深色文字 */
        }
        
        body.dark-mode .bg-beige\/30:hover {
            background-color: rgba(58, 46, 36, 0.5);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .reading-container {
                height: calc(100vh - 8rem);
            }
            #btn-both {
        	display: none !important;
    		}
            .header-nav {
                padding: 0.75rem 0;
            }
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #F5E8D0;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #8B7355;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #5C4033;
        }
        
        body.dark-mode ::-webkit-scrollbar-track {
            background: #2C241B;
        }
        
        body.dark-mode ::-webkit-scrollbar-thumb {
            background: #5C4033;
        }
        
        body.dark-mode ::-webkit-scrollbar-thumb:hover {
            background: #8B7355;
        }