@import "https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Nunito:wght@400;600;700;800;900&display=swap";
:root{--color-primary:#ff8c42;--color-primary-light:#ffb37a;--color-primary-dark:#e06b1a;--color-primary-bg:#fff4eb;--color-secondary:#4ecdc4;--color-secondary-light:#7eddd7;--color-secondary-dark:#2ba8a0;--color-secondary-bg:#edfaf9;--color-accent:#ffd93d;--color-accent-dark:#f0c000;--color-success:#6bcb77;--color-success-bg:#edfaef;--color-error:#ff6b6b;--color-error-bg:#ffecec;--color-warning:#ffb347;--color-bg:#fff8f0;--color-surface:#fff;--color-border:#f0e6d9;--color-text-primary:#2d1b0e;--color-text-secondary:#7a5c3a;--color-text-muted:#b89070;--font-display:"Ma Shan Zheng", cursive;--font-body:"Nunito", "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono:"Courier New", monospace;--text-xs:14px;--text-sm:16px;--text-base:20px;--text-lg:24px;--text-xl:30px;--text-2xl:38px;--text-3xl:50px;--text-4xl:64px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--radius-sm:12px;--radius-md:20px;--radius-lg:28px;--radius-xl:40px;--radius-full:9999px;--shadow-sm:0 2px 8px #ff8c4226;--shadow-md:0 4px 20px #ff8c4233;--shadow-lg:0 8px 40px #ff8c4240;--shadow-card:0 4px 0 #00000014;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--sidebar-width:120px;--max-width:100vw}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;touch-action:manipulation;font-size:16px}body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;background-color:#fff8f0;background-image:radial-gradient(circle at 20% 30%,#ff8c420a 0%,#0000 30%),radial-gradient(circle at 85% 75%,#4ecdc40d 0%,#0000 25%),radial-gradient(circle at 50% 10%,#9b59b608 0%,#0000 20%);height:100dvh;line-height:1.5;overflow:hidden}.app-container{max-width:var(--max-width);flex-direction:row;height:100dvh;margin:0 auto;display:flex;position:relative;overflow:hidden}.page-wrapper{flex-direction:column;flex:1;height:100dvh;display:flex;overflow:hidden}.page{padding:var(--space-6);gap:var(--space-4);flex-direction:column;flex:1;height:100%;display:flex;overflow:hidden}.btn{justify-content:center;align-items:center;gap:var(--space-2);font-family:var(--font-body);font-weight:800;font-size:var(--text-lg);border-radius:var(--radius-full);cursor:pointer;padding:var(--space-4) var(--space-8);transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border:none;min-height:56px;text-decoration:none;display:inline-flex}.btn:active{transform:scale(.93)}.btn-primary{background:linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));color:#fff;box-shadow:0 6px 0 var(--color-primary-dark), var(--shadow-sm)}.btn-primary:hover{background:linear-gradient(135deg, var(--color-primary-light), var(--color-primary))}.btn-primary:active{box-shadow:0 2px 0 var(--color-primary-dark);transform:translateY(4px)scale(.97)}.btn-secondary{background:linear-gradient(135deg, var(--color-secondary), var(--color-secondary-dark));color:#fff;box-shadow:0 6px 0 var(--color-secondary-dark), var(--shadow-sm)}.btn-secondary:active{box-shadow:0 2px 0 var(--color-secondary-dark);transform:translateY(4px)scale(.97)}.btn-ghost{background:var(--color-surface);color:var(--color-text-primary);border:3px solid var(--color-border);box-shadow:var(--shadow-sm)}.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn-lg{font-size:var(--text-xl);padding:var(--space-5) var(--space-10);min-height:68px}.btn-icon{border-radius:var(--radius-full);width:56px;height:56px;font-size:var(--text-xl);padding:0}.card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-6);box-shadow:var(--shadow-card);border:2px solid var(--color-border)}.card-interactive{cursor:pointer;transition:transform var(--transition-fast), box-shadow var(--transition-fast)}.card-interactive:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.card-interactive:active{box-shadow:var(--shadow-sm);transform:translateY(2px)scale(.97)}.char-display{font-family:var(--font-display);font-size:var(--text-4xl);color:var(--color-primary);text-align:center;text-shadow:0 3px 8px #ff8c4240;line-height:1.2}.pinyin-text{font-size:var(--text-lg);color:var(--color-secondary-dark);text-align:center;letter-spacing:.05em;font-weight:700}.progress-bar{background:var(--color-border);border-radius:var(--radius-full);width:100%;height:16px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--color-primary), var(--color-accent));border-radius:var(--radius-full);height:100%;transition:width .6s cubic-bezier(.34,1.56,.64,1)}.stars-display{align-items:center;gap:var(--space-2);font-size:var(--text-lg);color:var(--color-accent-dark);font-weight:800;display:flex}.star-icon{font-size:var(--text-xl);animation:2s ease-in-out infinite star-pulse}.badge{align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;display:inline-flex}.badge-primary{background:var(--color-primary-bg);color:var(--color-primary-dark)}.badge-success{background:var(--color-success-bg);color:#2e7d32}.badge-error{background:var(--color-error-bg);color:#c62828}.choice-btn{width:100%;padding:var(--space-5) var(--space-6);background:var(--color-surface);border:3px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-body);font-size:var(--text-lg);color:var(--color-text-primary);cursor:pointer;transition:all var(--transition-fast);text-align:left;align-items:center;gap:var(--space-4);-webkit-tap-highlight-color:transparent;min-height:64px;font-weight:700;display:flex}.choice-btn:hover:not(:disabled){border-color:var(--color-primary);background:var(--color-primary-bg);transform:translate(4px)}.choice-btn.correct{border-color:var(--color-success);background:var(--color-success-bg);color:#2e7d32;animation:.4s shake-success}.choice-btn.wrong{border-color:var(--color-error);background:var(--color-error-bg);color:#c62828;animation:.4s shake-error}.nav-bar{padding:var(--space-4) var(--space-5);background:var(--color-surface);border-bottom:2px solid var(--color-border);z-index:100;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.nav-bar h1{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary)}.side-nav{-webkit-backdrop-filter:blur(16px);width:90px;padding:var(--space-6) 0;align-items:center;gap:var(--space-4);z-index:100;background:#ffffffd9;border:3px solid #fff9;border-radius:32px;flex-direction:column;flex-shrink:0;height:calc(100vh - 40px);margin:20px 0 20px 20px;display:flex;box-shadow:0 16px 40px #2d1b0e14}.side-nav-header{margin-bottom:var(--space-8);font-size:40px;animation:3s ease-in-out infinite float}.nav-item{align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--color-text-muted);cursor:pointer;padding:var(--space-4) var(--space-3);border-radius:var(--radius-lg);transition:all var(--transition-fast);-webkit-tap-highlight-color:transparent;flex-direction:column;width:80px;font-weight:800;text-decoration:none;display:flex}.nav-item:hover,.nav-item.active{color:var(--color-primary);background:var(--color-primary-bg);transform:translate(4px)}.nav-item .nav-icon{font-size:32px}.modal-overlay{padding:var(--space-5);z-index:200;animation:fade-in var(--transition-base);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#2d1b0e99;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-box{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-8);text-align:center;width:100%;max-width:380px;animation:modal-in var(--transition-slow) cubic-bezier(.34, 1.56, .64, 1);box-shadow:var(--shadow-lg)}.voice-indicator{justify-content:center;align-items:flex-end;gap:4px;height:40px;display:flex}.voice-bar{background:var(--color-secondary);border-radius:var(--radius-full);width:6px;animation:.8s ease-in-out infinite voice-wave}.voice-bar:first-child{height:30%;animation-delay:0s}.voice-bar:nth-child(2){height:60%;animation-delay:.1s}.voice-bar:nth-child(3){height:100%;animation-delay:.2s}.voice-bar:nth-child(4){height:70%;animation-delay:.15s}.voice-bar:nth-child(5){height:40%;animation-delay:50ms}.loading-dots{gap:var(--space-2);justify-content:center;align-items:center;display:flex}.loading-dot{background:var(--color-primary);border-radius:50%;width:12px;height:12px;animation:1s ease-in-out infinite loading-bounce}.loading-dot:first-child{animation-delay:0s}.loading-dot:nth-child(2){animation-delay:.15s}.loading-dot:nth-child(3){animation-delay:.3s}@keyframes star-pulse{0%,to{transform:scale(1)rotate(0)}50%{transform:scale(1.2)rotate(10deg)}}@keyframes shake-success{0%,to{transform:translate(0)}25%{transform:translate(4px)}75%{transform:translate(-4px)}}@keyframes shake-error{0%,to{transform:translate(0)rotate(0)}20%{transform:translate(-6px)rotate(-2deg)}40%{transform:translate(6px)rotate(2deg)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-in{0%{opacity:0;transform:scale(.7)translateY(30px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes voice-wave{0%,to{opacity:.5;transform:scaleY(.4)}50%{opacity:1;transform:scaleY(1)}}@keyframes loading-bounce{0%,to{opacity:.5;transform:translateY(0)}50%{opacity:1;transform:translateY(-10px)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes spin-once{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pop-in{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.15)}to{opacity:1;transform:scale(1)}}.text-center{text-align:center}.text-primary{color:var(--color-primary)}.text-secondary{color:var(--color-secondary-dark)}.text-muted{color:var(--color-text-muted)}.font-display{font-family:var(--font-display)}.font-bold{font-weight:800}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:var(--space-2)}.gap-4{gap:var(--space-4)}.gap-6{gap:var(--space-6)}.w-full{width:100%}.h-full{height:100%}.rounded-full{border-radius:var(--radius-full)}.shadow-md{box-shadow:var(--shadow-md)}.mt-auto{margin-top:auto}.mb-4{margin-bottom:var(--space-4)}.mb-6{margin-bottom:var(--space-6)}.p-4{padding:var(--space-4)}.p-6{padding:var(--space-6)}.float-anim{animation:3s ease-in-out infinite float}.pop-anim{animation:.4s cubic-bezier(.34,1.56,.64,1) both pop-in}.bubble-bg{position:relative;overflow:hidden}.bubble-bg:before{content:"";background:radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);opacity:.25;pointer-events:none;width:300px;height:300px;position:absolute;top:-100px;right:-100px}.bubble-bg:after{content:"";background:radial-gradient(circle, var(--color-secondary) 0%, transparent 70%);opacity:.15;pointer-events:none;width:200px;height:200px;position:absolute;bottom:-50px;left:-50px}@media (max-width:360px){:root{--text-base:18px;--text-lg:22px;--text-xl:26px}}
.EyeProtection-module__dF49hW__overlay{padding:var(--space-5);z-index:9999;animation:EyeProtection-module__dF49hW__fade-in var(--transition-base);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#2d1b0ed9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.EyeProtection-module__dF49hW__modal{border-radius:var(--radius-xl);border:4px solid var(--color-primary-light);text-align:center;width:100%;max-width:440px;animation:EyeProtection-module__dF49hW__modal-in var(--transition-slow) cubic-bezier(.34, 1.56, .64, 1);box-shadow:var(--shadow-lg);background:#fff;flex-direction:column;align-items:center;gap:20px;padding:40px;display:flex}.EyeProtection-module__dF49hW__icon{font-size:80px;animation:3s ease-in-out infinite EyeProtection-module__dF49hW__float}.EyeProtection-module__dF49hW__title{color:var(--color-primary);font-size:28px;font-weight:900}.EyeProtection-module__dF49hW__desc{color:var(--color-text-secondary);font-size:18px;font-weight:700;line-height:1.6}.EyeProtection-module__dF49hW__timer{justify-content:center;align-items:center;min-height:48px;display:flex}.EyeProtection-module__dF49hW__countdown{color:var(--color-text-muted);background:var(--color-bg);border-radius:var(--radius-full);border:2px dashed var(--color-border);padding:8px 24px;font-size:22px;font-weight:800}.EyeProtection-module__dF49hW__ready{color:var(--color-success);font-size:22px;font-weight:800;animation:2s ease-in-out infinite EyeProtection-module__dF49hW__star-pulse}.EyeProtection-module__dF49hW__btnColumn{gap:var(--space-3);flex-direction:column;width:100%;display:flex}.EyeProtection-module__dF49hW__pinArea{flex-direction:column;align-items:center;width:100%;display:flex}.EyeProtection-module__dF49hW__pinTitle{font-size:var(--text-lg);color:var(--color-text-primary);font-weight:900}.EyeProtection-module__dF49hW__pinDesc{color:var(--color-text-secondary);margin-top:4px;font-size:14px;font-weight:700}.EyeProtection-module__dF49hW__dotRow{gap:var(--space-4);margin:var(--space-4) 0 var(--space-6);display:flex}.EyeProtection-module__dF49hW__pinDot{border:2px solid var(--color-border);width:16px;height:16px;transition:all var(--transition-fast);background:#f0e6d9;border-radius:50%}.EyeProtection-module__dF49hW__dotActive{background:var(--color-primary);border-color:var(--color-primary-dark);transform:scale(1.2)}.EyeProtection-module__dF49hW__keypad{gap:var(--space-3);grid-template-columns:repeat(3,1fr);width:100%;max-width:270px;display:grid}.EyeProtection-module__dF49hW__keyBtn{background:var(--color-bg);border:3px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--text-xl);color:var(--color-text-primary);cursor:pointer;height:60px;transition:all var(--transition-fast);justify-content:center;align-items:center;font-weight:800;display:flex}.EyeProtection-module__dF49hW__keyBtn:active{background:var(--color-primary-bg);border-color:var(--color-primary);transform:scale(.92)}.EyeProtection-module__dF49hW__controlKey{font-size:var(--text-sm);color:var(--color-text-secondary)}.EyeProtection-module__dF49hW__shake{animation:.5s EyeProtection-module__dF49hW__shake}@keyframes EyeProtection-module__dF49hW__shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}@keyframes EyeProtection-module__dF49hW__float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes EyeProtection-module__dF49hW__modal-in{0%{opacity:0;transform:scale(.7)translateY(30px)}to{opacity:1;transform:scale(1)translateY(0)}}