*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#faf3eb;color:#3e2723;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:2rem 1rem}.app{max-width:480px;width:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.app-header{display:flex;align-items:center;gap:.75rem}.app-mascot{width:52px;height:40px;object-fit:contain}.app-header-text{display:flex;flex-direction:column}h1{font-size:2rem;font-weight:700;color:#4a3228}.app-tagline{font-size:.8rem;color:#9a8478;font-weight:500}.view-switcher{display:flex;gap:0;border-bottom:2px solid #e8ddd4;width:100%}.view-tab{flex:1;padding:.6rem 1rem;font-size:1rem;font-weight:600;background:transparent;color:#9a8478;border:none;border-bottom:3px solid transparent;cursor:pointer;transition:all .15s ease;margin-bottom:-2px}.view-tab:hover{color:#6d5048}.view-tab.active{color:#c0502e;border-bottom-color:#c0502e}.operation-selector{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center}.op-btn{padding:.5rem 1.25rem;font-size:1.1rem;font-weight:600;border:2px solid #ddd0c8;border-radius:8px;background:#fff;color:#6d5048;cursor:pointer;transition:all .15s ease}.op-btn:hover{border-color:#c0502e;color:#a3412a}.op-btn.active{background:#c0502e;border-color:#c0502e;color:#fff}.practice-header{display:flex;align-items:center;gap:1.5rem;width:100%;justify-content:center}.scoreboard{display:flex;align-items:center;gap:.5rem;font-size:1.1rem;color:#6d5048}.score-value{font-weight:700;color:#4a3228}.score-percent{color:#9a8478}.streak-badge{display:flex;align-items:center;gap:.3rem;font-size:1rem;color:#bfab9f;transition:all .2s ease}.streak-badge.active{color:#c0502e}.streak-icon{width:20px;height:20px;object-fit:contain;opacity:.5;transition:opacity .2s ease}.streak-badge.active .streak-icon{opacity:1}.streak-count{font-weight:700;font-size:1.2rem}.streak-label{font-size:.8rem;color:#bfab9f}.streak-best{font-size:.75rem;color:#bfab9f;margin-left:.3rem}.streak-badge.milestone{animation:streak-milestone .8s ease}@keyframes streak-milestone{0%{transform:scale(1)}30%{transform:scale(1.5);filter:brightness(1.3)}60%{transform:scale(1.2)}to{transform:scale(1)}}.timer{width:100%;display:flex;align-items:center;gap:.75rem}.timer-bar-bg{flex:1;height:8px;background:#e8ddd4;border-radius:4px;overflow:hidden}.timer-bar-fill{height:100%;background:#5a8f4e;border-radius:4px;transition:width 1s linear,background .3s ease}.timer-bar-fill.warning{background:#d69e2e}.timer-bar-fill.danger{background:#c0502e}.timer-text{font-size:1rem;font-weight:700;color:#6d5048;min-width:3rem;text-align:right}.timer-text.warning{color:#d69e2e}.timer-text.danger{color:#c0502e}.quiz-area{background:#fff;border-radius:16px;padding:2.5rem 2rem;width:100%;box-shadow:0 1px 3px #4a322814;display:flex;flex-direction:column;align-items:center;gap:1.5rem;position:relative;overflow:hidden;box-sizing:border-box}.problem{text-align:center}.problem-text{font-size:2.5rem;font-weight:700;letter-spacing:.05em;color:#3e2723}.answer-section{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.answer-input{display:flex;width:100%;max-width:300px;box-sizing:border-box}.answer-input input{width:100%;padding:.75rem 1rem;font-size:1.5rem;font-weight:700;border:2px solid #ddd0c8;border-radius:8px;text-align:center;outline:none;transition:border-color .15s ease;caret-color:transparent}.answer-input input:focus{border-color:#c0502e}.numpad{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;width:100%;max-width:240px}.numpad-key{width:60px;height:60px;border-radius:50%;border:2px solid #ddd0c8;background:#fff;font-size:1.3rem;font-weight:600;color:#4a3228;cursor:pointer;transition:all .12s ease;display:flex;align-items:center;justify-content:center;justify-self:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.numpad-key:hover:not(:disabled){border-color:#c0502e;background:#fdf2ec}.numpad-key:active:not(:disabled){transform:scale(.93);background:#f9ddd2}.numpad-key:disabled{opacity:.4;cursor:not-allowed}.numpad-submit{background:#c0502e;border-color:#c0502e;color:#fff;font-size:1.4rem}.numpad-submit:hover:not(:disabled){background:#a3412a;border-color:#a3412a}.numpad-submit:active:not(:disabled){background:#8b3624}.numpad-backspace{font-size:1.4rem;color:#9a8478}.numpad-backspace:hover:not(:disabled){color:#c0502e;border-color:#c0502e;background:#fdf2ec}.feedback{display:flex;flex-direction:column;align-items:center;gap:1rem;font-size:1.3rem;font-weight:600}.feedback.correct{color:#5a8f4e}.feedback.incorrect{color:#c0502e}.feedback-mascot{width:62px;height:48px;object-fit:contain}.next-btn{padding:.6rem 2rem;font-size:1rem;font-weight:600;background:#c0502e;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .15s ease}.next-btn:hover{background:#a3412a}.burst-container{position:absolute;top:50%;left:50%;pointer-events:none;z-index:10}.burst-particle{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--color);animation:burst-particle .5s ease-out forwards}@keyframes burst-particle{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) scale(0);opacity:0}}.practice-controls{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.timed-toggle{padding:.5rem 1.25rem;font-size:.95rem;font-weight:500;background:transparent;color:#9a8478;border:1px solid #ddd0c8;border-radius:8px;cursor:pointer;transition:all .15s ease}.timed-toggle:hover:not(:disabled){background:#f5ebe3;color:#6d5048}.timed-toggle.active{background:#c0502e;border-color:#c0502e;color:#fff}.timed-toggle:disabled{opacity:.5;cursor:not-allowed}.reset-btn{padding:.5rem 1.5rem;font-size:.95rem;font-weight:500;background:transparent;color:#9a8478;border:1px solid #ddd0c8;border-radius:8px;cursor:pointer;transition:all .15s ease}.reset-btn:hover{background:#f5ebe3;color:#6d5048}.session-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#3e272380;display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem}.session-card{background:#fff;border-radius:16px;padding:2rem;max-width:400px;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem;box-shadow:0 4px 24px #3e272326}.session-card h2{font-size:1.5rem;color:#4a3228}.session-celebrate{width:118px;height:100px;object-fit:contain}.session-stat-big{font-size:3rem;font-weight:700;color:#c0502e}.session-stats-row{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}.session-stat{display:flex;flex-direction:column;align-items:center;gap:.15rem}.session-stat-value{font-size:1.2rem;font-weight:700;color:#4a3228}.session-stat-label{font-size:.8rem;color:#9a8478}.session-weak{margin-top:.5rem;text-align:left;width:100%}.session-weak h3{font-size:.95rem;color:#6d5048;margin-bottom:.3rem}.session-weak ul{list-style:none;padding:0}.session-weak li{font-size:1rem;padding:.25rem 0;color:#c0502e;font-weight:600}.session-fun-fact{margin-top:.5rem;padding:.75rem 1rem;background:#f5ebe3;border-radius:10px;font-size:.85rem;color:#6d5048;line-height:1.4;width:100%;text-align:left}.session-fun-fact strong{color:#c0502e}.mastery-view{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.mastery-summary{font-size:.9rem;color:#9a8478}.mastery-grid{display:grid;grid-template-columns:repeat(14,1fr);gap:2px;width:100%}.mastery-header-corner{display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:#6d5048}.mastery-header{display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:600;color:#9a8478}.mastery-cell{aspect-ratio:1;border-radius:3px;transition:transform .1s ease;cursor:default}.mastery-cell:hover:not(.invalid){transform:scale(1.6);z-index:1;position:relative;box-shadow:0 1px 4px #3e272333}.mastery-cell.invalid{background:#faf6f2}.mastery-legend{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:.5rem}.mastery-legend-item{display:flex;align-items:center;gap:.3rem}.mastery-legend-swatch{width:14px;height:14px;border-radius:3px;display:inline-block}.mastery-legend-label{font-size:.75rem;color:#9a8478}.conservation-footer{display:flex;align-items:center;gap:.5rem;margin-top:.5rem;padding:.6rem 1rem;background:#f0e8df;border-radius:10px;width:100%;justify-content:center}.conservation-footer img{width:28px;height:28px;object-fit:contain}.conservation-footer span{font-size:.75rem;color:#9a8478;line-height:1.3}.conservation-footer a{color:#c0502e;text-decoration:none;font-weight:600}.conservation-footer a:hover{text-decoration:underline}