@import "https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800;900&display=swap";
:root{--color-bg-primary:#fff;--color-bg-secondary:#f8f9fa;--color-bg-subtle:#f1f5f9;--color-bg-card:#fff;--color-border:#e2e8f0;--color-border-light:#f1f5f9;--color-dark-900:#0f172a;--color-dark-800:#1e293b;--color-dark-700:#334155;--color-dark-600:#475569;--color-dark-code:#0d1117;--color-accent:#16a34a;--color-accent-hover:#15803d;--color-accent-light:#f0fdf4;--color-accent-border:#bbf7d0;--color-accent-dark:#14532d;--surface:var(--color-bg-card);--background:var(--color-bg-secondary);--border:var(--color-border);--border-color:var(--color-border);--bg-card:var(--color-bg-card);--text-primary:var(--color-text-primary);--text-secondary:var(--color-text-secondary);--primary:var(--color-accent);--color-text-primary:#0f172a;--color-text-secondary:#475569;--color-text-muted:#94a3b8;--color-text-white:#fff;--color-text-on-dark:#e2e8f0;--font-heading:"Roboto", -apple-system, BlinkMacSystemFont, sans-serif;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"Fira Code", "Cascadia Code", "JetBrains Mono", monospace;--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--shadow-sm:0 2px 4px 0 #0000000d, 0 1px 2px -1px #00000008;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000000d;--shadow-accent:0 4px 14px 0 #16a34a40;--sidebar-width:280px;--header-height:64px;--content-max:900px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:16px}body{font-family:var(--font-sans);font-size:var(--text-base);color:var(--color-text-primary);background-color:var(--color-bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6;overflow-x:hidden}img,svg{max-width:100%;display:block}a{color:inherit;text-decoration:none}button{font-family:var(--font-sans);cursor:pointer;background:0 0;border:none}.sidebar-scroll::-webkit-scrollbar{width:5px}.sidebar-scroll::-webkit-scrollbar-track{background:var(--color-dark-900)}.sidebar-scroll::-webkit-scrollbar-thumb{background:var(--color-dark-700);border-radius:var(--radius-full)}.sidebar-scroll::-webkit-scrollbar-thumb:hover{background:var(--color-accent)}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background:var(--color-bg-subtle)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.font-heading{font-family:var(--font-heading)}.font-mono{font-family:var(--font-mono)}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-accent{color:var(--color-accent)}.text-white{color:var(--color-text-white)}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes countUp{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes pulse-accent{0%,to{box-shadow:0 0 #16a34a66}50%{box-shadow:0 0 0 8px #16a34a00}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fade-in{animation:.3s forwards fadeSlideIn}.app-shell{grid-template-columns:var(--sidebar-width) 1fr;grid-template-rows:var(--header-height) 1fr;min-height:100vh;display:grid;position:relative}.main-content{background-color:var(--color-bg-secondary);min-height:calc(100vh - var(--header-height));grid-area:2/2;overflow-y:auto}@media (max-width:1024px){.app-shell{grid-template-columns:1fr}.main-content{grid-column:1}}@media (max-width:768px){:root{--text-4xl:1.875rem;--text-5xl:2.25rem}}