body{background-color:#313437;color:#646669;font-family:Roboto Mono,monospace;margin:0;padding:20px}.typing-container{max-width:100%;margin:0 auto;padding:20px}.typing-test{outline:none}.timer.warning{color:#ca4754;animation:pulse .5s infinite alternate}@keyframes pulse{0%{opacity:1}to{opacity:.7}}.timer{font-size:1.5rem;margin-bottom:20px;color:#d1d0c5;font-weight:700}.text-display{font-size:1.5rem;font-family:Verdana,Geneva,Tahoma,sans-serif;font-weight:500;line-height:2.2rem;margin-bottom:20px;text-align:left;padding:20px;border-radius:4px;min-height:150px;color:#646669;letter-spacing:2px;word-spacing:1px}.text-display span{white-space:pre-wrap;position:relative}.text-display .correct{color:#d1d0c5}.text-display .incorrect{color:#ca4754}.text-display .current{position:relative}.text-display .current:before{content:"";position:absolute;left:-2px;top:0;height:100%;width:2px;background-color:#d1d0c5;animation:blink 1s infinite}.start-hint{color:#646669;font-style:italic}.results{margin-top:30px;text-align:center;color:#d1d0c5}.results h2{margin-bottom:20px}.results .wpm{color:#d1d0c5;font-size:1.8rem}button{background-color:#d1d0c5;color:#313437;border:none;padding:12px 24px;border-radius:4px;cursor:pointer;font-size:1rem;transition:background-color .3s}button:hover{background-color:#b5b4a9}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}body{font-family:Roboto,sans-serif;background-color:#1e1e1e;color:#e0e0e0;margin:0;padding:0;display:flex;justify-content:center;align-items:center;min-height:100vh}.app{width:100%;text-align:center}header h1{color:#4caf50;margin-bottom:5px}header p{margin-top:0;color:#888}button{background-color:#4caf50;color:#fff;border:none;padding:10px 20px;margin-top:20px;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s}button:hover{background-color:#45a049}