:root{font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif}#root{width:100%}body{min-width:320px;margin:0}:root{--bg-color:#f5f5f0;--card-bg:#fff;--primary:#8b4513;--primary-light:sienna;--text-primary:#2c2c2c;--text-secondary:#666;--text-light:#999;--accent:#d4a574;--accent-light:#e8d4bc;--border:#e0d5c7;--shadow:#8b45131a}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;line-height:1.6}.app{max-width:800px;min-height:100vh;margin:0 auto;padding:20px;position:relative}.night-toggle{z-index:20;border:1px solid var(--border);background:var(--card-bg);width:42px;height:42px;color:var(--text-secondary);cursor:pointer;box-shadow:0 2px 8px var(--shadow);touch-action:manipulation;border-radius:12px;justify-content:center;align-items:center;transition:background .2s,color .2s,border-color .2s,transform .15s;display:flex;position:absolute;top:18px;right:20px}.night-toggle-icon{width:22px;height:22px}@media (hover:hover){.night-toggle:hover{border-color:var(--primary);color:var(--primary);background:var(--accent-light)}}.night-toggle:active{transform:scale(.96)}.night-toggle--on{color:var(--primary);border-color:var(--primary-light);background:var(--accent-light)}.page-topbar{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;display:flex}.page-topbar-inline{position:relative}.topbar-left{flex:1;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;min-width:0;display:grid;overflow:hidden}.header{text-align:center;padding:40px 0 30px}.header h1{color:var(--primary);letter-spacing:.3em;margin-bottom:8px;font-size:2.5rem;font-weight:700}.header .subtitle{color:var(--text-secondary);font-family:Kaiti,STKaiti,serif;font-size:1.1rem}.progress-bar{background:var(--card-bg);box-shadow:0 2px 8px var(--shadow);border-radius:12px;margin-bottom:30px;padding:20px}.progress-info{color:var(--text-secondary);justify-content:space-between;margin-bottom:12px;font-size:.95rem;display:flex}.progress-track{background:var(--accent-light);border-radius:4px;height:8px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--primary), var(--accent));border-radius:4px;height:100%;transition:width .3s}.chapters{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;display:grid}.chapter-card{background:var(--card-bg);cursor:pointer;box-shadow:0 2px 8px var(--shadow);touch-action:manipulation;border:1px solid #0000;border-radius:12px;padding:20px 16px;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative}.chapter-card.read{border-color:var(--primary-light);background:linear-gradient(135deg,#faf8f5 0%,#f5efe6 100%)}.chapter-number{color:var(--text-light);margin-bottom:8px;font-size:.85rem}.chapter-title{color:var(--text-primary);font-family:Kaiti,STKaiti,serif;font-size:1rem;line-height:1.4}.read-badge,.reading-badge{border:1px solid #0000;border-radius:10px;padding:2px 8px;font-size:.7rem;font-weight:500;position:absolute;top:10px;right:10px}.insight-badge--init{color:#5c5348;background:#ebe8e2;border-color:#d4cfc4}.insight-badge--seeking{color:#0f766e;background:#ccfbf1;border-color:#99f6e4}.insight-badge--observing{color:#0369a1;background:#e0f2fe;border-color:#bae6fd}.insight-badge--heard{color:#166534;background:#dcfce7;border-color:#bbf7d0}.insight-badge--reflecting{color:#5b21b6;background:#ede9fe;border-color:#ddd6fe}.insight-badge--subtle{color:#92400e;background:#ffedd5;border-color:#fed7aa}.insight-badge--awakened{color:#fefce8;text-shadow:0 1px #00000026;background:linear-gradient(135deg,#78350f 0%,#92400e 100%);border-color:#a16207}.chapter-detail{animation:.3s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translate(0,0)}}.back-button{background:var(--card-bg);border:1px solid var(--border);cursor:pointer;color:var(--text-secondary);z-index:3;pointer-events:auto;touch-action:manipulation;border-radius:8px;align-items:center;gap:6px;margin-bottom:0;padding:10px 20px;font-size:.95rem;transition:background .2s,color .2s,transform .15s;display:inline-flex;position:relative}.back-icon{flex-shrink:0;width:16px;height:16px;transition:transform .2s}@media (hover:hover){.back-button:hover{background:var(--accent-light);color:var(--primary)}.back-button:hover .back-icon{transform:translate(-1px)}}.back-button:active{background:var(--accent-light);color:var(--primary);transform:scale(.98)}.back-button:active .back-icon{transform:translate(-1px)}.stats-bar{background:var(--card-bg);box-shadow:0 2px 8px var(--shadow);border-radius:12px;margin-bottom:30px;padding:20px}.stats-bar .progress-bar{box-shadow:none;background:0 0;border-radius:0;margin-bottom:0;padding:0}.total-time{border-top:1px solid var(--border);text-align:center;color:var(--primary);margin-top:14px;padding-top:14px;font-size:.9rem;font-weight:500}.chapter-time{color:var(--text-light);margin-top:8px;font-size:.75rem}.topbar-left .back-button{flex-shrink:0;margin-bottom:0}.chapter-header{text-align:center;background:var(--card-bg);box-shadow:0 2px 12px var(--shadow);border-radius:16px;margin-bottom:30px;padding:30px 20px}.chapter-id{color:var(--text-light);margin-bottom:10px;font-size:.9rem}.chapter-title-detail{color:var(--primary);letter-spacing:.2em;font-family:Kaiti,STKaiti,serif;font-size:1.8rem}.content-section{background:var(--card-bg);box-shadow:0 2px 12px var(--shadow);border-radius:16px;margin-bottom:20px;padding:24px}.content-section h3{color:var(--primary);margin-bottom:0;font-size:1.1rem;font-weight:600}.section-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:10px;display:flex}.pinyin-toggle{border:1.5px solid var(--border);background:var(--card-bg);width:30px;height:30px;color:var(--text-light);cursor:pointer;touch-action:manipulation;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.8rem;transition:border-color .2s,color .2s,transform .15s,background .2s;display:flex}@media (hover:hover){.pinyin-toggle:hover:not(.active){border-color:var(--primary);color:var(--primary)}}.pinyin-toggle:active:not(.active){border-color:var(--primary);color:var(--primary);transform:scale(.92)}.pinyin-toggle.active{background:var(--primary);border-color:var(--primary);color:#fff}.original-text{color:var(--text-primary);font-family:Kaiti,STKaiti,SimSun,serif;font-size:1.15rem;line-height:2}.original-text.with-pinyin{line-height:2.35}.original-text.with-pinyin p{margin-bottom:4px}.original-text p{text-indent:2em;margin-bottom:8px}.original-text ruby{ruby-align:center;ruby-position:over;margin:0 1px}.original-text .char-ruby{vertical-align:baseline;margin:0;display:inline-block}.original-text rt{color:var(--primary-light);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,sans-serif;font-size:.5em;font-style:normal}.original-text.with-pinyin rt{letter-spacing:normal;font-size:.44em;font-weight:500}.original-text .punctuation{ruby-align:center}.explanation-tabs{-webkit-overflow-scrolling:touch;gap:10px;margin:14px 0;padding-bottom:4px;display:flex;overflow-x:auto}.explanation-tab{border:1px solid var(--border);background:var(--card-bg);color:var(--text-secondary);white-space:nowrap;cursor:pointer;touch-action:manipulation;border-radius:999px;padding:6px 12px;font-size:.86rem;transition:border-color .2s,color .2s,background .2s,transform .15s}@media (hover:hover){.explanation-tab:hover:not(.active){border-color:var(--primary);color:var(--primary)}}.explanation-tab:active:not(.active){border-color:var(--primary);color:var(--primary);transform:scale(.97)}.explanation-tab.active{background:var(--primary);border-color:var(--primary);color:#fff}.explanation-text{color:var(--text-secondary);text-align:justify;font-size:1rem;line-height:1.8}.insight-panel{background:var(--card-bg);box-shadow:0 2px 12px var(--shadow);border:1px solid #f0e5d7;border-radius:16px;margin:0 0 18px;padding:18px 18px 16px}.insight-header{justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;display:flex}.insight-header h4{color:var(--primary);margin:0;font-size:1rem}.insight-chapter-time{color:var(--primary);white-space:nowrap;flex-shrink:0;font-size:.88rem;font-weight:500}.insight-hint{color:var(--text-light);margin:0 0 14px;font-size:.82rem;line-height:1.45}.insight-options{flex-wrap:wrap;gap:8px;display:flex}.insight-option{border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;touch-action:manipulation;background:#faf8f4;border-radius:999px;align-items:center;gap:6px;padding:7px 12px;transition:border-color .2s,background .2s,transform .15s;display:inline-flex}@media (hover:hover){.insight-option:hover:not(.active){border-color:var(--accent);color:var(--text-secondary);background:#f7f3ec}}.insight-option:active:not(.active){border-color:var(--accent);background:#f7f3ec;transform:scale(.97)}.insight-option--init.active{color:#3d3830;background:#ebe8e2;border-color:#a8a095}.insight-option--seeking.active{color:#115e59;background:#ccfbf1;border-color:#2dd4bf}.insight-option--observing.active{color:#075985;background:#e0f2fe;border-color:#38bdf8}.insight-option--heard.active{color:#14532d;background:#dcfce7;border-color:#4ade80}.insight-option--reflecting.active{color:#4c1d95;background:#ede9fe;border-color:#a78bfa}.insight-option--subtle.active{color:#7c2d12;background:#ffedd5;border-color:#fb923c}.insight-option--awakened.active{color:#fefce8;background:linear-gradient(135deg,#78350f 0%,#92400e 100%);border-color:#a16207}.insight-label{font-size:.85rem;font-weight:600;line-height:1}.insight-desc{display:none}.chapter-nav{justify-content:space-between;gap:16px;margin-top:30px;display:flex}.nav-button{border:1px solid var(--border);cursor:pointer;background:var(--card-bg);max-width:48%;color:var(--primary);box-shadow:0 2px 8px var(--shadow);touch-action:manipulation;border-radius:12px;align-items:center;gap:12px;padding:14px 20px;font-size:1rem;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;display:flex}.nav-button.next{flex-direction:row;margin-left:auto}.nav-icon{flex-shrink:0;width:22px;height:22px;transition:transform .3s}.nav-text{flex-direction:column;gap:2px;display:flex;overflow:hidden}.nav-label{color:var(--text-light);font-size:.8rem;line-height:1.2}.nav-button.prev .nav-label{text-align:left}.nav-button.next .nav-label{text-align:right}.nav-title{color:var(--primary);white-space:nowrap;text-overflow:ellipsis;font-family:Kaiti,STKaiti,serif;font-size:.95rem;line-height:1.3;overflow:hidden}@media (hover:hover){.nav-button:hover{border-color:var(--primary);box-shadow:0 6px 16px var(--shadow);background:linear-gradient(135deg,#faf8f5 0%,#f5efe6 100%);transform:translateY(-2px)}.nav-button.prev:hover .nav-icon{transform:translate(-3px)}.nav-button.next:hover .nav-icon{transform:translate(3px)}}.nav-button:active{border-color:var(--primary);box-shadow:0 2px 8px var(--shadow);background:linear-gradient(135deg,#faf8f5 0%,#f5efe6 100%);transform:scale(.97)}.nav-button.prev:active .nav-icon{transform:translate(-2px)}.nav-button.next:active .nav-icon{transform:translate(2px)}@media (hover:hover){.chapter-card:hover{box-shadow:0 8px 20px var(--shadow);border-color:var(--accent);transform:translateY(-4px)}}.chapter-card:active{box-shadow:0 2px 8px var(--shadow);transform:scale(.98)}@media (width<=600px){.header h1{font-size:1.8rem}.chapters{grid-template-columns:repeat(2,1fr);gap:12px}.chapter-card{padding:16px 12px}.chapter-title-detail{font-size:1.4rem}.original-text{font-size:1.05rem}.chapter-nav{gap:10px}.nav-button{gap:8px;padding:12px 14px}.nav-icon{width:20px;height:20px}.nav-title{font-size:.85rem}.insight-panel{padding:14px}.insight-header{flex-direction:column;align-items:flex-start;gap:4px}}@media (prefers-reduced-motion:reduce){.chapter-detail{animation:none}.progress-fill,.chapter-card,.back-button,.back-icon,.nav-button,.nav-icon,.pinyin-toggle,.explanation-tab,.insight-option,.night-toggle{transition:none}.chapter-card:hover,.chapter-card:active,.back-button:active,.pinyin-toggle:active,.explanation-tab:active,.insight-option:active,.nav-button:hover,.nav-button:active,.nav-button .nav-icon,.back-button:hover .back-icon,.back-button:active .back-icon,.night-toggle:active{transform:none}}html.night-mode{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-color:#161412;--card-bg:#1f1c18;--primary:#c9a66b;--primary-light:#dfc08a;--text-primary:#e8e4dc;--text-secondary:#b0a89c;--text-light:#7a7268;--accent:#8f7350;--accent-light:#2e2922;--border:#3d3830;--shadow:#0006}html.night-mode .chapter-card.read{background:linear-gradient(135deg,#2a261f 0%,#1e1b17 100%);border-color:#c9a66b73}html.night-mode .insight-badge--init{color:#c4bdb0;background:#2e2a26;border-color:#454039}html.night-mode .insight-badge--seeking{color:#5eead4;background:#134e4a;border-color:#0f766e}html.night-mode .insight-badge--observing{color:#7dd3fc;background:#0c4a6e;border-color:#0369a1}html.night-mode .insight-badge--heard{color:#86efac;background:#14532d;border-color:#166534}html.night-mode .insight-badge--reflecting{color:#c4b5fd;background:#4c1d95;border-color:#6d28d9}html.night-mode .insight-badge--subtle{color:#fdba74;background:#7c2d12;border-color:#9a3412}html.night-mode .insight-badge--awakened{color:#fef9c3;text-shadow:0 1px #00000059;background:linear-gradient(135deg,#5c3d1e 0%,#78350f 100%);border-color:#a16207}html.night-mode .insight-panel{border-color:#3d3830}html.night-mode .insight-option{color:var(--text-secondary);background:#2a261f}@media (hover:hover){html.night-mode .insight-option:hover:not(.active){color:var(--text-secondary);background:#353028}}html.night-mode .insight-option:active:not(.active){background:#353028}html.night-mode .insight-option--init.active{color:#e8e4dc;background:#3d3830;border-color:#6b6458}html.night-mode .insight-option--seeking.active{color:#ccfbf1;background:#134e4a;border-color:#14b8a6}html.night-mode .insight-option--observing.active{color:#e0f2fe;background:#0c4a6e;border-color:#38bdf8}html.night-mode .insight-option--heard.active{color:#dcfce7;background:#14532d;border-color:#4ade80}html.night-mode .insight-option--reflecting.active{color:#ede9fe;background:#4c1d95;border-color:#a78bfa}html.night-mode .insight-option--subtle.active{color:#ffedd5;background:#7c2d12;border-color:#fb923c}html.night-mode .insight-option--awakened.active{color:#fefce8;background:linear-gradient(135deg,#5c3d1e 0%,#78350f 100%);border-color:#a16207}@media (hover:hover){html.night-mode .nav-button:hover{background:linear-gradient(135deg,#2a261f 0%,#242019 100%)}}html.night-mode .nav-button:active{background:linear-gradient(135deg,#2a261f 0%,#242019 100%)}