: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}.card{background:var(--card-bg);box-shadow:0 2px 12px var(--shadow);border-radius:16px;margin-bottom:20px;padding:24px}: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;--font-scale:.538;--user-font-size:7px}*{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}.toolbar-group{z-index:20;align-items:center;gap:8px;display:flex;position:absolute;top:20px;right:20px}.toolbar-btn{width:calc(2.2rem * var(--font-scale));height:calc(2.2rem * var(--font-scale));border:1px solid var(--border);background:var(--card-bg);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}.toolbar-btn-icon{width:calc(1.35em * var(--font-scale));height:calc(1.35em * var(--font-scale))}@media (hover:hover){.toolbar-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--accent-light)}}.toolbar-btn:active{transform:scale(.96)}.toolbar-btn--on{color:var(--primary);border-color:var(--primary-light);background:var(--accent-light)}.fontsize-overlay{z-index:99;background:#00000040;animation:.15s fadeOverlay;position:fixed;inset:0}@keyframes fadeOverlay{0%{opacity:0}to{opacity:1}}.fontsize-popup{z-index:100;background:var(--card-bg);border-radius:16px;min-width:280px;max-width:360px;padding:20px 20px 16px;animation:.2s popupIn;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 8px 32px #0000002e}@keyframes popupIn{0%{opacity:0;transform:translate(-50%,-48%)scale(.96)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.fontsize-popup-title{font-size:calc(1rem * var(--font-scale));color:var(--primary);text-align:center;margin-bottom:14px;font-weight:600}.fontsize-preview{color:var(--text-primary);text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:14px;padding:10px 0;font-family:Kaiti,STKaiti,SimSun,serif;line-height:1.8;transition:font-size .15s}.ui-slider-root{touch-action:none;-webkit-user-select:none;user-select:none;align-items:center;width:100%;height:20px;display:flex;position:relative}.ui-slider-track{background:var(--accent-light);border-radius:999px;width:100%;height:6px;position:relative;overflow:hidden}.ui-slider-range{background:var(--primary);height:100%;position:absolute}.ui-slider-thumb{border:2px solid var(--primary);background:var(--card-bg);width:18px;height:18px;box-shadow:0 1px 6px var(--shadow);border-radius:999px;display:block}.ui-slider-thumb:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab, var(--primary) 30%, transparent);outline:none}.fontsize-marks{font-size:calc(.84rem * var(--font-scale));color:var(--text-light);justify-content:space-between;margin-top:8px;padding:0 2px;display:flex}.fontsize-marks .active{color:var(--primary);font-weight:600}.page-topbar{min-height:calc(2.2rem * var(--font-scale));flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;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:calc(2.2rem * var(--font-scale) + 30px) 0 30px}.header h1{font-size:calc(2.1rem * var(--font-scale));color:var(--primary);letter-spacing:.3em;margin-bottom:8px;font-weight:700}.header .subtitle{font-size:calc(1.1rem * var(--font-scale));color:var(--text-secondary);font-family:Kaiti,STKaiti,serif}.progress-bar{background:var(--card-bg);box-shadow:0 2px 8px var(--shadow);border-radius:12px;margin-bottom:30px;padding:20px}.progress-info{font-size:calc(.95rem * var(--font-scale));color:var(--text-secondary);justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px;display:flex}.progress-main{align-items:baseline;gap:.45em;min-width:0;display:inline-flex}.progress-duration{color:var(--text-light);font-size:.74em}.progress-summary{text-align:right;white-space:normal;overflow-wrap:anywhere;flex-shrink:1;max-width:46%}.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{font-size:calc(.85rem * var(--font-scale));color:var(--text-light);margin-bottom:8px}.chapter-title{font-size:calc(.9rem * var(--font-scale));color:var(--text-primary);font-family:Kaiti,STKaiti,serif;line-height:1.4}.read-badge,.reading-badge{top:calc(.6em * var(--font-scale));right:calc(.6em * var(--font-scale));font-size:calc(.7rem * var(--font-scale));padding:calc(.15em * var(--font-scale)) calc(.55em * var(--font-scale));border-radius:calc(.65em * var(--font-scale));border:1px solid #0000;font-weight:500;position:absolute}.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;font-size:calc(.85rem * var(--font-scale));color:var(--text-secondary);height:calc(2.2rem * var(--font-scale));box-sizing:border-box;z-index:3;pointer-events:auto;touch-action:manipulation;border-radius:8px;align-items:center;gap:4px;margin-bottom:0;padding:0 10px;transition:background .2s,color .2s,transform .15s;display:inline-flex;position:relative}.back-icon{width:calc(.8rem * var(--font-scale));height:calc(.8rem * var(--font-scale));flex-shrink:0;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;font-size:calc(.9rem * var(--font-scale));color:var(--primary);margin-top:14px;padding-top:14px;font-weight:500}.chapter-time{font-size:calc(.75rem * var(--font-scale));color:var(--text-light);margin-top:8px}.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{font-size:calc(.9rem * var(--font-scale));color:var(--text-light);margin-bottom:10px}.chapter-title-detail{font-size:calc(1.8rem * var(--font-scale));color:var(--primary);letter-spacing:.2em;font-family:Kaiti,STKaiti,serif}.card h3{font-size:calc(1.1rem * var(--font-scale));color:var(--primary);margin:0;font-weight:600}.section-header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:10px;margin-bottom:16px;padding-bottom:10px;display:flex}.pinyin-toggle{width:calc(1.9em * var(--font-scale));height:calc(1.9em * var(--font-scale));border:1.5px solid var(--border);background:var(--card-bg);color:var(--text-light);font-size:calc(.8rem * var(--font-scale));cursor:pointer;touch-action:manipulation;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;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{font-family:Kaiti,STKaiti,SimSun,serif;font-size:var(--user-font-size);color:var(--text-primary);line-height:2}.original-text,.explanation-text,.insight-chapter-time,.insight-hint,.insight-option,.insight-label{color:var(--text-primary);font-family:Kaiti,STKaiti,SimSun,serif}.original-text.with-pinyin{line-height:2.35}.original-text.with-pinyin p{margin-bottom:4px}.original-text p{margin-bottom:0}.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-select-wrap{min-width:140px;max-width:52%;margin:0}.explanation-select-trigger{border:1px solid color-mix(in oklab, var(--border) 80%, var(--primary) 20%);background:color-mix(in oklab, var(--card-bg) 86%, var(--accent-light) 14%);width:100%;color:var(--primary);font-size:calc(.82rem * var(--font-scale));cursor:pointer;border-radius:999px;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;transition:border-color .2s,color .2s,background .2s,transform .15s;display:inline-flex}@media (hover:hover){.explanation-select-trigger:hover{border-color:var(--primary);background:color-mix(in oklab, var(--card-bg) 76%, var(--accent-light) 24%)}}.explanation-select-trigger:active{transform:scale(.98)}.ui-select-icon{color:var(--primary-light);flex-shrink:0}.ui-select-content{z-index:120;border:1px solid var(--border);background:var(--card-bg);box-shadow:0 8px 20px var(--shadow);border-radius:12px;overflow:hidden}.ui-select-item{font-size:calc(.84rem * var(--font-scale));color:var(--text-secondary);cursor:pointer;outline:none;padding:9px 30px 9px 12px;position:relative}.ui-select-item[data-highlighted]{background:var(--accent-light);color:var(--primary)}.ui-select-item-indicator{color:var(--primary);position:absolute;top:50%;right:9px;transform:translateY(-50%)}.section-header--compact{margin-bottom:14px}.section-header--compact h3{margin:0}.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);font-size:calc(.86rem * var(--font-scale));white-space:nowrap;cursor:pointer;touch-action:manipulation;border-radius:999px;padding:6px 12px;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{font-size:var(--user-font-size);text-align:justify;line-height:1.8}.insight-chapter-time{font-size:var(--user-font-size);white-space:nowrap;flex-shrink:0;font-weight:500}.insight-hint{font-size:var(--user-font-size);margin:0 0 14px;line-height:1.45}.insight-options{flex-wrap:wrap;gap:8px;display:flex}.insight-option{border:1px solid var(--border);cursor:pointer;touch-action:manipulation;font-size:var(--user-font-size);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:var(--user-font-size);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);max-width:48%;font-size:calc(1rem * var(--font-scale));cursor:pointer;background:var(--card-bg);color:var(--primary);box-shadow:0 2px 8px var(--shadow);touch-action:manipulation;border-radius:12px;align-items:center;gap:12px;padding:14px 20px;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;display:flex}.nav-button.next{flex-direction:row;margin-left:auto}.nav-icon{width:calc(1.35em * var(--font-scale));height:calc(1.35em * var(--font-scale));flex-shrink:0;transition:transform .3s}.nav-text{flex-direction:column;gap:2px;display:flex;overflow:hidden}.nav-label{font-size:calc(.8rem * var(--font-scale));color:var(--text-light);line-height:1.2}.nav-button.prev .nav-label{text-align:left}.nav-button.next .nav-label{text-align:right}.nav-title{font-size:calc(.95rem * var(--font-scale));color:var(--primary);white-space:nowrap;text-overflow:ellipsis;font-family:Kaiti,STKaiti,serif;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:calc(1.6rem * var(--font-scale))}.progress-main{flex-direction:column;align-items:flex-start;gap:.15em;display:flex}.progress-summary{max-width:44%}.progress-duration{font-size:.68em;line-height:1.25}.section-header--compact{align-items:center}.explanation-select-wrap{max-width:56%}.explanation-select-trigger{font-size:calc(.78rem * var(--font-scale));padding:6px 9px}.chapters{grid-template-columns:repeat(2,1fr);gap:12px}.chapter-card{padding:16px 12px}.chapter-title-detail{font-size:calc(1.4rem * var(--font-scale))}.chapter-nav{gap:10px}.nav-button{gap:8px;padding:12px 14px}.nav-icon{width:calc(1.2em * var(--font-scale));height:calc(1.2em * var(--font-scale))}.nav-title{font-size:calc(.85rem * var(--font-scale))}.section-header--insight{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,.explanation-select-trigger,.insight-option,.toolbar-btn,.ui-slider-thumb,.ui-slider-range{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,.toolbar-btn: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-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%)}