:root{--text:#475569;--text-h:#0f172a;--bg:#fff;--border:#e2e8f0;--code-bg:#f8fafc;--accent:#16a34a;--accent-bg:#16a34a14;--accent-border:#16a34a59;--social-bg:#f1f5f9cc;--color-primary:#2563eb;--color-primary-hover:#1d4ed8;--color-primary-light:#3b82f6;--color-primary-glow:#2563eb26;--color-accent:#16a34a;--color-accent-hover:#15803d;--color-accent-light:#22c55e;--color-accent-glow:#16a34a26;--color-bg:#fff;--color-bg-secondary:#f8fafc;--color-card:#fff;--color-card-elevated:#f8fafc;--color-card-border:#e2e8f0;--color-card-border-green:#16a34a40;--color-card-border-red:#16a34a40;--color-text-main:#0f172a;--color-text-secondary:#475569;--color-text-muted:#64748b;--font-sans:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;background-color:#fff}body{font-family:var(--font-sans);color:var(--color-text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#fff;min-height:100vh;line-height:1.6;overflow-x:hidden}.cosmic-hero-responsive-bg{background-image:url(/assets/backgroung%20image%20for%20laptop-C_Pxw41z.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%}@media (width<=768px){.cosmic-hero-responsive-bg{background-image:url(/assets/background%20image%20for%20mobile-DFRyqV0S.png);background-position:50%;background-repeat:no-repeat;background-size:100% 100%}}#sanity-studio-root{isolation:isolate;z-index:1000!important;position:fixed!important;inset:0!important}[data-ui=Popover],[data-ui=MenuButton],[data-ui=Menu],[data-ui=Dialog],[data-ui=Popover__wrapper],[data-sanity-portal]{z-index:1000000!important}body:has(#sanity-studio-root){overflow:visible!important}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.glass-card{-webkit-backdrop-filter:blur(12px);background:#ffffffeb;border:1px solid #e2e8f0;border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px -2px #0000000d,0 2px 6px -1px #00000005}.glass-card:hover{background:#fffffffa;border-color:#2563eb59;transform:translateY(-2px);box-shadow:0 12px 30px -5px #2563eb1f,0 4px 10px -2px #0000000a}.glass-card-green,.glass-card-red{-webkit-backdrop-filter:blur(12px);background:#ffffffeb;border:1px solid #16a34a40;border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px -2px #0000000d}.glass-card-green:hover,.glass-card-red:hover{background:#fffffffa;border-color:#16a34a80;transform:translateY(-2px);box-shadow:0 12px 30px -5px #16a34a1f}.glass-nav{-webkit-backdrop-filter:blur(16px);background:#ffffffe6;border-bottom:1px solid #e2e8f0}.glow-blue{box-shadow:0 0 25px -5px #2563eb33}.glow-green,.glow-red{box-shadow:0 0 25px -5px #16a34a33}.glow-subtle{box-shadow:0 4px 20px -2px #0000000d}.text-gradient-blue{background:linear-gradient(135deg,#1e40af 0%,#2563eb 50%,#0284c7 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.text-gradient-accent{background:linear-gradient(135deg,#1e40af 0%,#2563eb 45%,#16a34a 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.text-gradient-green,.text-gradient-red{background:linear-gradient(135deg,#14532d 0%,#16a34a 50%,#22c55e 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.bg-radial-gradient{background-image:radial-gradient(circle at 15% 15%,#2563eb0d 0%,#0000 40%),radial-gradient(circle at 85% 75%,#16a34a0a 0%,#0000 45%)}.bg-hero-glow{pointer-events:none;z-index:0;background:radial-gradient(60% 50% at 50% 0,#2563eb14,#16a34a0a,#0000 70%);width:100%;max-width:1200px;height:600px;position:absolute;top:0;left:50%;transform:translate(-50%)}@keyframes pulse-slow{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes beam{0%{transform:translate(-100%)}to{transform:translate(100%)}}.animate-pulse-slow{animation:4s ease-in-out infinite pulse-slow}.animate-float{animation:5s ease-in-out infinite float}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 100%);border:1px solid #2563eb4d;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px 22px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .25s;display:inline-flex;box-shadow:0 4px 14px #2563eb40}.btn-primary:hover{background:linear-gradient(135deg,#3b82f6 0%,#2563eb 100%);transform:translateY(-1px);box-shadow:0 6px 20px #2563eb59}.btn-secondary{color:#0f172a;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px 22px;font-size:.95rem;font-weight:600;text-decoration:none;transition:all .25s;display:inline-flex}.btn-secondary:hover{color:#0f172a;background:#e2e8f0;border-color:#94a3b8;transform:translateY(-1px);box-shadow:0 4px 14px #0000000f}.btn-accent{color:#fff;cursor:pointer;background:linear-gradient(135deg,#16a34a 0%,#15803d 100%);border:1px solid #16a34a4d;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:10px 22px;font-size:.95rem;font-weight:600;transition:all .25s;display:inline-flex;box-shadow:0 4px 14px #16a34a40}.btn-accent:hover{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);transform:translateY(-1px);box-shadow:0 6px 20px #16a34a59}.badge-beginner{color:#1d4ed8;background:#2563eb14;border:1px solid #2563eb33;border-radius:9999px;align-items:center;gap:4px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.badge-intermediate{color:#0369a1;background:#0ea5e914;border:1px solid #0ea5e933;border-radius:9999px;align-items:center;gap:4px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.badge-advanced{color:#15803d;background:#16a34a14;border:1px solid #16a34a40;border-radius:9999px;align-items:center;gap:4px;padding:3px 10px;font-size:.75rem;font-weight:600;display:inline-flex}.container-custom{max-width:1240px;margin:0 auto;padding:0 24px}@media (width<=640px){.container-custom{padding:0 16px}}#root{color:#0f172a;background-color:#fff;flex-direction:column;width:100%;min-height:100vh;display:flex}.input-custom{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;padding:12px 16px;font-family:inherit;font-size:.95rem;transition:all .2s}.input-custom:focus{background:#fff;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26}.input-custom::placeholder{color:#94a3b8}.modal-backdrop{-webkit-backdrop-filter:blur(8px);z-index:100;background:#0f172a80;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-content{color:#0f172a;background:#fff;border:1px solid #e2e8f0;border-radius:20px;width:100%;max-width:800px;max-height:90vh;animation:.25s cubic-bezier(.16,1,.3,1) modal-pop;position:relative;overflow-y:auto;box-shadow:0 25px 50px -12px #0000002e,0 0 20px #2563eb14}@keyframes modal-pop{0%{opacity:0;transform:scale(.95)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.grid-responsive-3{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;display:grid}.grid-responsive-4{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;display:grid}.grid-responsive-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;display:grid}@media (width<=768px){.container-custom{padding:0 16px!important}.grid-responsive-2,.grid-responsive-3,.grid-responsive-4{grid-template-columns:1fr!important;gap:16px!important}.glass-card,.glass-card-green,.glass-card-red{border-radius:14px!important;padding:18px!important}h1{letter-spacing:-.5px!important;font-size:clamp(1.85rem,6.8vw,2.5rem)!important;line-height:1.2!important}h2{font-size:clamp(1.45rem,5.2vw,1.95rem)!important;line-height:1.25!important}h3{font-size:clamp(1.15rem,4.2vw,1.4rem)!important}p{font-size:.95rem!important;line-height:1.55!important}.btn-primary,.btn-secondary,.btn-accent{box-sizing:border-box!important;justify-content:center!important;width:100%!important;padding:12px 20px!important}.modal-backdrop{padding:12px!important}.modal-content{border-radius:16px!important;width:100%!important;max-width:100%!important;max-height:92vh!important;margin:0!important}table{-webkit-overflow-scrolling:touch;width:100%;display:block;overflow-x:auto}pre,code{word-break:break-word;max-width:100%;overflow-x:auto}.navbar-container{height:60px!important;padding:0 16px!important}.cosmic-hero-section{text-align:center!important;min-height:auto!important;padding-top:100px!important;padding-bottom:70px!important}.cosmic-hero-section .hero-text-block{text-align:center!important;margin:0 auto!important;transform:none!important}.cosmic-hero-section .hero-text-block>div{justify-content:center!important}}@media (width<=480px){.container-custom{padding:0 14px!important}.glass-card,.glass-card-green,.glass-card-red{border-radius:12px!important;padding:16px!important}.input-custom{padding:10px 14px!important;font-size:.9rem!important}}.blog-card{justifyContent:space-between;box-sizing:border-box;background:#fff;border:1px solid #e2e8f0;flex-direction:column;width:100%;display:flex;overflow:hidden;border-radius:16px!important;padding:0!important}.blog-card-image-wrapper{aspect-ratio:16/9;background-color:#f1f5f9;width:100%;min-height:180px;position:relative;overflow:hidden}.blog-card-image{object-fit:cover;object-position:center;width:100%;height:100%;transition:transform .3s;display:block}.blog-card:hover .blog-card-image{transform:scale(1.03)}.blog-card-content{padding:20px 22px}.blog-card-footer{border-top:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:14px 22px 20px;display:flex}@media (width<=640px){.blog-card-content{padding:16px 18px}.blog-card-footer{padding:0 18px 16px}}.article-reading-container{box-sizing:border-box;width:100%;max-width:1140px;margin:0 auto;padding:0 24px}.portable-text-content{color:#334155;width:100%;font-size:clamp(1.02rem,1.15vw,1.15rem);line-height:1.85}.portable-text-content p{text-align:justify;text-justify:inter-word;-webkit-hyphens:auto;hyphens:auto;word-break:break-word;margin-bottom:22px}.portable-text-content h1,.portable-text-content h2,.portable-text-content h3,.portable-text-content h4,.portable-text-content h5,.portable-text-content h6{text-align:left;word-break:break-word;color:#0f172a}.portable-text-content img{max-width:100%;height:auto}@media (width<=768px){.article-reading-container{padding:0 16px}.portable-text-content p{text-align:justify;text-justify:inter-word;margin-bottom:18px;font-size:1rem;line-height:1.75}}@media (width<=480px){.article-reading-container{padding:0 12px}.portable-text-content p{text-align:justify;text-justify:inter-word;margin-bottom:16px;font-size:.96rem;line-height:1.7}}.pulse-circle{position:relative}.pulse-circle:after{content:"";opacity:.4;background:#2563eb;border-radius:9999px;animation:2s cubic-bezier(.215,.61,.355,1) infinite pulse-ring;position:absolute;inset:-4px}.pulse-circle-red:after,.pulse-circle-green:after{content:"";opacity:.4;background:#22c55e;border-radius:9999px;animation:2s cubic-bezier(.215,.61,.355,1) infinite pulse-ring;position:absolute;inset:-4px}@keyframes pulse-ring{0%{opacity:.8;transform:scale(.95)}to{opacity:0;transform:scale(1.6)}}.roadmap-timeline-connector{position:relative}.roadmap-timeline-connector:before{content:"";z-index:1;background:linear-gradient(90deg,#2563eb 0%,#00e599 50%,#22c55e 100%);height:3px;position:absolute;top:50%;left:0;right:0}@media (width<=1024px){.roadmap-timeline-connector:before{width:3px;height:100%;inset:0 auto 0 28px}}.interactive-hover-card{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s;position:relative;overflow:hidden}.interactive-hover-card:before{content:"";background:linear-gradient(90deg,#0000,#ffffff0a,#0000);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.interactive-hover-card:hover:before{left:100%}