:root{--color-primary:#FF6B35;--color-secondary:#3498DB;--color-tertiary:#9B59B6;--color-success:#2ECC71;--color-warning:#F39C12;--color-text:#2C3E50;--color-text-light:#7F8C8D;--color-bg:#FFFFFF;--color-bg-alt:#F8F9FA;--color-border:#E8ECF0;--color-card-shadow:rgba(0,0,0,0.08);--radius:12px;--radius-sm:8px;--max-width:1200px;--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased}body{font-family:var(--font-sans);color:var(--color-text);background:var(--color-bg);line-height:1.6}a{color:inherit;text-decoration:none}button{cursor:pointer;border:none;background:none;font-family:inherit}.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}.header{background:var(--color-bg);border-bottom:1px solid var(--color-border);position:-webkit-sticky;position:sticky;top:0;z-index:100}.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}.logo{font-size:1.4rem;font-weight:700;color:var(--color-primary);white-space:nowrap}.logo span{color:var(--color-text);font-weight:400}.search-wrapper{flex:1 1;max-width:480px;position:relative}.search-input{width:100%;height:40px;padding:0 16px 0 40px;border:1px solid var(--color-border);border-radius:20px;font-size:.9rem;outline:none;transition:border-color .2s;background:var(--color-bg-alt)}.search-input:focus{border-color:var(--color-primary);background:var(--color-bg)}.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--color-text-light);font-size:.9rem}.search-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 4px 12px var(--color-card-shadow);margin-top:4px;max-height:360px;overflow-y:auto;z-index:200;display:none}.search-dropdown.active{display:block}.search-dropdown-item{padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--color-border);transition:background .15s}.search-dropdown-item:last-child{border-bottom:none}.search-dropdown-item:hover{background:var(--color-bg-alt)}.search-dropdown-item .title{font-weight:600;font-size:.9rem}.search-dropdown-item .excerpt{font-size:.8rem;color:var(--color-text-light);margin-top:2px}.nav-links{display:flex;gap:24px;align-items:center}.nav-link{font-size:.9rem;color:var(--color-text-light);transition:color .2s}.nav-link:hover{color:var(--color-primary)}.nav-dropdown{position:relative}.nav-dropdown-menu{display:none;position:absolute;top:100%;left:0;min-width:220px;background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.1);padding:8px;z-index:100}.nav-dropdown:hover .nav-dropdown-menu{display:block}.nav-dropdown-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:6px;text-decoration:none;color:var(--color-text);transition:background .15s}.nav-dropdown-item:hover{background:var(--color-bg-alt)}.nav-dropdown-icon{font-size:1.2rem;flex-shrink:0}.nav-dropdown-title{font-size:.85rem;font-weight:600}.nav-dropdown-desc{font-size:.72rem;color:var(--color-text-light)}.hero{padding:60px 0 40px;text-align:center;background:linear-gradient(135deg,#FFF5F0,#F0F8FF)}.hero h1{font-size:2.5rem;font-weight:800;margin-bottom:16px;line-height:1.2}.hero h1 span{color:var(--color-primary)}.hero p{font-size:1.1rem;color:var(--color-text-light);max-width:600px;margin:0 auto 32px}.hero-characters{display:flex;justify-content:center;gap:20px;margin-bottom:32px;font-size:3rem}.cta-button{display:inline-flex;align-items:center;gap:8px;background:var(--color-primary);color:white;padding:14px 32px;border-radius:28px;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s}.cta-button:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(255,107,53,.3)}.modules{padding:48px 0}.section-title{font-size:1.5rem;font-weight:700;margin-bottom:24px;text-align:center}.module-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:20px;gap:20px}.module-card{padding:28px;border-radius:var(--radius);border:1px solid var(--color-border);transition:box-shadow .2s}.module-card:hover{box-shadow:0 4px 16px var(--color-card-shadow)}.module-card .icon{font-size:2rem;margin-bottom:12px}.module-card h3{font-size:1.2rem;margin-bottom:8px}.module-card p{font-size:.9rem;color:var(--color-text-light);line-height:1.5}.fable-list-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}.fable-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-gap:20px;gap:20px}.fable-card{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;transition:box-shadow .2s,transform .2s}.fable-card:hover{box-shadow:0 4px 16px var(--color-card-shadow);transform:translateY(-2px)}.fable-card-body{padding:20px}.fable-card-title{font-size:1.1rem;font-weight:700;margin-bottom:4px}.fable-card-subtitle{font-size:.85rem;color:var(--color-text-light);margin-bottom:12px}.fable-card-tags{display:flex;flex-wrap:wrap;gap:6px}.tag{font-size:.75rem;padding:3px 8px;border-radius:12px;background:var(--color-bg-alt);color:var(--color-text-light);border:1px solid var(--color-border)}.tag.primary{background:#FFF0E8;color:var(--color-primary);border-color:#FFD6C0}.fable-detail-header{padding:32px 0 24px;border-bottom:1px solid var(--color-border);margin-bottom:24px}.fable-detail-title{font-size:2rem;font-weight:800;margin-bottom:4px}.fable-detail-subtitle{font-size:1rem;color:var(--color-text-light);margin-bottom:16px}.fable-detail-meta{display:flex;gap:16px;flex-wrap:wrap}.grade-tabs{display:flex;gap:8px;margin-bottom:24px}.grade-tab{padding:10px 20px;border-radius:20px;font-weight:600;font-size:.9rem;transition:all .2s;border:1px solid var(--color-border)}.grade-tab.active{background:var(--color-primary);color:white;border-color:var(--color-primary)}.grade-tab:hover:not(.active){border-color:var(--color-primary);color:var(--color-primary)}.grade-content{line-height:1.8;font-size:1rem}.grade-content p{margin-bottom:16px}.audio-player{background:var(--color-bg-alt);border-radius:var(--radius);padding:20px;margin-bottom:24px;display:flex;align-items:center;gap:16px}.audio-player button{width:48px;height:48px;border-radius:50%;background:var(--color-primary);color:white;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.audio-player .track-info{flex:1 1}.audio-player .track-name{font-weight:600;font-size:.95rem}.audio-player .track-duration{font-size:.8rem;color:var(--color-text-light)}.flashcard-section{margin:32px 0}.flashcard-viewer{background:var(--color-bg-alt);border-radius:var(--radius);padding:40px;text-align:center;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.flashcard-face{font-size:1.5rem;font-weight:700;margin-bottom:12px}.flashcard-back{font-size:1rem;color:var(--color-text-light)}.flashcard-nav{display:flex;justify-content:center;gap:12px;margin-top:16px}.filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.filter-chip{padding:6px 14px;border-radius:16px;font-size:.85rem;border:1px solid var(--color-border);transition:all .2s}.filter-chip.active{background:var(--color-primary);color:white}.filter-chip.active,.filter-chip:hover:not(.active){border-color:var(--color-primary)}.age-card{transition:transform .2s!important}.age-card:hover{transform:translateY(-4px)!important}.paywall-section{background:linear-gradient(135deg,#FFF5F0,#FFF0E8);border-radius:var(--radius);padding:32px;text-align:center;margin:32px 0}.paywall-section h3{font-size:1.3rem;margin-bottom:8px}.paywall-section p{color:var(--color-text-light);margin-bottom:20px}.fable-card-locked{opacity:.85;position:relative}.fable-card-locked:hover{opacity:1}.fable-card-badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:10px;margin-bottom:8px;border:1px solid}.fable-card-badge-free{background:#E8F5E9;color:#2ECC71;border-color:#C8E6C9}.fable-card-badge-locked{background:#FFF3E0;color:#FF6B35;border-color:#FFE0B2}.fable-section-label{font-size:1rem;font-weight:700;margin:24px 0 16px;padding:8px 16px;border-radius:var(--radius-sm);display:inline-block}.fable-section-label-free{background:#E8F5E9;color:#2ECC71}.fable-section-label-locked{background:#FFF3E0;color:#FF6B35}.locked-content-preview{position:relative;margin:0 0 32px;border-radius:var(--radius);overflow:hidden;min-height:400px}.locked-content-blur{filter:blur(6px);-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none;padding:8px 0;opacity:.5}.paywall-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.98);border-radius:var(--radius);padding:32px 28px;text-align:center;width:min(440px,90%);box-shadow:0 8px 32px rgba(0,0,0,.12);border:1px solid var(--color-border)}.paywall-overlay-icon{font-size:2.5rem;margin-bottom:8px}.paywall-overlay h3{font-size:1.3rem;font-weight:800;margin-bottom:4px;color:var(--color-text)}.paywall-overlay p{font-size:.9rem;color:var(--color-text-light);margin-bottom:4px}.paywall-pricing{display:flex;gap:10px;justify-content:center;margin:20px 0}.paywall-price-item{flex:1 1;padding:12px 8px;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-bg)}.paywall-price-item-featured{border-color:var(--color-primary);background:#FFF5F0;position:relative}.paywall-price-item-featured:after{content:"推荐";position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:.65rem;background:var(--color-primary);color:#fff;padding:1px 8px;border-radius:8px}.paywall-price-name{font-size:.75rem;color:var(--color-text-light);margin-bottom:4px}.paywall-price-amount{font-size:1.4rem;font-weight:800;color:var(--color-text)}.paywall-price-item-featured .paywall-price-amount{color:var(--color-primary)}.paywall-price-desc{font-size:.7rem;color:var(--color-text-light)}.paywall-unlock-form{display:flex;gap:8px;margin-top:16px}.paywall-unlock-input{flex:1 1;height:42px;padding:0 14px;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.9rem;outline:none;transition:border-color .2s;background:var(--color-bg)}.paywall-unlock-input:focus{border-color:var(--color-primary)}.paywall-unlock-btn{padding:0 20px;height:42px;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;white-space:nowrap;transition:opacity .2s}.paywall-unlock-btn:hover{opacity:.9}.paywall-contact{margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border)}.paywall-contact p{font-size:.8rem;color:var(--color-text-light);margin:2px 0}.parent-guide{background:#F0F8FF;border-radius:var(--radius);padding:20px;margin:24px 0}.parent-guide h4{font-size:1rem;margin-bottom:8px;color:var(--color-secondary)}.parent-guide p{font-size:.9rem;line-height:1.6}.footer,.parent-guide p{color:var(--color-text-light)}.footer{background:var(--color-bg-alt);border-top:1px solid var(--color-border);padding:32px 0;margin-top:48px;text-align:center;font-size:.85rem}.poster-carousel,.poster-slide{position:relative;overflow:hidden}.poster-slide{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;text-align:center}.poster-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.poster-content{max-width:680px;padding:0 24px}.poster-title{font-size:2.5rem;font-weight:800;margin-bottom:16px;line-height:1.2;color:var(--color-text)}.poster-title .highlight{color:var(--color-primary)}.poster-subtitle{font-size:1.1rem;color:var(--color-text-light);max-width:560px;margin:0 auto 28px;line-height:1.7}.poster-cta{display:inline-flex;align-items:center;gap:8px;background:var(--color-primary);color:white;padding:14px 36px;border-radius:28px;font-size:1.1rem;font-weight:600;transition:transform .2s,box-shadow .2s}.poster-cta:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(255,107,53,.3)}.poster-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px}.poster-dot{width:10px;height:10px;border-radius:50%;background:rgba(0,0,0,.2);border:none;cursor:pointer;transition:background .2s,transform .2s;padding:0}.poster-dot.active{background:var(--color-primary);transform:scale(1.3)}.character-bar-section{padding:40px 0 24px;background:var(--color-bg-alt);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}.character-bar-subtitle{text-align:center;font-size:.95rem;color:var(--color-text-light);margin-bottom:24px;margin-top:-16px}.character-bar{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,1) 6%,rgba(0,0,0,1) 94%,transparent);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,1) 6%,rgba(0,0,0,1) 94%,transparent)}.character-track{display:flex;gap:20px;width:max-content;animation:char-scroll 60s linear infinite;will-change:transform;padding:8px 0}.character-bar:hover .character-track{animation-play-state:paused}@keyframes char-scroll{0%{transform:translateX(0)}to{transform:translateX(-50%)}}.character-item{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto;cursor:pointer;transition:transform .25s ease,filter .25s ease;background:transparent;border:none;padding:4px;border-radius:var(--radius-sm);outline:none}.character-item:hover{transform:scale(1.15);z-index:10;filter:drop-shadow(0 8px 20px rgba(0,0,0,.18))}.character-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.character-avatar{width:88px;height:88px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;border:3px solid var(--color-bg);box-shadow:0 2px 8px rgba(0,0,0,.1);flex-shrink:0}.character-avatar img{width:100%;height:100%;object-fit:cover}.character-emoji{font-size:2.2rem;line-height:1}.character-name{font-size:.8rem;font-weight:600;white-space:nowrap;max-width:88px;overflow:hidden;text-overflow:ellipsis}.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fade-in .2s ease;padding:16px}.modal-card{background:var(--color-bg);border-radius:var(--radius);width:min(600px,100%);max-height:80vh;overflow-y:auto;padding:28px 24px;position:relative;animation:pop-in .25s ease;box-shadow:0 20px 60px rgba(0,0,0,.2)}.modal-close{position:absolute;top:12px;right:16px;font-size:1.6rem;color:var(--color-text-light);background:none;border:none;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background .2s}.modal-close:hover{background:var(--color-bg-alt)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--color-border)}.modal-avatar,.modal-header{display:flex;align-items:center}.modal-avatar{width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0;justify-content:center}.modal-avatar img{width:100%;height:100%;object-fit:cover}.modal-avatar span{font-size:2rem}.modal-header-text{flex:1 1;min-width:0}.modal-char-name{font-size:1.3rem;font-weight:700}.modal-char-en{margin-top:2px}.modal-char-desc,.modal-char-en{font-size:.85rem;color:var(--color-text-light)}.modal-char-desc{margin-top:4px}.modal-fable-count{text-align:center;flex-shrink:0;padding:8px 16px;background:var(--color-bg-alt);border-radius:var(--radius-sm)}.modal-fable-count .count-num{display:block;font-size:1.5rem;font-weight:800;color:var(--color-primary);line-height:1.2}.modal-fable-count .count-label{font-size:.75rem;color:var(--color-text-light)}.modal-fable-list{display:flex;flex-direction:column;gap:10px}.cfi-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-radius:var(--radius-sm);border:1px solid var(--color-border);gap:12px;transition:border-color .2s}.cfi-item:hover{border-color:var(--color-primary)}.cfi-info{flex:1 1;min-width:0}.cfi-title{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--color-text)}.cfi-title:hover .cfi-title-cn{color:var(--color-primary)}.cfi-title-cn{font-weight:600;font-size:.95rem;transition:color .2s}.cfi-title-en{font-size:.8rem;color:var(--color-text-light)}.cfi-meta{display:flex;gap:10px;margin-top:4px}.cfi-difficulty,.cfi-wordcount{font-size:.75rem}.cfi-wordcount{color:var(--color-text-light)}.cfi-modes{display:flex;gap:6px;flex-shrink:0}.cfi-mode-btn{display:inline-flex;align-items:center;gap:3px;padding:4px 10px;border-radius:14px;font-size:.72rem;font-weight:600;border:1px solid;transition:all .2s;text-decoration:none;background:var(--color-bg)}.cfi-mode-btn:hover{filter:brightness(.95);transform:scale(1.04)}.highlight-section{outline:2px solid var(--color-primary);outline-offset:4px;border-radius:var(--radius-sm);transition:outline-color .3s}@media (prefers-reduced-motion:reduce){.character-track{animation:none}.character-item:hover{transform:scale(1.05)}}@media (max-width:768px){.module-grid{grid-template-columns:1fr}.hero h1{font-size:1.8rem}.header-inner{flex-wrap:wrap;height:auto;padding:12px 0}.search-wrapper{order:3;max-width:100%;flex-basis:100%}.fable-grid{grid-template-columns:1fr}.poster-title{font-size:1.6rem}.poster-cta,.poster-subtitle{font-size:.95rem}.poster-cta{padding:10px 24px}}