:root{font-family:"M PLUS Rounded 1c",sans-serif,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;min-height:100vh;background-color:#e6fffa}#root{width:100%;min-height:100vh}.keyboard{display:flex;flex-direction:column;gap:10px;padding:20px;background-color:#f0f4f8;border-radius:15px;box-shadow:0 4px 6px #0000001a;max-width:900px;margin:0 auto}.keyboard-row{display:flex;justify-content:center;gap:8px}.key{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background-color:#fff;border:2px solid #e2e8f0;border-radius:8px;font-weight:700;font-size:1.2rem;color:#4a5568;transition:all .1s ease;box-shadow:0 2px #cbd5e0}.key.space{width:300px}.key.active{transform:translateY(2px);box-shadow:none;background-color:#4fd1c5;color:#fff;border-color:#38b2ac}.finger-0{border-bottom-color:#fc8181}.finger-1{border-bottom-color:#f6ad55}.finger-2{border-bottom-color:#f6e05e}.finger-3{border-bottom-color:#68d391}.finger-4{border-bottom-color:#63b3ed}.finger-5{border-bottom-color:#76e4f7}.finger-6{border-bottom-color:#b794f4}.finger-7{border-bottom-color:#f687b3}.finger-guide{display:flex;justify-content:center;gap:50px;margin:20px 0}.hand{position:relative;width:150px;height:180px;background-color:#fed7d7;border-radius:20px 20px 60px 60px;display:flex;justify-content:center;align-items:flex-end;box-shadow:0 4px 6px #0000001a}.hand-label{position:absolute;bottom:-30px;font-weight:700;color:#718096}.finger{position:absolute;top:-40px;width:24px;height:60px;background-color:#fed7d7;border-radius:12px 12px 0 0;border:1px solid #feb2b2;transition:all .2s}.finger.active{background-color:#4fd1c5;transform:scale(1.1);border-color:#38b2ac;z-index:10}.left-hand .pinky{left:10px;top:-20px;height:50px}.left-hand .ring{left:38px;top:-35px;height:65px}.left-hand .middle{left:66px;top:-45px;height:75px}.left-hand .index{left:94px;top:-35px;height:65px}.left-hand .thumb{position:absolute;right:-20px;bottom:40px;width:40px;height:20px;background-color:#fed7d7;border-radius:10px;transform:rotate(30deg)}.right-hand .pinky{right:10px;top:-20px;height:50px}.right-hand .ring{right:38px;top:-35px;height:65px}.right-hand .middle{right:66px;top:-45px;height:75px}.right-hand .index{right:94px;top:-35px;height:65px}.right-hand .thumb{position:absolute;left:-20px;bottom:40px;width:40px;height:20px;background-color:#fed7d7;border-radius:10px;transform:rotate(-30deg)}.app-container{text-align:center;font-family:"M PLUS Rounded 1c",sans-serif;background-color:#e6fffa;min-height:100vh;display:flex;flex-direction:column;align-items:center}header{background-color:#38b2ac;color:#fff;padding:20px;box-shadow:0 2px 4px #0000001a;width:100%;box-sizing:border-box}h1{margin:0;font-size:2rem}.score{font-size:1.5rem;margin-top:10px;font-weight:700}main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;width:100%;max-width:1200px;margin:0 auto}.start-screen,.result-screen{background:#fff;padding:40px;border-radius:20px;box-shadow:0 10px 15px #0000001a}.start-btn{background-color:#f6ad55;color:#fff;border:none;padding:15px 40px;font-size:1.5rem;border-radius:50px;cursor:pointer;transition:transform .2s;font-weight:700;box-shadow:0 4px #dd6b20}.start-btn:active{transform:translateY(4px);box-shadow:none}.word-display{margin-bottom:40px;background:#fff;padding:20px 60px;border-radius:15px;box-shadow:0 4px 6px #0000000d}.japanese{font-size:4rem;font-weight:700;color:#2d3748;margin-bottom:10px}.romaji-container{font-size:2.5rem;font-family:monospace;letter-spacing:.1em;display:flex;justify-content:center}.romaji-completed{color:#cbd5e0}.romaji-current-typed{color:#38b2ac;font-weight:700;text-decoration:underline}.romaji-current-remaining{color:#e53e3e;font-weight:700}.romaji-future{color:#718096;opacity:.6}