:root{--bg:#0d0d0d;--fg:#3f3;--dim:#1a661a;--error:#f33;--accent:#ff0;--font:"Courier New", "Lucida Console", monospace}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--fg);font-family:var(--font);min-height:100vh;font-size:14px;line-height:1.5}#app{max-width:900px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:30px}.header pre{text-align:left;color:var(--fg);font-family:Consolas,Courier New,Lucida Console,monospace;font-size:16px;line-height:1.1;display:inline-block}.btn{border:2px solid var(--fg);color:var(--fg);font-family:var(--font);cursor:pointer;text-transform:uppercase;letter-spacing:2px;background:0 0;padding:10px 30px;font-size:16px;transition:all .15s}.btn:hover{background:var(--fg);color:var(--bg)}.btn:focus{outline:2px solid var(--accent)}.btn--accent{border-color:var(--accent);color:var(--accent)}.btn--accent:hover{background:var(--accent);color:var(--bg)}.btn--error{border-color:var(--error);color:var(--error)}.btn--error:hover{background:var(--error);color:var(--bg)}.input{border:2px solid var(--dim);color:var(--fg);font-family:var(--font);background:0 0;outline:none;width:100%;max-width:400px;padding:10px 15px;font-size:18px}.input:focus{border-color:var(--fg)}.input::placeholder{color:var(--dim)}.typing-container{margin:20px 0}.phrase-display{border:1px solid var(--dim);white-space:pre-wrap;word-break:break-all;background:#111;margin-bottom:10px;padding:15px;font-size:16px;line-height:1.8;overflow-x:auto}.phrase-display .char{transition:color 50ms}.char--correct{color:var(--fg);text-decoration:underline}.char--incorrect{color:var(--error);background:#f333}.char--untyped{color:var(--dim)}.stats-bar{border-top:1px solid var(--dim);border-bottom:1px solid var(--dim);justify-content:space-between;align-items:center;margin:15px 0;padding:10px 0;display:flex}.stat{text-align:center}.stat__label{color:var(--dim);text-transform:uppercase;letter-spacing:1px;font-size:10px}.stat__value{color:var(--accent);font-size:24px}.result{text-align:center;padding:30px 0}.result pre{text-align:left;font-size:12px;line-height:1.2;display:inline-block}.result__stats{margin:20px 0;font-size:16px}.result__stats span{color:var(--accent)}.leaderboard{overflow-x:auto}.leaderboard h2{text-align:center;color:var(--accent);margin:20px 0 10px}.leaderboard-table{border-collapse:collapse;white-space:nowrap;width:100%;font-size:13px}.leaderboard-table th,.leaderboard-table td{border:1px solid var(--dim);padding:6px 12px}.leaderboard-table th{color:var(--accent);text-align:left;background:#1a1a1a}.leaderboard-table tr:nth-child(2n){background:#111}.landing{text-align:center;padding:40px 0}.landing__form{flex-direction:column;align-items:center;gap:15px;margin-top:30px;display:flex}.landing__instructions{color:var(--dim);max-width:500px;margin:20px auto;font-size:13px;line-height:1.6}.typing-input{opacity:0;position:absolute;left:-9999px}.phrase-nav{gap:10px;margin-bottom:10px;display:flex}.phrase-nav__dot{border:1px solid var(--dim);border-radius:50%;width:10px;height:10px}.phrase-nav__dot--active{background:var(--fg);border-color:var(--fg)}.phrase-nav__dot--done{background:var(--accent);border-color:var(--accent)}@media (width<=600px){#app{padding:10px}.header pre,.result pre{font-size:7px}.phrase-display{font-size:14px}.leaderboard-table{font-size:11px}}
