@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--indigo-50:oklch(97% .02 265);--indigo-100:oklch(93% .05 265);--indigo-200:oklch(86% .1 265);--indigo-300:oklch(75% .16 265);--indigo-400:oklch(63% .21 265);--indigo-500:oklch(53% .25 265);--indigo-600:oklch(46% .25 265);--indigo-700:oklch(39% .22 265);--indigo-800:oklch(30% .18 265);--indigo-900:oklch(22% .13 265);--rose-50:oklch(97% .02 345);--rose-100:oklch(93% .05 345);--rose-200:oklch(86% .1 345);--rose-300:oklch(76% .17 345);--rose-400:oklch(66% .22 345);--rose-500:oklch(56% .26 345);--rose-600:oklch(49% .25 345);--rose-700:oklch(40% .21 345);--emerald-50:oklch(97% .02 155);--emerald-100:oklch(93% .06 155);--emerald-200:oklch(87% .11 155);--emerald-400:oklch(69% .18 155);--emerald-500:oklch(58% .2 155);--emerald-600:oklch(49% .18 155);--amber-50:oklch(98% .03 70);--amber-100:oklch(94% .07 70);--amber-400:oklch(76% .18 70);--amber-500:oklch(68% .2 70);--amber-600:oklch(58% .19 70);--red-50:oklch(97% .02 20);--red-400:oklch(65% .22 20);--red-500:oklch(56% .24 20);--red-600:oklch(48% .22 20);--slate-50:oklch(98.5% .005 240);--slate-100:oklch(96% .008 240);--slate-200:oklch(91% .012 240);--slate-300:oklch(83% .015 240);--slate-400:oklch(70% .018 240);--slate-500:oklch(58% .018 240);--slate-600:oklch(47% .018 240);--slate-700:oklch(37% .016 240);--slate-800:oklch(27% .014 240);--slate-900:oklch(18% .012 240);--level-1:oklch(68% .17 148);--level-2:oklch(62% .18 220);--level-3:oklch(52% .22 262);--level-4:oklch(52% .22 305);--level-1-bg:oklch(96% .04 148);--level-2-bg:oklch(96% .04 220);--level-3-bg:oklch(96% .04 262);--level-4-bg:oklch(96% .04 305);--bg-page:var(--slate-100);--bg-surface:#fff;--bg-elevated:#fff;--bg-sunken:var(--slate-100);--bg-overlay:#1218288c;--bg-nav:#ffffffeb;--fg-1:var(--slate-900);--fg-2:var(--slate-600);--fg-3:var(--slate-400);--fg-on-primary:#fff;--fg-on-accent:#fff;--color-primary:var(--indigo-500);--color-primary-hover:var(--indigo-600);--color-primary-subtle:var(--indigo-50);--color-primary-border:var(--indigo-200);--color-accent:var(--rose-500);--color-accent-hover:var(--rose-600);--color-accent-subtle:var(--rose-50);--color-accent-border:var(--rose-200);--color-success:var(--emerald-500);--color-success-hover:var(--emerald-600);--color-success-subtle:var(--emerald-50);--color-warning:var(--amber-500);--color-warning-subtle:var(--amber-50);--color-danger:var(--red-500);--color-danger-subtle:var(--red-50);--bg-dark:var(--slate-50);--bg-darker:var(--slate-100);--bg-card:#fff;--bg-card-hover:#fff;--bg-surface-tint:var(--indigo-50);--bg-surface-tint-hover:var(--indigo-100);--surface-1:var(--slate-100);--surface-2:var(--slate-200);--surface-3:var(--slate-300);--primary:var(--indigo-500);--primary-hover:var(--indigo-600);--primary-glow:oklch(53% .25 265/.28);--secondary:var(--rose-500);--secondary-hover:var(--rose-600);--secondary-glow:oklch(56% .26 345/.28);--success:var(--emerald-500);--success-glow:oklch(58% .2 155/.28);--danger:var(--red-500);--danger-glow:oklch(56% .24 20/.28);--text-main:var(--slate-900);--text-muted:var(--slate-600);--text-dark:var(--slate-900);--border-subtle:var(--slate-200);--border-default:var(--slate-300);--border-strong:var(--slate-300);--border-focus:var(--indigo-400);--shadow-xs:0 1px 2px #0f172a0f;--shadow-sm:0 2px 8px #0f172a14, 0 1px 2px #0f172a0a;--shadow-md:0 4px 16px #0f172a1a, 0 2px 4px #0f172a0d;--shadow-lg:0 8px 32px #0f172a1f, 0 2px 8px #0f172a0f;--shadow-xl:0 20px 60px #0f172a24, 0 4px 16px #0f172a12;--shadow-primary:0 4px 18px oklch(53% .25 265/.35);--shadow-accent:0 4px 18px oklch(56% .26 345/.35);--shadow-glass:var(--shadow-md);--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-2xl:24px;--radius-pill:9999px;--font-display:"Plus Jakarta Sans", system-ui, sans-serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--text-xs:11px;--text-sm:13px;--text-base:15px;--text-md:16px;--text-lg:18px;--text-xl:20px;--text-2xl:24px;--text-3xl:30px;--text-4xl:36px;--text-5xl:48px;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-extrabold:800;--weight-black:900;--leading-tight:1.15;--leading-snug:1.3;--leading-normal:1.5;--leading-relaxed:1.7;--tracking-tight:-.025em;--tracking-snug:-.015em;--tracking-normal:0;--tracking-wide:.04em;--tracking-wider:.08em;--tracking-widest:.12em;--ease-out:cubic-bezier(0, 0, .2, 1);--ease-in:cubic-bezier(.4, 0, 1, 1);--ease-inout:cubic-bezier(.4, 0, .2, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--duration-fast:.12s;--duration-normal:.2s;--duration-slow:.35s;--transition-fast:.12s cubic-bezier(0, 0, .2, 1);--transition-smooth:.2s cubic-bezier(.4, 0, .2, 1);--color-amber-text:var(--amber-600);--color-orange-text:oklch(55% .21 40);--level-1-text:var(--level-1);--level-2-text:var(--level-2);--level-3-text:var(--level-3);--level-4-text:var(--level-4)}[data-theme]:not([data-theme=light]){--bg-page:oklch(14% .018 250);--bg-surface:oklch(18% .02 250);--bg-elevated:oklch(22% .022 250);--bg-sunken:oklch(12% .016 250);--bg-overlay:#000000a6;--bg-nav:oklch(18% .02 250/.92);--fg-1:oklch(94% .006 240);--fg-2:oklch(72% .012 240);--fg-3:oklch(50% .014 240);--color-primary:var(--indigo-500);--color-primary-hover:var(--indigo-400);--color-primary-subtle:oklch(22% .06 265);--color-primary-border:oklch(30% .1 265);--color-accent:var(--rose-500);--color-accent-hover:var(--rose-400);--color-accent-subtle:oklch(22% .06 345);--color-accent-border:oklch(30% .1 345);--color-success:var(--emerald-400);--color-success-hover:var(--emerald-200);--color-success-subtle:oklch(20% .06 155);--color-warning:var(--amber-400);--color-warning-subtle:oklch(20% .06 70);--color-danger:var(--red-400);--color-danger-subtle:oklch(20% .06 20);--bg-surface-tint:oklch(22% .06 265);--bg-surface-tint-hover:oklch(26% .08 265);--shadow-xs:0 1px 2px #00000040;--shadow-sm:0 2px 8px #00000059, 0 1px 2px #0003;--shadow-md:0 4px 16px #00000073, 0 2px 4px #00000040;--shadow-lg:0 8px 32px #00000080, 0 2px 8px #0000004d;--shadow-xl:0 20px 60px #0009, 0 4px 16px #00000059;--shadow-primary:0 4px 18px oklch(75% .16 265/.3);--shadow-accent:0 4px 18px oklch(76% .17 345/.3);--level-1-bg:oklch(20% .06 148);--level-2-bg:oklch(20% .06 220);--level-3-bg:oklch(20% .06 262);--level-4-bg:oklch(20% .06 305);--color-amber-text:var(--amber-400);--color-orange-text:oklch(72% .18 40);--level-1-text:oklch(72% .16 148);--level-2-text:oklch(68% .15 220);--level-3-text:oklch(75% .16 265);--level-4-text:oklch(72% .18 305)}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--indigo-400)}body{font-family:var(--font-body);background-color:var(--bg-page);color:var(--fg-1);min-height:100vh;line-height:var(--leading-relaxed);-webkit-font-smoothing:antialiased;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:var(--leading-snug);color:var(--fg-1);letter-spacing:var(--tracking-snug);margin-bottom:.75rem}h1{font-size:var(--text-4xl);letter-spacing:var(--tracking-tight);font-weight:800}h2{font-size:var(--text-2xl);font-weight:700}h3{font-size:var(--text-xl);font-weight:600}h4{font-size:var(--text-md);font-weight:600}p{color:var(--fg-2);line-height:var(--leading-relaxed);margin-bottom:1rem}code,.mono{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-primary);background:var(--color-primary-subtle);border-radius:var(--radius-xs);padding:2px 6px}.text-gradient{background:linear-gradient(135deg, var(--indigo-400), var(--rose-400));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glow-text{background:linear-gradient(135deg, var(--fg-1) 0%, var(--color-primary) 55%, var(--color-accent) 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.glow-text.primary{background:linear-gradient(135deg, var(--fg-1) 0%, var(--color-primary) 60%, var(--indigo-600) 100%)}.glow-text.secondary{background:linear-gradient(135deg, var(--fg-1) 0%, var(--color-accent) 60%, var(--rose-600) 100%)}.glass-panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);transition:box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out)}.glass-panel:hover{box-shadow:var(--shadow-md);border-color:var(--border-default);transform:translateY(-2px)}[data-theme=light] .glass-panel{-webkit-backdrop-filter:none;box-shadow:var(--shadow-sm);background:#fff;border-radius:20px}.glass-panel.glow-primary:hover,.glass-panel.glow-secondary:hover,.glass-panel.glow-success:hover,.glass-panel.glow-danger:hover{box-shadow:var(--shadow-md);border-color:var(--border-default)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}@media (width<=640px){.container{padding:0 1rem}}.app-main{flex-direction:column;flex:1;padding-top:4rem;padding-bottom:4rem;display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.grid-cols-2{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}.grid-cols-3{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.responsive-grid-2{grid-template-columns:repeat(2,1fr);gap:1.5rem;display:grid}.responsive-grid-3{grid-template-columns:repeat(3,1fr);gap:1.5rem;display:grid}.responsive-flex{gap:1rem;display:flex}.quiz-layout{grid-template-columns:1.15fr 1fr;height:calc(100vh - 58px);display:grid;overflow:hidden}.reading-layout{grid-template-columns:1fr 300px;height:calc(100vh - 58px);display:grid;overflow:hidden}.reading-page-wrapper{flex-direction:column;height:calc(100vh - 58px);display:flex;overflow:hidden}@media (width<=768px){.reading-page-wrapper{height:auto!important;overflow:visible!important}}@media (width<=1024px){.responsive-grid-3{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.grid-cols-2,.grid-cols-3,.responsive-grid-2,.responsive-grid-3{grid-template-columns:1fr}.responsive-flex{flex-direction:column}h1{font-size:var(--text-3xl)}.quiz-layout,.reading-layout{grid-template-columns:1fr!important;height:auto!important;overflow-y:visible!important}.quiz-layout>div,.reading-layout>div{border-right:none!important;height:auto!important;overflow-y:visible!important}.nav-link span,.nav-link-text{display:none}.nav-link{padding:.5rem}.logo-text,.nav-divider,.user-level-badge{display:none!important}}.main-nav{justify-content:space-between;align-items:center;padding:.75rem 2rem;display:flex}@media (width<=768px){.main-nav{padding:.5rem 1rem}}@media (width<=480px){h1{font-size:var(--text-2xl)}.app-main{padding-top:2rem;padding-bottom:2rem}}.btn{border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:700;font-size:var(--text-base);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);letter-spacing:-.01em;border:none;justify-content:center;align-items:center;gap:.5rem;padding:10px 20px;text-decoration:none;display:inline-flex}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-primary)}.btn-primary:not(:disabled):hover{background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 6px 24px oklch(53% .25 265/.45)}.btn-outline{background:var(--bg-surface);color:var(--fg-1);border:1.5px solid var(--border-default);box-shadow:var(--shadow-xs)}.btn-outline:not(:disabled):hover{border-color:var(--border-strong);background:var(--slate-50);transform:translateY(-1px)}.nav-link{color:var(--fg-2);cursor:pointer;font-family:var(--font-display);font-size:var(--text-sm);border-radius:var(--radius-sm);transition:all var(--duration-fast) var(--ease-out);background:0 0;border:none;align-items:center;gap:.4rem;padding:6px 12px;font-weight:600;display:flex}.nav-link:hover{color:var(--fg-1);background:var(--slate-100)}[data-theme]:not([data-theme=light]) .nav-link:hover{background:oklch(25% .02 240)}.nav-link.active{color:var(--color-primary);background:var(--color-primary-subtle)}.badge{font-family:var(--font-display);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;border-radius:var(--radius-xs);background:var(--slate-100);color:var(--fg-2);align-items:center;gap:.3rem;padding:3px 10px;font-weight:800;display:inline-flex}.badge.primary{background:var(--color-primary-subtle);color:var(--color-primary)}.badge.secondary{background:var(--color-accent-subtle);color:var(--color-accent)}.badge.success{background:var(--color-success-subtle);color:var(--color-success)}.badge.danger{background:var(--color-danger-subtle);color:var(--color-danger)}.input-group{flex-direction:column;gap:.4rem;margin-bottom:1.25rem;display:flex}.input-label{font-family:var(--font-body);font-size:var(--text-sm);color:var(--fg-2);font-weight:500}.input-field{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);width:100%;color:var(--fg-1);font-family:var(--font-body);font-size:var(--text-base);box-shadow:var(--shadow-xs);transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);padding:.75rem 1rem}.input-field::placeholder{color:var(--fg-3)}.input-field:focus{border-color:var(--border-focus);outline:none;box-shadow:0 0 0 3px oklch(63% .21 265/.18)}textarea.input-field{resize:vertical;min-height:120px}@keyframes spin{to{transform:rotate(360deg)}}.spinner{border:2.5px solid var(--border-subtle);border-top-color:var(--color-primary);border-radius:50%;flex-shrink:0;width:20px;height:20px;animation:.8s linear infinite spin;display:inline-block}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.fade-in-up{animation:fadeInUp var(--duration-slow) var(--ease-out) forwards}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton-block{background:linear-gradient(90deg, var(--slate-100) 25%, var(--slate-200) 50%, var(--slate-100) 75%);border-radius:var(--radius-md);background-size:200% 100%;animation:1.5s ease-in-out infinite shimmer}.page-header{text-align:center;margin-bottom:3rem}.page-header h1{margin-bottom:.5rem}.page-header p{font-size:var(--text-lg);max-width:500px;margin:0 auto}