@import"https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Ma+Shan+Zheng&family=Nunito:wght@400;600;700;800&display=swap";:root{--wood-dark: #6B4423;--wood-medium: #8B5A2B;--wood-light: #A67B5B;--wood-pale: #C4A77D;--wood-highlight: #D4B896;--paper-cream: #FFF8E7;--paper-white: #FFFEF5;--paper-yellow: #FDF5E6;--accent-orange: #FF8C42;--accent-orange-dark: #E8742E;--accent-gold: #FFB347;--accent-green: #4CAF50;--accent-red: #FF6B6B;--accent-blue: #4FC3F7;--accent-purple: #9C27B0;--space-dark: #2D1B4E;--space-purple: #5B2D8C;--space-light: #8B5AB5;--star-white: #FFFFFF;--shadow-soft: 0 4px 20px rgba(107, 68, 35, .15);--shadow-medium: 0 8px 30px rgba(107, 68, 35, .2);--shadow-deep: 0 12px 40px rgba(107, 68, 35, .25);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.25, 1, .5, 1);--ease-elastic: cubic-bezier(.68, -.55, .265, 1.55)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:ZCOOL KuaiLe,Nunito,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overflow:hidden}body{background:linear-gradient(135deg,var(--paper-cream) 0%,#F5ECD8 100%)}#app{height:100dvh;width:100vw;display:flex;align-items:center;justify-content:center}.app-container{width:100%;height:100%;max-width:1200px;max-height:800px;position:relative;display:flex;flex-direction:column}.book-frame{flex:1;display:flex;flex-direction:column;background:linear-gradient(90deg,var(--wood-dark) 0%,var(--wood-medium) 8px,var(--wood-light) 16px,var(--paper-cream) 24px,var(--paper-cream) calc(100% - 24px),var(--wood-light) calc(100% - 16px),var(--wood-medium) calc(100% - 8px),var(--wood-dark) 100%);border-radius:var(--radius-xl);box-shadow:0 20px 60px #0000004d,inset 0 2px 4px #fff3,inset 0 -4px 8px #0000001a;padding:20px 24px 30px;position:relative}.book-frame:before{content:"";position:absolute;top:8px;left:50%;transform:translate(-50%);width:200px;height:12px;background:linear-gradient(180deg,var(--wood-dark) 0%,var(--wood-medium) 100%);border-radius:0 0 50% 50%;opacity:.8}.book-content{flex:1;display:flex;background:var(--paper-white);border-radius:var(--radius-lg);box-shadow:inset 0 2px 8px #0000000d;overflow:hidden;position:relative}.book-spine{position:absolute;left:50%;top:0;bottom:0;width:40px;transform:translate(-50%);background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.03) 20%,rgba(0,0,0,.08) 50%,rgba(0,0,0,.03) 80%,transparent 100%);pointer-events:none;z-index:10}.page-left,.page-right{flex:1;display:flex;flex-direction:column;padding:30px 40px;position:relative}.page-left{background:var(--paper-white);border-right:1px solid rgba(139,90,43,.08)}.page-right{background:linear-gradient(180deg,var(--paper-cream) 0%,var(--paper-yellow) 100%)}.page-left:before,.page-right:after{content:"";position:absolute;width:30px;height:30px;opacity:.3}.page-left:before{top:15px;left:15px;border-top:2px solid var(--wood-pale);border-left:2px solid var(--wood-pale)}.page-right:after{bottom:15px;right:15px;border-bottom:2px solid var(--wood-pale);border-right:2px solid var(--wood-pale)}.top-nav{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#ffffffe6;border-radius:var(--radius-md);margin:10px 20px 0;box-shadow:var(--shadow-soft)}.back-btn{width:44px;height:44px;border:none;border-radius:50%;background:linear-gradient(135deg,var(--accent-blue) 0%,#29B6F6 100%);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #4fc3f766;transition:all .2s var(--ease-bounce)}.back-btn:hover{transform:scale(1.05)}.back-btn:active{transform:scale(.95)}.progress-info{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--wood-dark)}.progress-badge{background:var(--wood-pale);color:#fff;padding:6px 14px;border-radius:20px;font-weight:700;font-size:14px}.stars-display{display:flex;gap:4px}.star{font-size:24px;transition:transform .2s var(--ease-bounce)}.star.filled{color:var(--accent-gold)}.star.empty{color:#ddd}.leather-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;transition:all .2s var(--ease-bounce);z-index:20}.leather-nav.prev{left:-10px;background:radial-gradient(circle at 30% 30%,var(--wood-light) 0%,var(--wood-medium) 50%,var(--wood-dark) 100%);box-shadow:0 4px 12px #6b442366,inset 0 1px 2px #ffffff4d}.leather-nav.next{right:-10px;background:radial-gradient(circle at 30% 30%,var(--wood-light) 0%,var(--wood-medium) 50%,var(--wood-dark) 100%);box-shadow:0 4px 12px #6b442366,inset 0 1px 2px #ffffff4d}.leather-nav:before{content:"";position:absolute;top:4px;right:4px;bottom:4px;left:4px;border-radius:50%;border:2px dashed rgba(255,255,255,.3)}.leather-nav:hover{transform:translateY(-50%) scale(1.08)}.leather-nav:active{transform:translateY(-50%) scale(.95);box-shadow:0 2px 8px #6b44234d}.leather-nav:disabled{opacity:.3;cursor:not-allowed}.char-display{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}.char-main{width:280px;height:280px;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-medium);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.char-main:before{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:2px dashed rgba(139,90,43,.15);border-radius:calc(var(--radius-lg) - 4px);pointer-events:none}.char-text{font-size:140px;font-weight:700;color:var(--wood-dark);font-family:Ma Shan Zheng,cursive;line-height:1;animation:charAppear .5s var(--ease-bounce) both}@keyframes charAppear{0%{transform:scale(.5) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(3deg)}to{transform:scale(1) rotate(0);opacity:1}}.char-pinyin{font-size:32px;color:var(--wood-medium);font-weight:600;margin-top:8px}.char-emoji{font-size:60px;margin-bottom:8px;animation:emojiPop .6s var(--ease-elastic) both}@keyframes emojiPop{0%{transform:scale(0) rotate(-180deg)}70%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0)}}.content-card{background:#fff;border-radius:var(--radius-md);padding:20px 24px;margin-bottom:16px;box-shadow:var(--shadow-soft);border-left:4px solid var(--accent-orange);animation:slideUp .4s var(--ease-smooth) both}.content-card:nth-child(2){animation-delay:.1s}.content-card:nth-child(3){animation-delay:.2s}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.card-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}.card-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px}.card-icon.pictograph{background:#e8f5e9}.card-icon.story{background:#fff3e0}.card-icon.phrase{background:#e3f2fd}.card-title{font-size:16px;font-weight:700;color:var(--wood-dark)}.card-text{font-size:15px;line-height:1.7;color:#555}.phrase-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}.phrase-item{display:flex;align-items:center;gap:6px;padding:8px 14px;background:linear-gradient(135deg,#fff8e7,#fdf5e6);border-radius:20px;border:1px solid rgba(139,90,43,.1)}.phrase-emoji{font-size:18px}.phrase-text{font-weight:700;color:var(--wood-dark);font-size:14px}.balloon-recorder{position:absolute;bottom:40px;right:40px;cursor:pointer;transition:transform .3s var(--ease-bounce)}.balloon-recorder:hover{transform:scale(1.05)}.balloon-recorder.recording{animation:balloonFloat 2s ease-in-out infinite}@keyframes balloonFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.balloon-svg{width:100px;height:120px}.balloon-envelope{fill:url(#balloonGradient)}.balloon-basket{fill:var(--wood-medium)}.balloon-ropes{stroke:var(--wood-dark);stroke-width:2;fill:none}.mic-icon{fill:#fff}.sound-waves{position:absolute;bottom:-20px;left:50%;transform:translate(-50%);display:flex;gap:4px;height:30px;align-items:flex-end;opacity:0;transition:opacity .3s}.balloon-recorder.recording .sound-waves{opacity:1}.wave-bar{width:6px;background:var(--accent-gold);border-radius:3px;animation:waveMove .5s ease-in-out infinite alternate}.wave-bar:nth-child(1){height:8px;animation-delay:0s}.wave-bar:nth-child(2){height:16px;animation-delay:.1s}.wave-bar:nth-child(3){height:24px;animation-delay:.2s}.wave-bar:nth-child(4){height:18px;animation-delay:.15s}.wave-bar:nth-child(5){height:12px;animation-delay:.05s}@keyframes waveMove{0%{transform:scaleY(.5)}to{transform:scaleY(1)}}.action-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:none;border-radius:25px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s var(--ease-bounce)}.action-btn.primary{background:linear-gradient(135deg,var(--accent-orange) 0%,var(--accent-orange-dark) 100%);color:#fff;box-shadow:0 4px 15px #ff8c4266}.action-btn.secondary{background:#fff;color:var(--wood-dark);border:2px solid var(--wood-pale)}.action-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000026}.action-btn:active{transform:translateY(0)}.quiz-container{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px}.quiz-prompt{font-size:22px;color:var(--wood-dark);font-weight:700;text-align:center}.quiz-options{display:flex;gap:40px;justify-content:center}.quiz-card{width:220px;height:280px;background:#fff;border-radius:var(--radius-lg);border:4px solid transparent;box-shadow:var(--shadow-medium);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;transition:all .3s var(--ease-bounce);position:relative}.quiz-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-deep)}.quiz-card.correct{border-color:var(--accent-green);background:#e8f5e9;animation:correctPulse .5s var(--ease-bounce)}.quiz-card.wrong{border-color:var(--accent-red);background:#ffebee;animation:wrongShake .4s ease-out}@keyframes correctPulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1.05)}}@keyframes wrongShake{0%,to{transform:translate(0)}20%{transform:translate(-10px) rotate(-3deg)}40%{transform:translate(10px) rotate(3deg)}60%{transform:translate(-5px) rotate(-2deg)}80%{transform:translate(5px) rotate(2deg)}}.quiz-card-emoji{font-size:80px}.quiz-card-char{font-size:56px;font-weight:700;color:var(--wood-dark);font-family:Ma Shan Zheng,cursive}.answer-label{position:absolute;bottom:-40px;padding:8px 20px;border-radius:20px;font-size:14px;font-weight:700;opacity:0;transform:translateY(10px);transition:all .3s var(--ease-bounce)}.answer-label.show{opacity:1;transform:translateY(0)}.answer-label.correct{background:var(--accent-green);color:#fff}.answer-label.wrong{background:var(--accent-red);color:#fff}.result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.result-badge{background:#fff;border-radius:var(--radius-xl);padding:40px 60px;text-align:center;box-shadow:var(--shadow-deep);animation:badgePop .5s var(--ease-bounce) both}@keyframes badgePop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.result-icon{font-size:80px;margin-bottom:16px}.result-title{font-size:28px;font-weight:700;color:var(--wood-dark);margin-bottom:8px}.result-stars{font-size:40px;margin:16px 0}.home-container{flex:1;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--space-dark) 0%,var(--space-purple) 50%,var(--space-light) 100%);border-radius:var(--radius-lg);padding:30px;position:relative;overflow:hidden}.home-container:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(2px 2px at 20px 30px,white,transparent),radial-gradient(2px 2px at 40px 70px,white,transparent),radial-gradient(1px 1px at 90px 40px,white,transparent),radial-gradient(2px 2px at 160px 120px,white,transparent),radial-gradient(1px 1px at 230px 80px,white,transparent),radial-gradient(2px 2px at 300px 150px,white,transparent),radial-gradient(1px 1px at 350px 50px,white,transparent);background-repeat:repeat;background-size:400px 200px;opacity:.6;animation:twinkle 4s ease-in-out infinite}@keyframes twinkle{0%,to{opacity:.6}50%{opacity:.3}}.home-title{text-align:center;font-size:32px;color:#fff;font-weight:700;margin-bottom:40px;text-shadow:0 2px 10px rgba(0,0,0,.3);position:relative;z-index:1}.ufo-steps{flex:1;display:flex;align-items:center;justify-content:center;gap:30px;position:relative;z-index:1}.ufo-item{display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:transform .3s var(--ease-bounce)}.ufo-item:hover{transform:translateY(-10px)}.ufo-item.completed .ufo-body{filter:brightness(1.1)}.ufo-body{width:140px;height:100px;background:linear-gradient(180deg,#b8a9ff,#9b8ae8,#7b6bc8);border-radius:50%/60% 60% 40% 40%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px #7b6bc880,inset 0 -5px 10px #0003,inset 0 5px 10px #ffffff4d;position:relative}.ufo-body:before{content:"";position:absolute;top:15px;left:50%;transform:translate(-50%);width:80px;height:35px;background:linear-gradient(180deg,#87ceeb,#5dade2);border-radius:50%;border:3px solid #6B5AC8}.ufo-body:after{content:"";position:absolute;bottom:-8px;left:50%;transform:translate(-50%);width:100px;height:20px;background:linear-gradient(180deg,rgba(184,169,255,.8) 0%,transparent 100%);border-radius:50%}.ufo-icon{font-size:40px;z-index:1}.ufo-label{background:#fffffff2;padding:8px 20px;border-radius:20px;font-size:14px;font-weight:700;color:var(--space-purple);box-shadow:0 4px 12px #0003}.ufo-check{position:absolute;bottom:-5px;right:-5px;width:32px;height:32px;background:var(--accent-green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;box-shadow:0 2px 8px #4caf5066}.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding:20px}.course-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-medium);cursor:pointer;transition:all .3s var(--ease-bounce)}.course-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-deep)}.course-cover{height:160px;background:linear-gradient(135deg,var(--accent-orange) 0%,var(--accent-gold) 100%);display:flex;align-items:center;justify-content:center;font-size:60px;position:relative}.course-cover:after{content:"";position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.1) 100%)}.course-info{padding:20px}.course-title{font-size:18px;font-weight:700;color:var(--wood-dark);margin-bottom:8px}.course-progress{display:flex;align-items:center;gap:10px}.progress-bar{flex:1;height:8px;background:#eee;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent-green),#81C784);border-radius:4px;transition:width .5s var(--ease-smooth)}.progress-text{font-size:12px;color:#888;font-weight:600}.page-indicator{position:absolute;bottom:20px;right:40px;font-size:18px;font-weight:700;color:var(--wood-pale)}@media(max-width:900px){.book-content{flex-direction:column}.page-left,.page-right{padding:20px}.page-left{border-right:none;border-bottom:1px solid rgba(139,90,43,.08)}.char-main{width:200px;height:200px}.char-text{font-size:100px}.quiz-options{gap:20px}.quiz-card{width:160px;height:200px}.quiz-card-emoji{font-size:50px}.quiz-card-char{font-size:36px}.ufo-steps{flex-wrap:wrap;gap:20px}}.fade-in{animation:fadeIn .4s ease-out both}.slide-up{animation:slideUp .4s var(--ease-smooth) both}.pop-in{animation:popIn .3s var(--ease-bounce) both}@keyframes popIn{0%{transform:scale(0);opacity:0}80%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.ai-image-area{flex:1;min-height:200px;max-height:55vh;background:linear-gradient(135deg,#f5f0e8,#fff8e7);border-radius:var(--radius-lg);border:2px dashed var(--wood-pale);display:flex;align-items:center;justify-content:center;margin-bottom:12px;overflow:hidden}.ai-image-area.has-image{border:none;background:transparent}.ai-image-area.has-image img{width:100%;height:100%;object-fit:contain;border-radius:var(--radius-lg)}.ai-image-placeholder{text-align:center;padding:20px;color:var(--wood-pale)}.ai-image-icon{font-size:48px;margin-bottom:8px;opacity:.6}.ai-image-text{font-size:14px;font-weight:700;margin-bottom:4px}.ai-image-hint{font-size:11px;opacity:.7;max-width:180px;line-height:1.3}.char-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:0}.char-text-hero{font-size:180px;font-weight:700;color:var(--wood-dark);font-family:Ma Shan Zheng,cursive;line-height:1;text-shadow:4px 4px 0 rgba(139,90,43,.1);animation:charPopIn .5s var(--ease-bounce) both}@keyframes charPopIn{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.char-pinyin-hero{font-size:36px;color:var(--wood-medium);font-weight:600;letter-spacing:4px}.char-meaning{font-size:18px;color:#999;font-weight:500}.action-bar-left{margin-top:20px;display:flex;gap:12px;justify-content:center}.content-scroll{flex:0 0 auto;display:flex;flex-direction:column;gap:8px}.content-card.compact{padding:16px;margin-bottom:0}.content-card.compact .card-text{font-size:14px;line-height:1.5}@media(max-width:900px){.book-content{flex-direction:column}.page-left,.page-right{padding:20px;overflow-y:auto}.page-left{border-right:none;border-bottom:1px solid rgba(139,90,43,.08);flex:1.2}.page-right{flex:1}.ai-image-area{min-height:200px;max-height:40vh}.content-scroll{gap:6px}.char-text-large{font-size:56px}.content-card{padding:16px;margin-bottom:12px}.card-text{font-size:14px;line-height:1.5}.quiz-options{gap:20px}.quiz-card{width:140px;height:180px}}@media(max-width:600px)and (orientation:portrait){.book-frame{padding:0;border-radius:0;background:var(--paper-white);height:100dvh;overflow:hidden}.book-frame:before{display:none}.book-content{flex-direction:column;border-radius:0;background:var(--paper-white);height:100%;overflow:hidden}.book-spine{display:none}.page-left,.page-right{padding:0;border:none;background:transparent;overflow:hidden}.page-left{flex:0 0 auto}.page-right{flex:1;display:flex;flex-direction:column;min-height:0}.top-nav{margin:8px 12px;padding:8px 12px;border-radius:var(--radius-md)}.back-btn{width:36px;height:36px;font-size:16px}.progress-info{font-size:14px}.char-hero{min-height:40vh;max-height:45vh;padding:60px 20px 20px;gap:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}.char-hero .char-text-hero{font-size:min(25vw,160px)!important;font-weight:700;color:var(--wood-dark);font-family:Ma Shan Zheng,cursive;text-align:center;line-height:1;text-shadow:2px 2px 0 rgba(139,90,43,.1)}.char-hero .char-pinyin-hero{font-size:28px;color:var(--wood-medium);letter-spacing:4px;font-weight:600}.char-hero .char-meaning{font-size:16px;color:#888}.ai-image-area{flex:0 0 auto;min-height:160px;max-height:22vh;margin:8px 16px;border-radius:var(--radius-lg);border:2px solid rgba(139,90,43,.1)}.ai-image-area.has-image img{object-fit:contain;background:#f5f0e8;border-radius:var(--radius-lg)}.ai-image-icon{font-size:48px}.ai-image-text{font-size:14px;font-weight:700;color:var(--wood-medium)}.ai-image-hint{font-size:11px;color:#999}.action-bar-left{display:flex;justify-content:center;gap:12px;margin:8px 16px 12px;padding:0;flex-shrink:0}.action-btn{flex:1;padding:14px 20px;font-size:15px;font-weight:700;border-radius:25px;min-height:52px}.action-btn.primary{background:linear-gradient(135deg,var(--accent-orange) 0%,var(--accent-orange-dark) 100%);box-shadow:0 4px 15px #ff8c4266}.action-btn.secondary{background:linear-gradient(135deg,#e3f2fd,#bbdefb);color:#1976d2;border:2px solid #90CAF9}.content-scroll{flex:0 0 auto;display:flex;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:12px;padding:8px 16px 24px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;min-height:120px}.content-scroll::-webkit-scrollbar{display:none}.content-card{flex:0 0 80%;max-width:300px;padding:16px;margin-bottom:0;scroll-snap-align:start;border-radius:var(--radius-lg);background:linear-gradient(135deg,#fff8e7,#fdf5e6);border:1px solid rgba(139,90,43,.1)}.content-card.compact{padding:14px}.content-card .card-header{gap:8px;margin-bottom:10px}.content-card .card-icon{width:28px;height:28px;font-size:14px}.content-card .card-title{font-size:15px;font-weight:700;color:var(--wood-dark)}.content-card .card-text{font-size:14px;line-height:1.5;color:#555}.phrase-list{flex-wrap:nowrap;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}.phrase-list::-webkit-scrollbar{display:none}.phrase-item{flex:0 0 auto;padding:8px 12px;font-size:13px}.leather-nav{width:44px;height:44px;font-size:20px;top:50%;transform:translateY(-50%);opacity:.9;background:#8b5a2be6}.leather-nav.prev{left:8px}.leather-nav.next{right:8px}.leather-nav:before{border-color:#fff6}.page-indicator{position:fixed;bottom:16px;left:50%;transform:translate(-50%);font-size:14px;color:var(--wood-pale);background:#ffffffe6;padding:6px 16px;border-radius:20px;box-shadow:0 2px 8px #0000001a}.page-left:before,.page-right:after{display:none}.quiz-container{width:100%;padding:0 16px;gap:16px}.quiz-prompt{font-size:20px;margin-bottom:8px}.quiz-options{display:flex;flex-direction:column;gap:12px;width:100%;padding:0}.quiz-card{width:100%;height:100px;flex-direction:row;padding:12px 20px;gap:16px;border-radius:var(--radius-md)}.quiz-card-emoji{font-size:48px;flex:0 0 auto}.quiz-card-char{font-size:42px;flex:1;text-align:left}.answer-label{position:static;transform:none;opacity:1;padding:6px 12px;font-size:13px;flex:0 0 auto;border-radius:var(--radius-sm)}.page-left .char-display{width:100%;height:auto;min-height:35vh}.page-left .char-main{width:200px;height:200px;padding:16px}.page-left .char-text{font-size:min(28vw,140px)}.page-left .char-pinyin{font-size:22px;margin-top:8px}.book-content .balloon-recorder{position:relative;bottom:auto;right:auto;margin:20px auto;width:120px;height:144px}.book-content .balloon-svg{width:120px;height:144px}.book-content .page-right>div[style*="flex: 1"]{gap:16px!important}.result-badge{padding:24px;margin:16px;width:calc(100% - 32px)}.result-icon{font-size:64px}.result-title{font-size:24px}.result-stars{font-size:32px}.book-content .action-btn{flex:1;min-height:52px;font-size:15px}.book-content>.page-left[style*="align-items: center"]{flex:0 0 auto;min-height:35vh;padding:16px}.book-content>.page-right .step-card{padding:16px;gap:12px;border-radius:var(--radius-md)}.book-content>.page-right .step-card>div:first-child{width:48px;height:48px;font-size:24px}.book-content>.page-right .step-card>div:nth-child(2)>div:first-child{font-size:18px}.book-content>.page-right .step-card>div:nth-child(2)>div:last-child{font-size:13px}.book-content>.page-left>div>div:first-child{width:160px;height:200px;margin-bottom:16px}.book-content>.page-left>div>div:first-child>div:first-child{font-size:60px}.book-content>.page-left>div>div:first-child>div:last-child{font-size:20px}.book-content>.page-left>div>div:last-child{margin-top:12px}.book-content>.page-left>div>div:last-child>div{width:36px;height:36px;font-size:18px}.book-content>.page-right>div[style*="flex: 1"]{gap:12px;padding:0 12px}.book-content>.page-right>div:last-child{padding:16px;font-size:13px}.book-content:has(.balloon-recorder){flex-direction:column}.book-content:has(.balloon-recorder) .page-left{flex:0 0 auto;min-height:40vh;display:flex;align-items:center;justify-content:center;padding:16px}.book-content:has(.balloon-recorder) .page-right{flex:1;display:flex;flex-direction:column;padding:0 16px 16px}.book-content:has(.balloon-recorder) .page-left .char-display{width:100%;height:auto}.book-content:has(.balloon-recorder) .page-left .char-main{width:100%;max-width:280px;height:auto;aspect-ratio:1;padding:20px}.book-content:has(.balloon-recorder) .char-text{font-size:min(28vw,140px)}.book-content:has(.balloon-recorder) .char-emoji{font-size:48px;margin-bottom:8px}.book-content:has(.balloon-recorder) .char-pinyin{font-size:22px;margin-top:8px}.book-content:has(.balloon-recorder) .top-nav{position:absolute;top:0;left:0;right:0;z-index:10;margin:0;padding:10px 12px;background:#ffffffeb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:0}.book-content:has(.balloon-recorder) .page-left{padding-top:52px}.book-content:has(.balloon-recorder) .top-nav .progress-badge{font-size:13px;padding:5px 12px}.book-content:has(.balloon-recorder) .stars-display .star{font-size:20px}.book-content:has(.balloon-recorder) .balloon-recorder{position:relative;bottom:auto;right:auto;margin:16px auto;width:140px;height:168px}.book-content:has(.balloon-recorder) .balloon-svg{width:140px;height:168px}.book-content:has(.balloon-recorder) .page-right>div[style*="flex: 1"]{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px!important}.book-content:has(.balloon-recorder) .page-right div[style*="text-align: center"]{width:100%}.book-content:has(.balloon-recorder) .action-btn{padding:14px 20px;font-size:15px;min-height:52px}.book-content:has(.quiz-options) .top-nav{position:absolute;top:0;left:0;right:0;z-index:10;margin:0;padding:10px 12px;background:#ffffffeb;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:0}.book-content:has(.quiz-options) .page-left{padding-top:52px}.book-content:has(.quiz-options) .page-right{position:relative}}@media(max-width:600px){.book-frame{padding:10px;border-radius:var(--radius-md)}.book-frame:before{display:none}.quiz-container{gap:20px}.quiz-prompt{font-size:18px}.quiz-options{flex-wrap:wrap;gap:12px}.quiz-card{width:100px;height:130px;gap:10px}.quiz-card:hover{transform:none}.quiz-card:active{transform:scale(.96)}.quiz-card-emoji{font-size:36px}.quiz-card-char{font-size:28px}.quiz-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 8px;width:100%}.quiz-options .quiz-card{width:100%;height:120px}.result-badge{padding:24px 28px}.result-title{font-size:22px}.result-icon{font-size:60px}.result-stars{font-size:30px}.home-header{padding:12px 16px}.home-title-main{font-size:24px}.home-title-sub{font-size:12px}.home-stats{gap:16px}.stat-value{font-size:24px}.stat-label{font-size:11px}.home-content{padding:12px 16px}.level-section{gap:12px}.level-row{gap:6px}.level-badge{padding:4px 10px;font-size:12px}.level-desc{font-size:12px}.course-row{gap:12px}.course-card{flex:0 0 120px}.course-cover{height:80px}.course-emoji{font-size:32px}.course-info{padding:8px 10px}.course-title{font-size:12px}.progress-track{height:5px}.progress-text{font-size:10px}.app-container{max-height:none}}@media(orientation:landscape)and (max-height:520px){.book-content{flex-direction:row}.book-frame{padding:10px 14px;border-radius:var(--radius-md)}.book-frame:before{display:none}.page-left,.page-right{padding:12px 16px;overflow-y:auto}.page-left{border-right:1px solid rgba(139,90,43,.08);border-bottom:none;flex:.9}.page-right{flex:1.1}.char-text-hero{font-size:80px}.char-pinyin-hero{font-size:18px;margin-top:4px}.char-meaning{font-size:14px}.page-left>div:first-child{margin-bottom:8px}.action-bar-left{margin-top:8px;gap:8px}.action-btn{padding:6px 14px;font-size:12px}.ai-image-area{min-height:80px;max-height:28vh;margin-bottom:8px}.ai-image-area.has-image img{object-fit:contain}.ai-image-icon{font-size:32px}.ai-image-text{font-size:12px}.ai-image-hint{font-size:10px}.content-scroll{gap:4px}.content-card{padding:8px 12px;margin-bottom:4px}.content-card.compact{padding:8px 12px}.content-card.compact .card-text{font-size:11px;line-height:1.3}.card-header{gap:6px;margin-bottom:4px}.card-icon{width:22px;height:22px;font-size:11px}.card-title{font-size:12px}.card-text{font-size:11px;line-height:1.3}.leather-nav{width:36px;height:36px;font-size:16px}.leather-nav.prev{left:4px}.leather-nav.next{right:4px}.quiz-container{gap:20px}.quiz-prompt{font-size:18px}.quiz-options{gap:16px}.quiz-card{width:120px;height:140px}.quiz-card-emoji{font-size:36px}.quiz-card-char{font-size:28px}}@media(max-width:400px){.book-frame{padding:6px;border-radius:var(--radius-sm)}.page-left,.page-right{padding:8px 10px}.char-text-hero{font-size:72px}.char-pinyin-hero{font-size:18px}.ai-image-area{min-height:80px;max-height:22vh}.content-card,.content-card.compact{padding:8px 10px}.content-card.compact .card-text{font-size:11px}.card-title{font-size:12px}.quiz-options{grid-template-columns:repeat(3,1fr);gap:6px}.quiz-card{width:80px;height:100px}.quiz-card-emoji{font-size:28px}.quiz-card-char{font-size:20px}.leather-nav{width:32px;height:32px;font-size:14px}.course-card{flex:0 0 100px}.course-cover{height:65px}}.old-ui{display:none!important}@media(max-width:600px)and (orientation:portrait){.page-left .char-display{width:100%;height:auto;min-height:35vh;padding:16px}.page-left .char-main{width:100%;max-width:280px;height:auto;aspect-ratio:1;margin:0 auto;padding:20px}.page-left .char-text{font-size:min(25vw,120px);line-height:1}.page-left .char-emoji{font-size:48px;margin-bottom:8px}.page-left .char-pinyin{font-size:22px;margin-top:8px}.balloon-recorder{position:relative;bottom:auto;right:auto;margin:16px auto;width:120px;height:144px}.balloon-svg{width:120px;height:144px}.page-right .top-nav{position:relative;margin:8px 12px;padding:8px 12px}.page-left{padding-top:16px}.step-card{padding:16px;gap:12px}.step-card>div:first-child{width:48px;height:48px;font-size:24px}.course-card{flex:0 0 140px}.course-cover{height:90px}.quiz-card{width:100%;height:100px;flex-direction:row;padding:12px 16px;gap:12px}.quiz-card-emoji{font-size:42px}.quiz-card-char{font-size:36px;flex:1;text-align:left}}