body{margin:0;padding:0}.book-container{display:flex;justify-content:center;align-items:center;height:calc(100vh - 53px);width:100%;padding:40px 20px 20px;background-color:#f5f5f0;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23dcdcdc' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");overflow:hidden;transform-origin:center center;will-change:transform;position:relative;touch-action:pan-y pinch-zoom}.flip-book{box-shadow:0 10px 30px #0003;touch-action:pan-y pinch-zoom}.flip-book *{touch-action:pan-y pinch-zoom!important;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.flip-book,.flip-book *{-webkit-tap-highlight-color:transparent}.page{background-color:#fafaf8;padding:0;border:none;border-right:1px solid rgba(0,0,0,.05);box-shadow:2px 0 5px #0000001a,inset 0 0 30px #8b451308;touch-action:pan-y pinch-zoom}.page-content{width:100%;height:100%;display:flex;flex-direction:column;position:relative}.page-image{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.page-footer{position:absolute;bottom:10px;width:100%;text-align:center;font-size:12px;color:#888;font-family:Courier New,Courier,monospace}.tech-support{position:absolute;bottom:60px;right:40px;font-size:12px;color:#888;pointer-events:none;z-index:100;padding-right:10px}@media(max-width:768px){.book-container{padding:10px}.tech-support{left:0;right:0;text-align:center}}.bottom-bar{position:fixed;bottom:0;left:0;width:100%;height:50px;background:#ffffffd9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid rgba(0,0,0,.1);display:flex;flex-direction:column;z-index:1000;box-shadow:0 -2px 10px #0000000d}.progress-container{width:100%;height:3px;background-color:#0000000d}.progress-bar{height:100%;background-color:#d4a373;transition:width .3s ease}.bottom-bar-content{flex:1;display:flex;justify-content:space-between;align-items:center;padding:0 20px}.page-info{font-family:Courier New,Courier,monospace;font-size:14px;color:#555;min-width:60px}.audio-control-container,.catalog-container{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px}.bar-icon-btn{background:none;border:none;cursor:pointer;font-size:18px;color:#333;padding:8px;border-radius:50%;transition:all .2s;display:flex;align-items:center;justify-content:center;width:36px;height:36px;position:relative}.bar-icon-btn:hover{background-color:#0000000d}.bar-icon-btn:active{transform:scale(.95)}.bar-icon-btn:disabled{opacity:.5;cursor:not-allowed}.music-btn svg{transition:all .5s ease}.music-btn.playing svg{animation:rotate 3s linear infinite;color:#d4a373}.music-btn.paused svg{animation:rotate 3s linear infinite;animation-play-state:paused;color:#666}.music-btn.waiting svg{animation:pulse 2s ease-in-out infinite;color:#4a90e2}.music-btn.loading svg{animation:rotate 1s linear infinite;opacity:.6;color:#999}.audio-status-text{font-size:10px;color:#666;text-align:center;white-space:nowrap;margin-top:2px}.music-btn.playing+.audio-status-text{color:#d4a373;font-weight:500}.music-btn.waiting+.audio-status-text{color:#4a90e2;font-weight:500}.music-btn.loading+.audio-status-text{color:#999;font-style:italic}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.1)}}@media(max-width:768px){.audio-status-text{font-size:9px}.bar-icon-btn{width:32px;height:32px}}@media(hover:none)and (pointer:coarse){.bar-icon-btn{min-width:44px;min-height:44px}}.icon{line-height:1}.catalog-modal-backdrop{position:fixed;inset:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease-in-out;pointer-events:auto}.catalog-modal{background:linear-gradient(135deg,#fdfbfb,#f5f3ef);border-radius:16px;width:90%;max-width:600px;max-height:80vh;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;animation:slideUp .3s ease-out;border:2px solid rgba(139,69,19,.1)}.catalog-header{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:2px solid rgba(139,69,19,.15);background:linear-gradient(to bottom,rgba(255,255,255,.8),transparent)}.catalog-title{margin:0;font-size:28px;font-weight:600;color:#5d4037;font-family:STKaiti,KaiTi,楷体,serif;letter-spacing:2px}.catalog-close-btn{background:transparent;border:none;font-size:32px;color:#8d6e63;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .3s ease}.catalog-close-btn:hover{background-color:#8b45131a;color:#5d4037;transform:rotate(90deg)}.catalog-content{flex:1;overflow-y:auto;padding:0;scrollbar-width:thin;scrollbar-color:rgba(139,69,19,.3) transparent}.catalog-content::-webkit-scrollbar{width:8px}.catalog-content::-webkit-scrollbar-track{background:transparent}.catalog-content::-webkit-scrollbar-thumb{background-color:#8b45134d;border-radius:4px}.catalog-content::-webkit-scrollbar-thumb:hover{background-color:#8b451380}.catalog-list{list-style:none;padding:0;margin:0}.catalog-item{display:flex;align-items:center;padding:16px 28px;cursor:pointer;border-bottom:1px solid rgba(139,69,19,.08);transition:all .3s ease;position:relative}.catalog-item:hover{background:linear-gradient(to right,rgba(139,69,19,.08),transparent);padding-left:36px}.catalog-item:hover:before{content:"▶";position:absolute;left:20px;color:#8d6e63;font-size:12px;animation:bounce .6s ease infinite}.catalog-item-title{font-size:16px;color:#4e342e;font-family:STKaiti,KaiTi,楷体,serif;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;max-width:70%}.catalog-item-dots{flex:1;border-bottom:2px dotted rgba(139,69,19,.2);margin:0 12px;min-width:20px}.catalog-item-page{font-size:15px;color:#8d6e63;font-weight:600;font-family:Georgia,serif;flex-shrink:0;min-width:40px;text-align:right}.catalog-empty{display:flex;justify-content:center;align-items:center;height:200px;color:#a1887f;font-size:18px;font-family:STKaiti,KaiTi,楷体,serif}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes bounce{0%,to{transform:translate(0)}50%{transform:translate(4px)}}@media(max-width:768px){.catalog-modal{width:95%;max-height:85vh;border-radius:12px}.catalog-header{padding:20px}.catalog-title{font-size:24px}.catalog-close-btn{font-size:28px;width:36px;height:36px}.catalog-item{padding:14px 20px}.catalog-item:hover{padding-left:28px}.catalog-item:hover:before{left:16px}.catalog-item-title{font-size:15px;max-width:65%}.catalog-item-page{font-size:14px}}.loading-container{position:fixed;top:0;left:0;width:100vw;height:100vh;background:linear-gradient(135deg,#f8f6f0,#f0e8e0,#e8dfce);display:flex;justify-content:center;align-items:center;z-index:9999;overflow:hidden}.loading-border{position:relative;width:90%;max-width:400px;height:80%;max-height:600px;border:2px solid #8b0000;border-radius:8px;background:#ffffffe6;box-shadow:0 10px 30px #8b000033}.loading-border-inner{position:absolute;inset:8px;border:1px solid rgba(139,0,0,.3);border-radius:4px;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#fcfcfc,#f8f8f8)}.loading-content{position:relative;text-align:center;padding:20px;max-width:320px}.loading-pattern{position:absolute;inset:0;pointer-events:none}.pattern-corner{position:absolute;width:20px;height:20px;border:2px solid #8b0000;opacity:.6}.pattern-corner.top-left{top:10px;left:10px;border-right:none;border-bottom:none}.pattern-corner.top-right{top:10px;right:10px;border-left:none;border-bottom:none}.pattern-corner.bottom-left{bottom:10px;left:10px;border-right:none;border-top:none}.pattern-corner.bottom-right{bottom:10px;right:10px;border-left:none;border-top:none}.loading-title{font-family:"Noto Serif SC",Songti SC,serif;font-size:2rem;color:#8b0000;margin:0 0 8px;font-weight:700;text-shadow:0 2px 4px rgba(139,0,0,.1)}.loading-subtitle{font-family:"Noto Serif SC",Songti SC,serif;font-size:1rem;color:#666;margin:0 0 40px;font-weight:400}.loading-spinner-container{margin:30px 0}.loading-spinner{position:relative;width:80px;height:80px;margin:0 auto}.spinner-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-top:3px solid #8b0000;border-radius:50%;animation:spin 1.5s cubic-bezier(.68,-.55,.265,1.55) infinite}.spinner-ring:nth-child(1){animation-delay:0s;width:100%;height:100%}.spinner-ring:nth-child(2){animation-delay:.1s;width:80%;height:80%;top:10%;left:10%;border-top-color:#8b0000cc}.spinner-ring:nth-child(3){animation-delay:.2s;width:60%;height:60%;top:20%;left:20%;border-top-color:#8b000099}.spinner-ring:nth-child(4){animation-delay:.3s;width:40%;height:40%;top:30%;left:30%;border-top-color:#8b000066}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-progress-container{margin:30px 0 20px}.loading-progress-bar{width:100%;height:8px;background:#8b00001a;border-radius:4px;overflow:hidden;position:relative;border:1px solid rgba(139,0,0,.2)}.loading-progress-fill{height:100%;background:linear-gradient(90deg,#8b0000,#cd5c5c,#8b0000);border-radius:4px;transition:width .3s ease;position:relative;overflow:hidden}.loading-progress-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.loading-percentage{font-family:"Noto Serif SC",Songti SC,serif;font-size:1.2rem;color:#8b0000;font-weight:700;margin-top:10px}.loading-stage{font-family:"Noto Serif SC",Songti SC,serif;font-size:.9rem;color:#666;margin:15px 0 30px;height:20px;animation:fadeInOut 2s ease-in-out infinite}@keyframes fadeInOut{0%,to{opacity:.7}50%{opacity:1}}.loading-decoration{display:flex;align-items:center;justify-content:center;margin:20px 0;gap:15px}.decoration-line{height:1px;width:40px;background:linear-gradient(90deg,transparent 0%,#8b0000 50%,transparent 100%)}.decoration-symbol{font-family:"Noto Serif SC",Songti SC,serif;font-size:1.1rem;color:#8b0000;font-weight:700}.loading-hint{font-family:"Noto Serif SC",Songti SC,serif;font-size:.8rem;color:#999;margin-top:20px;font-style:italic}@media(max-width:768px){.loading-border{width:95%;height:85%}.loading-title{font-size:1.8rem}.loading-subtitle{font-size:.9rem}.loading-spinner{width:60px;height:60px}.loading-stage{font-size:.8rem}.loading-hint{font-size:.7rem}}@media(max-width:480px){.loading-content{padding:15px}.loading-title{font-size:1.5rem}.loading-subtitle{font-size:.8rem;margin-bottom:30px}.loading-spinner{width:50px;height:50px}.pattern-corner{width:15px;height:15px}}.loading-container.fade-out{animation:fadeOut .5s ease-out forwards}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95);visibility:hidden}}:root{--bg-color: #f0f0e8;--text-color: #333;--accent-color: #8b0000}body{margin:0;padding:0;font-family:"Noto Serif SC",Songti SC,serif;background-color:var(--bg-color);color:var(--text-color);overflow:hidden}.app-container{position:relative;width:100vw;height:100vh}.audio-control{position:fixed;top:20px;right:20px;z-index:1000;background:#fffc;border:1px solid #ccc;border-radius:50%;width:40px;height:40px;display:flex;justify-content:center;align-items:center;cursor:pointer;box-shadow:0 2px 5px #0000001a;transition:all .3s ease;border:1px solid var(--accent-color)}.audio-control:hover{transform:scale(1.1);background:#fff}.icon{font-size:20px;line-height:1;color:var(--accent-color)}.chinese-border{position:fixed;inset:10px;pointer-events:none;border:1px solid rgba(139,0,0,.2);z-index:999}.chinese-border:before{content:"";position:absolute;inset:-5px;border:1px solid rgba(139,0,0,.1)}@media(max-width:768px){.chinese-border{inset:5px}}