*{box-sizing:border-box;margin:0;padding:0}html{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}:root{--bg-primary:#fff;--bg-secondary:#f8f9fa;--bg-tertiary:#e9ecef;--text-primary:#2c3e50;--text-secondary:#6c757d;--text-muted:#adb5bd;--accent-color:#3498db;--accent-hover:#2980b9;--border-color:#dee2e6;--shadow-light:0 2px 4px #0000000d;--shadow-medium:0 4px 12px #0000001a;--shadow-heavy:0 8px 25px #00000026;--font-size-base:18px;--font-size-small:14px;--font-size-large:20px;--font-size-xl:22px;--line-height:1.8;--reading-width:800px;--transition-fast:0.2s ease;--transition-medium:0.3s ease;--transition-slow:0.5s ease}[data-theme=dark]{--bg-primary:#1a1a1a;--bg-secondary:#2d2d2d;--bg-tertiary:#404040;--text-primary:#e0e0e0;--text-secondary:#b0b0b0;--text-muted:grey;--accent-color:#4a9eff;--accent-hover:#357abd;--border-color:#404040}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-overflow-scrolling:touch;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#fff;background-color:var(--bg-primary);color:#2c3e50;color:var(--text-primary);font-family:Quicksand,sans-serif;font-size:18px;font-size:var(--font-size-base);line-height:1.8;line-height:var(--line-height);overflow-x:hidden;transition:background-color .3s ease,color .3s ease;transition:background-color var(--transition-medium),color var(--transition-medium)}*{font-family:Quicksand,sans-serif!important}code,pre{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace!important}.fa,.fab,.fal,.far,.fas{font-family:Font Awesome\ 6 Free!important;font-style:normal!important}.font-small{--font-size-base:16px;--reading-width:750px}.font-medium{--font-size-base:18px;--reading-width:800px}.font-large{--font-size-base:20px;--reading-width:850px}.font-xl{--font-size-base:22px;--reading-width:900px}@media (max-width:768px){:root{--font-size-base:16px;--font-size-large:18px;--font-size-xl:20px;--reading-width:100%;--line-height:1.6}.font-small{--font-size-base:14px}.font-medium{--font-size-base:16px}.font-large{--font-size-base:18px}.font-xl{--font-size-base:20px}}@media (max-width:480px){:root{--font-size-base:15px;--font-size-large:17px;--font-size-xl:19px;--line-height:1.5}.font-small{--font-size-base:13px}.font-medium{--font-size-base:15px}.font-large{--font-size-base:17px}.font-xl{--font-size-base:19px}}@media (max-width:360px){:root{--font-size-base:14px;--font-size-large:16px;--font-size-xl:18px;--line-height:1.4}}html{scroll-behavior:smooth}::selection{background-color:#3498db;background-color:var(--accent-color);color:#fff}a:focus,button:focus{outline:2px solid #3498db;outline:2px solid var(--accent-color);outline-offset:2px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#e9ecef;background:var(--bg-tertiary)}::-webkit-scrollbar-thumb{background:#adb5bd;background:var(--text-muted);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#6c757d;background:var(--text-secondary)}.header{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-light);left:0;position:fixed;right:0;top:0;z-index:1000}.header .container{justify-content:space-between;margin:0 auto;max-width:1200px;padding:15px 20px}.header .container,.title{align-items:center;display:flex}.title{color:var(--accent-color);font-size:24px;font-weight:700;gap:10px;margin:0}.header-controls{display:flex;gap:10px}.btn-icon{align-items:center;background:none;border:none;border-radius:8px;color:var(--text-secondary);cursor:pointer;display:flex;font-size:18px;justify-content:center;min-height:44px;min-width:44px;padding:10px;transition:all var(--transition-fast)}.btn-icon:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.btn-icon:focus{outline:2px solid var(--accent-color);outline-offset:2px}@media (max-width:768px){.header .container{padding:12px 15px}.title{font-size:20px}.btn-icon{font-size:16px;min-height:40px;min-width:40px;padding:8px}}@media (max-width:480px){.header .container{padding:10px 12px}.title{font-size:18px;gap:8px}.btn-icon{font-size:15px;min-height:38px;min-width:38px;padding:7px}.header-controls{gap:8px}}@media (max-width:414px) and (min-width:375px){.header .container{padding:12px 18px}.title{font-size:19px;gap:8px}.btn-icon{border-radius:6px;font-size:16px;min-height:42px;min-width:42px;padding:8px}.header-controls{gap:8px}}@media (max-width:360px){.header .container{padding:8px 10px}.title{font-size:16px}.btn-icon{font-size:14px;min-height:36px;min-width:36px;padding:6px}.header-controls{gap:6px}}.sidebar{background-color:var(--bg-secondary);border-right:1px solid var(--border-color);height:100vh;left:-350px;overflow-y:auto;position:fixed;top:0;transition:left var(--transition-medium);width:350px;z-index:1100}.sidebar.open{left:0}.sidebar-header{align-items:center;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:20px;position:-webkit-sticky;position:sticky;top:0;z-index:10}.sidebar-header h3{color:var(--text-primary);font-size:18px;margin:0}.chapter-list{padding:0}.chapter-item{border-bottom:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;display:block;padding:15px 20px;text-decoration:none;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.chapter-item:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.chapter-item:focus{outline:2px solid var(--accent-color);outline-offset:-2px}.chapter-item.active{background-color:var(--accent-color);color:#fff}.chapter-item.active:hover{background-color:var(--accent-hover)}.chapter-number{display:block;font-weight:600;margin-bottom:5px}.chapter-preview{display:block;font-size:var(--font-size-small);line-height:1.4;opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chapter-item.active .chapter-preview{opacity:.9}@media (max-width:768px){.sidebar{left:-100%;width:100%}.sidebar.open{left:0}.chapter-item{padding:12px 15px}.sidebar-header{padding:15px}}.sidebar::-webkit-scrollbar{width:6px}.sidebar::-webkit-scrollbar-track{background:var(--bg-tertiary)}.sidebar::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:3px}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.reading-progress{align-items:center;background-color:var(--bg-secondary);border-radius:12px;box-shadow:var(--shadow-light);display:flex;gap:15px;margin-bottom:30px;padding:15px 20px}.progress-bar{background-color:var(--bg-tertiary);border-radius:3px;flex:1 1;height:6px;overflow:hidden}.progress-fill{background:linear-gradient(45deg,var(--accent-color),var(--accent-hover));border-radius:3px;height:100%;transition:width var(--transition-fast);width:0}.progress-text{color:var(--text-secondary);font-size:var(--font-size-small);font-weight:600;min-width:40px;text-align:right}@media (max-width:768px){.reading-progress{gap:12px;margin:0 -5px 20px;padding:12px 15px}.progress-text{font-size:12px;min-width:35px}.progress-bar{height:5px}}@media (max-width:480px){.reading-progress{gap:10px;padding:10px 12px}.progress-bar{height:4px}}.chapter-nav{gap:20px;justify-content:space-between;margin:30px 0}.chapter-nav,.nav-btn{align-items:center;display:flex}.nav-btn{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;font-family:inherit;font-size:16px;font-weight:500;gap:8px;min-height:48px;padding:12px 20px;text-decoration:none;transition:all var(--transition-fast)}.nav-btn:hover:not(:disabled){background-color:var(--accent-color);border-color:var(--accent-color);box-shadow:var(--shadow-medium);color:#fff;transform:translateY(-2px)}.nav-btn:disabled{cursor:not-allowed;opacity:.5;transform:none}.nav-btn:focus{outline:2px solid var(--accent-color);outline-offset:2px}.current-chapter{color:var(--accent-color);flex:1 1;font-size:18px;font-weight:600;padding:0 20px;text-align:center}.bookmark-btn.bookmarked{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}.bookmark-btn.bookmarked:hover{background-color:var(--accent-hover);border-color:var(--accent-hover)}.bottom-nav{border-top:1px solid var(--border-color);margin-top:40px;padding-top:30px}.bottom-nav .nav-btn{padding:12px 16px}.bottom-nav .bookmark-btn{padding:12px 14px}@media (max-width:768px){.chapter-nav{flex-wrap:wrap;gap:15px;margin:25px 0}.current-chapter{margin-bottom:15px;order:-1;padding:0;text-align:center;width:100%}.nav-btn{flex:1 1;font-size:14px;justify-content:center;max-width:none;min-width:0;overflow:hidden;padding:10px 8px;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:0}.bottom-nav .nav-btn{font-size:13px;padding:12px}.bookmark-btn{flex:0 0 auto;min-width:50px;padding:10px 12px}.bottom-nav .bookmark-btn{min-width:45px;padding:12px 10px}.bookmark-btn .fa-bookmark{margin-right:0}.bookmark-btn span{display:none}}@media (max-width:480px){.chapter-nav{gap:12px;margin:20px 0}.nav-btn{border-radius:6px;flex:1 1;font-size:14px;min-height:46px;min-width:0;overflow:hidden;padding:10px;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:0}.bottom-nav .nav-btn{font-size:13px;padding:12px 14px}.bottom-nav .bookmark-btn{min-width:50px;padding:12px}.current-chapter{font-size:16px;margin-bottom:12px}.bottom-nav{margin-top:30px;padding-top:20px}}@media (max-width:414px) and (min-width:375px){.chapter-nav{gap:12px;margin:20px 0;padding:0 5px}.nav-btn{border-radius:6px;flex:1 1;font-size:14px;justify-content:center;min-height:46px;min-width:0;overflow:hidden;padding:12px 8px;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:0}.bottom-nav .nav-btn{font-size:13px;padding:12px}.current-chapter{font-size:16px;margin-bottom:12px;padding:0 10px}.bookmark-btn{flex:0 0 auto;min-width:60px;padding:12px 14px}.bottom-nav .bookmark-btn{min-width:55px;padding:12px 10px}.bottom-nav{margin-top:30px;padding-top:20px}}@media (max-width:360px){.chapter-nav{gap:10px;margin:18px 0;padding:0 3px}.nav-btn{border-radius:4px;flex:1 1;font-size:13px;min-height:44px;min-width:0;overflow:hidden;padding:10px 6px;text-align:center;text-overflow:ellipsis;white-space:nowrap;width:0}.bottom-nav .nav-btn{font-size:12px;padding:10px 8px}.current-chapter{font-size:15px;margin-bottom:10px}.bookmark-btn{flex:0 0 auto;min-width:50px;padding:10px 12px}.bottom-nav .bookmark-btn{min-width:45px;padding:10px 8px}.bottom-nav{margin-top:25px;padding-top:18px}}.btn-text-short{display:none}.btn-text-full{display:inline}@media (max-width:480px){.bottom-nav .btn-text-full{display:none}.bottom-nav .btn-text-short{display:inline}}@media (max-width:360px){.bottom-nav .btn-text-full{display:none}.bottom-nav .btn-text-short{display:inline}}@media (max-width:768px){.nav-btn{-webkit-tap-highlight-color:rgba(0,0,0,.1);touch-action:manipulation}}.bookmark-btn i{transition:transform var(--transition-fast)}.bookmark-btn:hover i{transform:scale(1.1)}.nav-btn:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}.nav-btn.loading{opacity:.7;pointer-events:none}.nav-btn.loading i{animation:spin 1s linear infinite}.chapter-content{background-color:var(--bg-secondary);border-radius:12px;box-shadow:var(--shadow-light);font-weight:400;line-height:var(--line-height);margin:0 auto;max-width:var(--reading-width);padding:40px}.chapter-title{color:var(--accent-color);font-size:28px;font-weight:700;line-height:1.3;margin-bottom:30px;text-align:center;text-indent:0}.chapter-text{color:var(--text-primary)}.paragraph{word-wrap:break-word;font-family:inherit;font-weight:400;-webkit-hyphens:auto;hyphens:auto;letter-spacing:.3px;line-height:1.4;margin-bottom:.8em;overflow-wrap:break-word;text-align:justify;text-indent:2em}.paragraph.dialogue{color:var(--text-secondary);font-style:italic;margin-bottom:.6em;margin-left:1.5em;text-indent:0}.separator{color:var(--text-muted);font-size:24px;font-weight:300;margin:30px 0;text-align:center}.error,.loading{color:var(--text-secondary);padding:60px 20px;text-align:center}.error i,.loading i{display:block;font-size:32px;margin-bottom:15px}.error p,.loading p{font-size:16px;margin:0}.error i{color:#e74c3c}@media (max-width:768px){.chapter-content{border-radius:8px;line-height:1.6;margin:0 -5px;padding:25px 20px}.chapter-title{font-size:24px;margin-bottom:25px}.paragraph{word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;letter-spacing:.1px;line-height:1.5;margin-bottom:.7em;overflow-wrap:break-word;text-align:left;text-indent:1em;white-space:normal;word-spacing:.1em}.paragraph.dialogue{margin-bottom:.5em;margin-left:1em;text-indent:0}.separator{font-size:20px;margin:20px 0}}@media (max-width:480px){.chapter-content{border-radius:6px;line-height:1.5;margin:0 -3px;padding:20px 15px}.chapter-title{font-size:22px;margin-bottom:20px}.paragraph{word-wrap:break-word;font-size:var(--font-size-base);-webkit-hyphens:auto;hyphens:auto;letter-spacing:0;line-height:1.4;margin-bottom:.6em;overflow-wrap:break-word;text-align:left;text-indent:.8em;white-space:normal;word-spacing:normal}.paragraph.dialogue{margin-bottom:.4em;margin-left:.8em;text-indent:0}.error,.loading{padding:40px 15px}.error i,.loading i{font-size:28px}}@media (max-width:414px) and (min-width:375px){.chapter-content{border-radius:6px;line-height:1.6;margin:0 -3px;padding:22px 18px}.chapter-title{font-size:22px;line-height:1.3;margin-bottom:22px}.paragraph{word-wrap:break-word;font-size:var(--font-size-base);-webkit-hyphens:auto;hyphens:auto;letter-spacing:.1px;line-height:1.65;margin-bottom:.75em;overflow-wrap:break-word;text-align:left;text-indent:1em;white-space:normal;word-spacing:.05em}.paragraph.dialogue{margin-bottom:.5em;margin-left:1em;text-indent:0}.separator{font-size:20px;margin:22px 0}.error,.loading{padding:35px 18px}.error i,.loading i{font-size:26px}}@media (max-width:360px){.chapter-content{border-radius:4px;line-height:1.5;margin:0 -2px;padding:15px 12px}.chapter-title{font-size:20px;margin-bottom:18px}.paragraph{word-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;letter-spacing:0;line-height:1.5;margin-bottom:.6em;overflow-wrap:break-word;text-align:left;text-indent:.8em;white-space:normal;word-spacing:normal}.paragraph.dialogue{margin-bottom:.4em;margin-left:.6em;text-indent:0}.separator{font-size:18px;margin:18px 0}.error,.loading{padding:30px 12px}.error i,.loading i{font-size:24px}}@media print{.chapter-content{background:#fff;box-shadow:none;color:#000;max-width:none;padding:20px}.chapter-title,.paragraph{color:#000}.separator{color:#666}}.notification{align-items:center;animation:slideInRight .3s ease;background:var(--accent-color);border-radius:8px;box-shadow:var(--shadow-medium);color:#fff;display:flex;font-size:14px;font-weight:500;gap:10px;max-width:300px;padding:12px 20px;position:fixed;right:20px;top:100px;z-index:10000}.notification--success{background:#27ae60}.notification--error{background:#e74c3c}.notification--warning{background:#f39c12}.notification--info{background:var(--accent-color)}@media (max-width:768px){.notification{left:15px;max-width:none;right:15px;top:80px}}.main-content{flex:1 1;margin-top:80px;min-height:calc(100vh - 80px);padding:20px 0}.container{margin:0 auto;max-width:1200px;padding:0 20px}@media (max-width:768px){.main-content{margin-top:70px;min-height:calc(100vh - 70px)}.container{padding:0 15px}}@media (max-width:480px){.main-content{margin-top:65px;min-height:calc(100vh - 65px);padding:15px 0}.container{padding:0 12px}}@media (max-width:360px){.main-content{margin-top:60px;min-height:calc(100vh - 60px);padding:12px 0}.container{padding:0 10px}}.scroll-to-top{align-items:center;background-color:var(--accent-color);border:none;border-radius:50%;bottom:30px;box-shadow:var(--shadow-medium);color:#fff;cursor:pointer;display:flex;font-size:18px;height:50px;justify-content:center;opacity:0;position:fixed;right:30px;transition:all var(--transition-medium);visibility:hidden;width:50px;z-index:1000}.scroll-to-top.visible{opacity:1;visibility:visible}.scroll-to-top:hover{background-color:var(--accent-hover);box-shadow:var(--shadow-heavy);transform:translateY(-3px)}.scroll-to-top:focus{outline:2px solid var(--accent-color);outline-offset:2px}@media (max-width:768px){.scroll-to-top{bottom:20px;font-size:16px;height:45px;right:20px;width:45px}}.overlay{background-color:#00000080;bottom:0;left:0;opacity:0;position:fixed;right:0;top:0;transition:all var(--transition-medium);visibility:hidden;z-index:1050}.overlay.active{opacity:1;visibility:visible}.App{display:flex;flex-direction:column;min-height:100vh}.loading{color:var(--text-secondary);padding:60px 20px;text-align:center}.loading i{animation:spin 1s linear infinite;display:block;font-size:32px;margin-bottom:15px}.loading p{font-size:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.error{color:#e74c3c;padding:60px 20px;text-align:center}.error i{display:block;font-size:32px;margin-bottom:15px}@media (max-width:768px){.App{padding-top:0}}.fade-in{animation:fadeIn .3s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.slide-in-right{animation:slideInRight .3s ease-out}@keyframes slideInRight{0%{transform:translateX(100%)}to{transform:translateX(0)}}.slide-in-left{animation:slideInLeft .3s ease-out}@keyframes slideInLeft{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@media print{.App{background:#fff!important}*,.App{color:#000!important}*{background:#0000!important;box-shadow:none!important}}