:root{--bg-primary: #fafafa;--bg-secondary: #ffffff;--bg-tertiary: #f0f0f0;--text-primary: #1a1a1a;--text-secondary: #555555;--text-tertiary: #888888;--color-green: #22c55e;--color-green-bg: #dcfce7;--color-red: #ef4444;--color-red-bg: #fee2e2;--color-blue: #3b82f6;--color-blue-bg: #dbeafe;--color-orange: #f59e0b;--color-orange-bg: #fef3c7;--color-purple: #8b5cf6;--color-purple-bg: #ede9fe;--color-teal: #14b8a6;--color-teal-bg: #ccfbf1;--border-color: #e5e5e5;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--font-mono: "SF Mono", "Fira Code", "Cascadia Code", monospace}@media(prefers-color-scheme:dark){:root{--bg-primary: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #262626;--text-primary: #f0f0f0;--text-secondary: #aaaaaa;--text-tertiary: #666666;--color-green-bg: #14532d;--color-red-bg: #7f1d1d;--color-blue-bg: #1e3a5f;--color-orange-bg: #78350f;--color-purple-bg: #3b0764;--color-teal: #2dd4bf;--color-teal-bg: #134e4a;--border-color: #333333;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5)}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none;overflow:hidden}button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}input{font-family:inherit;border:none;outline:none;background:none;color:inherit}.app{width:100vw;height:100vh;display:flex;flex-direction:column}.home-screen{flex:1;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch}.home-content{text-align:center;max-width:900px;padding:24px 40px 40px;width:100%}.home-title{font-size:48px;font-weight:700;letter-spacing:-1.5px;margin-bottom:8px}.home-subtitle{font-size:18px;color:var(--text-secondary);margin-bottom:48px}.level-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.level-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:20px;border-radius:var(--radius-md);background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s}.level-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.level-btn:active{transform:translateY(0)}.level-label{font-size:18px;font-weight:600}.level-ages{font-size:13px;color:var(--text-tertiary)}.level-easy .level-label{color:var(--color-green)}.level-medium .level-label{color:var(--color-orange)}.level-hard .level-label{color:var(--color-red)}.level-mix .level-label{color:var(--color-purple)}.level-word-count{font-size:12px;color:var(--text-tertiary);margin-top:2px}.nav-back{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--text-secondary);padding:6px 12px;border-radius:var(--radius-sm);margin-bottom:20px;transition:background .15s,color .15s}.nav-back:hover{background:var(--bg-tertiary);color:var(--text-primary)}.section-title{font-size:32px;font-weight:700;letter-spacing:-1px;margin-bottom:8px}.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}@media(min-width:600px){.theme-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:800px){.theme-grid{grid-template-columns:repeat(4,1fr)}}@media(min-width:1000px){.theme-grid{grid-template-columns:repeat(6,1fr)}}.theme-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 16px;border-radius:var(--radius-md);background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s}.theme-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.theme-card:active{transform:translateY(0)}.theme-icon{font-size:36px;line-height:1}.theme-label{font-size:17px;font-weight:600}.theme-count{font-size:12px;color:var(--text-tertiary)}.theme-blue:hover{border-color:var(--color-blue)}.theme-blue .theme-label{color:var(--color-blue)}.theme-purple:hover{border-color:var(--color-purple)}.theme-purple .theme-label{color:var(--color-purple)}.theme-orange:hover{border-color:var(--color-orange)}.theme-orange .theme-label{color:var(--color-orange)}.theme-green:hover{border-color:var(--color-green)}.theme-green .theme-label{color:var(--color-green)}.theme-teal:hover{border-color:var(--color-teal)}.theme-teal .theme-label{color:var(--color-teal)}.theme-red:hover{border-color:var(--color-red)}.theme-red .theme-label{color:var(--color-red)}.subtheme-list{display:flex;flex-direction:column;gap:8px;text-align:left}.subtheme-btn{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:var(--radius-md);background:var(--bg-secondary);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s}.subtheme-btn:hover{transform:translate(4px);box-shadow:var(--shadow-md)}.subtheme-btn:active{transform:translate(0)}.subtheme-icon{font-size:24px;width:36px;text-align:center;flex-shrink:0}.subtheme-info{display:flex;flex-direction:column;gap:2px}.subtheme-label{font-size:16px;font-weight:600}.subtheme-count{font-size:12px;color:var(--text-tertiary)}.subtheme-blue:hover{border-color:var(--color-blue)}.subtheme-blue .subtheme-label{color:var(--color-blue)}.subtheme-purple:hover{border-color:var(--color-purple)}.subtheme-purple .subtheme-label{color:var(--color-purple)}.subtheme-orange:hover{border-color:var(--color-orange)}.subtheme-orange .subtheme-label{color:var(--color-orange)}.subtheme-green:hover{border-color:var(--color-green)}.subtheme-green .subtheme-label{color:var(--color-green)}.subtheme-teal:hover{border-color:var(--color-teal)}.subtheme-teal .subtheme-label{color:var(--color-teal)}.subtheme-red:hover{border-color:var(--color-red)}.subtheme-red .subtheme-label{color:var(--color-red)}.play-screen{flex:1;display:flex;flex-direction:column;height:100vh}.play-header{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border-color)}.back-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);color:var(--text-secondary);transition:background .15s}.back-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.progress-info{flex:1;display:flex;justify-content:space-between;align-items:center}.word-count{font-size:14px;color:var(--text-secondary)}.score-display{font-size:14px;font-weight:600;color:var(--color-blue)}.play-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:32px}.retry-banner{font-size:16px;font-weight:500;color:var(--color-orange);background:var(--color-orange-bg);padding:8px 20px;border-radius:var(--radius-lg)}.word-prompt{display:flex;flex-direction:column;align-items:center;gap:20px}.speak-btn{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 40px;border-radius:var(--radius-lg);background:var(--color-blue-bg);color:var(--color-blue);transition:transform .15s,box-shadow .15s}.speak-btn:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.speak-btn:active{transform:scale(.98)}.speak-btn span{font-size:14px;font-weight:500}.correct-spelling{display:flex;gap:4px}.correct-letter{display:inline-flex;align-items:center;justify-content:center;width:36px;height:44px;font-size:24px;font-weight:600;font-family:var(--font-mono);background:var(--color-green-bg);color:var(--color-green);border-radius:var(--radius-sm)}.typing-area{display:flex;gap:12px;width:100%;max-width:440px}.word-input{flex:1;font-size:24px;font-family:var(--font-mono);letter-spacing:2px;padding:14px 20px;background:var(--bg-secondary);border:2px solid var(--border-color);border-radius:var(--radius-md);text-align:center;transition:border-color .15s}.word-input:focus{border-color:var(--color-blue)}.word-input::placeholder{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:16px;letter-spacing:0;color:var(--text-tertiary)}.submit-btn{padding:14px 24px;font-size:16px;font-weight:600;background:var(--color-blue);color:#fff;border-radius:var(--radius-md);transition:opacity .15s}.submit-btn:hover{opacity:.9}@media(max-width:500px){.typing-area{flex-direction:column}.submit-btn{width:100%;padding:16px;font-size:18px}}.word-result{display:flex;flex-direction:column;align-items:center;gap:24px}.result-correct,.result-incorrect{display:flex;flex-direction:column;align-items:center;gap:16px}.result-icon{margin-bottom:4px}.result-section{display:flex;flex-direction:column;align-items:center;gap:8px}.result-label{font-size:13px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.result-message{font-size:20px;font-weight:600;color:var(--color-green)}.result-word{display:flex;gap:4px}.letter{display:inline-flex;align-items:center;justify-content:center;width:36px;height:44px;font-size:24px;font-weight:600;font-family:var(--font-mono);border-radius:var(--radius-sm)}.letter-correct{background:var(--color-green-bg);color:var(--color-green)}.letter-wrong{background:var(--color-red-bg);color:var(--color-red);text-decoration:line-through}.letter-missing{background:var(--color-red-bg);color:var(--color-red);border:2px dashed var(--color-red);opacity:.7}.letter-extra{background:var(--color-orange-bg);color:var(--color-orange);text-decoration:line-through}.next-btn{padding:12px 32px;font-size:16px;font-weight:600;background:var(--color-blue);color:#fff;border-radius:var(--radius-md);transition:opacity .15s}.next-btn:hover{opacity:.9}.hint-text{font-size:12px;color:var(--text-tertiary)}.results-screen{flex:1;display:flex;align-items:center;justify-content:center;overflow-y:auto}.results-content{text-align:center;max-width:520px;padding:40px}.results-title{font-size:36px;font-weight:700;margin-bottom:32px}.results-stats{display:flex;justify-content:center;gap:32px;margin-bottom:36px}.stat{display:flex;flex-direction:column;gap:4px}.stat-value{font-size:32px;font-weight:700;color:var(--color-blue)}.stat-label{font-size:13px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}.results-words{text-align:left;margin-bottom:32px}.results-words h3{font-size:14px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.word-list{display:flex;flex-direction:column;gap:6px;max-height:240px;overflow-y:auto}.word-item{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:var(--radius-sm);background:var(--bg-secondary);border:1px solid var(--border-color)}.word-text{font-family:var(--font-mono);font-weight:500}.word-typed{font-size:13px;color:var(--color-red);font-family:var(--font-mono)}.word-item-correct .word-text{color:var(--color-green)}.word-item-wrong .word-text{color:var(--color-red)}.results-actions{display:flex;gap:12px;justify-content:center}.play-again-btn{padding:12px 32px;font-size:16px;font-weight:600;background:var(--color-blue);color:#fff;border-radius:var(--radius-md);transition:opacity .15s}.play-again-btn:hover{opacity:.9}.home-btn{padding:12px 32px;font-size:16px;font-weight:600;background:var(--bg-tertiary);border-radius:var(--radius-md);transition:background .15s}.home-btn:hover{background:var(--border-color)}.site-footer{position:fixed;bottom:12px;right:16px;font-size:12px;color:var(--text-tertiary)}.site-footer a{color:var(--text-tertiary);text-decoration:underline;text-underline-offset:2px}.site-footer a:hover{color:var(--text-secondary)}