*{margin:0;padding:0;box-sizing:border-box}body{font-family:Roboto Mono,Consolas,Monaco,monospace;background:#323437;color:#d1d0c5;min-height:100vh;overflow-x:hidden}.container{max-width:1200px;margin:0 auto;padding:0 20px}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#2c2e31}::-webkit-scrollbar-thumb{background:#646669;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#d1d0c5}.header{padding:30px 0;text-align:center;border-bottom:1px solid #2c2e31}.header h1{font-size:2.5em;font-weight:300;color:#e2b714;margin-bottom:5px;letter-spacing:-.5px}.header p{color:#646669;font-size:.9em;font-weight:400}.stats{display:flex;justify-content:center;gap:40px;padding:30px 0;border-bottom:1px solid #2c2e31}.stat-item{text-align:center}.stat-value{font-size:2.5em;font-weight:300;color:#e2b714;line-height:1;margin-bottom:5px}.stat-label{color:#646669;font-size:.8em;text-transform:uppercase;letter-spacing:1px}.practice-area{padding:60px 40px;max-width:900px;margin:0 auto}.controls{text-align:center;margin-bottom:40px}.btn{background:transparent;color:#646669;border:1px solid #2c2e31;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:.9em;font-family:Roboto Mono,monospace;margin:0 8px;transition:all .2s ease;text-transform:lowercase}.btn:hover{color:#d1d0c5;border-color:#646669;background:rgba(100,102,105,.1)}.btn:active{transform:translateY(1px)}.input-method-indicator{margin:30px 0;padding:15px 20px;background:#2c2e31;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:15px;font-size:.85em}.method-label{color:#646669;text-transform:uppercase;letter-spacing:1px}.method-value{padding:4px 12px;border-radius:12px;font-weight:500;text-transform:lowercase}.method-value.standard{background:#646669;color:#323437}.method-value.romaji{background:#17a2b8;color:#fff}.method-value.japanese-ime{background:#28a745;color:#fff}.method-value.kana-direct{background:#e2b714;color:#323437}.method-value.japanese-direct{background:#ca4754;color:#fff}.composing-indicator{background:rgba(226,183,20,.2);color:#e2b714;padding:4px 12px;border-radius:12px;font-style:italic;font-size:.9em}.feedback{margin-top:30px;padding:15px 20px;border-radius:8px;text-align:center;font-weight:400;font-size:.9em}.feedback.correct{background:rgba(40,167,69,.2);color:#28a745;border:1px solid rgba(40,167,69,.3)}.feedback.incorrect{background:rgba(202,71,84,.2);color:#ca4754;border:1px solid rgba(202,71,84,.3)}@media (max-width: 768px){.results-stats{grid-template-columns:1fr;gap:20px}.results-container{padding:40px 20px}.results-title{font-size:2.2em}.word-display{font-size:2em}.typing-input{font-size:1.2em}.keyboard{padding:20px}.key{min-width:35px;min-height:35px;font-size:.75em}.app-title{font-size:1.4em}.word-counter{font-size:1em}}.keyboard{background:#2c2e31;padding:30px;border-radius:12px;margin:40px 0;box-shadow:0 4px 6px #0000004d}.keyboard-row{display:flex;justify-content:center;margin-bottom:6px}.key{background:#323437;color:#646669;border:1px solid #404040;margin:1px;padding:8px;border-radius:6px;min-width:45px;min-height:45px;text-align:center;font-family:Roboto Mono,monospace;font-size:.85em;transition:all .1s ease;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.key:hover{background:#404040;color:#d1d0c5}.key.active{background:#e2b714;color:#323437;border-color:#e2b714;transform:scale(.95);box-shadow:0 0 15px #e2b71466}.key.next-key{background:#4a90e2;color:#fff;border-color:#4a90e2;box-shadow:0 0 15px #4a90e266;animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 15px #4a90e266}50%{box-shadow:0 0 25px #4a90e2b3}to{box-shadow:0 0 15px #4a90e266}}.key-main{font-size:1.1em;font-weight:500;line-height:1}.key-sub{font-size:.8em;opacity:.6;margin-top:2px;line-height:1}.key.space{width:240px}.key.enter{width:85px}.key.tab,.key.caps,.key.shift{width:100px;font-size:.7em}.key.backspace{width:150px;font-size:.7em}.practice-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;outline:none}.practice-container{width:100%;max-width:1000px}.practice-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;padding:0 20px}.app-title{font-size:1.8em;font-weight:300;color:#e2b714;letter-spacing:-.5px}.word-counter{font-size:1.2em;color:#646669;font-weight:500}.typing-section{text-align:center;margin-bottom:50px}.word-display{font-size:2.5em;line-height:1.8;margin-bottom:30px;min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:Roboto Mono,monospace;font-weight:400}.word-character{margin:0 2px;padding:4px 2px;border-radius:4px;transition:all .15s ease;position:relative}.word-character.correct{color:#d1d0c5;background:transparent}.word-character.incorrect{color:#ca4754;background:rgba(202,71,84,.2)}.word-character.current{background:#e2b714;color:#323437;animation:none}.word-character.current:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background:#e2b714;animation:blink 1s infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.input-area{margin-bottom:30px;position:relative}.typing-input{width:100%;max-width:600px;font-size:1.5em;padding:15px 20px;background:transparent;border:2px solid #2c2e31;border-radius:8px;color:#d1d0c5;text-align:center;outline:none;transition:all .2s ease;font-family:Roboto Mono,monospace;margin:0 auto;display:block}.typing-input:focus{border-color:#e2b714;box-shadow:0 0 0 3px #e2b7141a}.typing-input::placeholder{color:#646669}.results-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,#323437 0%,#2c2e31 100%)}.results-container{text-align:center;background:rgba(44,46,49,.8);padding:60px 40px;border-radius:20px;box-shadow:0 10px 30px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(100,102,105,.2);max-width:600px;width:100%}.results-title{font-size:3em;font-weight:300;color:#e2b714;margin-bottom:40px;letter-spacing:-1px}.results-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:30px;margin-bottom:50px}.result-item{text-align:center;padding:20px;background:rgba(50,52,55,.5);border-radius:12px;border:1px solid rgba(100,102,105,.2)}.result-value{font-size:2.5em;font-weight:300;color:#e2b714;line-height:1;margin-bottom:8px}.result-label{color:#646669;font-size:.9em;text-transform:uppercase;letter-spacing:1px;font-weight:500}.results-actions{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}.btn-primary{background:#e2b714;color:#323437;border:none;padding:15px 30px;border-radius:10px;cursor:pointer;font-size:1.1em;font-family:Roboto Mono,monospace;font-weight:500;transition:all .2s ease;text-transform:lowercase}.btn-primary:hover{background:#f0c529;transform:translateY(-2px);box-shadow:0 5px 15px #e2b7144d}.btn-secondary{background:transparent;color:#646669;border:2px solid #2c2e31;padding:15px 30px;border-radius:10px;cursor:pointer;font-size:1.1em;font-family:Roboto Mono,monospace;font-weight:500;transition:all .2s ease;text-transform:lowercase}.btn-secondary:hover{color:#d1d0c5;border-color:#646669;background:rgba(100,102,105,.1);transform:translateY(-2px)}