:root{--bg-primary: #ffffff;--bg-secondary: #f5f5f5;--bg-card: #ffffff;--bg-modal: #ffffff;--bg-overlay: rgba(0, 0, 0, .5);--text-primary: #1a1a2e;--text-secondary: #555577;--text-muted: #888899;--accent: #6c63ff;--accent-hover: #574fd6;--success: #22c55e;--error: #ef4444;--warning: #f59e0b;--border: #e2e2e8;--border-focus: #6c63ff;--input-bg: #f9f9fc;--button-primary-bg: #6c63ff;--button-primary-text: #ffffff;--button-secondary-bg: #f5f5f5;--button-secondary-text: #1a1a2e;--hint-bg: #f0eeff;--hint-border: #c4beff;--attempt-correct-bg: #dcfce7;--attempt-correct-text: #166534;--attempt-wrong-bg: #f5f5f5;--attempt-wrong-text: #555577;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-size-base: 16px;--max-width: 480px;--header-height: 56px;--border-radius: 8px;--border-radius-lg: 16px;--transition: .2s ease}[data-theme=dark]{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-card: #1e1e30;--bg-modal: #1e1e30;--bg-overlay: rgba(0, 0, 0, .7);--text-primary: #f0f0f8;--text-secondary: #a0a0c0;--text-muted: #666688;--accent: #7c73ff;--accent-hover: #6c63ff;--success: #4ade80;--error: #f87171;--warning: #fbbf24;--border: #2a2a40;--border-focus: #7c73ff;--input-bg: #1a1a2e;--button-primary-bg: #7c73ff;--button-primary-text: #ffffff;--button-secondary-bg: #1a1a2e;--button-secondary-text: #f0f0f8;--hint-bg: #1e1e38;--hint-border: #3a3a60;--attempt-correct-bg: #14532d;--attempt-correct-text: #86efac;--attempt-wrong-bg: #1a1a2e;--attempt-wrong-text: #a0a0c0}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:var(--font-size-base);-webkit-text-size-adjust:100%}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);line-height:1.5;min-height:100dvh;transition:background-color var(--transition),color var(--transition)}#root{height:100dvh;display:flex;flex-direction:column}.app-container{width:100%;max-width:var(--max-width);margin:0 auto;padding:0 16px;display:flex;flex-direction:column;height:100dvh;overflow:hidden}button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit}button:disabled{cursor:not-allowed;opacity:.5}input{font-family:inherit;font-size:inherit}@keyframes shake{0%,to{transform:translate(0)}15%{transform:translate(-6px)}30%{transform:translate(6px)}45%{transform:translate(-4px)}60%{transform:translate(4px)}75%{transform:translate(-2px)}90%{transform:translate(2px)}}.shake{animation:shake .4s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .25s ease}@keyframes spin{to{transform:rotate(360deg)}}.spinner{animation:spin .8s linear infinite}@media(prefers-reduced-motion:reduce){.shake,.fade-in,.spinner{animation:none!important}}
