:root{--bg: #f7f7f8;--panel: #ffffff;--text: #1c1c1e;--muted: #6e6e73;--accent: #3b82f6;--border: #e5e7eb;--button: #f1f5f9;--button-hover: #e5e7eb;--next-bg: #e2e8f0;--next-bg-hover: #e2e8f0;--next-text: #1c1c1e}[data-theme=dark]{--bg: #0f0f11;--panel: #161618;--text: #f5f5f7;--muted: #a1a1aa;--accent: #60a5fa;--border: #27272a;--button: #1f2933;--button-hover: #273449;--next-bg: #273449;--next-bg-hover: #273449;--next-text: #f5f5f7}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text)}.app{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}.sidebar{padding:64px;background:var(--panel);display:flex;flex-direction:column;justify-content:center;gap:24px;border-right:1px solid var(--border)}.sidebar h1{font-size:44px;font-weight:600;margin:0}.sidebar p{font-size:18px;line-height:1.6;color:var(--muted);max-width:520px}.theme-toggle{margin-top:32px;align-self:flex-start;background:none;border:1px solid var(--border);padding:8px 14px;border-radius:8px;cursor:pointer;color:var(--muted)}.quiz{display:flex;flex-direction:column;align-items:center;justify-content:center}.card{background:var(--panel);padding:48px;border-radius:16px;border:1px solid var(--border);min-width:420px;min-height:520px;text-align:center;display:flex;flex-direction:column;justify-content:flex-start}.reinforce{margin-top:auto}.keyboard-hint{margin-top:12px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}.prompt{font-size:96px;margin-bottom:32px}.choices{display:grid;gap:12px}button{position:relative;padding:14px;font-size:18px;background:var(--button);border:1px solid var(--border);border-radius:10px;cursor:pointer;color:var(--text)}button:hover{background:var(--button-hover)}button:disabled{opacity:.6;cursor:default}.feedback{margin-top:24px;font-size:18px}.correct{color:#22c55e}.incorrect{color:#ef4444}.card{transition:transform .2s ease,opacity .2s ease}.card-answered{transform:scale(.98);opacity:.95}.correct-choice{border-color:#22c55e;background:#22c55e26}.incorrect-choice{border-color:#ef4444;background:#ef444426}.reinforce{margin-top:24px;padding:16px;border-radius:12px;background:var(--button);border:1px solid var(--border);display:grid;gap:6px;visibility:hidden;opacity:0;transition:opacity .15s ease}.reinforce.visible{visibility:visible;opacity:1}.reinforce-glyphs{font-size:32px;font-weight:600}.reinforce-name{font-size:16px;text-transform:capitalize}.reinforce-pronunciation{font-size:14px;color:var(--muted)}.settings-button{position:absolute;top:16px;right:16px;width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--button);border:1px solid var(--border);border-radius:8px;cursor:pointer}.settings-button:hover{background:var(--button-hover)}.footer{position:fixed;bottom:12px;left:50%;transform:translate(-50%);font-size:12px;color:var(--muted)}.footer a{color:inherit;text-decoration:none}.footer a:hover{text-decoration:underline}.attribution{font-size:12px;color:var(--muted);text-align:center;width:80%;margin:32px auto 0}.attribution a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}.attribution a:hover{border-bottom-color:var(--accent)}.next-button{margin-top:16px;width:100%;padding:14px;font-size:16px;font-weight:500;background:var(--next-bg);color:var(--next-text);border:1px solid var(--border);border-radius:10px;cursor:pointer;visibility:hidden;opacity:0;transition:opacity .15s ease}.next-button.visible{visibility:visible;opacity:1}button{display:flex;align-items:center;gap:12px}.choice-index{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);flex-shrink:0}.choice-label{position:absolute;left:50%;transform:translate(-50%);text-align:center;pointer-events:none}.dialog-overlay{position:fixed;inset:0;background:#00000073;z-index:1000}.dialog-content{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:24px;min-width:280px;z-index:1001;display:grid;gap:16px}.dialog-title{font-size:18px;font-weight:600}.dialog-close{margin-top:8px;padding:10px;background:var(--button);border:1px solid var(--border);border-radius:8px;cursor:pointer}.dialog-close:hover{background:var(--button-hover)}.pronunciation-select{appearance:none;width:100%;padding:10px 12px;font-size:14px;background:var(--button);color:var(--text);border:1px solid var(--border);border-radius:8px;cursor:pointer}.pronunciation-select:hover{background:var(--button-hover)}@media(max-width:768px){.app{grid-template-columns:1fr}.sidebar{padding:24px 16px 20px;border-right:none;border-bottom:1px solid var(--border);gap:14px;align-items:center;text-align:center}.sidebar h1{font-size:28px;line-height:1.2;max-width:320px}.sidebar p{font-size:15px;line-height:1.5;margin:0;max-width:320px}.sidebar p+p{display:block}.theme-toggle{margin-top:6px;padding:6px 12px;font-size:14px;align-self:center}.quiz{padding:16px;align-items:flex-start}.card{width:100%;max-width:100%;padding:28px 20px;margin-top:8px}.prompt{font-size:64px;margin-bottom:24px}.choices{gap:10px}button{font-size:16px;padding:14px}.feedback{font-size:16px;margin-top:16px}}