:root{--bg-dark: #0f172a;--bg-card: rgba(30, 41, 59, .7);--text-main: #f8fafc;--text-muted: #64748b;--primary-glow: #06b6d4;--correct-color: #10b981;--incorrect-color: #ef4444;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;background-color:var(--bg-dark);color:var(--text-main)}body{margin:0;display:flex;justify-content:center;align-items:center;min-height:100vh;background:radial-gradient(circle at top right,#1e293b,#0f172a)}.container{max-width:900px;width:90%;margin:0 auto;padding:2rem;display:flex;flex-direction:column;gap:2rem}header{margin-bottom:1rem}.header-content{display:flex;justify-content:space-between;align-items:center}.header-controls{display:flex;gap:1rem}h1{font-size:3rem;margin:0;letter-spacing:-.05em;text-shadow:0 0 20px rgba(6,182,212,.3)}.highlight{color:var(--primary-glow)}.subtitle{color:var(--text-muted);font-size:1.2rem;margin:0;text-transform:uppercase;letter-spacing:.1em}.audio-btn{background:#0f172a99;border:1px solid rgba(255,255,255,.1);color:var(--text-muted);padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-family:inherit;font-size:.9rem;transition:all .3s ease;min-width:120px}.audio-btn:hover{background:#ffffff0d;color:var(--text-main);border-color:#fff3}.audio-btn.active{background:#06b6d41a;color:var(--primary-glow);border-color:var(--primary-glow)}.game-area{display:flex;flex-direction:column;gap:1.5rem}.stats-panel{display:flex;justify-content:space-around;background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1.5rem;border-radius:16px;border:1px solid rgba(255,255,255,.05);box-shadow:0 10px 30px #00000080}.stat-box{display:flex;flex-direction:column;align-items:center;gap:.5rem}.stat-label{color:var(--text-muted);font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}.stat-value{font-size:2.5rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--primary-glow);text-shadow:0 0 15px rgba(6,182,212,.4)}.typing-box{background:var(--bg-card);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:2.5rem;border-radius:16px;border:1px solid rgba(255,255,255,.05);font-size:2rem;line-height:1.6;min-height:150px;box-shadow:0 10px 30px #00000080;outline:none;transition:transform .1s ease,box-shadow .2s ease;position:relative;overflow:hidden}.typing-box:focus{border-color:#06b6d466;box-shadow:0 0 0 1px #06b6d466,0 10px 30px #00000080}.prompt-text{color:var(--text-muted);text-align:center;font-size:1.5rem;opacity:.7;animation:pulse 2s infinite}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.instructions{text-align:center;color:var(--text-muted);font-size:.9rem}.mode-selector{display:flex;align-items:center;justify-content:center;gap:1rem}.styled-select{background:var(--bg-card);color:var(--text-main);border:1px solid rgba(6,182,212,.4);padding:.5rem 1rem;border-radius:8px;font-family:inherit;font-size:1rem;outline:none;cursor:pointer;box-shadow:0 4px 10px #0000004d;transition:border-color .2s ease,box-shadow .2s ease}.styled-select:focus,.styled-select:hover{border-color:var(--primary-glow);box-shadow:0 0 10px #06b6d466}.typing-box span{color:var(--text-muted);transition:color .1s ease,text-shadow .1s ease}.typing-box span.correct{color:var(--text-main)}.typing-box span.incorrect{color:var(--incorrect-color);background:#ef444433;border-radius:4px}.typing-box span.current{color:var(--primary-glow);position:relative}.typing-box span.current:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background-color:var(--primary-glow);animation:blink 1s step-end infinite;box-shadow:0 0 8px var(--primary-glow)}@keyframes blink{50%{opacity:0}}.typing-box span.affix-prefix{color:#c084fc}.typing-box span.affix-root{color:#38bdf8}.typing-box span.affix-suffix{color:#f472b6}.typing-box span.correct.affix-prefix{color:#e9d5ff}.typing-box span.correct.affix-root{color:#bae6fd}.typing-box span.correct.affix-suffix{color:#fbcfe8}.typing-box span.chunk-variant-0{background-color:#ffffff0d;border-bottom:2px solid rgba(255,255,255,.2)}.typing-box span.chunk-variant-1{background-color:transparent;border-bottom:2px solid rgba(255,255,255,.1)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f172acc;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:100;opacity:1;transition:opacity .3s ease}.modal.hidden{opacity:0;pointer-events:none}.modal-content{background:var(--bg-card);padding:3rem;border-radius:24px;border:1px solid rgba(255,255,255,.1);text-align:center;box-shadow:0 25px 50px -12px #00000080;transform:translateY(0);transition:transform .3s ease}.modal.hidden .modal-content{transform:translateY(20px)}.modal-content h2{margin-top:0;font-size:2.5rem;color:var(--text-main)}.diff-section{margin:1.5rem 0;text-align:left}.diff-section h3{margin:0 0 .5rem;font-size:1.1rem;color:var(--primary-glow);text-transform:uppercase;letter-spacing:.05em}.diff-box{background:#0f172a66;padding:1rem;border-radius:12px;border:1px solid rgba(6,182,212,.2);font-size:1.2rem;line-height:1.5;color:var(--text-muted);max-height:150px;overflow-y:auto;word-wrap:break-word}.diff-correct{color:var(--text-main)}.diff-incorrect{color:#ff8f8f;background:#ef444426;border-radius:4px;text-decoration:line-through;text-decoration-color:#ef4444;text-decoration-thickness:2px;cursor:help;padding:0 1px}.glossary-container{margin:1.5rem 0;padding:1rem;background:#0f172a66;border-radius:12px;border:1px solid rgba(6,182,212,.2);text-align:left;max-height:200px;overflow-y:auto}.glossary-container h3{margin:0 0 .5rem;font-size:1.1rem;color:var(--primary-glow);text-transform:uppercase;letter-spacing:.05em}ul#glossary-list{list-style:none;padding:0;margin:0;font-size:.95rem;color:var(--text-muted)}ul#glossary-list li{margin-bottom:.5rem;line-height:1.4;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.05)}ul#glossary-list li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.glossary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}.focus-btn{background:#06b6d41a;border:1px solid var(--primary-glow);color:var(--primary-glow);padding:.25rem .6rem;border-radius:4px;cursor:pointer;font-size:.8rem;transition:all .2s ease}.focus-btn:hover{background:var(--primary-glow);color:var(--bg-dark)}.glossary-term{color:var(--text-main);font-weight:600}.final-stats{font-size:1.5rem;margin:2rem 0}.final-stats p{margin:.5rem 0}.primary-btn{background:transparent;border:1px solid var(--primary-glow);color:var(--primary-glow);padding:1rem 2rem;font-size:1.2rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;font-family:inherit}.primary-btn:hover{background:var(--primary-glow);color:var(--bg-dark);box-shadow:0 0 20px #06b6d466}.app-footer{text-align:center;margin-top:3rem;padding:1.5rem;border-top:1px solid rgba(255,255,255,.05)}.app-footer p{color:#94a3b880;font-size:.85rem;line-height:1.5;max-width:800px;margin:0 auto}