*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary: #0a0e17;--bg-secondary: #111827;--bg-card: #1a2235;--bg-card-hover: #1f2a40;--accent: #22d3ee;--accent-dim: rgba(34, 211, 238, .15);--accent-hover: #06b6d4;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--border: #1e293b;--border-light: #334155;--success: #34d399;--warning: #fbbf24;--danger: #f87171;--radius: 8px;--radius-lg: 12px;--max-width: 1200px;--header-height: 64px}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;scroll-behavior:smooth}body{min-height:100vh;display:flex;flex-direction:column}a{color:var(--accent);text-decoration:none;transition:color .2s}a:hover{color:var(--accent-hover)}img{max-width:100%;height:auto}.nav{position:sticky;top:0;z-index:100;background:#0a0e17bf;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(30,41,59,.6);height:var(--header-height);transition:background .3s,border-color .3s,box-shadow .3s}.nav.scrolled{background:#0a0e17eb;border-bottom-color:var(--border);box-shadow:0 4px 24px #0006}.nav-inner{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:100%}.nav-logo{display:flex;flex-direction:column;gap:0;text-decoration:none;line-height:1}.nav-logo-text{font-size:1.4rem;font-weight:800;color:var(--accent);letter-spacing:-.02em;line-height:1.1}.nav-logo-tagline{font-size:.6rem;font-weight:500;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;line-height:1.2}.nav-logo:hover .nav-logo-text{color:var(--accent-hover)}.nav-links{display:flex;gap:.25rem;list-style:none;align-items:center}.nav-links a{position:relative;color:var(--text-secondary);font-size:.875rem;font-weight:500;padding:.4rem .65rem;border-radius:var(--radius);transition:color .2s;text-decoration:none}.nav-links a:after{content:"";position:absolute;left:.65rem;right:.65rem;bottom:.1rem;height:2px;background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .22s ease}.nav-links a:hover{color:var(--text-primary)}.nav-links a:hover:after{transform:scaleX(1)}.nav-links a[aria-current=page]{color:var(--accent)}.nav-links a[aria-current=page]:after{transform:scaleX(1)}.nav-link-tools{display:inline-flex;align-items:center;gap:.35rem}.nav-badge{display:inline-block;font-size:.55rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--bg-primary);padding:.1rem .35rem;border-radius:4px;line-height:1.4;vertical-align:middle}.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:1px solid var(--border-light);border-radius:var(--radius);padding:.45rem .55rem;cursor:pointer;width:40px;height:36px}.nav-toggle-bar{display:block;width:18px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform .25s ease,opacity .2s ease;transform-origin:center}.nav-toggle.active .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.active .nav-toggle-bar:nth-child(2){opacity:0;transform:scaleX(0)}.nav-toggle.active .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hero{position:relative;text-align:center;padding:5rem 1.5rem 3.5rem;max-width:var(--max-width);margin:0 auto;overflow:hidden}.hero:before{content:"";position:absolute;top:-60px;left:50%;transform:translate(-50%);width:700px;height:400px;background:radial-gradient(ellipse at center,rgba(34,211,238,.1) 0%,transparent 70%);pointer-events:none;z-index:0}.hero>*{position:relative;z-index:1}.hero h1{font-size:clamp(2.2rem,5.5vw,3.75rem);font-weight:800;line-height:1.1;margin-bottom:1.25rem;letter-spacing:-.02em}.hero h1 .accent{background:linear-gradient(135deg,#22d3ee,#06b6d4,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero p{font-size:1.15rem;color:var(--text-secondary);max-width:620px;margin:0 auto 1.5rem;line-height:1.7}.hero-cta{display:inline-block;background:var(--accent);color:var(--bg-primary);font-weight:700;padding:.85rem 2.25rem;border-radius:var(--radius);font-size:1rem;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 4px 20px #22d3ee4d}.hero-cta:hover{background:var(--accent-hover);color:var(--bg-primary);transform:translateY(-2px);box-shadow:0 8px 28px #22d3ee66}.category-filter{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;padding:0 1.5rem;margin-bottom:2.5rem}.category-filter a{padding:.4rem 1rem;border-radius:9999px;font-size:.85rem;font-weight:500;border:1px solid var(--border-light);color:var(--text-secondary);transition:all .2s}.category-filter a:hover,.category-filter a.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:1.5rem;max-width:var(--max-width);margin:0 auto;padding:0 1.5rem 3rem}.article-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;display:flex;flex-direction:column;text-decoration:none;color:inherit}.article-card:hover{transform:translateY(-4px);border-color:var(--accent);background:var(--bg-card-hover);box-shadow:0 8px 32px #22d3ee1a,0 2px 8px #0000004d}.article-card .card-category{display:inline-block;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:var(--accent-dim);padding:.2rem .6rem;border-radius:9999px;margin-bottom:.75rem;width:fit-content}.article-card h3{font-size:1.15rem;font-weight:700;line-height:1.3;margin-bottom:.5rem;color:var(--text-primary)}.article-card p{font-size:.9rem;color:var(--text-secondary);line-height:1.5;flex:1}.article-card .card-meta{display:flex;gap:1rem;margin-top:1rem;font-size:.8rem;color:var(--text-muted)}.post-header{max-width:720px;margin:3rem auto 2rem;padding:0 1.5rem}.post-header .post-category{display:inline-block;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);background:var(--accent-dim);padding:.25rem .75rem;border-radius:9999px;margin-bottom:1rem}.post-header h1{font-size:clamp(1.75rem,4vw,2.5rem);font-weight:800;line-height:1.2;margin-bottom:.75rem}.post-meta{display:flex;gap:1.25rem;color:var(--text-muted);font-size:.875rem}.post-content{max-width:720px;margin:0 auto;padding:0 1.5rem 3rem}.post-content h2{font-size:1.5rem;font-weight:700;margin:2.5rem 0 1rem;color:var(--text-primary)}.post-content h3{font-size:1.25rem;font-weight:600;margin:2rem 0 .75rem;color:var(--text-primary)}.post-content p{margin-bottom:1.25rem;color:var(--text-secondary);line-height:1.8}.post-content ul,.post-content ol{margin:0 0 1.25rem 1.5rem;color:var(--text-secondary)}.post-content li{margin-bottom:.5rem;line-height:1.7}.post-content code{background:var(--bg-card);padding:.15rem .4rem;border-radius:4px;font-size:.9em}.post-content pre{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;overflow-x:auto;margin-bottom:1.5rem}.post-content blockquote{border-left:3px solid var(--accent);padding:.75rem 1.25rem;margin:1.5rem 0;background:var(--accent-dim);border-radius:0 var(--radius) var(--radius) 0}.post-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}.post-content strong{color:var(--text-primary);font-weight:600}.post-content table{width:100%;border-collapse:collapse;margin-bottom:1.5rem}.post-content th,.post-content td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--border)}.post-content th{font-weight:600;color:var(--text-primary);background:var(--bg-card)}.affiliate-disclosure{max-width:720px;margin:0 auto 1.5rem;padding:.75rem 1.25rem;background:#fbbf2414;border:1px solid rgba(251,191,36,.2);border-radius:var(--radius);font-size:.8rem;color:var(--warning)}.affiliate-cta{background:linear-gradient(135deg,var(--bg-card),var(--bg-secondary));border:1px solid var(--accent);border-radius:var(--radius-lg);padding:2rem;margin:2.5rem 0;text-align:center}.affiliate-cta h3{font-size:1.25rem;font-weight:700;color:var(--text-primary);margin-bottom:.5rem}.affiliate-cta p{color:var(--text-secondary);margin-bottom:1.25rem}.affiliate-cta .cta-button{display:inline-block;background:var(--accent);color:var(--bg-primary);font-weight:700;padding:.75rem 2rem;border-radius:var(--radius);transition:background .2s}.affiliate-cta .cta-button:hover{background:var(--accent-hover);color:var(--bg-primary)}.email-signup{max-width:var(--max-width);margin:0 auto;padding:3rem 1.5rem;text-align:center}.email-signup-box{background:linear-gradient(135deg,var(--bg-card),var(--bg-secondary));border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:3rem 2rem;max-width:600px;margin:0 auto}.email-signup-box h2{font-size:1.5rem;font-weight:700;margin-bottom:.5rem}.email-signup-box p{color:var(--text-secondary);margin-bottom:1.5rem}.email-signup-box form{display:flex;gap:.5rem;max-width:420px;margin:0 auto}.email-signup-box input[type=email]{flex:1;padding:.75rem 1rem;border:1px solid var(--border-light);border-radius:var(--radius);background:var(--bg-primary);color:var(--text-primary);font-size:.9rem}.email-signup-box input[type=email]::placeholder{color:var(--text-muted)}.email-signup-box button{padding:.75rem 1.5rem;background:var(--accent);color:var(--bg-primary);border:none;border-radius:var(--radius);font-weight:700;cursor:pointer;transition:background .2s}.email-signup-box button:hover{background:var(--accent-hover)}.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0}.tags a{font-size:.8rem;padding:.3rem .75rem;border:1px solid var(--border-light);border-radius:9999px;color:var(--text-muted);transition:all .2s}.tags a:hover{border-color:var(--accent);color:var(--accent)}.footer{margin-top:auto;border-top:1px solid var(--border);padding:2rem 1.5rem;text-align:center}.footer-inner{max-width:var(--max-width);margin:0 auto}.footer-links{display:flex;gap:1.5rem;justify-content:center;list-style:none;margin-bottom:1rem}.footer-links a{color:var(--text-muted);font-size:.85rem}.footer-links a:hover{color:var(--accent)}.footer-copy{font-size:.8rem;color:var(--text-muted)}.page-content{max-width:720px;margin:3rem auto;padding:0 1.5rem}.page-content h1{font-size:2rem;font-weight:800;margin-bottom:1.5rem}.page-content h2{font-size:1.4rem;font-weight:700;margin:2rem 0 .75rem}.page-content p{color:var(--text-secondary);margin-bottom:1rem;line-height:1.7}.page-content ul{list-style:disc;margin:0 0 1rem 1.5rem;color:var(--text-secondary)}.page-content li{margin-bottom:.5rem}.section-heading{text-align:center;font-size:1.75rem;font-weight:700;margin-bottom:2rem}.hero-stat{font-size:1.05rem;color:var(--text-secondary);max-width:580px;margin:-.75rem auto .5rem}.hero-stat strong{color:var(--accent);font-weight:700}.hero-loss{font-size:.95rem;color:var(--text-muted);max-width:500px;margin:0 auto 1.75rem;font-style:italic}.level-badge{display:inline-block;font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:.2rem .6rem;border-radius:9999px}.level-beginner{background:#34d39926;color:#4ade80;border:1px solid rgba(52,211,153,.35)}.level-intermediate{background:#fbbf2424;color:#fbbf24;border:1px solid rgba(251,191,36,.3)}.level-advanced{background:#f8717124;color:#f87171;border:1px solid rgba(248,113,113,.3)}.trending-badge{display:inline-flex;align-items:center;gap:.2rem;font-size:.7rem;font-weight:700;padding:.25rem .65rem;border-radius:9999px;background:linear-gradient(135deg,#fb712433,#fbbf2426);color:#ffa040;border:1px solid rgba(251,113,36,.4);letter-spacing:.02em;text-shadow:0 1px 4px rgba(251,113,36,.3)}.card-badges,.post-header-badges,.start-here-card-badges,.related-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin-bottom:.75rem}.updated-date{color:var(--accent);font-size:.85rem}.post-share{padding-bottom:0!important}.share-x-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;background:#000;color:#fff;border-radius:var(--radius);font-size:.875rem;font-weight:600;transition:background .2s;text-decoration:none}.share-x-btn:hover{background:#1a1a1a;color:#fff}.post-email-cta{background:linear-gradient(135deg,var(--bg-card),var(--bg-secondary));border:1px solid var(--accent);border-radius:var(--radius-lg);padding:2.5rem 2rem;margin:2rem 0;text-align:center}.post-email-cta h2{font-size:1.4rem;font-weight:700;margin-bottom:.5rem;margin-top:0}.post-email-cta p{color:var(--text-secondary);margin-bottom:1.5rem;max-width:480px;margin-left:auto;margin-right:auto}.post-email-form{display:flex;gap:.5rem;max-width:400px;margin:0 auto}.post-email-form input[type=email]{flex:1;padding:.75rem 1rem;border:1px solid var(--border-light);border-radius:var(--radius);background:var(--bg-primary);color:var(--text-primary);font-size:.9rem}.post-email-form input[type=email]::placeholder{color:var(--text-muted)}.post-email-form button{padding:.75rem 1.25rem;background:var(--accent);color:var(--bg-primary);border:none;border-radius:var(--radius);font-weight:700;cursor:pointer;transition:background .2s;white-space:nowrap}.post-email-form button:hover{background:var(--accent-hover)}.related-articles{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}.related-heading{font-size:1.35rem;font-weight:700;margin-bottom:1.5rem;margin-top:0;color:var(--text-primary)}.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}.related-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;transition:transform .2s,border-color .2s,background .2s;color:var(--text-primary);text-decoration:none}.related-card:hover{transform:translateY(-2px);border-color:var(--accent);background:var(--bg-card-hover);color:var(--text-primary)}.related-card h3{font-size:.95rem;font-weight:700;line-height:1.35;margin-bottom:.4rem;color:var(--text-primary)}.related-card p{font-size:.82rem;color:var(--text-secondary);line-height:1.5;flex:1;margin-bottom:.75rem}.related-read-more{font-size:.82rem;color:var(--accent);font-weight:600}.start-here{max-width:var(--max-width);margin:0 auto;padding:0 1.5rem 3rem}.start-here-inner{background:linear-gradient(135deg,#22d3ee0f,#1a2235cc);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:2rem}.start-here-header{margin-bottom:1.5rem}.start-here-label{display:block;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin-bottom:.35rem}.start-here-header h2{font-size:1.35rem;font-weight:800;margin:0;color:var(--text-primary)}.start-here-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.start-here-card{display:flex;flex-direction:column;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;color:var(--text-primary);text-decoration:none}.start-here-card:hover{transform:translateY(-5px);border-color:var(--accent);background:var(--bg-card-hover);color:var(--text-primary);box-shadow:0 10px 36px #22d3ee1f,0 2px 8px #0000004d}.start-here-card h3{font-size:1rem;font-weight:700;line-height:1.3;margin-bottom:.4rem;color:var(--text-primary)}.start-here-card p{font-size:.85rem;color:var(--text-secondary);line-height:1.5;flex:1;margin-bottom:.75rem}.start-here-read{font-size:.85rem;color:var(--accent);font-weight:600}@keyframes navSlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.nav-links{display:none;position:absolute;top:var(--header-height);left:0;right:0;background:#0a0e17f7;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);flex-direction:column;padding:1rem 1.5rem 1.5rem;gap:.25rem}.nav-links.open{display:flex;animation:navSlideDown .22s ease forwards}.nav-links a{padding:.65rem .5rem;border-radius:var(--radius);font-size:1rem}.nav-links a:after{display:none}.nav-links a:hover,.nav-links a[aria-current=page]{background:var(--accent-dim);color:var(--accent)}.nav-toggle{display:flex}.article-grid{grid-template-columns:1fr}.email-signup-box form{flex-direction:column}.hero{padding:3rem 1rem 2rem}.footer-links{flex-wrap:wrap}.post-email-form{flex-direction:column}.start-here-grid,.related-grid{grid-template-columns:1fr}}
