*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;font-size:16px}body{color:#2d3436;background:linear-gradient(135deg,#f5f7fa 0%,#e8ecf1 50%,#fce4ec 100%) fixed;min-height:100dvh;font-family:Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif}#root{min-height:100dvh}button{cursor:pointer}input{font-family:inherit}::selection{color:#fff;background:#a29bfe}.language-switcher{position:relative}.language-switcher.floating{top:calc(env(safe-area-inset-top,0px) + .75rem);right:calc(env(safe-area-inset-right,0px) + .75rem);z-index:100;position:fixed}.language-switcher.inline{z-index:5;display:inline-flex}.settings-btn{cursor:pointer;background:0 0;border:none;border-radius:12px;place-items:center;width:52px;height:52px;font-size:1.5rem;transition:all .2s;display:grid}.settings-btn:hover,.settings-btn.open{transform:rotate(15deg)}.language-menu{background:#fff;border:2px solid #dfe6e9;border-radius:14px;flex-direction:column;gap:.5rem;min-width:140px;padding:.8rem;animation:.2s menuDrop;display:flex;position:absolute;top:calc(100% + .5rem);right:0;box-shadow:0 12px 24px #0000001f}.language-title{color:#636e72;text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:.8rem;font-weight:700}.lang-btn{color:#636e72;cursor:pointer;background:#fff;border:2px solid #dfe6e9;border-radius:10px;padding:.4rem .8rem;font-family:inherit;font-size:.85rem;font-weight:600;transition:all .2s}.lang-btn:hover{color:#6c5ce7;border-color:#6c5ce7}.lang-btn.active{color:#fff;background:#6c5ce7;border-color:#6c5ce7}@keyframes menuDrop{0%{opacity:0;transform:translateY(-6px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.op-options-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:30;background:#2d343647;justify-content:center;align-items:center;padding:1rem;animation:.2s ease-out optionsFadeIn;display:flex;position:fixed;inset:0}.op-options-panel{background:#fff;border-radius:20px;width:min(340px,94vw);padding:1.5rem 1.4rem 1.2rem;animation:.2s ease-out optionsPanelPop;position:relative;box-shadow:0 12px 36px #0000002e}.op-options-close-btn{color:#636e72;background:#fff;border:2px solid #dfe6e9;border-radius:10px;place-items:center;width:32px;height:32px;font-size:1.2rem;line-height:1;display:grid;position:absolute;top:.55rem;right:.55rem}.op-options-close-btn:hover{color:#6c5ce7;border-color:#6c5ce7}.op-options-title{color:#6c5ce7;text-align:center;margin-bottom:1rem;font-size:1.1rem}.op-toggle-option{cursor:pointer;color:#2d3436;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;gap:.6rem;padding:.6rem 0;font-size:1rem;font-weight:600;display:flex}.op-toggle-option input{display:none}.op-toggle-slider{background:#dfe6e9;border-radius:13px;flex-shrink:0;width:48px;height:26px;transition:background .2s;position:relative}.op-toggle-slider:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.op-toggle-option input:checked+.op-toggle-slider{background:#00b894}.op-toggle-option input:checked+.op-toggle-slider:after{transform:translate(22px)}.op-start-btn{color:#fff;cursor:pointer;background:#00b894;border:none;border-radius:14px;width:100%;margin-top:1rem;padding:.8rem;font-family:inherit;font-size:1.1rem;font-weight:700;transition:all .2s;display:block}.op-start-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}@keyframes optionsFadeIn{0%{opacity:0}to{opacity:1}}@keyframes optionsPanelPop{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=600px) and (height<=740px){.op-options-panel{padding:1.1rem 1rem 1rem}.op-start-btn{margin-top:.6rem}}.home-screen{justify-content:center;align-items:center;min-height:100dvh;display:flex;position:relative;overflow:hidden}.floating-numbers{pointer-events:none;z-index:0;position:absolute;inset:0}.floating-num{opacity:.12;font-size:2rem;font-weight:700;animation:12s ease-in-out infinite floatAround;position:absolute}.floating-num-0{font-size:2.5rem;animation-delay:0s;top:8%;left:10%}.floating-num-1{font-size:3rem;animation-delay:-1.5s;top:15%;right:15%}.floating-num-2{animation-delay:-3s;top:30%;left:5%}.floating-num-3{font-size:2.8rem;animation-delay:-4s;top:50%;right:8%}.floating-num-4{animation-delay:-5.5s;top:70%;left:15%}.floating-num-5{font-size:2.2rem;animation-delay:-7s;top:80%;right:20%}.floating-num-6{animation-delay:-8s;bottom:10%;left:30%}.floating-num-7{font-size:1.8rem;animation-delay:-2s;top:20%;left:40%}.floating-num-8{font-size:2.6rem;animation-delay:-9s;top:60%;left:60%}.floating-num-9{animation-delay:-6s;bottom:25%;right:35%}.floating-num-10{font-size:2.4rem;animation-delay:-10s;top:40%;left:70%}.floating-num-11{animation-delay:-11s;bottom:15%;left:55%}@keyframes floatAround{0%,to{transform:translateY(0)rotate(0)}25%{transform:translateY(-20px)rotate(5deg)}50%{transform:translateY(-10px)rotate(-3deg)}75%{transform:translateY(-25px)rotate(4deg)}}.home-content{z-index:1;text-align:center;animation:.6s ease-out fadeInUp;position:relative}.home-title{justify-content:center;align-items:center;gap:.5rem;margin-bottom:.5rem;font-size:3.5rem;display:flex}.title-text{background:linear-gradient(135deg,#6c5ce7,#e17055,#00b894);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.title-math{animation:2s ease-in-out infinite bounce}.title-settings-btn{margin-left:.1rem;animation:3s linear infinite spin}.home-subtitle{color:#636e72;margin-bottom:2.5rem;font-size:1.4rem;animation:.6s ease-out .2s both fadeInUp}.operation-cards{flex-wrap:wrap;justify-content:center;gap:1.5rem;animation:.6s ease-out .4s both fadeInUp;display:flex}.operation-card{border:3px solid var(--card-color);cursor:pointer;background:#fff;border-radius:20px;flex-direction:column;align-items:center;gap:.8rem;min-width:160px;padding:2rem 2.5rem;font-family:inherit;transition:all .3s cubic-bezier(.175,.885,.32,1.275);display:flex;position:relative;overflow:hidden}.operation-card:before{content:"";background:var(--card-color);opacity:0;z-index:0;transition:opacity .3s;position:absolute;inset:0}.operation-card:hover:before,.operation-card.hovered:before{opacity:.1}.operation-card:hover,.operation-card.hovered{transform:translateY(-8px)scale(1.05);box-shadow:0 12px 30px #00000026}.operation-card:active{transform:translateY(-2px)scale(.98)}.card-icon{z-index:1;font-size:3rem;transition:transform .3s;position:relative}.operation-card:hover .card-icon{transform:scale(1.2)rotate(10deg)}.card-label{color:#2d3436;z-index:1;font-size:1.2rem;font-weight:700;position:relative}.card-arrow{color:var(--card-color);z-index:1;opacity:0;font-size:1.5rem;transition:all .3s;position:relative;transform:translate(-10px)}.operation-card:hover .card-arrow{opacity:1;transform:translate(0)}.operation-card.selected{border-width:4px;transform:translateY(-8px)scale(1.05);box-shadow:0 12px 30px #00000026}.operation-card.selected:before{opacity:.12}.options-panel{z-index:4;background:#fff;border-radius:20px;width:min(320px,84vw);padding:1.5rem 2rem;animation:.3s ease-out fadeInUp;position:absolute;bottom:calc(100% + .9rem);left:50%;transform:translate(-50%);box-shadow:0 8px 30px #00000014}.options-title{color:#6c5ce7;text-align:center;margin-bottom:1rem;font-size:1.1rem}.toggle-option{cursor:pointer;color:#2d3436;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:.6rem 0;font-size:1rem;font-weight:600;display:flex}.toggle-option input{display:none}.toggle-slider{background:#dfe6e9;border-radius:13px;flex-shrink:0;width:48px;height:26px;transition:background .2s;position:relative}.toggle-slider:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.toggle-option input:checked+.toggle-slider{background:#00b894}.toggle-option input:checked+.toggle-slider:after{transform:translate(22px)}.start-btn{background:var(--card-color);color:#fff;cursor:pointer;border:none;border-radius:14px;width:100%;margin-top:1rem;padding:.8rem;font-family:inherit;font-size:1.1rem;font-weight:700;transition:all .2s;display:block}.start-btn:hover{transform:translateY(-2px);box-shadow:0 4px 15px #0003}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=600px){.home-title{font-size:2.2rem}.operation-cards{flex-direction:column;align-items:center}.operation-card{width:80%;min-width:unset}.operation-card-wrap{justify-content:center;width:100%;display:flex}.options-panel{width:min(300px,92vw);padding:1.1rem 1.2rem;bottom:calc(100% + .6rem)}}.number-line-wrapper{background:#f8f9fa;border-radius:12px;margin:1rem 0 1.5rem;padding:1rem 1rem .5rem;overflow-x:auto}.number-line{min-width:100%;height:40px;position:relative}.number-line-track{background:#b2bec3;border-radius:2px;height:3px;position:absolute;top:16px;left:0;right:0}.number-line-tick{flex-direction:column;align-items:center;display:flex;position:absolute;top:10px;transform:translate(-50%)}.tick-mark{background:#b2bec3;width:1px;height:12px}.tick-major .tick-mark{background:#636e72;width:2px;height:16px}.tick-label{color:#636e72;margin-top:2px;font-size:.7rem;font-weight:600}.quiz-screen{flex-direction:column;align-items:center;min-height:100dvh;padding:2rem;animation:.4s ease-out fadeInUp;display:flex}.quiz-header{justify-content:space-between;align-items:center;width:100%;max-width:500px;margin-bottom:1rem;display:flex}.back-btn{cursor:pointer;color:#636e72;background:0 0;border:2px solid #dfe6e9;border-radius:12px;padding:.5rem 1rem;font-family:inherit;font-size:1rem;transition:all .2s}.back-btn:hover{color:#6c5ce7;background:#6c5ce70d;border-color:#6c5ce7}.quiz-label{color:#6c5ce7;font-size:1.2rem;font-weight:700}.quiz-counter{color:#636e72;font-size:1.1rem;font-weight:600}.progress-bar{background:#dfe6e9;border-radius:6px;width:100%;max-width:500px;height:12px;margin-bottom:1.5rem;overflow:hidden}.progress-fill{background:linear-gradient(90deg,#6c5ce7,#a29bfe);border-radius:6px;height:100%;transition:width .5s cubic-bezier(.175,.885,.32,1.275)}.score-display{letter-spacing:.2rem;min-height:2rem;margin-bottom:1rem;font-size:1.5rem;animation:.3s ease-out fadeInUp}.question-card{text-align:center;background:#fff;border:3px solid #0000;border-radius:24px;width:100%;max-width:500px;padding:3rem;transition:all .3s;position:relative;box-shadow:0 8px 30px #00000014}.question-card.correct{background:#f0fff4;border-color:#00b894}.question-card.wrong{background:#fff5f5;border-color:#e17055}.particle-container{pointer-events:none;z-index:10;position:absolute;top:50%;left:50%}.particle{font-size:1.8rem;animation:.8s ease-out forwards particleFly;position:absolute}@keyframes particleFly{0%{opacity:1;transform:translate(0)scale(1)}to{transform:translate(var(--px), var(--py)) scale(0);opacity:0}}.question-numbers{flex-wrap:wrap;justify-content:center;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.num{color:#2d3436;font-size:3.5rem;font-weight:800;animation:.3s cubic-bezier(.175,.885,.32,1.275) popIn}.operator{color:#6c5ce7;font-size:2.5rem;font-weight:700}.equals{color:#636e72;font-size:2.5rem;font-weight:700}.answer-slot{color:#b2bec3;font-size:3rem;font-weight:800;animation:1.5s ease-in-out infinite pulse}.answer-form{justify-content:center;align-items:center;gap:1rem;display:flex}.answer-display-row{justify-content:center;margin-bottom:1.5rem;display:flex}.answer-display{color:#2d3436;text-align:center;background:#f8f9fa;border:3px solid #dfe6e9;border-radius:16px;justify-content:center;align-items:center;min-width:120px;min-height:3.4rem;padding:.6rem 1.5rem;font-size:2.2rem;font-weight:800;display:flex}.answer-placeholder{color:#b2bec3;font-weight:600}.numpad{grid-template-columns:repeat(3,1fr);gap:.6rem;max-width:300px;margin:0 auto;display:grid}.numpad-btn{color:#2d3436;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#fff;border:2px solid #dfe6e9;border-radius:14px;padding:.9rem;font-family:inherit;font-size:1.5rem;font-weight:700;transition:all .15s}.numpad-btn:hover:not(:disabled){background:#f0efff;border-color:#a29bfe}.numpad-btn:active:not(:disabled){background:#e8e6ff;transform:scale(.95)}.numpad-btn:disabled{opacity:.4;cursor:not-allowed}.numpad-fn{color:#636e72;font-size:1.3rem}.numpad-4col{grid-template-columns:repeat(4,1fr)}.numpad-submit{color:#fff;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border-color:#0000;grid-column:1/-1;padding:1rem;font-size:1.2rem}.numpad-submit:hover:not(:disabled){background:linear-gradient(135deg,#6c5ce7,#a29bfe);border-color:#0000;transform:translateY(-2px);box-shadow:0 4px 15px #6c5ce766}.numpad-submit:active:not(:disabled){transform:translateY(0)scale(.98)}.answer-input{text-align:center;color:#2d3436;-moz-appearance:textfield;border:3px solid #dfe6e9;border-radius:16px;outline:none;width:120px;padding:.8rem 1rem;font-family:inherit;font-size:2rem;font-weight:700;transition:border-color .2s}.answer-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.answer-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.answer-input:focus{border-color:#6c5ce7;box-shadow:0 0 0 4px #6c5ce726}.submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6c5ce7,#a29bfe);border:none;border-radius:16px;padding:.8rem 1.8rem;font-family:inherit;font-size:1.2rem;font-weight:700;transition:all .2s}.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 15px #6c5ce766}.submit-btn:active:not(:disabled){transform:translateY(0)}.submit-btn:disabled{opacity:.5;cursor:not-allowed}.feedback{margin-top:1.5rem;font-size:1.4rem;font-weight:700;animation:.3s cubic-bezier(.175,.885,.32,1.275) popIn}.feedback-correct{color:#00b894}.feedback-wrong{color:#e17055}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.shake{animation:.4s ease-in-out shakeAnim}@keyframes shakeAnim{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@media (width<=600px){.question-card{padding:2rem 1.5rem}.num{font-size:2.5rem}.numpad{max-width:260px}.numpad-btn{padding:.7rem;font-size:1.3rem}}@media (width<=600px) and (height<=740px){.quiz-screen{padding:1rem}.quiz-header{margin-bottom:.6rem}.progress-bar{margin-bottom:.8rem}.question-card{padding:1.25rem 1rem}.question-numbers{margin-bottom:1rem}.num{font-size:2.1rem}.operator,.equals,.answer-slot{font-size:1.8rem}.answer-display-row{margin-bottom:.8rem}.numpad{max-width:240px}.numpad-btn{padding:.55rem;font-size:1.1rem}.feedback{margin-top:.8rem;font-size:1.1rem}}.result-screen{justify-content:center;align-items:center;min-height:100dvh;padding:2rem;display:flex}.result-card{text-align:center;background:#fff;border-radius:24px;width:100%;max-width:480px;padding:3rem;animation:.6s cubic-bezier(.175,.885,.32,1.275) resultBounceIn;box-shadow:0 8px 40px #0000001a}.result-emoji{font-size:5rem;animation:.8s cubic-bezier(.175,.885,.32,1.275) .2s both resultBounceIn}.result-title{color:#2d3436;margin:.5rem 0;font-size:2.2rem;animation:.5s ease-out .3s both fadeInUp}.result-message{color:#636e72;margin-bottom:2rem;font-size:1.2rem;animation:.5s ease-out .4s both fadeInUp}.result-stats{justify-content:center;gap:2rem;margin-bottom:1.5rem;animation:.5s ease-out .5s both fadeInUp;display:flex}.stat{flex-direction:column;align-items:center;display:flex}.stat-value{color:#6c5ce7;font-size:2rem;font-weight:800}.stat-label{color:#b2bec3;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;font-weight:600}.result-stars{flex-wrap:wrap;justify-content:center;gap:.3rem;margin-bottom:2rem;animation:.5s ease-out .6s both fadeInUp;display:flex}.result-star{font-size:1.5rem;transition:transform .3s}.result-star.earned{animation:.4s cubic-bezier(.175,.885,.32,1.275) both starPop}.result-star:first-child{animation-delay:.7s}.result-star:nth-child(2){animation-delay:.8s}.result-star:nth-child(3){animation-delay:.9s}.result-star:nth-child(4){animation-delay:1s}.result-star:nth-child(5){animation-delay:1.1s}.result-star:nth-child(6){animation-delay:1.2s}.result-star:nth-child(7){animation-delay:1.3s}.result-star:nth-child(8){animation-delay:1.4s}.result-star:nth-child(9){animation-delay:1.5s}.result-star:nth-child(10){animation-delay:1.6s}.result-star.empty{opacity:.3}.result-actions{justify-content:center;gap:1rem;animation:.5s ease-out .8s both fadeInUp;display:flex}.btn{cursor:pointer;border:none;border-radius:16px;padding:1rem 2rem;font-family:inherit;font-size:1.1rem;font-weight:700;transition:all .2s}.btn-primary{color:#fff;background:linear-gradient(135deg,#6c5ce7,#a29bfe)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 15px #6c5ce766}.btn-secondary{color:#2d3436;background:#f0f0f0}.btn-secondary:hover{background:#e0e0e0;transform:translateY(-2px)}@keyframes resultBounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes starPop{0%{transform:scale(0)}80%{transform:scale(1.3)}to{transform:scale(1)}}@media (width<=600px){.result-card{padding:2rem 1.5rem}.result-stats{gap:1rem}.result-actions{flex-direction:column}}@media (width<=600px) and (height<=740px){.result-screen{padding:1rem}.result-card{padding:1.4rem 1rem}.result-emoji{font-size:3.2rem}.result-title{font-size:1.6rem}.result-message,.result-stars{margin-bottom:1rem}.result-stats{gap:.8rem;margin-bottom:1rem}.stat-value{font-size:1.6rem}.btn{padding:.75rem 1rem;font-size:1rem}}.app{min-height:100dvh}
