:root{--bg-color: #0d1117;--text-color: #c9d1d9;--text-subtle: #8b949e;--primary: #58a6ff;--success: #2ea043;--error: #da3633;--caret-color: #58a6ff;--code-bg: #161b22;--font-mono: "JetBrains Mono", monospace;--font-sans: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-color);color:var(--text-color);line-height:1.6;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}#app{width:100%;max-width:900px;padding:2rem;display:flex;flex-direction:column;align-items:center;gap:2rem}header{text-align:center}.logo{font-size:2rem;font-weight:700;color:var(--text-color);margin-bottom:.5rem}.highlight{color:var(--primary)}.subtitle{color:var(--text-subtle);font-size:.9rem}.controls{margin-top:1rem}.category-select{background:var(--code-bg);color:var(--text-color);border:1px solid #30363d;padding:.5rem 1rem;border-radius:6px;font-family:var(--font-sans);font-size:.9rem;cursor:pointer;outline:none;transition:border-color .2s}.category-select:hover,.category-select:focus{border-color:var(--primary)}#game-container{width:100%;position:relative;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.code-block{background-color:var(--code-bg);border:1px solid #30363d;border-radius:8px;padding:2rem;font-family:var(--font-mono);font-size:1.5rem;line-height:1.6;width:100%;min-height:200px;position:relative;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;cursor:text;white-space:pre-wrap;word-break:break-word;transition:border-color .2s}.code-block:focus-within{border-color:var(--text-subtle);outline:none}.char{color:var(--text-subtle);position:relative}.char.correct{color:var(--text-color)}.char.incorrect{color:var(--error);text-decoration:underline}.char.current{border-left:2px solid var(--caret-color);margin-left:-1px;animation:blink 1s step-end infinite}#caret.active{display:block}@keyframes blink{0%,to{border-color:transparent}50%{border-color:var(--caret-color)}}#hidden-input{position:absolute;opacity:0;top:0;left:0;height:0;width:0;pointer-events:none}#results{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;text-align:center;animation:slideDown .3s ease-out}#results.hidden{display:none}.result-card{display:flex;gap:3rem;background:var(--code-bg);padding:1.5rem 3rem;border-radius:8px;border:1px solid var(--success)}.stat{display:flex;flex-direction:column;align-items:center}.stat .label{font-size:.8rem;color:var(--text-subtle);text-transform:uppercase;letter-spacing:1px}.stat .value{font-size:2.5rem;font-weight:700;color:var(--success)}.primary-btn{background-color:var(--primary);color:#000;border:none;padding:.8rem 2rem;font-size:1rem;font-weight:600;border-radius:6px;cursor:pointer;transition:transform .1s,filter .2s}.primary-btn:hover{filter:brightness(1.1)}.primary-btn:active{transform:scale(.98)}#instructions{color:var(--text-subtle);font-size:.9rem;margin-top:-1rem;transition:opacity .3s}#instructions.hidden{opacity:0}.fade-in{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}footer{margin-top:auto;color:var(--text-subtle);font-size:.8rem;opacity:.5}