:root{color-scheme:light;font-family:Comic Sans MS,Chalkboard SE,ui-rounded,system-ui,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);color:#2d2d2d}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem}.header{text-align:center;margin-bottom:1.5rem}.header h1{font-size:2.5rem;color:#fff;text-shadow:3px 3px 0 rgba(0,0,0,.15);letter-spacing:.02em}.header p{color:#ffffffd9;font-size:1.1rem;margin-top:.25rem}.mode-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem}.mode-tab{padding:.6rem 1.5rem;border:3px solid rgba(255,255,255,.5);border-radius:2rem;background:#fff3;color:#fff;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s}.mode-tab:hover{background:#ffffff59;transform:scale(1.05)}.mode-tab.active{background:#fff;color:#764ba2;border-color:#fff}.number-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;max-width:700px;width:100%;margin-bottom:2rem}.number-card{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:1.25rem;border:4px solid rgba(255,255,255,.4);cursor:pointer;transition:all .25s ease;position:relative;overflow:hidden}.number-card:hover{transform:scale(1.08) rotate(-2deg);box-shadow:0 8px 25px #0003;border-color:#fff}.number-card:active{transform:scale(.95)}.number-card.selected{border-color:#fff;box-shadow:0 0 0 4px #fff,0 8px 25px #0003;transform:scale(1.08)}.number-card .number{font-size:3rem;font-weight:800;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,.15);line-height:1}.number-card .word{font-size:.8rem;font-weight:700;color:#ffffffe6;margin-top:.15rem;text-transform:uppercase;letter-spacing:.05em}.detail-panel{background:#fff;border-radius:2rem;padding:2rem;max-width:500px;width:100%;text-align:center;box-shadow:0 10px 40px #0003;animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}@keyframes popIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}.detail-panel .big-number{font-size:6rem;font-weight:900;line-height:1;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.detail-panel .number-word{font-size:1.8rem;font-weight:700;color:#555;margin-bottom:1rem}.detail-panel .emoji-row{font-size:2.5rem;margin:1rem 0;letter-spacing:.3rem;min-height:3.5rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2rem}.detail-panel .count-text{font-size:1.1rem;color:#888;font-weight:600}.close-btn{margin-top:1rem;padding:.5rem 2rem;border:none;border-radius:2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-family:inherit;font-size:1rem;font-weight:700;cursor:pointer;transition:transform .2s}.close-btn:hover{transform:scale(1.05)}.quiz-container{background:#fff;border-radius:2rem;padding:2.5rem;max-width:500px;width:100%;text-align:center;box-shadow:0 10px 40px #0003}.quiz-container h2{font-size:1.4rem;color:#764ba2;margin-bottom:.5rem}.quiz-question{font-size:1.1rem;color:#555;margin-bottom:1.5rem}.quiz-emoji{font-size:3rem;margin:1rem 0;letter-spacing:.25rem;min-height:4rem;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2rem}.quiz-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-bottom:1.5rem}.quiz-option{padding:1rem;border:3px solid #e0e0e0;border-radius:1rem;background:#fafafa;font-family:inherit;font-size:1.6rem;font-weight:800;cursor:pointer;transition:all .2s;color:#333}.quiz-option:hover{border-color:#667eea;background:#f0f0ff;transform:scale(1.03)}.quiz-option.correct{border-color:#4caf50;background:#e8f5e9;color:#2e7d32;animation:bounce .4s}.quiz-option.wrong{border-color:#ef5350;background:#ffebee;color:#c62828;animation:shake .4s}@keyframes bounce{0%,to{transform:scale(1)}50%{transform:scale(1.12)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.quiz-feedback{font-size:1.3rem;font-weight:700;margin-bottom:1rem;min-height:2rem}.quiz-feedback.correct{color:#2e7d32}.quiz-feedback.wrong{color:#c62828}.quiz-score{display:flex;justify-content:center;gap:2rem;margin-bottom:1.5rem}.score-item{text-align:center}.score-item .label{font-size:.8rem;color:#999;text-transform:uppercase;letter-spacing:.1em}.score-item .value{font-size:2rem;font-weight:900}.score-item .value.green{color:#4caf50}.score-item .value.red{color:#ef5350}.score-item .value.blue{color:#667eea}.next-btn{padding:.75rem 2.5rem;border:none;border-radius:2rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;font-family:inherit;font-size:1.1rem;font-weight:700;cursor:pointer;transition:transform .2s}.next-btn:hover{transform:scale(1.05)}.trace-container{background:#fff;border-radius:2rem;padding:2rem;max-width:500px;width:100%;text-align:center;box-shadow:0 10px 40px #0003}.trace-container h2{font-size:1.3rem;color:#764ba2;margin-bottom:.5rem}.trace-instruction{color:#888;font-size:.95rem;margin-bottom:1rem}.trace-number-display{font-size:5rem;font-weight:900;color:#e0e0e0;margin-bottom:.5rem;-webkit-user-select:none;user-select:none;line-height:1}.trace-controls{display:flex;justify-content:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}.trace-btn{padding:.5rem 1.25rem;border:3px solid #e0e0e0;border-radius:1rem;background:#fafafa;font-family:inherit;font-size:1.3rem;font-weight:800;cursor:pointer;transition:all .2s;color:#333}.trace-btn:hover{border-color:#667eea;background:#f0f0ff}.trace-btn.active{border-color:#764ba2;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.trace-canvas-wrapper{position:relative;width:100%;aspect-ratio:1.3;border:3px solid #e0e0e0;border-radius:1rem;overflow:hidden;background:#fafafa;margin-bottom:1rem;touch-action:none}.trace-canvas{width:100%;height:100%;cursor:crosshair}.trace-actions{display:flex;justify-content:center;gap:.75rem}.clear-btn{padding:.5rem 1.5rem;border:3px solid #ef5350;border-radius:2rem;background:transparent;color:#ef5350;font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s}.clear-btn:hover{background:#ef5350;color:#fff}@media(max-width:600px){.number-grid{grid-template-columns:repeat(5,1fr);gap:.5rem}.number-card .number{font-size:2rem}.number-card .word{font-size:.55rem}.header h1{font-size:1.8rem}.detail-panel .big-number{font-size:4rem}.quiz-option{font-size:1.3rem;padding:.75rem}}