.blog-page{background:#f8fafc;min-height:60vh}.section-inner{max-width:800px;margin:0 auto;padding:0 2rem}.project-meta{margin-top:-1rem;margin-bottom:1rem}.project-website{margin:0 auto 2rem}.tech-row{display:flex;flex-wrap:wrap;gap:.5rem}.tech-tag{font-size:1.2rem;font-weight:600;color:#059669;background:#ecfdf5;border-radius:50px;padding:.3rem .9rem}.blog-content-wrap{max-width:800px;margin:0 auto;padding:0 2rem 4rem}.blog-content *{line-height:1.6;color:#334155}.blog-content #tldr{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;padding:1.5rem 2rem;margin-bottom:2rem}.blog-content #tldr p,.blog-content #tldr li{font-size:1.5rem;color:#334155;margin:0}.blog-content #tldr p{margin-bottom:1rem}.blog-content #tldr strong{color:#059669}.blog-content #tldr ul{margin:0;padding-left:2rem}.blog-content #tldr li{margin-bottom:.4rem;padding-left:0}.blog-content #tldr li:before{display:none}.blog-content .astro-code *{color:inherit}.blog-content p{margin-bottom:2rem;margin-top:1rem}.blog-content hr{margin:2.5rem 0;border:0;border-top:1px solid #d1fae5}.blog-content h1,.blog-content h2,.blog-content h3,.blog-content h4{font-family:Sora Variable,sans-serif;font-weight:700;color:#0f172a;margin-bottom:1.5rem;margin-top:2.5rem}.blog-content h1{font-size:3.2rem}.blog-content h2{font-size:2.4rem;border-bottom:2px solid #d1fae5;padding-bottom:.5rem}.blog-content h3{font-size:2rem}.blog-content ul,.blog-content ol{margin-bottom:2rem}.blog-content li{display:block;position:relative;z-index:1;padding-left:25px;margin-bottom:10px}.blog-content li:before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:#a7f3d0}.blog-content .astro-code{padding:20px;margin-bottom:2rem;border-radius:12px;color:#e2e8f0!important}.blog-content strong{color:#059669}.blog-content img{border-radius:12px;border:1px solid #e2e8f0;max-width:100%}.blog-content a{color:#059669;text-decoration:underline;text-underline-offset:2px}.blog-content .article-index{margin:2rem 0 3rem;padding:1.5rem 2rem;background:#fff;border:1px solid #e2e8f0;border-radius:12px}.blog-content .article-index strong{display:block;font-family:Sora Variable,sans-serif;color:#0f172a;margin-bottom:.8rem}.blog-content .article-index ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1.5rem;margin:0;padding:0}.blog-content .article-index li{margin:0;padding:0}.blog-content .article-index li:before{display:none}@media (max-width: 600px){.blog-content .article-index ul{grid-template-columns:1fr}}.blog-content table{width:100%;border-collapse:collapse;margin:2rem 0;font-size:1.4rem}.blog-content th{background:#065f46;color:#fff;text-align:left;padding:1.2rem 1.5rem;font-weight:600;font-size:1.3rem}.blog-content td{padding:1rem 1.5rem;border-bottom:1px solid #d1fae5;color:#334155}.blog-content tr:nth-child(2n) td{background:#ecfdf5}.blog-content tr:hover td{background:#d1fae5}.project-footer{margin-top:2.5rem;padding:1.5rem 2rem;background:#fff;border:1px solid #e2e8f0;border-radius:16px}.topic-return{margin-top:2.5rem;padding:1.5rem 2rem;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px}.topic-return p{margin:0 0 .8rem;color:#334155}.topic-return a{color:#047857;font-weight:600;text-underline-offset:3px}.blog-faq{margin-top:3rem;padding:2rem;background:#fff;border:1px solid #d1fae5;border-radius:16px}.blog-faq>h2{font-family:Sora Variable,sans-serif;font-size:2.4rem;font-weight:700;color:#0f172a;margin:0 0 1.5rem;border-bottom:2px solid #d1fae5;padding-bottom:.5rem}.blog-faq-item{padding:1rem 0;border-bottom:1px solid #ecfdf5}.blog-faq-item:last-child{border-bottom:0}.blog-faq-item h3{font-family:Sora Variable,sans-serif;font-size:1.7rem;font-weight:700;color:#059669;margin:0 0 .5rem}.blog-faq-item p{font-size:1.5rem;line-height:1.6;color:#475569;margin:0}.project-result{font-size:1.5rem;color:#334155;margin:0 0 1.2rem;padding:1rem 1.2rem;background:#ecfdf5;border-left:3px solid #059669;border-radius:0 12px 12px 0}.project-result strong{color:#059669}.project-links{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem}.project-link{font-size:1.4rem;font-weight:600;color:#059669;text-decoration:none}.project-link:focus-visible{outline:2px solid #059669;outline-offset:2px;border-radius:4px}.blog-breadcrumb{max-width:1200px;margin:0 auto;padding:2rem}.blog-meta{max-width:800px;margin:0 auto 2rem;padding:0 2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:1.3rem;color:#64748b}.blog-author strong{color:#059669}.blog-date-sep{color:#cbd5e1}.blog-updated{color:#94a3b8;font-style:italic}
