:root{--bg-primary:#0a0e27;--bg-secondary:#111638;--bg-tertiary:#1a1f4a;--bg-card:#111638d9;--bg-card-hover:#1a1f4af2;--accent-cyan:#00d4ff;--accent-cyan-dim:#00d4ff26;--accent-amber:#ff9f43;--accent-amber-dim:#ff9f4326;--accent-red:#ff4757;--accent-red-dim:#ff475726;--accent-green:#2ecc71;--accent-green-dim:#2ecc7126;--accent-purple:#a855f7;--text-primary:#e8eaf6;--text-secondary:#9ba4b5;--text-muted:#4a5568;--text-bright:#fff;--glow-cyan:0 0 24px #00d4ff40, 0 0 48px #00d4ff1a;--glow-amber:0 0 24px #ff9f4340;--font-display:"Space Grotesk", sans-serif;--font-body:"Noto Sans SC", "Space Grotesk", sans-serif;--font-mono:"JetBrains Mono", monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-full:999px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-bounce:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden}::selection{background:var(--accent-cyan-dim);color:var(--accent-cyan)}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:var(--radius-full)}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleIn{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes borderFlow{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes shake{0%,to{transform:translate(0)}10%,50%,90%{transform:translate(-4px)}30%,70%{transform:translate(4px)}}@keyframes pulseGlow{0%{box-shadow:0 0 #00d4ff66}50%{box-shadow:0 0 20px 8px #00d4ff26}to{box-shadow:0 0 #00d4ff66}}@keyframes progressShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes dotPulse{0%{background:var(--accent-cyan);transform:scale(.8);box-shadow:0 0 #00d4ff80}50%{background:#00a8cc;transform:scale(1.3);box-shadow:0 0 0 8px #00d4ff00}to{background:var(--accent-cyan);transform:scale(.8);box-shadow:0 0 #00d4ff80}}@keyframes streakBounce{0%{transform:scale(1)}30%{transform:scale(1.3)}60%{transform:scale(.95)}to{transform:scale(1)}}@keyframes floatParticle{0%{opacity:0;transform:translateY(100vh)translate(0)}10%{opacity:var(--p-opacity,.6)}90%{opacity:var(--p-opacity,.6)}to{transform:translateY(-10vh) translateX(var(--p-drift,50px));opacity:0}}.particles-container{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:hidden}.particles-container:before{content:"";background:url(/bg.png) center/cover no-repeat, linear-gradient(135deg, var(--bg-primary) 0%, #0d1240 50%, #0a0e27 100%);opacity:.5;position:absolute;inset:0}.particle{pointer-events:none;filter:blur(.5px);border-radius:50%;animation:linear infinite floatParticle;position:absolute}.welcome-view{text-align:center;min-height:100vh;padding:var(--space-xl);flex-direction:column;justify-content:center;align-items:center;display:flex}.brand{margin-bottom:var(--space-3xl)}.brand-logo{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-bright);margin-bottom:var(--space-md);font-size:clamp(48px,8vw,80px);font-weight:700;line-height:1.1}.brand-logo .highlight{background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.brand-subtitle{color:var(--text-secondary);letter-spacing:.15em;text-transform:uppercase;font-size:clamp(14px,2.5vw,18px)}.brand-slogan{color:var(--text-primary);margin-bottom:var(--space-xl);font-size:clamp(20px,3.5vw,28px);font-weight:600}.brand-slogan em{color:var(--accent-amber);text-shadow:var(--glow-amber);font-style:normal}.brand-desc{color:var(--text-secondary);max-width:480px;margin-bottom:var(--space-3xl);font-size:15px;line-height:1.8}.btn-start{align-items:center;gap:var(--space-sm);font-family:var(--font-display);letter-spacing:.08em;color:var(--text-bright);background:var(--bg-secondary);border-radius:var(--radius-full);cursor:pointer;transition:all .3s var(--ease-out);z-index:1;border:1px solid #00d4ff4d;padding:16px 48px;font-size:18px;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn-start:before{content:"";border-radius:inherit;background:linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-cyan));z-index:-2;opacity:0;background-size:300% 300%;transition:opacity .3s;animation:4s infinite borderFlow;position:absolute;inset:-2px}.btn-start:after{content:"";border-radius:inherit;background:var(--bg-secondary);z-index:-1;transition:background .3s;position:absolute;inset:1px}.btn-start:hover:before{opacity:1}.btn-start:hover:after{background:var(--bg-tertiary)}.btn-start:hover{box-shadow:var(--glow-cyan);transform:translateY(-2px)}.btn-start:active{transform:translateY(0)scale(.98)}.btn-start .arrow{transition:transform .3s var(--ease-out);display:inline-block}.btn-start:hover .arrow{transform:translate(4px)}.hint{margin-top:var(--space-xl);color:var(--text-muted);letter-spacing:.05em;font-size:13px}.scene-illustration.custom-engine{width:100%;max-width:400px;margin:0 auto var(--space-md);opacity:0;animation:fadeIn .6s var(--ease-out) .15s forwards;justify-content:center;align-items:center;display:flex}.custom-scene-svg{filter:drop-shadow(0 15px 30px #0006);width:100%;height:auto;display:block;overflow:visible}.scene-loading{aspect-ratio:2;border-radius:var(--radius-lg);background:var(--surface-light);opacity:.5;width:100%;animation:1.5s infinite pulse}@keyframes pulse{0%,to{opacity:.3}50%{opacity:.6}}@media (width<=480px){.scene-illustration.custom-engine{max-width:300px;margin-bottom:var(--space-sm)}}.practice-view{width:100%;min-height:100vh;padding:var(--space-xl);flex-direction:column;justify-content:center;align-items:center;padding-bottom:80px;display:flex;position:relative}.practice-content{flex-direction:column;align-items:center;width:100%;max-width:720px;display:flex}.practice-content.shake{animation:.4s ease-in-out shake}.progress-bar{background:linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));height:3px;transition:width .5s var(--ease-out);z-index:200;background-size:200% 100%;animation:2s linear infinite progressShimmer;position:fixed;bottom:0;left:0}.stats-panel{top:var(--space-lg);right:var(--space-lg);gap:var(--space-lg);font-family:var(--font-mono);color:var(--text-muted);z-index:10;font-size:13px;display:flex;position:fixed}.stat-item{align-items:center;gap:var(--space-xs);display:flex}.stat-icon{font-size:14px}.stat-item .value{color:var(--text-secondary);font-weight:500}.streak-value{color:var(--accent-amber)!important}.status-bar{width:100%;margin-bottom:var(--space-2xl);justify-content:space-between;align-items:center;display:flex}.status-right{align-items:center;gap:var(--space-md);display:flex}.fav-btn{cursor:pointer;color:var(--text-secondary);background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:1.25rem;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),filter .2s;display:flex}.fav-btn:hover{transform:scale(1.2)}.fav-btn:active{transform:scale(.9)}.fav-btn.active{filter:drop-shadow(0 0 8px #ffd70099)}.empty-state{justify-content:center;align-items:center;display:flex}.empty-content{align-items:center;gap:var(--space-lg);padding:var(--space-2xl);border-radius:var(--radius-2xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);text-align:center;background:#141419b3;border:1px solid #ffffff0d;flex-direction:column;display:flex}.empty-icon{opacity:.5;filter:grayscale();font-size:3rem}.empty-content h2{color:var(--text-primary);margin:0;font-size:1.5rem;font-weight:500}.empty-content p{color:var(--text-secondary);max-width:250px;margin:0;font-size:.95rem;line-height:1.5}.category-badge{align-items:center;gap:var(--space-sm);color:var(--accent-cyan);background:var(--accent-cyan-dim);border-radius:var(--radius-full);border:1px solid #00d4ff33;padding:6px 16px;font-size:13px;font-weight:500;display:inline-flex}.badge-dot{background:var(--accent-cyan);border-radius:50%;width:6px;height:6px;animation:2s infinite dotPulse}.question-num{font-family:var(--font-mono);color:var(--text-muted);font-size:13px}.intent-card{width:100%;padding:var(--space-2xl) var(--space-xl);background:var(--bg-card);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:var(--radius-lg);text-align:center;margin-bottom:var(--space-xl);animation:scaleIn .5s var(--ease-out) both;border:1px solid #ffffff0f}.intent-label{text-transform:uppercase;letter-spacing:.2em;color:var(--text-muted);margin-bottom:var(--space-md);font-size:12px;font-weight:500}.intent-text{color:var(--text-bright);margin-bottom:var(--space-lg);font-size:clamp(22px,4vw,32px);font-weight:600;line-height:1.4}.anti-warning{align-items:center;gap:var(--space-sm);background:var(--accent-red-dim);border-radius:var(--radius-md);color:var(--accent-red);animation:fadeInUp .5s var(--ease-out) .3s both;border:1px solid #ff475740;padding:10px 20px;font-size:14px;display:inline-flex}.anti-warning .icon{font-size:16px}.options-container{gap:var(--space-md);width:100%;animation:fadeInUp .5s var(--ease-out) .5s both;flex-direction:column;display:flex}.options-label{color:var(--text-muted);text-align:center;margin-bottom:var(--space-sm);letter-spacing:.05em;font-size:13px}.option-btn{width:100%;font-family:var(--font-display);color:var(--text-primary);background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:all .3s var(--ease-out);border:1px solid #ffffff14;padding:18px 24px;font-size:clamp(16px,2.5vw,20px);font-weight:500;position:relative;overflow:hidden}.option-btn:before{content:"";background:var(--accent-cyan);opacity:0;width:3px;transition:opacity .3s;position:absolute;top:0;bottom:0;left:0}.option-btn:hover{background:var(--bg-card-hover);border-color:#00d4ff33;transform:translate(4px)}.option-btn:hover:before{opacity:1}.option-btn.correct{animation:.6s pulseGlow;border-color:var(--accent-green)!important;background:var(--accent-green-dim)!important;color:var(--accent-green)!important}.option-btn.wrong{opacity:.6;border-color:var(--accent-red)!important;background:var(--accent-red-dim)!important;color:var(--accent-red)!important}.option-btn.disabled{pointer-events:none;opacity:.4}.result-area{text-align:center;width:100%;animation:fadeIn .5s var(--ease-out) both}.sentence-display{justify-content:center;gap:var(--space-sm);margin-bottom:var(--space-lg);flex-wrap:wrap;min-height:60px;display:flex}.chunk{font-family:var(--font-display);color:var(--accent-cyan);background:var(--accent-cyan-dim);border-radius:var(--radius-sm);opacity:0;padding:8px 16px;font-size:clamp(18px,3vw,24px);font-weight:500;display:inline-block;transform:translateY(20px)}.full-sentence{font-family:var(--font-display);color:var(--text-secondary);margin-bottom:var(--space-lg);font-size:16px;font-style:italic}.knowledge-card{padding:var(--space-lg);border-left:3px solid var(--accent-amber);border-radius:0 var(--radius-md) var(--radius-md) 0;text-align:left;margin-top:var(--space-md);background:#ff9f4314}.knowledge-card .label{text-transform:uppercase;letter-spacing:.15em;color:var(--accent-amber);margin-bottom:var(--space-sm);font-size:12px;font-weight:600}.knowledge-card .text{color:var(--text-secondary);font-size:15px;line-height:1.7}.speak-btn{align-items:center;gap:var(--space-xs);color:var(--text-secondary);background:var(--bg-card);border-radius:var(--radius-full);cursor:pointer;margin-top:var(--space-lg);border:1px solid #ffffff14;padding:8px 18px;font-size:13px;transition:all .2s;display:inline-flex}.speak-btn:hover{color:var(--accent-cyan);border-color:#00d4ff4d}@media (width<=768px){.status-bar{gap:var(--space-sm);flex-direction:column;align-items:center}.intent-card{padding:var(--space-xl) var(--space-lg)}.option-btn{padding:14px 18px}.stats-panel{top:var(--space-sm);right:var(--space-sm);gap:var(--space-md);font-size:12px}}.complete-view{text-align:center;min-height:100vh;padding:var(--space-xl);flex-direction:column;justify-content:center;align-items:center;display:flex}.complete-emoji{margin-bottom:var(--space-lg);filter:drop-shadow(0 0 20px #00d4ff4d);font-size:64px}.complete-title{font-family:var(--font-display);color:var(--text-bright);margin-bottom:var(--space-md);font-size:clamp(36px,6vw,56px);font-weight:700}.complete-subtitle{color:var(--text-secondary);margin-bottom:var(--space-3xl);font-size:16px}.complete-stats{gap:var(--space-xl);margin-bottom:var(--space-3xl);display:flex}.stat-card{padding:var(--space-xl) var(--space-2xl);background:var(--bg-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:var(--radius-lg);border:1px solid #ffffff0f;min-width:120px}.stat-number{font-family:var(--font-display);margin-bottom:var(--space-xs);font-size:42px;font-weight:700}.stat-label{color:var(--text-muted);font-size:13px}.text-cyan{color:var(--accent-cyan)}.text-amber{color:var(--accent-amber)}.btn-restart{align-items:center;gap:var(--space-sm);font-family:var(--font-display);color:var(--text-bright);background:var(--bg-secondary);border-radius:var(--radius-full);cursor:pointer;transition:all .3s var(--ease-out);border:1px solid #00d4ff4d;padding:14px 40px;font-size:16px;font-weight:600;display:inline-flex}.btn-restart:hover{box-shadow:var(--glow-cyan);background:var(--bg-tertiary);transform:translateY(-2px)}.btn-restart .arrow{font-size:18px;transition:transform .3s}.btn-restart:hover .arrow{transform:rotate(180deg)}@media (width<=768px){.complete-stats{gap:var(--space-md);flex-direction:column}.stat-card{padding:var(--space-lg)}}.bottom-nav{background:linear-gradient(to top, var(--bg-primary) 70%, transparent);z-index:50;padding:var(--space-sm) 0 var(--space-md);position:fixed;bottom:0;left:0;right:0}.nav-scroll{gap:var(--space-sm);padding:0 var(--space-lg);scrollbar-width:none;-ms-overflow-style:none;display:flex;overflow-x:auto}.nav-scroll::-webkit-scrollbar{display:none}.nav-tag{color:var(--text-muted);border-radius:var(--radius-full);cursor:pointer;white-space:nowrap;background:0 0;border:1px solid #0000;flex-shrink:0;padding:6px 14px;font-size:12px;font-weight:500;transition:all .2s}.nav-tag:hover{color:var(--text-secondary)}.nav-tag.active{color:var(--accent-cyan);background:var(--accent-cyan-dim);border-color:#00d4ff33}@media (width<=768px){.nav-scroll{padding:0 var(--space-md);gap:4px}.nav-tag{padding:5px 10px;font-size:11px}}.app-container{width:100%;min-height:100vh;position:relative}