*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0}html,body{height:100%}body{line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}#root,#__next{isolation:isolate}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#2c3e50;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh;background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%)}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;width:100%}.app-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;transition:all .3s ease;background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);color:#2c3e50}.header{margin-bottom:2rem}.title{font-size:3rem;font-weight:700;margin-bottom:.5rem;color:#2c3e50}.subtitle{font-size:1.2rem;opacity:.7;margin-bottom:2rem;color:#5a6c7d}.typing-area{width:100%;max-width:800px;margin-bottom:2rem}.text-input{width:100%;min-height:3rem;padding:.75rem 1rem;font-size:1.2rem;border:1px solid rgba(44,62,80,.2);border-radius:8px;background:#ffffff;color:#2c3e50;transition:border-color .2s ease;outline:none;overflow-wrap:break-word;word-wrap:break-word;white-space:pre-wrap;line-height:1.5;resize:none;overflow:hidden;font-variant-ligatures:none;font-feature-settings:"liga" 0}.text-input:focus{outline:none;border-color:#4caf50}.text-input:empty:before{content:attr(data-placeholder);color:#2c3e5080;font-style:normal;pointer-events:none}.playing-char{color:#4caf50}.settings{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center;margin-bottom:2rem;padding:1rem;background:rgba(255,255,255,.6);border-radius:12px;box-shadow:0 4px 16px #0000000d}.volume-control{display:flex;align-items:center;gap:.5rem}.volume-slider{width:120px;height:6px;border-radius:3px;background:rgba(44,62,80,.1);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#4caf50;cursor:pointer}.volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4caf50;cursor:pointer;border:none}.sound-toggle{padding:.5rem 1rem;border:2px solid rgba(44,62,80,.1);border-radius:8px;background:rgba(255,255,255,.6);color:#2c3e50;cursor:pointer;transition:all .3s ease}.sound-toggle:hover{border-color:#4caf50;background:rgba(76,175,80,.1)}.sound-toggle.disabled{opacity:.5;border-color:#2c3e500d}.theme-button{padding:.5rem 1rem;border:2px solid rgba(44,62,80,.1);border-radius:8px;background:rgba(255,255,255,.6);color:#2c3e50;cursor:pointer;transition:all .3s ease;font-size:.9rem;font-weight:500}.theme-button:hover{border-color:#4caf50;background:rgba(76,175,80,.1);transform:translateY(-1px)}.theme-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.instructions{margin-top:2rem;padding:1rem;background:rgba(255,255,255,.6);border-radius:8px;font-size:.9rem;opacity:.8;color:#5a6c7d;box-shadow:0 4px 16px #0000000d}.key-press{transform:scale(1.05);transition:transform .1s ease}@media (max-width: 768px){.title{font-size:2rem}.subtitle{font-size:1rem}.settings{flex-direction:column;gap:.5rem}.text-input{min-height:150px;font-size:1rem}}.debug-info{margin:.5rem 0;padding:.5rem;background-color:#f0f0f0;border-radius:4px;font-family:monospace;color:#666;text-align:center}.playing-char{color:#35ff57}