*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f5f7fa,#c3cfe2);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#root,.App{display:flex;flex-direction:column;min-height:100vh}.App{background:linear-gradient(135deg,#667eea,#764ba2);padding:10px;text-align:center}.app-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-radius:15px;box-shadow:0 4px 15px #0000001a;margin-bottom:15px;padding:15px 20px}.header-content{flex-wrap:wrap;gap:20px}.header-content,.header-left{align-items:center;display:flex;justify-content:center}.logo-link{align-items:center;display:flex;text-decoration:none;transition:transform .3s ease}.logo-link:hover{transform:scale(1.05)}.header-logo{border-radius:50%;height:50px;margin-right:15px;object-fit:contain;width:auto}.text-logo{align-items:center;display:flex;flex-direction:column;margin-right:15px}.text-logo-main{color:#4caf50;font-size:18px;font-weight:700;line-height:1}.text-logo-sub{color:#666;font-size:12px;line-height:1}.header-text{flex:1 1;text-align:center}.header-text h1{color:#333;font-size:24px;font-weight:700;margin:0 0 5px}.header-text p{color:#666;font-size:14px;line-height:1.3;margin:0}.app-main{display:flex;flex:1 1;flex-direction:column;gap:15px;margin:0 auto;max-width:1200px;width:100%}@media (max-width:768px){.App{padding:5px}.app-header{margin-bottom:10px;padding:10px 15px}.header-content{flex-direction:column;gap:10px}.header-content,.header-text{text-align:center}.header-text h1{font-size:20px}.header-text p{font-size:13px}.app-main{gap:10px}}@media (max-width:480px){.header-text h1{font-size:18px}.header-text p{font-size:12px}.header-logo{height:35px}}.abacus-container{align-items:center;display:flex;flex-direction:column;gap:15px;margin:0 auto;max-width:600px;width:100%}.abacus-frame{background:linear-gradient(145deg,#e8e8e8,#d5d5d5);border:2px solid #b0b0b0;border-radius:8px;box-shadow:0 8px 20px #0003,inset 0 1px 3px #ffffff4d,inset 0 -1px 3px #0000001a;min-height:140px;overflow:hidden;padding:15px 25px;position:relative;width:100%}.abacus-frame:before{background:linear-gradient(90deg,#0000,#ffffff0d 50%,#0000);bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.abacus-rods{align-items:stretch;gap:12px;min-height:110px;padding:10px 0}.abacus-controls,.abacus-rods{display:flex;justify-content:center}.abacus-controls{margin-top:12px}.reset-button{background:linear-gradient(135deg,#dc3545,#c82333);border:none;border-radius:18px;box-shadow:0 3px 10px #dc35454d;color:#fff;cursor:pointer;font-size:13px;font-weight:600;padding:8px 16px;transition:all .3s ease}.reset-button:hover{box-shadow:0 5px 15px #dc354566;transform:translateY(-2px)}.reset-button:active{transform:translateY(0)}@media (max-width:768px){.abacus-container{margin:0 5px;max-width:100%}.abacus-frame{border-radius:6px;min-height:100px;padding:10px 15px}.abacus-rods{gap:6px;min-height:80px;padding:6px 0}.reset-button{font-size:12px;padding:6px 12px}}@media (max-width:480px){.abacus-frame{min-height:90px;padding:8px 12px}.abacus-rods{gap:5px;min-height:70px;padding:5px 0}.reset-button{font-size:11px;padding:5px 10px}}.rod-container{gap:8px;min-width:50px}.rod,.rod-container{align-items:center;display:flex;flex-direction:column}.rod{background:linear-gradient(145deg,#e0e0e0,#d0d0d0);border:2px solid #b0b0b0;border-radius:6px;box-shadow:0 3px 6px #00000026,inset 0 1px 2px #ffffff4d;min-height:140px;padding:8px 4px;position:relative}.rod:before{background:linear-gradient(90deg,#0000,#ffffff1a 50%,#0000);border-radius:4px;bottom:0;content:"";left:0;pointer-events:none;position:absolute;right:0;top:0}.upper-section{justify-content:center;margin-bottom:6px;min-height:40px}.lower-section,.upper-section{align-items:center;display:flex;flex-direction:column;gap:3px;padding:10px 0}.lower-section{justify-content:space-between;min-height:80px}.divider{background:linear-gradient(90deg,grey,#a0a0a0,grey);border-radius:1px;box-shadow:0 1px 2px #0003;height:2px;margin:6px 0;position:relative;width:100%}.divider:before{background:linear-gradient(90deg,#0000,#ffffff4d 50%,#0000);border-radius:1px;bottom:0;content:"";left:0;position:absolute;right:0;top:0}.rod-number{background:#ffffffe6;border:1px solid silver;border-radius:10px;box-shadow:0 1px 3px #0000001a;color:#606060;font-size:.7rem;font-weight:700;min-width:30px;padding:2px 6px;text-align:center}@media (max-width:768px){.rod-container{min-width:40px}.rod{min-height:100px;padding:5px 2px}.upper-section{min-height:30px}.lower-section{min-height:60px}.rod-number{font-size:.6rem;padding:1px 4px}}@media (max-width:480px){.rod-container{min-width:35px}.rod{min-height:80px;padding:4px 2px}.upper-section{min-height:25px}.lower-section{min-height:50px}}.bead{-webkit-tap-highlight-color:transparent;cursor:pointer;height:28px;margin:4px 0;-webkit-user-select:none;user-select:none;width:38px}.bead,.bead-inner{clip-path:polygon(20% 0,80% 0,100% 50%,80% 100%,20% 100%,0 50%);position:relative;transition:all .4s cubic-bezier(.4,0,.2,1)}.bead-inner{height:100%;overflow:hidden;width:100%}.bead-highlight{background:radial-gradient(ellipse,#fffc 0,#ffffff4d 70%,#0000 100%);border-radius:50%;height:30%;left:25%;pointer-events:none;position:absolute;top:15%;width:50%}.bead-string{background:linear-gradient(180deg,#8b4513,#654321);box-shadow:0 0 1px #0000004d;height:50px;left:50%;position:absolute;top:50%;transform:translateX(-50%);width:1px;z-index:-1}.bead.upper{background:linear-gradient(145deg,#8b4513,sienna);border:1px solid #654321;box-shadow:0 2px 4px #0000004d,inset 0 1px 2px #fff3,inset 0 -1px 2px #0003;transform:translateY(0)}.bead.upper.active{background:linear-gradient(145deg,#d2691e,peru);border-color:#8b4513;box-shadow:0 3px 6px #d2691e66,inset 0 1px 2px #ffffff4d,inset 0 -1px 2px #0000001a;transform:translateY(20px)}.bead.upper.inactive{background:linear-gradient(145deg,#654321,#8b4513);border-color:#654321;box-shadow:0 1px 2px #0003,inset 0 1px 1px #ffffff1a,inset 0 -1px 1px #0000004d;transform:translateY(0)}.bead.lower{background:linear-gradient(145deg,#8b4513,sienna);border:1px solid #654321;box-shadow:0 2px 3px #00000040,inset 0 1px 2px #ffffff26,inset 0 -1px 2px #00000040;transform:translateY(0)}.bead.lower.active{background:linear-gradient(145deg,#d2691e,peru);border-color:#8b4513;box-shadow:0 3px 5px #d2691e59,inset 0 1px 2px #ffffff40,inset 0 -1px 2px #00000026;transform:translateY(-20px)}.bead.lower.inactive{background:linear-gradient(145deg,#654321,#8b4513);border-color:#654321;box-shadow:0 1px 2px #00000026,inset 0 1px 1px #ffffff1a,inset 0 -1px 1px #00000040;transform:translateY(0)}.bead.lower:first-child.active{animation:lowerBeadActivate .4s cubic-bezier(.4,0,.2,1)}.bead.lower:nth-child(2).active{animation:lowerBeadActivate .4s cubic-bezier(.4,0,.2,1) .05s}.bead.lower:nth-child(3).active{animation:lowerBeadActivate .4s cubic-bezier(.4,0,.2,1) .1s}.bead.lower:nth-child(4).active{animation:lowerBeadActivate .4s cubic-bezier(.4,0,.2,1) .15s}.bead.lower:first-child.inactive{animation:lowerBeadDeactivate .4s cubic-bezier(.4,0,.2,1)}.bead.lower:nth-child(2).inactive{animation:lowerBeadDeactivate .4s cubic-bezier(.4,0,.2,1) .05s}.bead.lower:nth-child(3).inactive{animation:lowerBeadDeactivate .4s cubic-bezier(.4,0,.2,1) .1s}.bead.lower:nth-child(4).inactive{animation:lowerBeadDeactivate .4s cubic-bezier(.4,0,.2,1) .15s}.bead:hover{box-shadow:0 3px 6px #0006,inset 0 1px 2px #ffffff40,inset 0 -1px 2px #00000026;transform:scale(1.1)}.bead.upper:hover{box-shadow:0 4px 8px #d2691e80,inset 0 1px 2px #ffffff59,inset 0 -1px 2px #0000001a}.bead.lower:hover{box-shadow:0 3px 6px #d2691e73,inset 0 1px 2px #ffffff4d,inset 0 -1px 2px #0000001a}.bead.active:hover{transform:scale(1.15)}.bead.upper.active:hover{box-shadow:0 4px 8px #d2691e99,inset 0 1px 2px #fff6,inset 0 -1px 2px #0000000d;transform:translateY(20px) scale(1.15)}.bead.lower.active:hover{box-shadow:0 3px 6px #d2691e8c,inset 0 1px 2px #ffffff59,inset 0 -1px 2px #0000000d;transform:translateY(-20px) scale(1.15)}.bead:focus{outline:2px solid #d2691e;outline-offset:2px}@media (max-width:768px){.bead{-webkit-tap-highlight-color:transparent;height:34px;margin:5px 0;touch-action:manipulation;width:44px}.bead-highlight{height:30%;width:45%}.bead-string{height:55px}.bead.upper.active{transform:translateY(18px)}.bead.lower.active{transform:translateY(-18px)}.bead:hover{transform:none}.bead.upper.active:hover{transform:translateY(18px)}.bead.lower.active:hover{transform:translateY(-18px)}}@media (max-width:480px){.bead{-webkit-tap-highlight-color:transparent;height:30px;margin:4px 0;touch-action:manipulation;width:40px}.bead-highlight{height:25%;width:40%}.bead-string{height:50px}.bead.upper.active{transform:translateY(16px)}.bead.lower.active{transform:translateY(-16px)}.bead:hover{transform:none}.bead.upper.active:hover{transform:translateY(16px)}.bead.lower.active:hover{transform:translateY(-16px)}}@keyframes beadActivate{0%{transform:translateY(0)}50%{transform:translateY(10px)}to{transform:translateY(20px)}}@keyframes beadDeactivate{0%{transform:translateY(20px)}50%{transform:translateY(10px)}to{transform:translateY(0)}}@keyframes lowerBeadActivate{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(-20px)}}@keyframes lowerBeadDeactivate{0%{transform:translateY(-20px)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.bead.upper.active{animation:beadActivate .4s cubic-bezier(.4,0,.2,1)}.bead.upper.inactive{animation:beadDeactivate .4s cubic-bezier(.4,0,.2,1)}.display-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:2px solid #4caf50;border-radius:12px;box-shadow:0 4px 15px #0000001a;margin:0 auto;max-width:600px;padding:12px 20px;position:relative;width:100%}.value-display{align-items:center;display:flex;flex-wrap:wrap;gap:15px;justify-content:center}.value-label{color:#333;font-size:18px;font-weight:700;white-space:nowrap}.value-number{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#4caf50,#45a049);-webkit-background-clip:text;background-clip:text;color:#4caf50;font-size:32px;font-weight:700;min-width:80px;text-align:center;text-shadow:0 2px 4px #0000001a}.sound-toggle{align-items:center;background:none;border:none;border-radius:50%;cursor:pointer;display:flex;font-size:20px;height:35px;justify-content:center;padding:5px;position:absolute;right:8px;top:8px;transition:all .3s ease;width:35px}.sound-toggle.enabled{background:#4caf501a;color:#4caf50}.sound-toggle.disabled{background:#9e9e9e1a;color:#9e9e9e}.sound-toggle:hover{background:#4caf5033;transform:scale(1.1)}.sound-toggle.disabled:hover{background:#9e9e9e33}@media (max-width:768px){.display-container{margin:0 5px;padding:10px 15px}.value-display{gap:10px}.value-label{font-size:16px}.value-number{font-size:28px;min-width:60px}}@media (max-width:480px){.display-container{padding:8px 12px}.value-label{font-size:14px}.value-number{font-size:24px;min-width:50px}}.mode-toggle-container{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border:2px solid #4caf50;border-radius:12px;box-shadow:0 4px 15px #0000001a;margin:0 auto;max-width:600px;padding:15px 20px;width:100%}.mode-toggle-buttons{display:flex;flex-wrap:wrap;gap:30px;justify-content:center}.mode-button{background:#fff;border:2px solid #4caf50;border-radius:8px;box-shadow:0 2px 4px #0000001a;color:#4caf50;cursor:pointer;font-size:16px;font-weight:700;min-width:120px;padding:12px 20px;text-align:center;transition:all .3s ease}.mode-button:hover{box-shadow:0 4px 8px #0003;transform:translateY(-2px)}.mode-button.active{background:linear-gradient(135deg,#4caf50,#45a049);border-color:#45a049;box-shadow:0 4px 8px #4caf504d;color:#fff}.mode-button:active{transform:translateY(0)}@media (max-width:768px){.mode-toggle-container{margin:0 5px;padding:12px 15px}.mode-toggle-buttons{gap:15px}.mode-button{font-size:14px;min-width:100px;padding:10px 16px}}@media (max-width:480px){.mode-toggle-container{padding:10px 12px}.mode-button{font-size:13px;min-width:80px;padding:8px 12px}}.practice-mode-container{background:#fff;border:2px solid #4caf50;border-radius:12px;box-shadow:0 4px 8px #0000001a;margin:20px auto;max-width:600px;padding:20px}.practice-header{align-items:center;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;margin-bottom:20px;padding-bottom:15px}.practice-level-select{align-items:center;display:flex;gap:10px}.practice-level-select label{color:#333;font-size:16px;font-weight:700}.practice-level-select select{background:#fff;border:2px solid #4caf50;border-radius:6px;color:#333;cursor:pointer;font-size:14px;padding:8px 12px;transition:all .3s ease}.practice-level-select select:hover{border-color:#45a049;box-shadow:0 2px 4px #4caf5033}.sound-toggle-btn{align-items:center;background:#fff;border:2px solid #4caf50;border-radius:50%;box-shadow:0 2px 4px #0000001a;cursor:pointer;display:flex;font-size:20px;height:50px;justify-content:center;transition:all .3s ease;width:50px}.sound-toggle-btn:hover{box-shadow:0 4px 8px #0003;transform:scale(1.1)}.sound-toggle-btn.sound-on{background:linear-gradient(135deg,#4caf50,#45a049);border-color:#4caf50;color:#fff}.sound-toggle-btn.sound-off{background:linear-gradient(135deg,#f44336,#d32f2f);border-color:#f44336;color:#fff}.sound-toggle-btn:active{transform:scale(.95)}.practice-start{padding:20px;text-align:center}.generate-problem-btn{background:linear-gradient(135deg,#4caf50,#45a049);border:none;border-radius:8px;box-shadow:0 4px 8px #4caf504d;color:#fff;cursor:pointer;font-size:18px;font-weight:700;padding:15px 30px;transition:all .3s ease}.generate-problem-btn:hover{box-shadow:0 6px 12px #4caf5066;transform:translateY(-2px)}.practice-problem{display:flex;flex-direction:column;gap:15px}.problem-display{text-align:center}.problem-display h3{color:#333;font-size:20px;font-weight:700;margin:0 0 10px}.problem-question{background:#4caf501a;border:2px solid #4caf5033;border-radius:8px;color:#4caf50;font-size:24px;font-weight:700;margin:10px 0;padding:15px}.timer-container{background:#ffc1071a;border:1px solid #ffc1074d;border-radius:6px;margin:10px 0;padding:10px}.timer-label{color:#333;font-weight:700;margin-right:8px}.timer{color:#ff9800;font-size:18px;font-weight:700}.timer-warning{animation:pulse 1s infinite;color:#f44336}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.problem-instruction{color:#666;font-size:14px;line-height:1.4;margin:10px 0}.problem-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}.check-answer-btn,.skip-problem-btn{border:none;border-radius:6px;cursor:pointer;font-size:16px;font-weight:700;min-width:120px;padding:12px 20px;transition:all .3s ease}.check-answer-btn{background:linear-gradient(135deg,#4caf50,#45a049);box-shadow:0 4px 8px #4caf504d;color:#fff}.check-answer-btn:hover{box-shadow:0 6px 12px #4caf5066;transform:translateY(-2px)}.skip-problem-btn{background:linear-gradient(135deg,#ff9800,#f57c00);box-shadow:0 4px 8px #ff98004d;color:#fff}.skip-problem-btn:hover{box-shadow:0 6px 12px #ff980066;transform:translateY(-2px)}.result-display{border-radius:8px;margin:10px 0;padding:15px;text-align:center}.result-message{align-items:center;border-radius:8px;display:flex;font-size:18px;font-weight:700;gap:10px;justify-content:center;margin-bottom:15px;padding:15px}.result-message.correct{background:#4caf501a;border:2px solid #4caf50;color:#4caf50}.result-message.incorrect{background:#f443361a;border:2px solid #f44336;color:#f44336}.result-icon{font-size:24px}.next-problem-btn{background:linear-gradient(135deg,#2196f3,#1976d2);border:none;border-radius:6px;box-shadow:0 4px 8px #2196f34d;color:#fff;cursor:pointer;font-size:16px;font-weight:700;padding:12px 24px;transition:all .3s ease}.next-problem-btn:hover{box-shadow:0 6px 12px #2196f366;transform:translateY(-2px)}.current-answer{background:#4caf501a;border:2px solid #4caf504d;border-radius:8px;color:#333;font-size:16px;font-weight:700;margin-top:10px;padding:12px;text-align:center}.answer-value{color:#4caf50;font-size:18px;margin-left:5px}@media (max-width:768px){.practice-mode-container{margin:0 5px;padding:15px}.practice-header{margin-bottom:15px;padding-bottom:12px}.problem-question{font-size:20px;padding:12px}.problem-actions{gap:8px}.check-answer-btn,.skip-problem-btn{font-size:14px;min-width:100px;padding:10px 16px}.result-message{font-size:16px;padding:12px}.next-problem-btn{font-size:14px;padding:10px 20px}.current-answer{font-size:14px;padding:10px}.answer-value{font-size:16px}}@media (max-width:480px){.practice-mode-container{padding:12px}.problem-question{font-size:18px;padding:10px}.check-answer-btn,.skip-problem-btn{font-size:13px;min-width:80px;padding:8px 12px}.result-message{font-size:14px;padding:10px}.next-problem-btn{font-size:13px;padding:8px 16px}.current-answer{font-size:13px;padding:8px}.answer-value{font-size:15px}}
/*# sourceMappingURL=main.540893bf.css.map*/