@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Noto+Sans+Tamil:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary:#818cf8;--color-primary-light:#a5b4fc;--color-primary-dark:#6366f1;--color-primary-glow:#818cf840;--color-accent:#eec224;--color-accent-light:#fdd034;--color-accent-dark:#c9a41e;--color-accent-glow:#eec22433;--color-success:#34d399;--color-success-light:#6ee7b7;--color-error:#f87171;--color-error-light:#fca5a5;--color-error-dark:#7e2b17;--color-warning:#fbbf24;--bg-base:#0e0e0e;--bg-surface:#131313;--bg-elevated:#191a1a;--bg-overlay:#1f2020;--bg-hover:#252626;--bg-glass:#0e0e0ed1;--overlay-scrim:#0a0a0aeb;--text-primary:#e7e5e5;--text-secondary:#9c9ea1;--text-muted:#6b6d70;--text-disabled:#3e3f42;--typing-correct:#e7e5e5;--typing-error:#f87171;--typing-error-bg:#f871711f;--typing-current:#e7e5e5;--typing-upcoming:#4a4b4e;--typing-cursor:#818cf8;--key-bg:#252626;--key-bg-hover:#2f3030;--key-bg-active:#3a3b3c;--key-border:#ffffff0a;--key-text:#9c9ea1;--key-highlight:#1f2020;--key-finger-pinky:#df7070;--key-finger-ring:#dfb070;--key-finger-middle:#b0df70;--key-finger-index:#70df70;--key-finger-thumb:#4a4b4e;--border-subtle:#ffffff0d;--border-default:#ffffff14;--border-focus:#818cf880;--shadow-sm:0 1px 2px #0000004d;--shadow-md:0 4px 12px #0006;--shadow-lg:0 8px 32px #00000080;--shadow-glow:0 0 20px var(--color-primary-glow);--shadow-header:0 32px 64px -12px #e7e5e50a;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-tamil:"Noto Sans Tamil", "Inter", sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.5rem;--text-5xl:3.5rem;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.75;--leading-typing:2;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--transition-fast:.1s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--max-width:1440px;--header-height:80px;--typing-max-width:800px}[data-theme=light]{--color-primary:#6366f1;--color-primary-light:#818cf8;--color-primary-dark:#4f46e5;--color-primary-glow:#6366f133;--color-accent:#d4a017;--color-accent-light:#eec224;--color-accent-dark:#b8860b;--color-accent-glow:#d4a01726;--bg-base:#f8f8f8;--bg-surface:#fff;--bg-elevated:#fff;--bg-overlay:#f0f0f0;--bg-hover:#e8e8e8;--bg-glass:#f8f8f8e0;--overlay-scrim:#f8f8f8eb;--text-primary:#1a1a1a;--text-secondary:#5a5c5f;--text-muted:#9a9c9f;--text-disabled:#c5c7ca;--typing-correct:#1a1a1a;--typing-error:#dc2626;--typing-error-bg:#dc262614;--typing-current:#1a1a1a;--typing-upcoming:#c0c2c5;--typing-cursor:#6366f1;--key-bg:#e8e8e8;--key-bg-hover:#dcdcdc;--key-bg-active:#d0d0d0;--key-border:#0000000a;--key-text:#5a5c5f;--border-subtle:#0000000f;--border-default:#0000001a;--border-focus:#6366f180;--shadow-sm:0 1px 2px #0000000d;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 32px #0000001a;--shadow-glow:0 0 20px var(--color-primary-glow);--shadow-header:0 1px 3px #0000000f}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-sans);background-color:var(--bg-base);color:var(--text-primary);line-height:var(--leading-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;overflow-x:hidden}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-base)}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}::selection{background:var(--color-primary);color:#fff}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}a{color:var(--color-primary-light);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary)}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:var(--leading-tight);color:var(--text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}.container{width:100%;max-width:var(--max-width);padding:0 var(--space-lg);margin:0 auto}.glass{background:var(--bg-glass);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle)}.gradient-text{background:linear-gradient(135deg, var(--color-primary-light), var(--color-accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:700}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.surface-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-lg)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);font-family:var(--font-sans);font-size:var(--text-sm);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);white-space:nowrap;border:none;font-weight:600;text-decoration:none;display:inline-flex}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-glow)}.btn-secondary{background:var(--bg-elevated);color:var(--text-secondary);border:1px solid var(--border-default)}.btn-secondary:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--color-primary)}.btn-ghost{color:var(--text-secondary);background:0 0}.btn-ghost:hover{background:var(--bg-hover);color:var(--text-primary)}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:var(--text-base);border-radius:var(--radius-lg)}.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);transition:border-color var(--transition-base), box-shadow var(--transition-base)}.card:hover{border-color:var(--border-default);box-shadow:var(--shadow-md)}.badge{align-items:center;gap:var(--space-xs);padding:2px var(--space-sm);font-size:var(--text-xs);border-radius:var(--radius-full);background:var(--bg-overlay);color:var(--text-secondary);font-weight:600;display:inline-flex}.badge-success{color:var(--color-success);background:#34d39926}.badge-error{color:var(--color-error);background:#f8717126}.badge-primary{color:var(--color-primary-light);background:#818cf826}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 8px var(--color-primary-glow)}50%{box-shadow:0 0 20px var(--color-primary-glow)}}@keyframes cursor-blink{0%,49%{opacity:1}50%,to{opacity:0}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}@keyframes progress-fill{0%{width:0%}}.animate-fade-in{animation:.3s forwards fadeIn}.animate-slide-up{animation:.4s forwards slideUp}#app-root{flex-direction:column;min-height:100vh;display:flex}.main-content{padding-top:var(--header-height);flex-grow:1}.three-col-layout{gap:var(--space-xl);max-width:var(--max-width);padding:var(--space-2xl) var(--space-xl);min-height:calc(100vh - var(--header-height));grid-template-columns:280px 1fr 280px;margin:0 auto;display:grid}@media (max-width:1200px){.three-col-layout{gap:var(--space-lg);padding:var(--space-xl) var(--space-lg);grid-template-columns:240px 1fr 240px}}@media (max-width:1024px){.three-col-layout{gap:var(--space-lg);padding:var(--space-lg) var(--space-md);grid-template-columns:1fr}}@media (max-width:768px){:root{--text-4xl:2rem;--text-3xl:1.5rem;--text-2xl:1.25rem;--space-lg:1rem;--space-xl:1.5rem;--header-height:64px}.container{padding:0 var(--space-md)}}@media (max-width:480px){:root{--text-4xl:1.75rem;--text-3xl:1.25rem}}@media print{body{color:#000;background:#fff}}
