.page-header{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);color:var(--bg-white);padding:var(--spacing-xl) 0;text-align:center;margin-bottom:var(--spacing-xl)}.page-header-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.page-icon{font-size:80px;opacity:.9}.page-title{font-size:var(--font-size-2xl);font-weight:700;margin:0}.page-description{font-size:var(--font-size-lg);opacity:.95;max-width:600px;line-height:1.6}.section-intro{text-align:center;margin-bottom:var(--spacing-lg)}.section-intro h2{font-size:var(--font-size-xl);color:var(--text-dark);margin-bottom:var(--spacing-sm)}.section-intro p{font-size:var(--font-size-base);color:var(--text-light)}.letters-section{padding:var(--spacing-xl) 0}.letters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-lg)}.letter-card{background:var(--bg-white);border-radius:16px;padding:24px 10px;text-align:center;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);border:3px solid transparent}.letter-card:hover{transform:translateY(-8px) scale(1.05);box-shadow:var(--shadow-lg);border-color:var(--secondary-color)}.letter-card:active{transform:translateY(-4px) scale(1.02)}.letter-display{font-size:72px;font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-sm);line-height:1}.letter-name{font-size:var(--font-size-base);color:var(--text-light);font-weight:600}.letter-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;visibility:hidden;transition:var(--transition);padding:var(--spacing-md)}.letter-modal.active{opacity:1;visibility:visible}.letter-modal-content{background:var(--bg-white);border-radius:24px;padding:var(--spacing-xl);max-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative;transform:scale(.9);transition:var(--transition)}.letter-modal.active .letter-modal-content{transform:scale(1)}.close-modal{position:absolute;top:var(--spacing-md);left:var(--spacing-md);background:var(--bg-light);border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--text-dark);transition:var(--transition)}.close-modal:hover{background:var(--primary-color);color:var(--bg-white);transform:rotate(90deg)}.letters-page .modal-letter-display{font-size:120px;font-weight:700;text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-lg);line-height:1}.letter-name-display{font-size:48px;font-weight:700;color:var(--primary-color);margin:var(--spacing-md) 0;text-align:center;transition:.3s}.modal-sections{display:flex;flex-direction:column;gap:var(--spacing-lg);text-align:center}.modal-section{background:var(--bg-light);padding:var(--spacing-md);border-radius:16px;border:1px dashed var(--border-color)}.modal-section h3{font-size:var(--font-size-lg);color:var(--text-dark);margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:10px}.modal-section h3 i,.modal-section h4 i{color:var(--primary-color)}.pronunciation{font-size:64px;font-weight:700;text-align:center;color:var(--secondary-color);margin-bottom:var(--spacing-md);transition:var(--transition)}.example-word{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.letters-page .example-emoji{font-size:80px;transition:var(--transition)}.example-text{font-size:var(--font-size-xl);font-weight:700;color:var(--text-dark)}.letter-forms{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-top:var(--spacing-md)}.form-item{text-align:center}.form-label{font-size:16px;color:var(--text-light);margin-bottom:8px}.form-display{font-size:48px;font-weight:700;color:var(--accent-color);background:var(--bg-white);padding:var(--spacing-sm);border-radius:12px}.modal-actions{margin-top:var(--spacing-lg);display:flex;justify-content:center}.movements-section{padding:var(--spacing-xl) 0}.movements-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-lg)}.movement-card{background:var(--bg-white);border-radius:20px;padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:var(--transition);text-align:center}.movement-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}.movement-symbol{font-size:80px;font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-md)}.movement-name{font-size:var(--font-size-xl);font-weight:700;color:var(--text-dark);margin-bottom:var(--spacing-sm)}.movement-examples{display:flex;justify-content:center;gap:var(--spacing-md);margin:var(--spacing-md) 0}.movement-example{background:var(--bg-light);padding:var(--spacing-sm) var(--spacing-md);border-radius:12px;font-size:var(--font-size-lg);font-weight:600}.vocabulary-section{padding:var(--spacing-xl) 0}.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.category-card{background:var(--bg-white);border-radius:16px;padding:var(--spacing-md);text-align:center;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);border:3px solid transparent}.category-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--secondary-color)}.category-icon{font-size:60px;margin-bottom:var(--spacing-sm)}.category-name{font-size:var(--font-size-lg);font-weight:700;color:var(--text-dark)}.word-emoji{margin-bottom:var(--spacing-sm)}.word-text{font-size:var(--font-size-lg);color:var(--text-dark)}.vocabulary-page .words-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.vocabulary-page .word-image,.vocabulary-page .word-image-container{width:240px;height:200px}.vocabulary-page .word-emoji{font-size:90px;width:240px;height:200px}.vocabulary-page .word-text{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color)}.under-development{padding:var(--spacing-xl) 0;text-align:center}.development-icon{font-size:120px;margin-bottom:var(--spacing-lg)}.development-message{max-width:600px;margin:0 auto var(--spacing-lg)}.development-message h2{font-size:var(--font-size-xl);color:var(--text-dark);margin-bottom:var(--spacing-md)}.development-message p{font-size:var(--font-size-lg);color:var(--text-light);line-height:1.7}.features-list{background:var(--bg-white);border-radius:20px;padding:var(--spacing-lg);max-width:500px;margin:0 auto;box-shadow:var(--shadow-md)}.features-list h3{font-size:var(--font-size-lg);color:var(--primary-color);margin-bottom:var(--spacing-md)}.features-list ul{list-style:none;text-align:right}.features-list li{font-size:var(--font-size-base);color:var(--text-dark);margin-bottom:var(--spacing-sm);padding:8px;background:var(--bg-light);border-radius:8px}.features-list li i{color:var(--secondary-color);margin-left:8px}@media (max-width:768px){.vocabulary-page .words-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:var(--spacing-sm)}.vocabulary-page .word-image,.vocabulary-page .word-image-container{width:270px;height:220px}.vocabulary-page .word-emoji{font-size:100px;width:270px;height:220px}.page-icon{font-size:60px}.letters-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:var(--spacing-sm)}.letter-display{font-size:56px}.letters-page .modal-letter-display{font-size:80px}.pronunciation{font-size:48px}.letter-forms,.movements-grid{grid-template-columns:1fr}.letter-name-display{font-size:36px}}@media (max-width:480px){.letter-modal-content{padding:var(--spacing-md)}.example-emoji{font-size:60px}}.letter-example-image{max-width:450px;max-height:300px;width:auto;height:auto;object-fit:contain;border-radius:16px;transition:var(--transition)}.image-container{display:flex;justify-content:center;align-items:center;min-height:200px;padding:var(--spacing-sm)}.example-emoji-large{font-size:110px;transition:var(--transition)}.letter-example-image:hover{transform:scale(1.05)}@media (max-width:768px){.letter-example-image{max-width:300px;max-height:200px}.example-emoji-large{font-size:110px}}@media (max-width:480px){.letter-example-image{max-width:225px;max-height:175px}.example-emoji-large{font-size:110px}}.word-image{width:120px;height:120px;object-fit:cover;border-radius:16px;margin-bottom:var(--spacing-sm);transition:var(--transition)}.word-image-container{display:flex;justify-content:center;align-items:center;width:120px;height:120px;margin-bottom:var(--spacing-sm)}.word-emoji{font-size:60px;margin-bottom:var(--spacing-sm);transition:var(--transition);display:flex;justify-content:center;align-items:center;width:120px;height:120px}.word-text{font-size:var(--font-size-lg);font-weight:600;color:var(--text-dark);text-align:center;margin-top:auto}.word-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:200px;padding:var(--spacing-md);background:var(--bg-white);border-radius:16px;text-align:center;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow-sm);border:3px solid transparent}.word-card:hover{box-shadow:var(--shadow-md);border-color:var(--secondary-color);transform:translateY(-5px) scale(1.05);box-shadow:var(--shadow-md)}@media (max-width:768px){.word-image,.word-image-container{width:120px;height:120px}.word-emoji{font-size:50px;width:100px;height:100px}.word-card{min-height:180px;padding:var(--spacing-sm)}}.word-card:active{transform:translateY(-2px) scale(1.02)}.words-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-lg)}@media (max-width:768px){.words-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--spacing-sm)}}@media (max-width:480px){.word-image,.word-image-container{width:100px;height:100px}.word-emoji{font-size:40px;width:80px;height:80px}.word-text{font-size:var(--font-size-base)}.word-card{min-height:160px}.words-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}.articles-grid{display:grid;grid-template-columns:repeat(3,minmax(300px,1fr));gap:var(--spacing-lg);margin:var(--spacing-xl) 0}.article-card{background:var(--bg-white);border-radius:20px;padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:var(--transition);display:flex;flex-direction:column;height:100%}.article-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.article-icon{font-size:48px;margin-bottom:var(--spacing-md);text-align:center}.article-title{font-size:var(--font-size-lg);font-weight:700;color:var(--text-dark);margin-bottom:var(--spacing-sm);text-align:center}.article-excerpt{color:var(--text-light);line-height:1.7;margin-bottom:var(--spacing-md);flex-grow:1}.worksheets-section{background:var(--bg-light);padding:var(--spacing-xl) 0}.worksheets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-lg)}.worksheet-card{background:var(--bg-white);border-radius:16px;padding:var(--spacing-md);text-align:center;box-shadow:var(--shadow-sm);transition:var(--transition);display:flex;flex-direction:column;height:100%}.worksheet-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.worksheet-icon{font-size:60px;margin-bottom:var(--spacing-sm)}.worksheet-name{font-size:var(--font-size-base);font-weight:600;color:var(--text-dark);margin-bottom:var(--spacing-sm)}.worksheet-description{color:var(--text-light);font-size:14px;line-height:1.5;margin-bottom:var(--spacing-md);flex-grow:1}@media (max-width:768px){.articles-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.worksheets-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.article-card,.worksheet-card{padding:var(--spacing-md)}}@media (max-width:480px){.worksheets-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--spacing-sm)}.worksheet-icon{font-size:50px}}.article-full-view{background:var(--bg-white);padding:var(--spacing-xl) 0;min-height:80vh;scroll-margin-top:80px}.full-article-content{max-width:800px;margin:0 auto;padding:var(--spacing-lg)}.article-header{text-align:center;margin-bottom:var(--spacing-xl);border-bottom:2px solid var(--border-color);padding-bottom:var(--spacing-lg)}.article-header .article-icon{font-size:80px;margin-bottom:var(--spacing-md)}.article-full-view .article-title{font-size:var(--font-size-2xl);color:var(--text-dark);margin-bottom:var(--spacing-sm);line-height:1.3}.article-full-view .article-meta{color:var(--text-light);font-size:var(--font-size-base);display:flex;justify-content:center;gap:var(--spacing-md)}.article-category{background:var(--primary-color);color:#fff;padding:4px 12px;border-radius:20px;font-size:14px}.article-body{font-size:var(--font-size-lg);line-height:1.8;color:var(--text-dark);margin-bottom:var(--spacing-xl)}.article-body p{margin-bottom:var(--spacing-md)}.article-body ol,.article-body ul{margin-bottom:var(--spacing-md);padding-right:var(--spacing-lg)}.article-body li{margin-bottom:var(--spacing-sm)}.content-placeholder{text-align:center;padding:var(--spacing-lg);background:var(--bg-light);border-radius:16px;margin:var(--spacing-lg) 0}.article-footer{text-align:center;border-top:2px solid var(--border-color);padding-top:var(--spacing-lg)}.back-to-articles{margin-bottom:var(--spacing-lg);display:inline-flex;align-items:center;gap:8px}@media (max-width:768px){.full-article-content{padding:var(--spacing-md)}.article-header .article-icon{font-size:60px}.article-full-view .article-title{font-size:var(--font-size-xl)}.article-full-view .article-meta{flex-direction:column;gap:var(--spacing-sm)}.article-body{font-size:var(--font-size-base)}}@media (max-width:480px){.article-full-view{padding:var(--spacing-lg) 0}.full-article-content{padding:var(--spacing-sm)}.article-header .article-icon{font-size:50px}.article-full-view .article-title{font-size:var(--font-size-lg)}}.navbar{position:sticky;top:0;z-index:1000}.sounds-section{padding:var(--spacing-xl) 0}.branches-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-lg)}.branch-card{background:var(--bg-white);border-radius:20px;padding:var(--spacing-xl);box-shadow:var(--shadow-md);transition:var(--transition);text-align:center;cursor:pointer;position:relative;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid transparent}.branch-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--secondary-color)}.branch-card.branch-disabled{opacity:.7;cursor:not-allowed}.branch-card.branch-disabled:hover{transform:none;box-shadow:var(--shadow-md)}.branch-icon{font-size:80px;margin-bottom:var(--spacing-md);line-height:1}.branch-title{font-size:var(--font-size-xl);color:var(--text-dark);margin-bottom:var(--spacing-sm);font-weight:700}.branch-description{color:var(--text-light);font-size:var(--font-size-base);line-height:1.7}.branch-header{margin-bottom:var(--spacing-xl)}.groups-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--spacing-lg);margin-top:var(--spacing-lg)}.group-card{background:var(--bg-white);border-radius:20px;padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:var(--transition);text-align:center;cursor:pointer;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid transparent}.group-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--secondary-color)}.group-card:active{transform:translateY(-4px) scale(.98)}.group-letters{display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-md)}.group-letters .letter-display{font-size:64px;font-weight:700;color:var(--primary-color)}.group-description{color:var(--text-light);font-size:var(--font-size-base);line-height:1.7}.sound-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:2000;opacity:0;visibility:hidden;transition:var(--transition);padding:var(--spacing-md)}.sound-modal.active{opacity:1;visibility:visible}.sound-modal-content{background:var(--bg-white);border-radius:24px;padding:var(--spacing-xl);max-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative;transform:scale(.9);transition:var(--transition)}.sound-modal.active .sound-modal-content{transform:scale(1)}.letters-page h3 i,.sounds-page h3 i{color:var(--primary-color)}.modal-comparison{display:flex;gap:var(--spacing-lg);margin-bottom:var(--spacing-xl)}.modal-letter-section{flex:1;background:var(--bg-light);border-radius:16px;padding:var(--spacing-lg);text-align:center;border:1px dashed var(--border-color)}.sounds-page .modal-letter-display{font-size:100px;font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-sm);line-height:1}.modal-pronunciation{font-size:48px;font-weight:700;color:var(--secondary-color);margin-bottom:var(--spacing-md)}.modal-examples{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.sound-modal .example-item{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-white);border-radius:12px;cursor:pointer;transition:var(--transition)}.example-item:hover{transform:scale(1.05);box-shadow:var(--shadow-sm)}.sound-modal .example-emoji{font-size:32px;line-height:1;transition:var(--transition)}.sound-modal .example-image{width:50px;height:50px;object-fit:cover;border-radius:8px;transition:var(--transition)}.sound-modal .example-item:hover .example-image{transform:scale(1.1)}.sound-modal .example-word{font-size:var(--font-size-lg);font-weight:600;color:var(--text-dark);margin:0}.modal-activity{background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:20px;padding:var(--spacing-lg);color:var(--bg-white);text-align:center}.modal-activity h3{margin-bottom:var(--spacing-md);font-size:var(--font-size-xl)}.activity-instruction{font-size:var(--font-size-lg);opacity:.95;font-weight:600}.activity-buttons{display:flex;gap:var(--spacing-md);justify-content:center;margin-top:var(--spacing-lg);flex-wrap:wrap}.activity-btn{background:var(--bg-white);color:var(--primary-color);padding:10px;border-radius:12px;font-size:65px;font-weight:700;border:none;cursor:pointer;transition:var(--transition);min-width:120px;border:2px dashed var(--primary-color);flex-shrink:0}.activity-btn:hover{transform:scale(1.1);box-shadow:var(--shadow-lg);transform:translateY(-3px);box-shadow:0 4px 12px rgba(0,0,0,.15)}.activity-btn.correct{background:var(--secondary-color);color:var(--bg-white)}.activity-btn.wrong{background:#e74c3c;color:var(--bg-white)}.activity-feedback{margin-top:var(--spacing-md);font-size:var(--font-size-lg);font-weight:600;min-height:40px}@media (max-width:768px){.branches-grid,.groups-grid{grid-template-columns:1fr}.modal-comparison{flex-direction:column}.sounds-page .modal-letter-display{font-size:80px}.modal-pronunciation{font-size:36px}.activity-buttons{gap:var(--spacing-sm)}.activity-btn{font-size:55px;min-width:79px;padding:0 6px}.comparison-completion-container .btn-large{padding:12px 24px;font-size:var(--font-size-base)}}@media (max-width:480px){.activity-btn{font-size:36px;min-width:55px;padding:0 6px}.branch-card{min-height:240px;padding:var(--spacing-md)}.branch-icon{font-size:60px}.sound-modal-content{padding:var(--spacing-md)}}@media (max-width:420px){.letter-modal-content{max-width:95%;padding:var(--spacing-sm);max-height:85vh}.modal-letter-display{font-size:60px}.pronunciation{font-size:36px}.example-emoji{font-size:50px}.form-display{font-size:36px}.nav-menu ul{gap:4px}.nav-menu a{padding:8px 14px;font-size:17px}}@media (max-width:360px){.letter-modal-content{padding:var(--spacing-xs)}.modal-letter-display{font-size:50px}}@media (max-width:480px){.letter-forms{grid-template-columns:repeat(3,1fr);gap:var(--spacing-sm)}.form-display{font-size:36px;padding:var(--spacing-xs)}}@media (max-width:360px){.container{padding:0 12px}}.comparison-completion-message{font-size:var(--font-size-lg);color:var(--accent-color);margin-bottom:var(--spacing-lg)}.comparison-completion-container .btn-large{display:inline-flex;align-items:center;justify-content:center;gap:8px}@media (max-width:480px){.comparison-completion-container .btn-large{padding:10px 20px;font-size:14px;width:auto;max-width:100%}.modal-activity h3{font-size:var(--font-size-sm)}.comparison-completion-message{font-size:var(--font-size-base)}.completion-message{font-size:var(--font-size-base)!important}.activity-feedback,.completion-title{font-size:var(--font-size-base)}.comparison-completion-title,.encouragement-text,.reading-completion-description,.reading-completion-message,.reading-question-feedback{font-size:var(--font-size-base)!important}}.sounds-center.comparison-completion-container.sounds-mb-xl{padding:20px}.reading-question-options .activity-btn{font-size:var(--font-size-base);min-width:140px;padding:15px;flex-shrink:0}@media (max-width:768px){.reading-question-options{gap:var(--spacing-sm)}.reading-question-options .activity-btn{min-width:130px;padding:12px}.reading-option-emoji{font-size:70px;height:100px}.reading-option-visual{height:100px}.reading-option-text{font-size:var(--font-size-lg)}}@media (max-width:480px){.reading-question-options .activity-btn{min-width:120px;padding:10px}.reading-option-emoji{font-size:60px;height:80px;min-width:120px}.reading-option-visual{height:80px}.reading-option-text{font-size:var(--font-size-base)}}.syllable-word-visual{display:flex;justify-content:center;align-items:center;margin-bottom:var(--spacing-md)}.syllable-word-emoji{font-size:120px;transition:var(--transition);cursor:pointer;display:flex;justify-content:center;align-items:center}.syllable-word-title{font-size:var(--font-size-2xl);color:var(--text-dark);margin-bottom:var(--spacing-md);transition:var(--transition)}#activityWordEmoji .example-emoji-large{margin-bottom:35px;margin-top:35px}#syllableExampleEmoji .example-emoji-large{margin-bottom:35px;margin-top:10px}#syllableExampleText{font-size:64px;font-weight:700;color:var(--secondary-color);transition:var(--transition)}.syllable-modal-section h4 i,.syllable-word-complete-section h4 i{color:var(--primary-color)}@media (max-width:768px){.syllable-word-emoji{font-size:100px}.syllable-word-title{font-size:var(--font-size-xl)}#syllableExampleText{font-size:48px}.sound-modal-content h4{font-size:var(--font-size-base)}#combinedSyllablesDisplay{font-size:36px!important;letter-spacing:6px!important}}@media (max-width:480px){.syllable-word-emoji{font-size:80px}.syllable-word-title{font-size:var(--font-size-lg)}#syllableExampleText{font-size:36px}.sound-modal-content h4{font-size:var(--font-size-sm)}#combinedSyllablesDisplay{font-size:28px!important;letter-spacing:4px!important}}.syllable-modal-section{background:var(--bg-light);padding:var(--spacing-lg);border-radius:16px;margin-bottom:var(--spacing-md);border:1px dashed var(--border-color)}.syllable-modal-title{text-align:center;margin-bottom:var(--spacing-md);color:var(--text-dark)}.syllable-modal-grid{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md);flex-wrap:wrap}.syllable-modal-item{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.syllable-modal-box{font-size:48px;font-weight:700;color:var(--primary-color);background:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:12px;box-shadow:var(--shadow-sm);min-width:80px;text-align:center}.syllable-modal-separator{font-size:32px;color:var(--text-light)}.syllable-combined-display{font-size:48px;font-weight:700;color:var(--primary-color);background:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:12px;box-shadow:var(--shadow-sm);margin:0 auto var(--spacing-md);text-align:center;max-width:fit-content}.syllable-modal-button-center{text-align:center}.syllable-word-complete-section{background:var(--bg-light);padding:var(--spacing-lg);border-radius:16px;margin-bottom:var(--spacing-xl);border:1px dashed var(--border-color)}.syllable-modal-footer{text-align:center;margin-top:var(--spacing-xl)}@media (max-width:768px){.syllable-modal-box{font-size:36px;min-width:60px;padding:var(--spacing-sm) var(--spacing-md)}.syllable-combined-display{font-size:36px}.syllable-modal-separator{font-size:24px}}@media (max-width:480px){.syllable-modal-box{font-size:28px;min-width:50px;padding:var(--spacing-xs) var(--spacing-sm)}.syllable-combined-display{font-size:28px}.syllable-modal-separator{font-size:20px}}#soundModal #syllableExampleEmoji .image-container,#soundModal #wordModalEmoji .image-container{padding:0!important;margin-bottom:22px}#soundModal #activityWordEmoji .image-container{padding:0!important;margin-bottom:22px;min-height:100px}#activityWordEmoji .letter-example-image{max-width:200px;max-height:200px}.sounds-center{text-align:center}.sounds-center-mb-xl{text-align:center;margin-bottom:var(--spacing-xl)}.sounds-center-mt-xl{text-align:center;margin-top:var(--spacing-xl)}.sounds-center-mb-md{text-align:center;margin-bottom:var(--spacing-md)}.sounds-section-title{text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-md)}.sounds-section-subtitle{text-align:center;color:var(--text-light);margin-bottom:var(--spacing-xl)}.sounds-section-header{text-align:center;margin:var(--spacing-lg) 0}.sounds-large-icon{font-size:80px;margin-bottom:var(--spacing-lg)}.sounds-medium-icon{font-size:60px;margin-bottom:var(--spacing-sm)}.sounds-word-card-text{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color)}.sounds-icon-primary{color:var(--primary-color)}.sounds-icon-light{color:var(--text-light)}.sounds-letter-separator{margin:0 10px;color:var(--text-light)}.sounds-modal-subtitle{margin-top:var(--spacing-md);margin-bottom:var(--spacing-sm)}.letter-box{display:inline-flex;align-items:center;justify-content:center;width:70px;height:70px;font-size:var(--font-size-xl);font-weight:700;border-radius:12px;transition:.3s}.letter-box-filled{background:var(--bg-light);color:var(--text-dark);border:3px solid var(--secondary-color)}.letter-box-empty{background:#fff;border:3px dashed var(--primary-color);color:var(--text-light)}.letter-box.missing{background:var(--bg-light);border:3px dashed var(--primary-color)}.letter-box.correct{background:#d4edda;border:3px solid #28a745;color:#155724}.letter-box.wrong{background:#f8d7da;border:3px solid #dc3545;color:#721c24}.letter-choice-btn{min-width:75px;height:75px;font-size:var(--font-size-xl);font-weight:700;background:var(--bg-white);border:3px solid var(--border-color);border-radius:12px;cursor:pointer;transition:.3s;color:var(--text-dark)}.letter-choice-btn:hover:not(:disabled){transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--primary-color)}.letter-choice-btn:active:not(:disabled){transform:translateY(-2px)}.letter-choice-btn.correct{background:#d4edda;border-color:#28a745;color:#155724}.letter-choice-btn.wrong{background:#f8d7da;border-color:#dc3545!important;color:#721c24}@media (max-width:480px){.letter-box{width:50px;height:50px;font-size:var(--font-size-xl)}.letter-choice-btn{min-width:60px;height:60px;font-size:var(--font-size-xl)}}.complete-word-container{height:80px;margin-bottom:var(--spacing-sm);display:flex;justify-content:center;align-items:center}.complete-word-box{font-size:48px;font-weight:700;color:var(--primary-color);background:#fff;padding:var(--spacing-xs) var(--spacing-xl);border-radius:12px;box-shadow:var(--shadow-sm);min-width:120px;min-height:70px;text-align:center;display:flex;align-items:center;justify-content:center;border:3px solid var(--secondary-color)}.complete-word-text{opacity:0}@media (max-width:480px){.complete-word-container{height:70px}.complete-word-box{font-size:36px;padding:var(--spacing-sm) var(--spacing-lg);min-width:100px;min-height:60px}.sounds-section-title{font-size:20px}}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}.activity-btn{transition:.3s}.activity-btn.correct{background-color:#7cb342!important;color:#fff!important;border-color:#7cb342!important}.activity-btn.wrong{background-color:#e74c3c!important;color:#fff!important;border-color:#e74c3c!important}.reading-items-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-lg);margin-top:var(--spacing-lg)}.reading-item-card{background:var(--bg-white);border-radius:20px;padding:var(--spacing-lg);box-shadow:var(--shadow-md);transition:var(--transition);text-align:center;cursor:pointer;min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid transparent}.reading-item-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:var(--secondary-color)}.reading-item-card:active{transform:translateY(-4px) scale(.98)}.reading-visual-container{display:flex;justify-content:center;align-items:center;width:200px;height:160px;margin-bottom:var(--spacing-lg);flex-shrink:0}.reading-item-image{width:200px;height:160px;object-fit:cover;border-radius:16px;transition:var(--transition)}.reading-item-emoji{font-size:80px;transition:var(--transition);display:flex;justify-content:center;align-items:center;width:200px;height:160px}.reading-item-text{font-size:var(--font-size-xl);font-weight:700;color:var(--primary-color);text-align:center;line-height:1.4;margin-top:auto}@media (max-width:1024px){.reading-items-grid{grid-template-columns:repeat(3,1fr);gap:var(--spacing-md)}}@media (max-width:768px){.reading-items-grid{grid-template-columns:repeat(2,1fr);gap:var(--spacing-md)}.reading-item-card{min-height:200px;padding:var(--spacing-md)}.reading-visual-container{width:160px;height:140px}.reading-item-image{width:160px;height:140px;border-radius:12px}.reading-item-emoji{font-size:70px;width:160px;height:140px}.reading-item-text{font-size:var(--font-size-lg)}}@media (max-width:480px){.reading-items-grid{grid-template-columns:1fr}.reading-item-card{min-height:180px}.reading-visual-container{width:160px;height:140px}.reading-item-image{width:160px;height:140px;border-radius:10px}.reading-item-emoji{font-size:70px;width:160px;height:140px}.reading-item-text{font-size:var(--font-size-md)}}.sounds-hidden{display:none}.sounds-invisible{visibility:hidden}.sounds-text-center{text-align:center}.sounds-mb-sm{margin-bottom:var(--spacing-sm)}.sounds-mb-md{margin-bottom:var(--spacing-md)}.sounds-mb-lg{margin-bottom:var(--spacing-lg)}.sounds-mb-xl{margin-bottom:var(--spacing-xl);background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:20px;padding:var(--spacing-lg);color:var(--bg-white);text-align:center}.activity-choice-buttons.sounds-mb-xl{background:var(--bg-light);padding:0}.sounds-mt-md{margin-top:var(--spacing-md)}.sounds-padding-xl{padding:var(--spacing-xl)}.activity-section-title{text-align:center;color:var(--text-dark);margin-bottom:var(--spacing-lg)}.activity-section-header{text-align:center;margin:var(--spacing-lg) 0}.activity-instruction-text{font-size:var(--font-size-lg);font-weight:600}.activity-letter-boxes{display:flex;gap:var(--spacing-sm);justify-content:center;margin-bottom:var(--spacing-lg);flex-wrap:wrap}.activity-choice-buttons{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap;margin-bottom:var(--spacing-md)}.activity-navigation-buttons{display:flex;gap:var(--spacing-md);justify-content:center;margin-bottom:var(--spacing-lg)}.activity-completion-buttons{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.activity-other-activities{display:flex;gap:var(--spacing-lg);justify-content:center;flex-wrap:wrap;margin:var(--spacing-xl) 0}.encouragement-container{visibility:hidden;height:50px}.encouragement-text{font-size:var(--font-size-xl);font-weight:700;color:var(--success-color);text-align:center}.completion-container{text-align:center;padding:var(--spacing-xl);background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:20px;color:var(--bg-white)}.completion-trophy{font-size:80px;margin-bottom:var(--spacing-lg)}.completion-title{margin-bottom:var(--spacing-md)}.completion-message{font-size:var(--font-size-lg);margin-bottom:var(--spacing-xl)}.activity-card-title{font-size:var(--font-size-lg)}.progress-text{text-align:center;color:var(--accent-color);font-weight:500;margin-bottom:var(--spacing-sm)}.progress-counter{color:var(--accent-color);font-size:18px}.word-display-container{text-align:center;margin-bottom:var(--spacing-xl);background:var(--bg-light);border-radius:16px;padding:var(--spacing-lg);border:1px dashed var(--border-color)}.complete-word-hidden{visibility:hidden;height:0;overflow:hidden;margin-bottom:0}.activity-section-wrapper{margin-bottom:var(--spacing-xl)}.loading-container{text-align:center;padding:var(--spacing-xl)}.loading-text{color:var(--text-light)}.min-w-150{min-width:150px}.min-w-180{min-width:180px}.progress-counter-text{color:var(--accent-color);font-size:18px}.comparison-completion-container{padding:0}.comparison-completion-trophy{margin-bottom:var(--spacing-md)}.comparison-completion-title{color:var(--bg-white);margin-bottom:var(--spacing-md);font-size:var(--font-size-xl)}#sentenceEmoji .example-emoji-large{margin-bottom:20px;margin-top:20px;padding:70px}#storyPageEmoji .image-container{padding:0}#storyPageEmoji .example-emoji-large{margin-bottom:20px;margin-top:20px;padding:70px}.reading-section-header{text-align:center;margin:var(--spacing-lg) 0}.reading-sentence-visual{text-align:center;margin-bottom:var(--spacing-md)}.reading-words-section{margin-bottom:var(--spacing-xl)}.reading-words-grid{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap;margin-top:var(--spacing-md)}.reading-word-item{text-align:center}.reading-word-arabic{font-size:var(--font-size-xl);font-weight:600;color:var(--text-dark);margin-bottom:var(--spacing-sm)}.reading-sentence-box{text-align:center;margin-bottom:var(--spacing-xl);padding:var(--spacing-lg);background:var(--bg-light);border-radius:16px;border:1px dashed var(--border-color)}.reading-sentence-text{font-size:var(--font-size-2xl);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-md)}.reading-question-box{margin-bottom:var(--spacing-lg);background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:20px;padding:var(--spacing-lg);text-align:center}.reading-question-header{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);flex-wrap:wrap;text-align:center}.reading-question-title{color:var(--bg-white);margin:0;font-weight:600}.reading-question-options{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.reading-option-btn{min-width:140px;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.reading-option-visual{width:100%;height:120px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}#questionOptions .activity-btn{padding:15px}.reading-option-image{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}.reading-option-emoji{font-size:80px;margin-bottom:10px;width:100%;min-width:140px;height:120px}.reading-option-emoji-hidden{font-size:48px;display:none}.reading-option-text{font-size:var(--font-size-xl)}.reading-question-feedback{text-align:center;margin-top:var(--spacing-lg);font-size:var(--font-size-lg);font-weight:600;min-height:45px;display:flex;align-items:center;justify-content:center}.reading-story-counter{text-align:center;margin-bottom:var(--spacing-sm)}.reading-story-counter-text{color:var(--accent-color);font-size:var(--font-size-lg);font-weight:600}.reading-story-visual{text-align:center;margin-bottom:var(--spacing-md);padding:var(--spacing-lg);background:var(--bg-light);border-radius:16px;border:1px dashed var(--border-color)}.reading-story-completion{text-align:center;margin-bottom:var(--spacing-xl);padding:var(--spacing-xl);background:var(--bg-light);border-radius:var(--border-radius);border-radius:16px;border:1px dashed var(--border-color)}.reading-completion-title{font-size:var(--font-size-2xl);font-weight:700;color:var(--primary-color);margin-bottom:var(--spacing-md)}.reading-story-navigation{display:flex;gap:var(--spacing-md);justify-content:center;margin-top:var(--spacing-xl)}.reading-story-question-feedback{text-align:center;margin-top:var(--spacing-lg);font-size:var(--font-size-lg);font-weight:600;min-height:40px;display:flex;align-items:center;justify-content:center}.reading-completion-screen{text-align:center;padding:var(--spacing-xl);background:linear-gradient(135deg,#667eea 0,#764ba2 100%);border-radius:20px;color:var(--bg-white)}.reading-completion-icon{margin-bottom:var(--spacing-md)}.reading-completion-message{margin-bottom:var(--spacing-md);font-size:var(--font-size-xl)}.reading-completion-description{font-size:var(--font-size-lg);color:var(--accent-color);margin-bottom:var(--spacing-lg)}.reading-completion-actions{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.reading-text-center{text-align:center}.reading-mb-sm{margin-bottom:var(--spacing-sm)}.reading-mb-md{margin-bottom:var(--spacing-md)}.reading-mb-lg{margin-bottom:var(--spacing-lg)}.reading-mb-xl{margin-bottom:var(--spacing-xl)}.container-reading-sentence-visual-and-words{text-align:center;margin-bottom:var(--spacing-md);padding:var(--spacing-lg);background:var(--bg-light);border-radius:16px;border:1px dashed var(--border-color)}.movements-page .modal-letter-display{font-size:120px;font-weight:700;text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-lg);line-height:1}.madd-grid-modal,.movements-grid-modal{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--spacing-md);margin-top:var(--spacing-md)}.movement-item{background:var(--bg-white);border-radius:16px;padding:var(--spacing-md);text-align:center;border:2px solid var(--border-color);transition:var(--transition)}.movement-item:hover{border-color:var(--primary-color);transform:translateY(-3px);box-shadow:var(--shadow-md)}.movement-title{font-size:var(--font-size-base);font-weight:600;color:var(--text-dark);margin-bottom:var(--spacing-sm)}.movement-symbol-large{font-size:64px;font-weight:700;color:var(--primary-color);margin:var(--spacing-lg) 0;line-height:1}@media (max-width:768px){.madd-grid-modal,.movements-grid-modal{grid-template-columns:repeat(2,1fr)}.movements-page .modal-letter-display{font-size:80px}.movement-symbol-large{font-size:48px}}@media (max-width:480px){.madd-grid-modal,.movements-grid-modal{grid-template-columns:1fr}}.movement-example-card{background:var(--bg-light);border-radius:12px;padding:var(--spacing-sm);margin-top:var(--spacing-sm);cursor:pointer;transition:var(--transition);border:2px solid transparent;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xs);border:2px dashed var(--border-color)}.movement-example-card:hover{background:#fff;transform:translateY(-2px);box-shadow:0 4px 12px rgba(102,126,234,.2)}.movement-example-image{width:90px;height:90px;object-fit:cover;border-radius:8px;transition:var(--transition)}.movement-example-card:hover .movement-example-image{transform:scale(1.05)}.movement-example-emoji{font-size:60px;line-height:1;transition:var(--transition);height:75px;margin-top:15px}.movement-example-card:hover .movement-example-emoji{transform:scale(1.1)}.movement-example-word{font-size:var(--font-size-lg);font-weight:600;color:var(--primary-color);text-align:center}.movement-example-card:hover .movement-example-word{color:var(--secondary-color)}button.btn.btn-secondary.btn-sm{min-width:100px}.legal-section{padding:var(--spacing-xl) 0}.legal-container{max-width:900px;margin:0 auto;background:var(--bg-white);padding:var(--spacing-xl);border-radius:20px;box-shadow:var(--shadow-md)}.legal-container h2{color:var(--primary-color);margin-bottom:var(--spacing-md);margin-top:var(--spacing-lg);font-size:var(--font-size-xl);font-weight:700}.legal-container h2:first-of-type{margin-top:0}.legal-container p{margin-bottom:var(--spacing-md);line-height:1.8;color:var(--text-dark)}.legal-container ul{margin-bottom:var(--spacing-lg);line-height:1.8;padding-right:40px}.legal-container ul li{margin-bottom:var(--spacing-xs)}.legal-update-date{margin-top:var(--spacing-xl);color:var(--text-light);font-size:14px}.legal-actions{margin-top:var(--spacing-xl);text-align:center}@media (max-width:768px){.legal-container{padding:var(--spacing-lg)}.legal-container ul{padding-right:20px}}.activity-choice-buttons.sounds-mb-xl .btn-primary{padding:14px 35px}@keyframes rotateIn{0%{transform:rotate(-180deg) scale(.5);opacity:0}100%{transform:rotate(0) scale(1);opacity:1}}.letter-pop{animation:.6s ease-out rotateIn}@keyframes wobble{0%{transform:scale(.5) rotate(0);opacity:0}15%{transform:scale(.8) rotate(-5deg)}30%{transform:scale(1) rotate(3deg);opacity:1}45%{transform:scale(1) rotate(-3deg)}60%{transform:scale(1) rotate(2deg)}75%{transform:scale(1) rotate(-1deg)}100%{transform:scale(1) rotate(0);opacity:1}}.letter-pop2{animation:.8s ease-out wobble}