:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0f;--surface: rgba(255, 255, 255, .03);--surface-hover: rgba(255, 255, 255, .06);--border: rgba(255, 255, 255, .08);--border-bright: rgba(255, 255, 255, .15);--text: #fafafa;--text-dim: rgba(255, 255, 255, .5);--accent: #818cf8;--accent-glow: rgba(129, 140, 248, .3);--green: #4ade80;--yellow: #facc15;--red: #f87171;--orange: #fb923c;--purple: #c084fc;--blue: #60a5fa;--pink: #f472b6;--teal: #2dd4bf}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}body{background-image:radial-gradient(ellipse at 20% 50%,rgba(129,140,248,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(192,132,252,.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(74,222,128,.04) 0%,transparent 50%);background-attachment:fixed}.app{max-width:900px;margin:0 auto;padding:1rem;min-height:100vh}.app-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 0 1.5rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}.logo{display:flex;align-items:center;gap:.6rem}.logo-icon{font-size:1.6rem;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 8px var(--accent-glow))}.logo h1{font-size:1.4rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#fff,#ffffffb3);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.tabs{display:flex;gap:.4rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:.25rem}.tab{padding:.5rem 1rem;border:none;background:transparent;color:var(--text-dim);font-size:.85rem;font-weight:500;border-radius:.5rem;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:.4rem}.tab:hover{color:var(--text);background:var(--surface-hover)}.tab.active{background:var(--accent);color:#000;font-weight:600}.tab-icon{font-size:1rem}.stats-bar{display:flex;gap:.6rem;padding:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;margin-bottom:1rem;flex-wrap:wrap}.stat{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:0 .8rem;border-right:1px solid var(--border)}.stat:last-child{border-right:none}.stat.xp-stat{flex:1;border-right:1px solid var(--border)}.stat-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim)}.stat-value{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}.level-badge{background:linear-gradient(135deg,var(--accent),var(--purple));color:#000;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem}.streak{color:var(--orange)}.combo{color:var(--yellow)}.xp-bar-container{width:100%;height:20px;background:#ffffff0d;border-radius:10px;overflow:hidden;position:relative}.xp-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--purple));border-radius:10px;transition:width .5s ease}.xp-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}.mode-toggle{display:flex;gap:.5rem;margin-bottom:1rem}.mode-btn{flex:1;padding:.65rem 1rem;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);border-radius:.6rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.mode-btn:hover{background:var(--surface-hover);color:var(--text)}.mode-btn.active{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}.challenge-hud{display:flex;align-items:center;gap:1rem;padding:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;margin-bottom:1rem}.challenge-timer{position:relative}.timer-ring{width:48px;height:48px;position:relative}.timer-ring svg{width:100%;height:100%}.timer-text{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums}.challenge-progress{font-size:.85rem;color:var(--text-dim);font-weight:500}.challenge-complete{text-align:center;padding:2rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;margin-bottom:1rem}.challenge-complete h2{font-size:1.6rem;margin-bottom:1rem}.final-score{display:flex;flex-direction:column;align-items:center;margin-bottom:1rem}.big-score{font-size:3rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.score-label{font-size:.85rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.challenge-complete p{color:var(--text-dim);margin-bottom:1.5rem}.challenge-complete button{margin:0 .4rem}.filters{margin-bottom:1rem}.category-scroll{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:.5rem;scrollbar-width:none}.category-scroll::-webkit-scrollbar{display:none}.category-chip{padding:.4rem .75rem;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);border-radius:2rem;font-size:.78rem;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s}.category-chip:hover{background:var(--surface-hover);color:var(--text)}.category-chip.active{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}.difficulty-filter{display:flex;gap:.35rem}.diff-chip{padding:.3rem .65rem;border:1px solid var(--border);background:transparent;color:var(--text-dim);border-radius:.4rem;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.05em}.diff-chip:hover{background:var(--surface-hover)}.diff-chip.active{font-weight:700}.word-card,.sentence-card{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:1.5rem;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.word-header,.sentence-header{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}.difficulty-tag{padding:.2rem .5rem;border-radius:.3rem;font-size:.65rem;font-weight:700;text-transform:uppercase;color:#000;letter-spacing:.05em}.word-count{margin-left:auto;font-size:.75rem;color:var(--text-dim)}.pattern-tag{font-size:.72rem;color:var(--accent);background:var(--accent-glow);padding:.2rem .5rem;border-radius:.3rem}.word-text{font-size:2rem;font-weight:800;letter-spacing:-.02em;margin-bottom:.3rem;text-align:center}.phonetic{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1rem;color:var(--accent);text-align:center;margin-bottom:1.25rem}.sound-controls{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;margin-bottom:1rem}.voice-select select{padding:.4rem .6rem;background:#ffffff0d;border:1px solid var(--border);border-radius:.4rem;color:var(--text);font-size:.75rem;max-width:200px}.sliders{display:flex;gap:.75rem}.sliders label{font-size:.7rem;color:var(--text-dim);display:flex;flex-direction:column;gap:.2rem}.sliders input[type=range]{width:80px;height:4px;-webkit-appearance:none;background:#ffffff1a;border-radius:2px;outline:none}.sliders input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer}.btn-listen{padding:.45rem .85rem;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:.5rem;font-size:.8rem;cursor:pointer;transition:all .2s}.btn-listen:hover{background:var(--surface-hover);border-color:var(--border-bright)}.btn-slow{background:#818cf81a;border-color:#818cf84d}.btn-small{font-size:.72rem;padding:.3rem .6rem}.waveform-container{margin:1rem 0;text-align:center}.waveform{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:60px;padding:.5rem;background:#0000004d;border-radius:.5rem;border:1px solid var(--border)}.wave-bar{width:6px;min-height:3px;border-radius:2px;transition:height .1s ease}.listening-label{font-size:.8rem;color:var(--green);margin-top:.5rem;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.btn-speak{display:block;width:100%;padding:1rem;border:2px solid var(--accent);background:linear-gradient(135deg,#818cf826,#c084fc26);color:var(--text);border-radius:.75rem;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s;margin:1rem 0}.btn-speak:hover{background:linear-gradient(135deg,#818cf840,#c084fc40);transform:translateY(-1px);box-shadow:0 4px 20px var(--accent-glow)}.btn-speak.listening{border-color:var(--green);background:linear-gradient(135deg,#4ade8026,#2dd4bf26);animation:glow 1.5s infinite alternate}@keyframes glow{0%{box-shadow:0 0 5px #4ade804d}to{box-shadow:0 0 25px #4ade8080}}.hint-btn{display:block;width:100%;padding:.5rem;border:1px dashed var(--border);background:transparent;color:var(--text-dim);border-radius:.5rem;font-size:.8rem;cursor:pointer;transition:all .2s;text-align:left}.hint-btn:hover{border-color:var(--yellow);color:var(--yellow)}.hint-box{padding:.75rem;background:#facc1514;border:1px solid rgba(250,204,21,.2);border-radius:.5rem;color:var(--yellow);font-size:.85rem;margin-top:.5rem}.hint-section{margin:.75rem 0}.result-card{padding:1rem;border:2px solid;border-radius:.6rem;margin:1rem 0;text-align:center;animation:slideUp .3s ease}.result-card.correct{border-color:var(--green);background:#4ade8014}.result-card.wrong{border-color:var(--red);background:#f8717114}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.result-accuracy{font-size:2.5rem;font-weight:800}.result-spoken{font-size:.85rem;color:var(--text-dim);margin-top:.5rem}.result-label{font-weight:600;color:var(--text)}.result-tip{font-size:.8rem;color:var(--yellow);margin-top:.5rem}.result-emoji{font-size:2.5rem;margin-bottom:.5rem}.result-message{font-size:1.3rem;font-weight:700;margin-bottom:.3rem}.result-detail{font-size:.85rem;color:var(--text-dim)}.word-nav{display:flex;gap:.5rem;margin-top:1rem;justify-content:center;flex-wrap:wrap}.btn-nav{padding:.5rem 1rem;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:.5rem;font-size:.8rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-nav:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-bright)}.btn-nav:disabled{opacity:.3;cursor:not-allowed}.btn-primary{padding:.6rem 1.2rem;border:none;background:var(--accent);color:#000;border-radius:.5rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-secondary{padding:.6rem 1.2rem;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:.5rem;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-secondary:hover{background:var(--surface-hover)}.target-section{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:1rem;padding:.6rem .8rem;background:#818cf80f;border:1px solid rgba(129,140,248,.15);border-radius:.5rem}.target-label{font-size:.8rem;color:var(--text-dim)}.build-area{min-height:70px;padding:.75rem;background:#0003;border:2px dashed var(--border);border-radius:.6rem;margin-bottom:1rem;transition:all .2s}.selected-words{display:flex;flex-wrap:wrap;gap:.4rem;min-height:40px;align-items:center}.placeholder-text{color:var(--text-dim);font-size:.8rem;font-style:italic}.word-chip{padding:.4rem .7rem;border:1.5px solid;border-radius:.5rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;position:relative;display:inline-flex;align-items:center;gap:.3rem}.word-chip.available{background:var(--surface);color:var(--text)}.word-chip.available:hover{background:var(--surface-hover);transform:translateY(-2px)}.word-chip.selected{background:#818cf81a}.word-chip.selected:hover{background:#f8717126;border-color:var(--red)!important}.word-type-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.available-words{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-bottom:.75rem}.legend{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:.75rem 0;padding:.5rem;background:#0003;border-radius:.5rem}.legend-item{display:flex;align-items:center;gap:.3rem;font-size:.65rem;color:var(--text-dim)}.legend-dot{width:8px;height:8px;border-radius:50%}.sentence-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:1rem 0}.btn-diagram{display:block;width:100%;padding:.5rem;border:1px solid var(--border);background:transparent;color:var(--accent);border-radius:.5rem;font-size:.8rem;cursor:pointer;transition:all .2s;margin-bottom:.75rem}.btn-diagram:hover{background:var(--surface)}.sentence-diagram{padding:1rem;background:#0000004d;border:1px solid var(--border);border-radius:.6rem;margin-bottom:1rem;animation:fadeIn .3s ease}.diagram-sentence{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.diagram-word{display:flex;flex-direction:column;align-items:center;padding:.6rem .8rem;border:2px solid;border-radius:.5rem;background:#0000004d;min-width:60px}.diagram-text{font-size:1rem;font-weight:700}.diagram-type{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}.sentence-card.shake{animation:shake .4s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.sentence-card.celebrate{animation:celebrate .5s ease}@keyframes celebrate{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-dim)}@media(max-width:640px){.app{padding:.5rem}.app-header{flex-direction:column;align-items:stretch;gap:.75rem}.tabs{justify-content:center}.stats-bar{flex-wrap:wrap;justify-content:center}.stat{padding:0 .5rem}.word-text{font-size:1.5rem}.sound-controls{flex-direction:column;align-items:stretch}.sliders{justify-content:center}.challenge-hud{flex-direction:column;text-align:center}.word-nav,.sentence-actions{flex-direction:column}}