:root{--blog-bg: #0a0a0a;--blog-text: #e8e8e8;--blog-text-dim: #999;--blog-surface: #161616;--blog-border: #2a2a2a;--blog-accent: #02c4da;--blog-accent-glow: rgba(2, 196, 218, .3);--blog-code-bg: #1a1a1a}[data-theme=light]{--blog-bg: #fff;--blog-text: #1a1a1a;--blog-text-dim: #555;--blog-surface: #f5f5f5;--blog-border: #e0e0e0;--blog-accent: #02a8bc;--blog-accent-glow: rgba(2, 168, 188, .2);--blog-code-bg: #f0f0f0}.blog-landing{min-height:100vh;background:var(--blog-bg);color:var(--blog-text);transition:background-color .3s ease,color .3s ease}.blog-header{max-width:1000px;margin:0 auto;padding:8rem 2rem 3rem;text-align:center;animation:fadeInUp 1s ease-out}.blog-header-label{font-size:.875rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blog-accent);margin-bottom:1rem;font-weight:500}.blog-header h1{font-optical-sizing:auto;font-size:clamp(1.5rem,10vw,4rem);font-weight:600;color:var(--blog-text);line-height:1.2;background:none;-webkit-text-fill-color:unset;animation:unset}.blog-grid{max-width:1300px;margin:0 auto;padding:0 2rem 6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;animation:fadeInUp 1s ease-out .2s both}.blog-card{background:var(--blog-surface);border:1px solid var(--blog-border);overflow:hidden;transition:all .4s ease;text-decoration:none;color:var(--blog-text);display:flex;flex-direction:column}.blog-card:hover{border-color:var(--blog-accent);transform:translateY(-4px);box-shadow:0 8px 30px #0003}.blog-card-image{aspect-ratio:16/10;overflow:hidden;position:relative}.blog-card-image:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--blog-accent-glow) 0%,transparent 100%);opacity:0;transition:opacity .4s ease;z-index:1}.blog-card:hover .blog-card-image:before{opacity:1}.blog-card-image img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}.blog-card:hover .blog-card-image img{transform:scale(1.03)}.blog-card-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}.blog-card-category{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--blog-accent);font-weight:600;margin-bottom:.75rem}.blog-card-title{font-optical-sizing:auto;font-size:clamp(1.25rem,3vw,1.5rem);font-weight:600;line-height:1.3;margin-bottom:.75rem;color:var(--blog-text)}.blog-card-description{font-family:Figtree,sans-serif;font-size:1rem;line-height:1.6;color:var(--blog-text-dim);margin-bottom:1.25rem;flex:1}.blog-card-meta{font-size:.8rem;color:var(--blog-text-dim);display:flex;gap:1rem;align-items:center}.blog-card-meta span{display:flex;align-items:center}.blog-post-page{min-height:100vh;background:var(--blog-bg);color:var(--blog-text);transition:background-color .3s ease,color .3s ease}.blog-post-header{max-width:960px;margin:0 auto;padding:8rem 2rem 2rem;text-align:center;animation:fadeInUp 1s ease-out}.blog-post-category{font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;color:var(--blog-accent);font-weight:600;margin-bottom:1.25rem}.blog-post-header h1{font-optical-sizing:auto;font-size:clamp(2.25rem,4vw,4rem);font-weight:600;line-height:1.25;margin-bottom:2rem;color:var(--blog-text);background:none;-webkit-text-fill-color:unset;animation:unset}.blog-post-header-bottom{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1rem}.blog-post-author{display:flex;align-items:center;gap:1rem}.blog-post-author img{width:48px;height:48px;border-radius:50%;object-fit:cover}.blog-post-author-info{text-align:left}.blog-post-author-name{font-weight:600;font-size:.95rem;color:var(--blog-text)}.blog-post-author-meta{font-size:.85rem;color:var(--blog-text-dim)}@media(max-width:768px){.blog-post-header-bottom{flex-direction:column;align-items:center;gap:1.5rem}}.blog-prose{max-width:960px;margin:0 auto;padding:2rem 2rem 6rem;font-family:Figtree,sans-serif;font-size:1.125rem;line-height:1.8;color:var(--blog-text-dim);animation:fadeInUp 1s ease-out .2s both}.blog-prose h2{font-optical-sizing:auto;font-size:2.5rem;font-weight:600;color:var(--blog-text);margin-top:3rem;margin-bottom:1.25rem;line-height:1.3}@media(max-width:768px){.blog-prose h2{font-size:2rem}}.blog-prose h3{font-family:Figtree,sans-serif;font-size:1.25rem;font-weight:600;color:var(--blog-text);margin-top:2.5rem;margin-bottom:1rem}.blog-prose p{margin-bottom:1.5rem;font-size:1.35rem;line-height:1.5}@media(max-width:768px){.blog-prose p{font-size:1.05rem;line-height:1.75}}.blog-prose a{color:var(--blog-accent);text-decoration:underline;text-underline-offset:3px}.blog-prose a:hover{text-decoration:none}.blog-prose strong{color:var(--blog-text);font-weight:600}.blog-prose blockquote{background:#02c4da0d;border-left:3px solid var(--blog-accent);padding:1.5rem 2rem;margin:2rem 0;font-size:1.15rem;line-height:1.7;color:var(--blog-text);font-weight:500}[data-theme=light] .blog-prose blockquote{background:#02a8bc0f}.blog-prose blockquote p{margin-bottom:0}.blog-prose ul,.blog-prose ol{margin-bottom:1.5rem;padding-left:1.5rem}.blog-prose li{margin-bottom:.5rem}.blog-prose code{background:var(--blog-code-bg);padding:.2rem .4rem;border-radius:3px;font-size:.9em}.blog-prose pre{background:var(--blog-code-bg);border:1px solid var(--blog-border);padding:1.5rem;overflow-x:auto;margin-bottom:1.5rem;border-radius:4px}.blog-prose pre code{background:none;padding:0}.blog-prose img{max-width:100%;border-radius:4px;margin:2rem 0}.blog-prose hr{border:none;border-top:1px solid var(--blog-border);margin:3rem 0}.blog-landing nav,.blog-post-page nav{background:linear-gradient(180deg,var(--blog-bg) 0%,transparent 100%)}.blog-landing nav .back-link,.blog-post-page nav .back-link{color:var(--blog-text)}.blog-landing nav .back-link:hover,.blog-post-page nav .back-link:hover{color:var(--blog-accent)}@media(max-width:968px){.blog-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.blog-grid{grid-template-columns:1fr}.blog-header{padding:6rem 1.5rem 2rem}.blog-post-header{padding:6rem 1.5rem 1.5rem}.blog-prose{padding:1.5rem 1.5rem 4rem;font-size:1.05rem}}@media(max-width:375px){.blog-header h1{font-size:2rem}.blog-post-header h1{font-size:1.75rem}}