:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--text-primary: #1f2937;--text-secondary: #4b5563;--background: #f8fafc;--surface: #ffffff;--highlight: rgba(59, 130, 246, .08);--highlight-shadow: rgba(59, 130, 246, .12);--border: #e5e7eb;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .02);--shadow-md: 0 4px 6px rgba(0, 0, 0, .04);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .06);--transition-base: all .3s cubic-bezier(.4, 0, .2, 1);--glass-background: rgba(255, 255, 255, .8);--glass-border: rgba(255, 255, 255, .12)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--text-primary);background-color:var(--background);line-height:1.6;letter-spacing:-.015em;min-height:100vh;background-image:radial-gradient(circle at 50% 0%,rgba(59,130,246,.03),transparent 50%)}button{font-family:inherit;border:none;cursor:pointer;background:none;font-size:.9375rem;letter-spacing:-.01em;font-weight:500;transition:var(--transition-base);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}audio{filter:grayscale(1);opacity:.85;transition:opacity .2s ease}audio:hover{opacity:1}audio::-webkit-media-controls-panel{background-color:var(--surface)}audio::-webkit-media-controls-play-button,audio::-webkit-media-controls-mute-button{opacity:.8}audio::-webkit-media-controls-current-time-display,audio::-webkit-media-controls-time-remaining-display{color:var(--text-secondary);font-family:inherit;letter-spacing:-.01em}audio::-webkit-media-controls-timeline,audio::-webkit-media-controls-volume-slider{height:2px;background-color:var(--border)}.audio-player{width:100%;display:flex;flex-direction:column;align-items:center;position:relative}.mode-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;padding:.25rem;background-color:var(--surface);border-radius:12px}.mode-tab{display:flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;color:var(--text-secondary);font-size:.9375rem;font-weight:500;border-radius:8px;transition:all .2s ease}.mode-tab svg{opacity:.7;transition:opacity .2s ease}.mode-tab:hover{color:var(--primary-color);background-color:var(--highlight)}.mode-tab:hover svg{opacity:1}.mode-tab.active{color:var(--primary-color);background-color:var(--highlight)}.mode-tab.active svg{opacity:1}@keyframes audioChange{0%{transform:scale(1);opacity:1}50%{transform:scale(.95);opacity:.5}to{transform:scale(1);opacity:1}}.sentence{width:100%;max-width:800px;padding:2.5rem;background-color:var(--surface);border-radius:32px;line-height:1.8;text-align:center;position:relative;isolation:isolate}.audio-change{animation:audioChange .5s ease-in-out}.sentence:before{content:"";position:absolute;top:1px;right:1px;bottom:1px;left:1px;background:linear-gradient(180deg,#ffffffe6,#fff6);border-radius:inherit;z-index:-1}.word{display:inline-block;padding:.25em .5em;margin:0 .15em;border-radius:8px;font-size:1.5rem;color:var(--text-primary);transition:all .3s cubic-bezier(.22,1,.36,1);position:relative;opacity:.85;letter-spacing:-.01em}.word.clickable{cursor:pointer}.word.clickable:hover{background-color:var(--highlight);opacity:1;transform:translateY(-1px)}.highlighted{background-color:var(--highlight);color:var(--primary-color);opacity:1;transform:translateY(-1px);font-weight:500}.play-button{position:absolute;bottom:-24px;left:50%;transform:translate(-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;background-color:var(--primary-color);transition:all .2s cubic-bezier(.4,0,.2,1)}.play-button:hover{transform:translate(-50%) translateY(-2px);background-color:#2563eb}.play-button svg{width:22px;height:22px;transition:transform .2s ease}.play-button:hover svg{transform:scale(1.1)}.practice-mode{width:100%}.practice-form{display:flex;flex-direction:column;gap:1.5rem;width:100%;position:relative}.word-inputs{display:flex;flex-direction:column;gap:.75rem;width:100%;background:#ffffff80;padding:1.5rem;border-radius:16px}.word-input-container{display:flex;align-items:center;gap:1rem;width:100%;padding:.75rem;background-color:#fff;border-radius:12px;transition:all .3s ease;border:1px solid rgba(59,130,246,.1)}.word-input-container:hover{border-color:#3b82f64d;transform:translateY(-1px)}.word-space{padding:0;border-radius:12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:#fff;min-width:48px;height:48px;transition:all .3s cubic-bezier(.4,0,.2,1);border:2px solid rgba(59,130,246,.1);position:relative;overflow:hidden}.word-content{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;background-color:transparent;border-radius:10px;transition:all .3s ease}.word-bar{width:70%;height:3px;background-color:#3b82f64d;border-radius:4px;transition:all .3s ease}.word-icon{font-size:20px;color:#3b82f680;transition:all .3s ease}.word-space.highlighted .word-icon,.word-space:hover .word-icon{color:var(--primary-color);transform:scale(1.1)}.word-space:hover{transform:translateY(-2px);border-color:#3b82f64d;background-color:#fff}.word-space:hover .word-bar{background-color:var(--primary-color);width:85%}.word-space.highlighted{background-color:#fff;border-color:var(--primary-color);transform:translateY(-2px) scale(1.05)}.word-space.highlighted .word-bar{background-color:var(--primary-color);width:85%}.practice-input{flex:1;padding:.75rem 1rem;border:2px solid rgba(59,130,246,.1);border-radius:8px;font-size:1rem;background-color:#fff;transition:all .3s ease}.practice-input:focus{border-color:var(--primary-color);transform:translateY(-1px)}.word-result{flex:1;padding:.75rem 1rem;border-radius:8px;font-size:1rem;position:relative}.word-result.correct{background-color:#22c55e1a;color:#15803d}.word-result.incorrect{background-color:#ef44441a;color:#b91c1c}.hint-container{margin-top:.5rem}.hint-button{width:100%;padding:.5rem;background:none;border:1px dashed rgba(59,130,246,.3);border-radius:6px;color:var(--primary-color);font-size:.875rem;transition:all .2s ease;cursor:pointer}.hint-button:hover{background-color:#3b82f60d;border-color:var(--primary-color)}.correct-word{font-size:.875rem;color:#15803d;margin-top:.5rem;opacity:0;transform:translateY(-4px);transition:all .3s ease;display:none}.correct-word.show{opacity:1;transform:translateY(0);display:block}.submit-button{padding:1rem 2rem;background-color:var(--primary-color);color:#fff;border-radius:12px;font-size:.95rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);margin-top:.5rem}.submit-button:hover{transform:translateY(-2px);background-color:#2563eb}.results-actions{display:flex;gap:1rem;justify-content:center;margin-top:.5rem}.action-button{padding:.875rem 1.75rem;border-radius:12px;font-size:.95rem;font-weight:500;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;gap:.5rem;background-color:#fff;color:var(--primary-color);border:1px solid rgba(59,130,246,.2)}.action-button:hover{transform:translateY(-2px);border-color:var(--primary-color)}@media (max-width: 640px){.sentence{padding:1.5rem;border-radius:20px}.word-inputs{padding:1rem}.word-input-container{padding:.5rem}.word-space{min-width:40px;height:40px}.practice-input{font-size:.875rem;padding:.625rem .875rem}.submit-button{width:100%;padding:.875rem}.results-actions{flex-direction:column}.action-button{width:100%;justify-content:center;padding:.875rem}}#root{width:100%;min-height:100vh;display:flex;justify-content:center;padding:2rem}.app-container{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;gap:4rem}h1{color:var(--text-primary);font-size:1.75rem;font-weight:600;text-align:center;line-height:1.2;letter-spacing:-.02em;opacity:.92}.navigation{display:flex;align-items:center;gap:2rem;padding:.75rem;background-color:var(--surface);border-radius:999px;box-shadow:0 1px 2px #0000000a}.navigation button{padding:.5rem 1.25rem;color:var(--text-secondary);font-weight:500;font-size:.9375rem;border-radius:999px;transition:all .2s ease;opacity:.9}.navigation button:hover:not(:disabled){color:var(--primary-color);background-color:var(--highlight)}.navigation button:disabled{opacity:.5;cursor:not-allowed}.navigation span{font-size:.875rem;color:var(--text-secondary);font-weight:450;opacity:.8}@media (max-width: 640px){#root{padding:1.5rem 1rem}.app-container{gap:3rem}h1{font-size:1.5rem}.navigation{width:100%;flex-direction:column;gap:.75rem;background:none;box-shadow:none}.navigation button{width:100%;padding:.75rem;background-color:var(--surface)}.navigation span{order:-1}}