@import "https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap";*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;font-family:Nunito,-apple-system,PingFang SC,sans-serif;overflow:hidden}:root{--cream:#fdf8f3;--cream-dark:#f5ede4;--warm-white:#fffbf7;--coral:#ff8b7b;--coral-light:#ffb4a9;--coral-dark:#e76b5a;--sage:#8fb996;--sage-light:#b5d4b9;--sage-dark:#6b9a72;--honey:#f4d03f;--honey-light:#f9e79f;--honey-dark:#d4ac0d;--lavender:#c8b8db;--lavender-light:#e5ddf0;--clock-hour:#4a5568;--clock-minute:#8fb996;--clock-second:#ff8b7b;--clock-face:var(--warm-white);--clock-rim:#4a4a4a;--text-primary:#3d3d3d;--text-secondary:#6b6b6b;--text-muted:#9b9b9b;--nav-height:72px;--radius-sm:12px;--radius-md:20px;--radius-lg:28px;--radius-xl:36px;--radius-full:9999px;--shadow-sm:0 2px 8px #8b736014;--shadow-md:0 4px 16px #8b73601a;--shadow-lg:0 8px 32px #8b73601f;--shadow-xl:0 12px 48px #8b736026;--shadow-glow-coral:0 0 24px #ff8b7b4d;--shadow-glow-sage:0 0 24px #8fb9964d;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1)}body{color:var(--text-primary);background:#dadada}#root{flex-direction:column;height:100dvh;display:flex}#topbar{height:var(--nav-height);-webkit-backdrop-filter:blur(20px);z-index:100;background:#fffbf7d9;border-bottom:1px solid #8b73600f;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 24px;display:flex}.app-title{background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);-webkit-text-fill-color:transparent;white-space:nowrap;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:24px;font-weight:900}.nav-tabs{background:var(--cream-dark);border-radius:var(--radius-full);gap:8px;padding:6px;display:flex;box-shadow:inset 0 2px 4px #8b736014}.nav-tab{color:var(--text-secondary);border-radius:var(--radius-full);cursor:pointer;transition:all .3s var(--ease-spring);white-space:nowrap;background:0 0;border:none;padding:10px 20px;font-family:inherit;font-size:15px;font-weight:700;position:relative;overflow:hidden}.nav-tab:before{content:"";background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);border-radius:var(--radius-full);opacity:0;transition:all .3s var(--ease-spring);position:absolute;inset:0;transform:scale(.8)}.nav-tab span{z-index:1;position:relative}.nav-tab.active{color:#fff;box-shadow:var(--shadow-md)}.nav-tab.active:before{opacity:1;transform:scale(1)}.nav-tab:hover:not(.active){color:var(--text-primary);background:#ffffff80}.nav-tab:active{transform:scale(.95)}.nav-right{align-items:center;gap:16px;display:flex}.sound-btn{background:var(--cream-dark);cursor:pointer;width:44px;height:44px;transition:all .2s var(--ease-spring);box-shadow:var(--shadow-sm);border:none;border-radius:50%;justify-content:center;align-items:center;padding:10px;font-size:20px;display:flex}.sound-btn:hover{background:var(--coral-light);transform:scale(1.05)}.sound-btn:active{transform:scale(.95)}.lang-toggle{align-items:center;gap:8px;font-size:14px;font-weight:800;display:flex}.lang-toggle span{color:var(--text-muted);transition:all .3s}.lang-toggle span.active-lang{color:var(--coral)}.lang-switch{background:var(--cream-dark);border-radius:var(--radius-full);cursor:pointer;width:48px;height:26px;transition:all .3s var(--ease-spring);position:relative;box-shadow:inset 0 2px 4px #8b73601a}.lang-switch.en{background:var(--sage)}.lang-switch:after{content:"";width:22px;height:22px;transition:all .3s var(--ease-spring);box-shadow:var(--shadow-sm);background:#fff;border-radius:50%;position:absolute;top:2px;left:2px}.lang-switch.en:after{transform:translate(22px)}#app{flex:1;position:relative;overflow:hidden}.module{opacity:0;pointer-events:none;transition:opacity .4s var(--ease-smooth);-webkit-overflow-scrolling:touch;flex-direction:column;align-items:center;padding:24px;display:flex;position:absolute;inset:0;overflow-y:auto}.module.active{opacity:1;pointer-events:auto}.card{background:var(--warm-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all .3s var(--ease-spring);border:1px solid #8b73600f;padding:28px}.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.clock-container{aspect-ratio:1;filter:drop-shadow(var(--shadow-lg));flex-shrink:0;position:relative}.clock-container svg{width:100%;height:100%;display:block}.clock-hand{transition:transform .4s var(--ease-spring);filter:drop-shadow(0 2px 4px #00000026)}.clock-hand.dragging{filter:drop-shadow(0 4px 8px #0003);transition:none!important}.clock-hand.highlighted{filter:drop-shadow(0 0 12px)}.clock-hand.dimmed{opacity:.25}#module-learn{justify-content:flex-start;gap:20px}.learn-layout{flex:1;align-items:center;gap:32px;width:100%;max-width:1000px;min-height:0;display:flex}.learn-clock-wrap{flex-shrink:0}.learn-content{flex-direction:column;flex:1;gap:20px;min-width:0;display:flex}.learn-card{background:var(--warm-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border-left:6px solid var(--coral);padding:32px;position:relative;overflow:hidden}.learn-card:before{content:"";background:radial-gradient(circle at top right, var(--coral-light) 0%, transparent 70%);opacity:.3;width:120px;height:120px;position:absolute;top:0;right:0}.learn-card h2{color:var(--coral-dark);margin-bottom:16px;font-size:26px;font-weight:800}.learn-card p{color:var(--text-primary);white-space:pre-line;font-size:19px;font-weight:600;line-height:1.8}.step-dots{justify-content:center;gap:12px;display:flex}.step-dot{background:var(--cream-dark);width:14px;height:14px;transition:all .4s var(--ease-spring);cursor:pointer;border-radius:50%;position:relative}.step-dot:after{content:"";border:2px solid #0000;border-radius:50%;transition:all .3s;position:absolute;inset:-4px}.step-dot.active{background:var(--coral);box-shadow:var(--shadow-glow-coral);transform:scale(1.4)}.step-dot.active:after{border-color:#0000}.step-dot.done{background:var(--sage);transform:scale(1.1)}.learn-nav{justify-content:center;gap:16px;display:flex}.btn{border-radius:var(--radius-full);cursor:pointer;transition:all .2s var(--ease-spring);border:none;padding:14px 32px;font-family:inherit;font-size:17px;font-weight:800;position:relative;overflow:hidden}.btn:before{content:"";opacity:0;background:linear-gradient(135deg,#fff3 0%,#0000 100%);transition:opacity .3s;position:absolute;inset:0}.btn:hover:before{opacity:1}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.4;pointer-events:none}.btn-primary{background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);color:#fff;box-shadow:0 4px 16px #ff8b7b59}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px #ff8b7b73}.btn-secondary{background:var(--cream-dark);color:var(--text-primary);box-shadow:var(--shadow-sm)}.btn-secondary:hover{background:var(--warm-white);box-shadow:var(--shadow-md)}.btn-success{background:linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);color:#fff;box-shadow:0 4px 16px #8fb99659}.btn-success:hover{transform:translateY(-2px);box-shadow:0 6px 24px #8fb99673}.btn-accent{background:linear-gradient(135deg, var(--honey) 0%, var(--honey-dark) 100%);color:#3d3d3d;box-shadow:0 4px 16px #f4d03f59}.btn-accent:hover{transform:translateY(-2px);box-shadow:0 6px 24px #f4d03f73}#module-practice{justify-content:center;gap:24px}.practice-layout{align-items:center;gap:40px;width:100%;max-width:1000px;display:flex}.practice-info{flex-direction:column;flex:1;align-items:center;gap:20px;display:flex}.digital-time{font-variant-numeric:tabular-nums;background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);-webkit-text-fill-color:transparent;letter-spacing:2px;-webkit-background-clip:text;background-clip:text;background-color:var(--warm-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:2px solid #ff8b7b1a;padding:20px 40px;font-family:Nunito,-apple-system,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:72px;font-weight:900;position:relative}.digital-time:before{content:"";border-radius:var(--radius-xl);background:linear-gradient(135deg, var(--coral-light) 0%, var(--lavender) 100%);z-index:-1;opacity:.3;position:absolute;inset:-2px}.time-words{color:var(--sage-dark);text-align:center;background:var(--sage-light);border-radius:var(--radius-full);padding:12px 24px;font-family:Nunito,-apple-system,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:24px;font-weight:800}.practice-buttons,.practice-toggles{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.snap-toggle{color:var(--text-secondary);background:var(--cream-dark);border-radius:var(--radius-full);cursor:pointer;align-items:center;gap:10px;padding:12px 20px;font-size:15px;font-weight:700;transition:all .2s;display:flex}.snap-toggle:hover{background:var(--lavender-light)}.snap-check{width:22px;height:22px;accent-color:var(--coral);cursor:pointer}.hidden-placeholder{visibility:hidden}#module-quiz{justify-content:flex-start;gap:16px}#quizContent{flex-direction:column;align-items:center;width:100%;display:flex}.quiz-header{background:var(--warm-white);border-radius:var(--radius-lg);width:100%;max-width:900px;box-shadow:var(--shadow-sm);justify-content:center;align-items:center;margin:0 auto;padding:16px 24px;display:flex;position:relative}.quiz-back-btn{border:2px solid var(--cream-dark);background:var(--warm-white);border-radius:var(--radius-full);cursor:pointer;width:40px;height:40px;transition:all .3s var(--ease-spring);color:var(--text-secondary);justify-content:center;align-items:center;padding:0;font-family:inherit;font-size:18px;font-weight:700;display:flex;position:absolute;left:24px}.quiz-back-btn:hover{border-color:var(--coral-light);color:var(--coral);background:var(--cream)}.quiz-score{letter-spacing:6px;align-items:center;gap:2px;font-size:22px;font-weight:900;display:flex}.quiz-score .star-correct{color:#fbbf24;text-shadow:0 1px 2px #00000026}.quiz-score .star-wrong{color:#ef4444}.quiz-score .star-empty{color:var(--coral);opacity:.5}.quiz-score .dot-correct,.quiz-score .dot-wrong,.quiz-score .dot-empty{border-radius:50%;width:12px;height:12px;display:inline-block}.quiz-score .dot-correct{background-color:#fbbf24}.quiz-score .dot-wrong{background-color:#ef4444}.quiz-score .dot-empty{background-color:var(--coral);opacity:.35}@media (width<=480px){.quiz-score{gap:3px}}.quiz-progress{color:var(--text-secondary);font-size:17px;font-weight:700;position:absolute;right:24px}.quiz-mode-tabs{gap:10px;display:flex}.quiz-mode-tab{border:2px solid var(--cream-dark);background:var(--warm-white);border-radius:var(--radius-full);cursor:pointer;transition:all .3s var(--ease-spring);color:var(--text-secondary);padding:10px 20px;font-family:inherit;font-size:15px;font-weight:700}.quiz-mode-tab:hover{border-color:var(--coral-light);color:var(--coral)}.quiz-mode-tab.active{border-color:var(--coral);background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);color:#fff;box-shadow:0 4px 12px #ff8b7b4d}.quiz-body{flex:1;justify-content:center;align-items:center;gap:32px;width:100%;max-width:1000px;min-height:0;margin:0 auto;display:flex}#quiz-clock-wrap{padding-top:12px}.quiz-question{text-align:center;color:var(--text-primary);padding:20px 32px;font-size:26px;font-weight:800}.quiz-options{grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:400px;display:grid}.quiz-option{border:3px solid var(--cream-dark);background:var(--warm-white);border-radius:var(--radius-md);cursor:pointer;transition:all .25s var(--ease-spring);text-align:center;color:var(--text-primary);padding:20px;font-family:inherit;font-size:26px;font-weight:800;position:relative;overflow:hidden}.quiz-option:before{content:"";opacity:0;background:linear-gradient(135deg,#ffffff80 0%,#0000 100%);transition:opacity .3s;position:absolute;inset:0}.quiz-option:hover{border-color:var(--lavender);box-shadow:var(--shadow-md);transform:translateY(-3px)}.quiz-option:hover:before{opacity:1}.quiz-option:active{transform:scale(.97)}.quiz-option.correct{border-color:var(--sage);background:linear-gradient(135deg, #e8f5e9 0%, var(--sage-light) 100%);color:var(--sage-dark);box-shadow:var(--shadow-glow-sage);animation:successPulse .5s var(--ease-spring)}.quiz-option.wrong{border-color:var(--coral);background:linear-gradient(135deg, #ffebee 0%, var(--coral-light) 100%);color:var(--coral-dark);animation:.5s ease-in-out shake}.quiz-option.disabled{pointer-events:none}@keyframes successPulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.quiz-right-panel{flex-direction:column;flex:1;align-items:center;gap:20px;display:flex}.quiz-target-time{background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);-webkit-text-fill-color:transparent;text-align:center;-webkit-background-clip:text;background-clip:text;background-color:var(--warm-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:16px 32px;font-size:32px;font-weight:900}.quiz-target-words{color:var(--text-secondary);text-align:center;font-size:20px;font-weight:700}.difficulty-selector{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.diff-btn{border:2px solid var(--cream-dark);background:var(--warm-white);border-radius:var(--radius-full);cursor:pointer;transition:all .25s var(--ease-spring);color:var(--text-secondary);padding:10px 18px;font-family:inherit;font-size:14px;font-weight:700}.diff-btn:hover{border-color:var(--coral-light);color:var(--coral);transform:translateY(-2px)}.diff-btn.active{border-color:var(--coral);background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);color:#fff;box-shadow:0 4px 12px #ff8b7b4d}.quiz-setup{background:var(--warm-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid #8b73600f;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:480px;margin:auto;padding:48px;display:flex;position:relative;overflow:hidden}.quiz-setup:before{display:none}.quiz-setup h2{color:var(--text-primary);font-size:32px;font-weight:900}.quiz-setup-icon{font-size:64px;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.quiz-summary{text-align:center;background:var(--warm-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid #8b73600f;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:480px;margin:auto;padding:48px;display:flex}.summary-stars{letter-spacing:16px;animation:starBurst .8s var(--ease-spring);font-size:56px}@keyframes starBurst{0%{opacity:0;transform:scale(0)rotate(-180deg)}60%{transform:scale(1.3)rotate(10deg)}to{opacity:1;transform:scale(1)rotate(0)}}.summary-msg{background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:28px;font-weight:900}.summary-score{color:var(--text-secondary);font-size:20px;font-weight:700}#feedback-overlay{z-index:200;pointer-events:none;opacity:0;-webkit-backdrop-filter:blur(4px);background:#0000001a;justify-content:center;align-items:center;transition:opacity .3s;display:flex;position:fixed;inset:0}#feedback-overlay.show{opacity:1}.feedback-content{animation:feedbackPop .7s var(--ease-spring);filter:drop-shadow(0 8px 32px #0003);font-size:100px}@keyframes feedbackPop{0%{opacity:0;transform:scale(0)rotate(-20deg)}50%{opacity:1;transform:scale(1.4)rotate(5deg)}70%{transform:scale(.9)rotate(-3deg)}to{opacity:1;transform:scale(1)rotate(0)}}.star-particle{pointer-events:none;animation:starFloat 1.2s var(--ease-spring) forwards;z-index:300;filter:drop-shadow(0 4px 8px #0003);font-size:36px;position:fixed}@keyframes starFloat{0%{opacity:0;transform:translateY(0)scale(.5)rotate(0)}20%{opacity:1;transform:translateY(-20px)scale(1.2)rotate(45deg)}to{opacity:0;transform:translateY(-120px)scale(.8)rotate(180deg)}}.clock-face-bg{fill:var(--warm-white);filter:drop-shadow(0 4px 20px #0000001a)}.clock-number{fill:var(--text-primary);font-family:Nunito,sans-serif;font-size:18px;font-weight:800}.clock-tick{stroke:#4a4a4a59;stroke-width:1.5px}.clock-tick.major{stroke:var(--clock-rim);stroke-width:4px}.clock-center{fill:var(--coral);filter:drop-shadow(0 2px 4px #0003)}@media (orientation:portrait){.learn-layout,.practice-layout,.quiz-body{flex-direction:column}.learn-clock-wrap .clock-container,#practice-clock-wrap .clock-container{width:min(75vw,320px)}.quiz-body .clock-container{width:min(60vw,260px)}.digital-time{padding:16px 28px;font-size:48px}.time-words{padding:10px 20px;font-size:18px}.quiz-options{gap:12px;max-width:100%}.quiz-option{padding:16px;font-size:22px}.app-title{font-size:20px}.nav-tab{padding:8px 14px;font-size:14px}.learn-card h2{font-size:22px}.learn-card p{font-size:17px}.quiz-setup,.quiz-summary{margin:auto 16px;padding:32px 24px}}@media (orientation:landscape){.learn-clock-wrap .clock-container{width:min(45vh,340px)}#practice-clock-wrap .clock-container{width:min(60vh,400px)}.quiz-body .clock-container{width:min(50vh,320px)}}@media (width<=600px){:root{--nav-height:64px}#topbar{padding:0 12px}.nav-tabs{gap:4px;padding:4px}.nav-tab{padding:8px 12px;font-size:13px}.app-title{display:none}.nav-right{gap:10px}.sound-btn{width:40px;height:40px;font-size:18px}.lang-switch{width:44px;height:24px}.lang-switch:after{width:20px;height:20px}.lang-switch.en:after{transform:translate(20px)}.btn{padding:12px 24px;font-size:15px}}.text-gradient-coral{background:linear-gradient(135deg, var(--coral) 0%, var(--coral-dark) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.text-gradient-sage{background:linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glass-effect{-webkit-backdrop-filter:blur(20px);background:#fffbf7cc}