:root{--primary: #6366f1;--primary-dark: #4f46e5;--primary-light: #818cf8;--secondary: #06b6d4;--accent: #f59e0b;--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);--gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);--gradient-warning: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--success: #10b981;--warning: #f59e0b;--error: #ef4444;--info: #3b82f6;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--spacing-xs: 0.5rem;--spacing-sm: 0.75rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;--font-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', monospace;--radius-sm: 0.375rem;--radius: 0.5rem;--radius-lg: 0.75rem;--radius-xl: 1rem}*{box-sizing:border-box}html{scroll-behavior:smooth;line-height:1.6}body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--gray-700);background:var(--gray-50);margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.main-nav{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border-bottom:1px solid var(--gray-200);position:sticky;top:0;z-index:1000}.main-nav .nav-container{max-width:1200px;margin:0 auto;padding:0 var(--spacing-md);display:flex;align-items:center;justify-content:space-between;height:64px}.main-nav .nav-brand .brand-link{display:flex;align-items:center;gap:var(--spacing-xs);font-weight:700;font-size:1.25rem;color:var(--primary);text-decoration:none}.main-nav .nav-brand .brand-link i{font-size:1.5rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.main-nav .nav-brand .brand-link:hover{transform:translateY(-1px);transition:transform 0.2s ease}.main-nav .nav-links{display:flex;gap:var(--spacing-lg)}.main-nav .nav-links .nav-link{display:flex;align-items:center;gap:var(--spacing-xs);color:var(--gray-600);text-decoration:none;font-weight:500;padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius);transition:all 0.2s ease}.main-nav .nav-links .nav-link:hover{color:var(--primary);background:var(--gray-100)}.hero-section{position:relative;background:var(--gradient-primary);color:white;padding:var(--spacing-2xl) 0;overflow:hidden}.hero-section .hero-background{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0.1}.hero-section .hero-background .hero-pattern{width:100%;height:100%;background-image:radial-gradient(circle at 25% 25%, #fff 2px, transparent 2px),radial-gradient(circle at 75% 75%, #fff 2px, transparent 2px);background-size:60px 60px;animation:float 20s ease-in-out infinite}.hero-section .hero-content{position:relative;z-index:1}.hero-section .hero-title{font-size:3.5rem;font-weight:700;margin-bottom:var(--spacing-md);text-align:center}.hero-section .hero-title .title-gradient{background:linear-gradient(45deg, #fff, #e0e7ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-section .hero-title .title-emoji{display:inline-block;animation:bounce 2s ease-in-out infinite}.hero-section .hero-subtitle{font-size:1.25rem;text-align:center;margin-bottom:var(--spacing-2xl);opacity:0.9}.hero-section .hero-stats{display:flex;justify-content:center;gap:var(--spacing-2xl);margin-bottom:var(--spacing-2xl)}.hero-section .hero-stats .stat-item{text-align:center}.hero-section .hero-stats .stat-item .stat-number{font-size:2rem;font-weight:700;display:block}.hero-section .hero-stats .stat-item .stat-label{font-size:0.875rem;opacity:0.8}.hero-section .hero-actions{display:flex;justify-content:center;gap:var(--spacing-md)}.btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-lg);border-radius:var(--radius-lg);font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition:left 0.5s}.btn:hover::before{left:100%}.btn.btn-primary{background:white;color:var(--primary);box-shadow:var(--shadow-lg)}.btn.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.btn.btn-secondary{background:rgba(255,255,255,0.2);color:white;border:2px solid rgba(255,255,255,0.3)}.btn.btn-secondary:hover{background:rgba(255,255,255,0.3);transform:translateY(-2px)}.btn.btn-outline{background:transparent;color:var(--primary);border:2px solid var(--primary)}.btn.btn-outline:hover{background:var(--primary);color:white}.features-section{padding:var(--spacing-2xl) 0;background:white}.features-section .features-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:var(--spacing-xl);margin-top:var(--spacing-2xl)}.features-section .feature-card{text-align:center;padding:var(--spacing-xl);border-radius:var(--radius-xl);background:var(--gray-50);border:1px solid var(--gray-200);transition:all 0.3s ease}.features-section .feature-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--primary)}.features-section .feature-card .feature-icon{width:64px;height:64px;margin:0 auto var(--spacing-md);background:var(--gradient-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:1.5rem}.features-section .feature-card h3{color:var(--gray-800);margin-bottom:var(--spacing-sm)}.features-section .feature-card p{color:var(--gray-600)}.categories-section{padding:var(--spacing-2xl) 0;background:var(--gray-100)}.categories-section .categories-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:var(--spacing-lg);margin-top:var(--spacing-2xl)}.categories-section .category-card{background:white;border-radius:var(--radius-xl);padding:var(--spacing-xl);text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);transition:all 0.3s ease;position:relative;overflow:hidden}.categories-section .category-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary)}.categories-section .category-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}.categories-section .category-card:hover .category-arrow{transform:translateX(5px)}.categories-section .category-card .category-icon{width:48px;height:48px;background:var(--gray-100);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-md);color:var(--primary);font-size:1.25rem}.categories-section .category-card h3{color:var(--gray-800);margin-bottom:var(--spacing-xs);font-size:1.125rem}.categories-section .category-card p{color:var(--gray-600);font-size:0.875rem;margin-bottom:var(--spacing-md)}.categories-section .category-card .category-arrow{color:var(--primary);transition:transform 0.3s ease}.categories-section .category-card.dev-tools::before{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)}.categories-section .category-card.learning::before{background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%)}.categories-section .category-card.design::before{background:linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)}.categories-section .category-card.utilities::before{background:linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)}.categories-section .category-card.ai-tools::before{background:linear-gradient(135deg, #fa709a 0%, #fee140 100%)}.categories-section .category-card.resources::before{background:linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)}.categories-section .category-card.data-viz::before{background:linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)}.categories-section .category-card.system-tools::before{background:linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%)}.cta-section{background:var(--gray-800);color:white;padding:var(--spacing-2xl) 0}.cta-section .cta-content{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-xl)}.cta-section .cta-content .cta-text h2{color:white;margin-bottom:var(--spacing-sm)}.cta-section .cta-content .cta-text h2 i{color:#ef4444}.cta-section .cta-content .cta-text p{color:var(--gray-300);font-size:1.125rem}.cta-section .cta-content .cta-actions{display:flex;gap:var(--spacing-md);flex-shrink:0}.page-header{background:var(--gradient-primary);color:white;padding:var(--spacing-xl) 0}.page-header .breadcrumb{display:flex;align-items:center;gap:var(--spacing-xs);margin-bottom:var(--spacing-md);font-size:0.875rem;opacity:0.8}.page-header .breadcrumb a{color:white;text-decoration:none;display:flex;align-items:center;gap:var(--spacing-xs)}.page-header .breadcrumb a:hover{opacity:1}.page-header .breadcrumb i.fa-chevron-right{font-size:0.75rem}.page-header .page-title{font-size:2.5rem;font-weight:700;margin-bottom:var(--spacing-sm);display:flex;align-items:center;gap:var(--spacing-sm)}.page-header .page-description{font-size:1.125rem;opacity:0.9}.page-content{padding:var(--spacing-2xl) 0}.page-content .content-wrapper{display:grid;grid-template-columns:300px 1fr;gap:var(--spacing-xl);align-items:start}.page-content .content-wrapper:not(.with-sidebar){grid-template-columns:1fr}.page-content .content-sidebar .sidebar-card{background:white;border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200);margin-bottom:var(--spacing-md)}.page-content .content-sidebar .sidebar-card h3{color:var(--gray-800);font-size:1rem;margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-xs)}.page-content .content-sidebar .sidebar-card ul{list-style:none;padding:0;margin:0}.page-content .content-sidebar .sidebar-card ul li{padding:var(--spacing-xs) 0;color:var(--gray-600);font-size:0.875rem}.page-content .content-sidebar .sidebar-card ul li kbd{background:var(--gray-100);border:1px solid var(--gray-300);border-radius:3px;padding:2px 6px;font-size:0.75rem;font-family:var(--font-mono)}.page-content .content-sidebar .sidebar-card .stats-mini .stat-mini{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-xs) 0}.page-content .content-sidebar .sidebar-card .stats-mini .stat-mini .stat-number{font-weight:600;color:var(--primary)}.page-content .content-sidebar .sidebar-card .stats-mini .stat-mini .stat-label{font-size:0.875rem;color:var(--gray-600)}.page-content .main-content-area{background:white;border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}table{width:100%;border-collapse:collapse;margin:var(--spacing-lg) 0;font-size:0.9rem;background:white;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--gray-200)}table th{background:var(--gray-50);padding:var(--spacing-md);text-align:left;font-weight:600;color:var(--gray-800);border-bottom:1px solid var(--gray-200)}table td{padding:var(--spacing-md);border-bottom:1px solid var(--gray-100);vertical-align:top}table td:first-child{font-weight:500;color:var(--primary);font-style:italic}table tr:hover{background:var(--gray-50)}table tr:last-child td{border-bottom:none}table code{background:var(--gray-100);color:var(--primary);padding:0.25em 0.5em;border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:0.85em;border:1px solid var(--gray-200);margin:0 0.25em;display:inline-block}.section-header{text-align:center;margin-bottom:var(--spacing-xl)}.section-header h2{font-size:2.5rem;font-weight:700;color:var(--gray-800);margin-bottom:var(--spacing-sm);display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm)}.section-header p{font-size:1.125rem;color:var(--gray-600)}h1,h2,h3,h4,h5,h6{color:var(--gray-800);font-weight:600;line-height:1.3;margin-top:var(--spacing-xl);margin-bottom:var(--spacing-md)}h2{font-size:2rem;border-bottom:2px solid var(--gray-200);padding-bottom:var(--spacing-sm);margin-top:var(--spacing-2xl);display:flex;align-items:center;gap:var(--spacing-sm)}h3{font-size:1.5rem;color:var(--gray-700);margin-top:var(--spacing-lg)}.main-footer{background:var(--gray-900);color:var(--gray-300);padding:var(--spacing-2xl) 0 var(--spacing-xl)}.main-footer .footer-content{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:var(--spacing-xl);margin-bottom:var(--spacing-xl)}.main-footer .footer-content .footer-section h4{color:white;margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-xs)}.main-footer .footer-content .footer-section p{color:var(--gray-400);margin-bottom:var(--spacing-md)}.main-footer .footer-content .footer-section ul{list-style:none;padding:0;margin:0}.main-footer .footer-content .footer-section ul li{margin-bottom:var(--spacing-xs)}.main-footer .footer-content .footer-section ul li a{color:var(--gray-400);text-decoration:none}.main-footer .footer-content .footer-section ul li a:hover{color:var(--primary-light)}.main-footer .footer-content .footer-section .footer-buttons .footer-btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-md);background:var(--primary);color:white;text-decoration:none;border-radius:var(--radius);font-weight:500;transition:all 0.3s ease}.main-footer .footer-content .footer-section .footer-buttons .footer-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.main-footer .footer-bottom{border-top:1px solid var(--gray-700);padding-top:var(--spacing-lg);text-align:center}.main-footer .footer-bottom p{margin:var(--spacing-xs) 0;color:var(--gray-500)}.main-footer .footer-bottom p i.fa-heart{color:#ef4444;animation:heartbeat 1.5s ease-in-out infinite}.highlight{background:linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);border:1px solid #f59e0b;border-radius:var(--radius-lg);padding:var(--spacing-lg);margin:var(--spacing-lg) 0;position:relative}.highlight::before{content:'💡';position:absolute;top:var(--spacing-md);left:var(--spacing-md);font-size:1.25rem}.highlight blockquote{margin:0;padding-left:var(--spacing-2xl);border:none}.highlight blockquote p{margin:0;font-weight:500}img[alt="Awesome"],img[alt="GitHub stars"],img[alt="GitHub forks"],img[alt="GitHub issues"],img[alt="License: MIT"]{margin:0.2rem 0.3rem 0.2rem 0;vertical-align:middle;border-radius:var(--radius-sm)}@keyframes float{0%, 100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}@keyframes bounce{0%, 20%, 50%, 80%, 100%{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes heartbeat{0%, 100%{transform:scale(1)}50%{transform:scale(1.1)}}.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,0.6);transform:scale(0);animation:ripple-animation 0.6s linear;pointer-events:none}@keyframes ripple-animation{to{transform:scale(4);opacity:0}}@media (max-width: 1024px){.hero-title{font-size:3rem}.hero-stats{gap:var(--spacing-lg)}.cta-content{flex-direction:column;text-align:center}.nav-links{gap:var(--spacing-md)}}@media (max-width: 768px){.container{padding:0 var(--spacing-sm)}.hero-title{font-size:2.5rem}.hero-stats{flex-direction:column;gap:var(--spacing-md)}.hero-actions{flex-direction:column;align-items:center}.nav-links{display:none}.content-wrapper{grid-template-columns:1fr}.page-title{font-size:2rem}.section-header h2{font-size:2rem}table{font-size:0.8rem}table th,table td{padding:var(--spacing-sm)}table td:last-child{font-size:0.75rem}.btn{padding:var(--spacing-sm) var(--spacing-md)}}@media (max-width: 480px){.hero-title{font-size:2rem}.btn{width:100%;justify-content:center}.page-content{padding:var(--spacing-lg) 0}.main-content-area{padding:var(--spacing-md)}}