@import"https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap";body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--primary-color: #4a5af4;--primary-light: #eef0ff;--primary-dark: #2c3584;--secondary-color: #ff526c;--text-dark: #333333;--text-light: #ffffff;--text-muted: #6c757d;--background-color: #f8f9fa;--card-bg: #ffffff;--success-color: #28a745;--error-color: #dc3545;--border-radius: 8px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .05);--shadow-md: 0 4px 8px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .1);--transition-speed: .3s;--font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--text-dark);line-height:1.6}.app{display:flex;flex-direction:column;min-height:100vh}.App{text-align:center}header{background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:var(--text-light);padding:1rem 1rem .75rem;text-align:center;box-shadow:var(--shadow-md)}.App-header{background-color:#282c34;min-height:20vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff;position:relative}.install-button{background-color:#4caf50;border:none;color:#fff;padding:8px 16px;font-size:.9rem;font-weight:600;cursor:pointer;border-radius:6px;white-space:nowrap;flex-shrink:0;transition:background-color .2s}.install-button:hover{background-color:#45a049}header h1{font-size:2.5rem;margin-bottom:.5rem;font-weight:700;display:flex;align-items:center;gap:.5rem}.russia-flag{width:1.2em;height:auto;border-radius:3px;box-shadow:0 1px 4px #0000004d;flex-shrink:0}main{flex:1;max-width:1200px;width:100%;margin:0 auto;padding:20px;scroll-margin-top:80px;scroll-padding-top:80px}footer{background-color:var(--primary-dark);color:var(--text-light);text-align:center;padding:1.2rem;margin-top:2rem}.header-content{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;position:relative}.menu-toggle{display:none;background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer;transition:transform .3s;z-index:1100;padding:8px}.menu-toggle:hover{transform:scale(1.1)}.menu-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:900;animation:fadeIn .3s ease}.navigation{margin-bottom:1rem}.navigation ul{display:flex;justify-content:center;list-style-type:none;flex-wrap:wrap}.navigation li{padding:.8rem 1.5rem;cursor:pointer;transition:background-color var(--transition-speed);font-weight:500;position:relative;z-index:1}.navigation li:hover{background-color:#fff3}.navigation li.active{background-color:#ffffff4d;font-weight:700}.navigation li.active:after{content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background-color:var(--secondary-color)}.section{margin-bottom:3rem;animation:fadeIn .5s ease-in;scroll-margin-top:80px;min-height:calc(100vh - 200px)}.section h2{color:var(--primary-dark);margin-bottom:1.5rem;font-size:2rem;font-weight:700;position:relative;padding-bottom:.8rem;text-align:center;scroll-margin-top:80px}.section h2:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:80px;height:4px;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));border-radius:2px}.alphabet-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}.alphabet-card{background-color:var(--card-bg);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform var(--transition-speed),box-shadow var(--transition-speed);display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.05);position:relative}.alphabet-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.letter-container{position:relative;display:flex;flex-direction:column;align-items:center;margin-bottom:1rem;width:100%}.letter-header{display:flex;align-items:center;justify-content:center;position:relative;width:100%}.letter-pair{display:flex;flex-direction:row;align-items:center;gap:8px;position:relative}.letter-uppercase,.letter-lowercase{font-size:2.8rem;color:var(--primary-color);font-weight:700;font-family:var(--font-family)}.letter-lowercase{font-size:2.4rem}.letter-underline{width:80px;height:4px;margin:.5rem auto;background:linear-gradient(to right,var(--primary-color),var(--secondary-color));border-radius:2px;position:relative}.pronunciation-button-wrapper{position:absolute;right:30px;top:50%;transform:translateY(-70%)}.alphabet-card .letter{font-size:2.8rem;color:var(--primary-color);font-weight:700;margin-right:.5rem}.alphabet-card .pronunciation{color:var(--text-dark);margin-bottom:.8rem;font-weight:500}.alphabet-card .pronunciation strong{margin-right:4px}.alphabet-card .pronunciation-text{font-weight:400}.alphabet-card .example{font-style:italic;color:var(--text-muted);padding-top:.5rem;border-top:1px solid rgba(0,0,0,.05);display:flex;align-items:center;flex-wrap:wrap}.alphabet-card .example strong,.alphabet-card .example-word{margin-right:4px}.alphabet-card .example-translation{color:var(--text-muted)}.letter-pronunciation{margin-left:.5rem}.example-pronunciation{margin-left:5px}.phrases-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}.phrase-card{background-color:var(--card-bg);border-radius:var(--border-radius);padding:1.5rem;box-shadow:var(--shadow-sm);transition:transform var(--transition-speed),box-shadow var(--transition-speed);min-height:150px;display:flex;flex-direction:column;border:1px solid rgba(0,0,0,.05);position:relative;overflow:hidden}.phrase-card:before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background-color:var(--primary-color);opacity:.7}.phrase-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}.phrase-header{display:flex;align-items:center;margin-bottom:1rem}.phrase-card .russian{font-size:1.5rem;color:var(--primary-dark);font-weight:700;flex:1}.phrase-content{cursor:pointer;flex:1}.phrase-card .english{color:var(--text-dark);margin-bottom:.8rem;font-weight:500}.phrase-card .pronunciation-wrap{display:flex;align-items:center;margin-bottom:.8rem}.phrase-card .pronunciation{flex:1}.phrase-card .hint{color:var(--primary-color);margin-top:auto;text-align:center;background-color:var(--primary-light);padding:.6rem;border-radius:var(--border-radius);display:flex;justify-content:center;align-items:center;font-size:1.2rem;opacity:.6;transition:opacity .2s}.phrase-card .hint:hover{opacity:1}.phrase-pronunciation{margin-left:.5rem}.quiz-section{max-width:600px;margin:0 auto}.quiz-stats{margin-bottom:1.5rem;text-align:center;display:flex;flex-direction:column;gap:8px}.quiz-stats>div:first-child{font-weight:700;color:var(--primary-dark);font-size:1.2rem}.quiz-progress-text{font-size:.9rem;color:var(--text-muted);background-color:var(--primary-light);border-radius:12px;padding:4px 10px;display:inline-block;margin:0 auto}.quiz-card{background-color:var(--card-bg);border-radius:var(--border-radius);padding:2rem;box-shadow:var(--shadow-md);border:1px solid rgba(0,0,0,.05);scroll-margin-top:80px}.quiz-card h3{color:var(--primary-dark);margin-bottom:1rem;font-size:1.2rem;text-transform:uppercase;letter-spacing:1px}.quiz-prompt{font-size:2rem;color:var(--primary-color);margin:1.5rem 0;font-weight:700;text-align:center;letter-spacing:.5px}.quiz-input{width:100%;padding:1rem;font-size:1.2rem;border:2px solid var(--primary-light);border-radius:var(--border-radius);margin:1.5rem 0;transition:border-color .3s ease,box-shadow .3s ease;padding-right:45px}.quiz-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px #4a5af426;outline:none}.quiz-buttons{display:flex;gap:1rem;margin:1.5rem 0}.quiz-buttons button{flex:1;padding:1rem 1.5rem;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:background-color var(--transition-speed),transform var(--transition-speed)}.check-button{background-color:var(--primary-color);color:var(--text-light)}.check-button:hover{background-color:var(--primary-dark);transform:translateY(-2px)}.next-button{background-color:var(--secondary-color);color:var(--text-light)}.next-button:hover{background-color:#e6405a;transform:translateY(-2px)}.quiz-result{margin:1.2rem 0;padding:1rem;border-radius:var(--border-radius);font-weight:600;text-align:center;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);transition:all .3s ease;animation:slideIn .4s ease}.quiz-result.correct{background-color:#28a7451a;color:var(--success-color);border:1px solid rgba(40,167,69,.2)}.quiz-result.incorrect{background-color:#dc35451a;color:var(--error-color);border:1px solid rgba(220,53,69,.2)}.correct-answer-container,.incorrect-answer-container{display:flex;align-items:center;justify-content:center;gap:10px}.result-icon{font-size:1.5rem}.correct-icon{color:var(--success-color);animation:bounceIn .6s ease}.incorrect-icon{color:var(--error-color)}@keyframes bounceIn{0%{transform:scale(0)}50%{transform:scale(1.2)}70%{transform:scale(.9)}to{transform:scale(1)}}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.pronunciation-hint{margin-top:1.2rem;color:var(--text-muted);font-style:italic;text-align:center;background-color:var(--primary-light);padding:.7rem;border-radius:var(--border-radius)}.spelling-note{font-size:.9rem;margin-top:.5rem;color:var(--primary-dark);padding:.2rem 0}.diff-char{color:var(--secondary-color);font-weight:700;text-decoration:underline}.button-hint{font-size:.8rem;opacity:.8;margin-left:8px;font-weight:400}.pronunciation-button{background-color:var(--primary-light);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-speed);color:var(--primary-color);position:relative;box-shadow:var(--shadow-sm)}.pronunciation-button:hover{background-color:var(--primary-color);color:var(--text-light);transform:scale(1.05);box-shadow:var(--shadow-md)}.pronunciation-button:active{transform:scale(.95)}.pronunciation-button.playing{background-color:var(--secondary-color);color:var(--text-light);animation:pulse 1s infinite}.pronunciation-button:disabled{opacity:.7;cursor:not-allowed}.pronunciation-button.needs-voice{background-color:#fff3cd;border:1px solid #ffeeba;color:#856404}.pronunciation-button.needs-voice:hover{background-color:#ffe8a1}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}.russian-keyboard{margin-top:1rem;margin-bottom:1.5rem;background-color:#f0f2f5;border-radius:var(--border-radius);padding:10px;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.1)}.keyboard-guide{text-align:center;margin-bottom:10px;font-size:14px;color:var(--text-muted);padding:5px;background-color:#4a5af41a;border-radius:4px}.keyboard-row{display:flex;justify-content:center;margin-bottom:8px;flex-wrap:wrap}.keyboard-row:last-child{margin-bottom:0}.keyboard-key{min-width:40px;height:48px;margin:3px;border:1px solid #ccc;border-radius:4px;background-color:#fff;font-size:16px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s;color:var(--primary-dark);padding:4px 8px;position:relative}.key-ru{font-size:18px;font-weight:700;color:var(--primary-color)}.key-en{font-size:10px;color:var(--text-muted);margin-top:2px}.keyboard-key:hover{background-color:var(--primary-light);border-color:var(--primary-color);transform:translateY(-2px)}.keyboard-key:active{transform:scale(.95);background-color:var(--primary-color);color:#fff}.keyboard-key:active .key-ru,.keyboard-key:active .key-en{color:#fff}.space-key{min-width:120px;flex-grow:1;max-width:200px;font-size:14px}.backspace-key{min-width:60px;font-size:20px}.clear-key{min-width:60px;background-color:#f8d7da;color:#721c24;border-color:#f5c6cb}.clear-key:hover{background-color:#f5c6cb;color:#721c24}.special-chars-row{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(0,0,0,.1)}.special-key{background-color:var(--primary-light)}.vowel-key{background-color:#e8f4ff;font-weight:700}.special-key{font-weight:700;background-color:#e9ecef}.soft-sign-key{background-color:#ffefd5;border:2px solid var(--primary-color)}.soft-sign-key:hover{background-color:#ffe0b2}.input-container{position:relative;display:flex;align-items:center}.keyboard-toggle-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--primary-color);font-size:20px;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:color .2s,transform .2s}.keyboard-toggle-button:hover{color:var(--primary-dark);transform:translateY(-50%) scale(1.1)}.keyboard-toggle-button.active{color:var(--secondary-color)}.virtual-keyboard-container{animation:fadeIn .3s ease-in}.answer-tips{color:var(--text-dark);margin:10px 0;text-align:center;line-height:1.5}.answer-tips small{font-size:.9rem}.transliteration-instructions{background-color:var(--primary-light);border-radius:var(--border-radius);padding:10px;margin:12px 0;border-left:4px solid var(--primary-color)}.instruction-highlight{background-color:#e9ecef;border-radius:4px;padding:2px 6px;font-weight:700;color:var(--primary-dark)}.examples{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px;gap:4px}.example-text{font-family:monospace;background-color:#fff;padding:2px 6px;border-radius:4px;color:#333;font-weight:500;border:1px solid #ddd}.key-badge{background-color:#e9ecef;border:1px solid #ced4da;border-radius:4px;padding:2px 8px;font-size:12px;color:#495057;font-weight:600;text-transform:uppercase;box-shadow:0 1px 2px #0000000d}.example-result{font-family:monospace;background-color:#e8f5e9;padding:2px 6px;border-radius:4px;color:#2e7d32;font-weight:700;border:1px solid #c8e6c9}.example-divider{color:#adb5bd;margin:0 8px}#transliteration-notification{position:absolute;bottom:-40px;left:50%;transform:translate(-50%);background-color:#4a5af4e6;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;font-weight:500;opacity:0;transition:opacity .3s ease,bottom .3s ease;pointer-events:none;white-space:nowrap;box-shadow:0 2px 8px #0003;z-index:10}#transliteration-notification.has-content{animation:fadeInOut 3s ease}@keyframes fadeInOut{0%{opacity:0;bottom:-40px}20%{opacity:1;bottom:-30px}80%{opacity:1;bottom:-30px}to{opacity:0;bottom:-40px}}.loading-section{text-align:center;padding:2rem;max-width:500px;margin:0 auto}.loading-message{margin:1rem 0;color:var(--text-muted)}.loading-spinner{display:inline-block;width:50px;height:50px;border:3px solid rgba(74,90,244,.2);border-radius:50%;border-top-color:var(--primary-color);animation:spin 1s ease-in-out infinite;margin:20px auto}@keyframes spin{to{transform:rotate(360deg)}}.pulse-animation{animation:pulse-icon 1.5s infinite}@keyframes pulse-icon{0%{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.7}to{transform:scale(1);opacity:1}}.voice-prompt-banner{background-color:#fff3cd;color:#856404;padding:10px 20px;margin:0;display:flex;align-items:center;gap:15px;border-bottom:1px solid #ffeeba;animation:slideDown .3s ease-out;position:relative}.voice-prompt-icon{font-size:24px;color:#856404;flex-shrink:0}.voice-prompt-text{flex:1;font-size:14px;line-height:1.4}.voice-prompt-text p{margin:4px 0}.voice-instructions{font-style:italic;font-size:13px}.voice-prompt-close{background:none;border:none;color:#856404;cursor:pointer;font-size:18px;padding:4px;display:flex;align-items:center;justify-content:center;transition:color .2s}.voice-prompt-close:hover{color:#533f03}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.margin-left{margin-left:12px}.bottom-navigation{display:none;position:fixed;bottom:0;left:0;right:0;background-color:var(--card-bg);box-shadow:0 -2px 10px #0000001a;z-index:1000;padding:8px 0;border-top:1px solid rgba(0,0,0,.05)}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:8px 4px;background:none;border:none;color:var(--text-muted);transition:color .2s;cursor:pointer}.bottom-nav-item.active{color:var(--primary-color)}.bottom-nav-icon{font-size:1.2rem;margin-bottom:4px}.bottom-nav-label{font-size:.7rem;font-weight:500;white-space:nowrap}.nav-click-effect{animation:navClick .2s ease}@keyframes navClick{0%{transform:scale(1)}50%{transform:scale(.92)}to{transform:scale(1)}}@media(max-width:768px){.header-content{flex-direction:column;gap:.3rem;align-items:center}header h1{font-size:1.6rem;margin-bottom:0}header{padding:.65rem 1rem .5rem}.install-button{font-size:.8rem;padding:5px 12px}.menu-toggle,.navigation{display:none}.bottom-navigation{display:flex}main{padding-bottom:100px}.quiz-section{margin-top:0;padding-top:0}.quiz-section h2{font-size:1.6rem;margin-bottom:1rem;padding-bottom:.6rem}.quiz-card{padding:1rem;margin-bottom:1.5rem}.quiz-prompt{font-size:1.5rem;margin:.8rem 0}.quiz-input{padding:.8rem;margin:.8rem 0;font-size:1.1rem}.quiz-buttons button{padding:.7rem 1rem}.virtual-keyboard-container{max-height:250px;overflow-y:auto}.quiz-result{padding:.8rem;margin:.8rem 0}.section{scroll-margin-top:70px;min-height:calc(100vh - 180px)}header h1{margin-bottom:.5rem;font-size:2rem}header{padding:1rem .5rem}}.section h2{scroll-margin-top:70px}.quiz-section,.quiz-card{scroll-margin-top:80px}html{scroll-behavior:smooth}