:root{--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--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;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--duration-fast: .15s;--duration-normal: .3s;--duration-slow: .5s;--ease-ease: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-out: cubic-bezier(.33, 1, .68, 1);--bg-primary: #f8fafc;--bg-secondary: #f1f5f9;--bg-card: #ffffff;--text-primary: #1e293b;--text-secondary: #64748b;--text-muted: #94a3b8;--primary-50: #ecfeff;--primary-100: #cffafe;--primary-200: #a5f3fc;--primary-300: #67e8f9;--primary-400: #22d3ee;--primary-500: #06b6d4;--primary-600: #0891b2;--primary-700: #0e7490;--primary-800: #155e75;--primary-900: #164e63;--accent-50: #f0fdf4;--accent-100: #dcfce7;--accent-200: #bbf7d0;--accent-300: #86efac;--accent-400: #4ade80;--accent-500: #22c55e;--accent-600: #16a34a;--accent-700: #15803d;--accent-800: #166534;--accent-900: #14532d;--border-color: rgba(148, 163, 184, .2);--border-light: rgba(148, 163, 184, .1)}html{scroll-behavior:smooth}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;background:linear-gradient(135deg,#f8fafc,#f1f5f9,#e2e8f0);position:relative;overflow-x:hidden}.app:before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse at 20% 30%,rgba(6,182,212,.1) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(34,197,94,.08) 0%,transparent 40%),radial-gradient(ellipse at 40% 80%,rgba(59,130,246,.06) 0%,transparent 45%),radial-gradient(ellipse at 60% 60%,rgba(168,85,247,.05) 0%,transparent 35%);pointer-events:none;z-index:0;animation:backgroundShift 20s ease-in-out infinite}@keyframes backgroundShift{0%,to{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(1.1) rotate(1deg);opacity:.8}}.app:after{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background-image:radial-gradient(2px 2px at 20px 30px,rgba(6,182,212,.08),transparent),radial-gradient(2px 2px at 40px 70px,rgba(34,197,94,.06),transparent),radial-gradient(1px 1px at 90px 40px,rgba(59,130,246,.08),transparent),radial-gradient(2px 2px at 130px 80px,rgba(168,85,247,.05),transparent),radial-gradient(1px 1px at 160px 120px,rgba(6,182,212,.06),transparent);pointer-events:none;z-index:0;animation:sparkle 8s ease-in-out infinite}@keyframes sparkle{0%,to{opacity:.5}50%{opacity:1}}.header{position:sticky;top:0;z-index:100;background:#ffffffb3;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(148,163,184,.15);box-shadow:0 4px 30px #0000000d,inset 0 1px #fffc;transition:all var(--duration-normal) var(--ease-ease)}.header:hover{background:#ffffffd9;border-bottom-color:#94a3b840}.header-content{max-width:1500px;margin:0 auto;padding:var(--space-lg) var(--space-xl);display:flex;justify-content:space-between;align-items:center;gap:var(--space-xl);flex-wrap:wrap}.logo{display:flex;align-items:center;gap:var(--space-md);cursor:pointer;transition:transform var(--duration-fast) var(--ease-bounce)}.logo:hover{transform:scale(1.02)}.logo-icon{width:56px;height:56px;background:linear-gradient(135deg,#06b6d426,#22c55e26);border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(6,182,212,.2);box-shadow:0 8px 32px #06b6d41f,inset 0 1px #fff9;transition:all var(--duration-normal) var(--ease-ease);position:relative;overflow:hidden}.logo-icon:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(6,182,212,.3),transparent);animation:shimmer 3s infinite}@keyframes shimmer{to{left:100%}}.logo-icon:hover{transform:scale(1.1);box-shadow:0 12px 48px #06b6d433,inset 0 1px #fffc}.logo-icon svg{color:var(--primary-600);filter:drop-shadow(0 2px 4px rgba(6,182,212,.2))}.logo-text h1{font-size:var(--text-2xl);font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.02em;background:linear-gradient(135deg,var(--text-primary) 0%,var(--primary-600) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-text p{font-size:var(--text-sm);color:var(--text-secondary);margin:var(--space-xs) 0 0 0;font-weight:400;letter-spacing:.02em}.controls{display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap}.search-box{position:relative;display:flex;align-items:center;gap:var(--space-md);background:#fff9;border:1px solid rgba(148,163,184,.15);border-radius:var(--radius-xl);padding:var(--space-md) var(--space-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--duration-normal) var(--ease-ease);min-width:320px;max-width:400px;width:100%}.search-box:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--radius-xl);padding:1px;background:linear-gradient(135deg,rgba(6,182,212,.2),transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--duration-fast) var(--ease-ease)}.search-box:focus-within:before{opacity:1}.search-box:focus-within{background:#ffffffe6;border-color:#06b6d466;box-shadow:0 0 0 3px #06b6d414,0 8px 32px #06b6d41f;transform:translateY(-1px)}.search-box svg{color:var(--text-muted);flex-shrink:0;transition:color var(--duration-fast) var(--ease-ease)}.search-box:focus-within svg{color:var(--primary-500)}.search-box input{background:transparent;border:none;outline:none;color:var(--text-primary);font-size:var(--text-base);width:100%;font-weight:400}.search-box input::placeholder{color:var(--text-muted)}.view-toggle{display:flex;gap:var(--space-xs);background:#ffffff80;padding:var(--space-xs);border-radius:var(--radius-lg);border:1px solid rgba(148,163,184,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.view-toggle button{background:transparent;border:none;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);cursor:pointer;color:var(--text-secondary);transition:all var(--duration-fast) var(--ease-ease);display:flex;align-items:center;justify-content:center;position:relative}.view-toggle button:hover{background:#06b6d414;color:var(--primary-600)}.view-toggle button.active{background:#06b6d426;color:var(--primary-700);box-shadow:0 4px 16px #06b6d426}.view-toggle button.active:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:60%;height:2px;background:var(--primary-500);border-radius:var(--radius-full)}.stats-container{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:0 var(--space-xl) var(--space-xl);display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}.stats-card{display:flex;align-items:center;gap:var(--space-sm);background:#ffffffb3;border:1px solid rgba(148,163,184,.15);border-radius:var(--radius-xl);padding:var(--space-md) var(--space-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all var(--duration-fast) var(--ease-ease);min-width:140px}.stats-card:hover{background:#ffffffe6;border-color:#06b6d440;transform:translateY(-2px);box-shadow:0 8px 24px #06b6d41a}.stats-icon{font-size:1.5rem}.stats-content{display:flex;flex-direction:column}.stats-value{font-size:var(--text-xl);font-weight:700;color:var(--text-primary);margin:0;letter-spacing:-.02em}.stats-label{font-size:var(--text-xs);color:var(--text-secondary);margin:0;font-weight:400}.stats-trend{font-size:var(--text-xs);font-weight:600;margin-top:2px}.stats-trend.up{color:var(--accent-500)}.stats-trend.down{color:#ef4444cc}.search-clear{background:#94a3b81a;border:none;border-radius:var(--radius-md);padding:4px;cursor:pointer;color:var(--text-muted);transition:all var(--duration-fast) var(--ease-ease);flex-shrink:0}.search-clear:hover{background:#06b6d41a;color:var(--primary-600)}.main{position:relative;z-index:1;max-width:1500px;margin:0 auto;padding:var(--space-xl) var(--space-xl);min-height:calc(100vh - 250px)}.projects-container{display:grid;gap:var(--space-lg)}.projects-container.grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}.projects-container.list{grid-template-columns:1fr}.nav-card{position:relative;background:#ffffffb3;border:1px solid rgba(148,163,184,.15);border-radius:var(--radius-2xl);padding:var(--space-lg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);cursor:pointer;transition:all var(--duration-normal) var(--ease-out);display:flex;align-items:center;gap:var(--space-lg);animation:fadeInUp var(--duration-slow) var(--ease-out) forwards;opacity:0;overflow:hidden}.nav-card:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(6,182,212,.06),transparent);opacity:0;transition:opacity var(--duration-normal) var(--ease-ease)}.nav-card:hover:before{opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}.nav-card:hover{background:#fffffff2;border-color:#06b6d44d;transform:translateY(-6px) scale(1.01);box-shadow:0 20px 60px #06b6d41f,0 0 0 1px #06b6d41a}.nav-card:active{transform:translateY(-3px) scale(1.005)}.card-icon{font-size:2.75rem;flex-shrink:0;width:70px;height:70px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#06b6d41a,#22c55e1a);border-radius:var(--radius-xl);border:1px solid rgba(148,163,184,.1);transition:all var(--duration-normal) var(--ease-bounce);position:relative;overflow:hidden}.card-icon:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;border-radius:var(--radius-xl);background:linear-gradient(135deg,#06b6d433,#22c55e33);opacity:0;transition:opacity var(--duration-fast) var(--ease-ease);z-index:-1}.card-icon-img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-xl)}.card-icon-emoji{font-size:2.75rem;line-height:1}.nav-card:hover .card-icon{transform:scale(1.15);border-color:#06b6d44d}.nav-card:hover .card-icon:before{opacity:1}.card-content{flex:1;min-width:0}.card-content h3{font-size:var(--text-lg);font-weight:600;color:var(--text-primary);margin:0 0 var(--space-sm) 0;letter-spacing:-.01em;transition:color var(--duration-fast) var(--ease-ease)}.nav-card:hover .card-content h3{color:var(--primary-600)}.card-content p{font-size:var(--text-sm);color:var(--text-secondary);margin:0 0 var(--space-sm) 0;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card-tags{display:flex;flex-wrap:wrap;gap:var(--space-xs)}.tag{background:#94a3b814;color:var(--text-secondary);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;border:1px solid rgba(148,163,184,.1);transition:all var(--duration-fast) var(--ease-ease)}.nav-card:hover .tag{background:#06b6d41a;border-color:#06b6d433;color:var(--primary-600)}.card-arrow{color:var(--text-muted);flex-shrink:0;transition:all var(--duration-normal) var(--ease-ease)}.nav-card:hover .card-arrow{color:var(--primary-500);transform:translate(8px)}.projects-container.list .nav-card{padding:var(--space-md) var(--space-lg)}.projects-container.list .card-icon{width:56px;height:56px;font-size:2.25rem}.projects-container.list .card-content h3{font-size:var(--text-base);margin-bottom:var(--space-xs)}.projects-container.list .card-content p{margin-bottom:var(--space-xs)}.nav-card:focus-visible,.nav-card.selected{outline:none;border-color:#06b6d480;box-shadow:0 0 0 2px #06b6d41a,0 8px 32px #06b6d426;background:#06b6d40d}.nav-card:focus-visible:before,.nav-card.selected:before{opacity:1}.no-results{grid-column:1 / -1;text-align:center;padding:var(--space-3xl) var(--space-xl);color:var(--text-secondary)}.no-results svg{margin-bottom:var(--space-lg);opacity:.3;transform:scale(1.2);transition:opacity var(--duration-normal) var(--ease-ease)}.no-results-hint{font-size:var(--text-sm)!important;opacity:.6;margin-top:var(--space-sm)!important}.no-results:hover svg{opacity:.5}.no-results p{font-size:var(--text-lg);font-weight:500;letter-spacing:-.01em}.footer{position:relative;z-index:1;text-align:center;padding:var(--space-2xl);color:var(--text-secondary);font-size:var(--text-sm);border-top:1px solid rgba(148,163,184,.1)}.footer p{margin:0}.footer strong{color:var(--text-primary);font-weight:600}.footer-hint{margin-top:var(--space-xs)!important;font-size:var(--text-xs)!important;opacity:.5;color:var(--text-muted)}.footer-note{margin-top:var(--space-sm);font-size:var(--text-xs);opacity:.5;color:var(--text-muted)}.loading-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9,#e2e8f0);color:var(--text-primary)}.loader{width:56px;height:56px;border-radius:50%;background:conic-gradient(from 0deg,transparent,rgba(6,182,212,.5));mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#fff 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#fff 0);animation:spin 1.5s linear infinite;margin-bottom:var(--space-lg);position:relative}.loader:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;background:linear-gradient(135deg,#06b6d4cc,#22c55ecc);border-radius:50%;box-shadow:0 0 20px #06b6d466}@keyframes spin{to{transform:rotate(360deg)}}.error-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#f1f5f9,#e2e8f0);color:var(--text-primary);text-align:center;padding:var(--space-xl)}.error-container h2{font-size:var(--text-3xl);margin-bottom:var(--space-lg);font-weight:700;background:linear-gradient(135deg,#ef4444,#f59e0b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.error-container p{font-size:var(--text-base);color:var(--text-secondary);margin:var(--space-sm) 0}@media (max-width: 1024px){.projects-container.grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}@media (max-width: 768px){.header-content{flex-direction:column;align-items:stretch;gap:var(--space-lg);padding:var(--space-md) var(--space-lg)}.logo,.controls{justify-content:center}.search-box{min-width:100%;max-width:100%}.projects-container.grid{grid-template-columns:1fr}.main{padding:var(--space-xl) var(--space-md)}.nav-card{padding:var(--space-md);gap:var(--space-md)}.card-icon{width:56px;height:56px;font-size:2.25rem}}@media (max-width: 480px){.logo-text h1{font-size:var(--text-xl)}.header-content{padding:var(--space-md)}.main{padding:var(--space-lg) var(--space-sm)}.nav-card{padding:var(--space-sm) var(--space-md)}.card-icon{width:48px;height:48px;font-size:2rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-contrast: high){.nav-card,.tag{border-color:#ffffff4d}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-height:100vh}#root{width:100%;min-height:100vh}