*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:#f8f9fa;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6}.container{max-width:960px;margin:0 auto;padding:2rem 1rem}h1{margin-bottom:1.5rem;font-size:1.6rem}.center{text-align:center;padding:4rem 1rem}.error{color:#e74c3c}.blog-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;display:grid}@media (width<=768px){.blog-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=480px){.blog-grid{grid-template-columns:1fr}}.blog-card{color:inherit;background:#fff;border-radius:8px;text-decoration:none;transition:box-shadow .2s,transform .2s;display:block;overflow:hidden;box-shadow:0 1px 3px #00000014}.blog-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026}.blog-card-img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}.blog-card-noimg{aspect-ratio:16/9;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);flex-direction:column;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:1rem;display:flex}.blog-card-noimg svg{color:#fff9;width:2rem;height:2rem}.blog-card-noimg-title{color:#ffffffd9;text-align:center;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;max-width:90%;font-size:.75rem;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.blog-card-body{padding:.75rem}.blog-card-body h2{margin-bottom:.25rem;font-size:.95rem;line-height:1.4}.blog-card-body time{color:#888;font-size:.75rem}.category-filter{flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem;display:flex}.category-btn{cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:20px;padding:.35rem .85rem;font-size:.8rem;transition:all .2s}.category-btn:hover{border-color:#999}.category-btn.active{color:#fff;background:#333;border-color:#333}.category-tag{color:#446;background:#eef;border-radius:4px;margin-bottom:.35rem;padding:.15rem .5rem;font-size:.7rem;display:inline-block}.tag-list{flex-wrap:wrap;gap:.3rem;margin:.25rem 0;display:flex}.tag{color:#666;background:#f0f0f0;border-radius:3px;padding:.1rem .4rem;font-size:.65rem}.back-link{color:#555;margin-bottom:1.5rem;font-size:.9rem;text-decoration:none;display:inline-block}.back-link:hover{color:#000}.blog-detail time{color:#888;margin-bottom:1.5rem;font-size:.85rem;display:block}.blog-hero{border-radius:8px;width:50%;margin:0 auto 1.5rem;display:block}.blog-content{line-height:1.8}.blog-content img{border-radius:6px;max-width:100%}.blog-content h2,.blog-content h3{margin:1.5rem 0 .75rem}.blog-content p{margin-bottom:1rem}.blog-content pre{color:#d4d4d4;background:#1e1e1e;border-radius:6px;margin:1.25rem 0;padding:1.25rem 1.5rem;font-size:.875rem;line-height:1.6;overflow-x:auto}.blog-content code{font-family:Consolas,Monaco,Courier New,monospace}.blog-content pre code{color:inherit;font-size:inherit;background:0 0;border-radius:0;padding:0}.blog-content :not(pre)>code{color:#c7254e;background:#f0f0f0;border-radius:4px;padding:.15em .4em;font-size:.875em}.comments{border-top:1px solid #e0e0e0;margin-top:3rem;padding-top:2rem}.comments h3{margin-bottom:1rem;font-size:1.1rem}.comment-form{flex-direction:column;gap:.5rem;margin-bottom:2rem;display:flex}.comment-form input,.comment-form textarea{resize:vertical;border:1px solid #ddd;border-radius:6px;padding:.6rem .75rem;font-family:inherit;font-size:.9rem}.comment-form input:focus,.comment-form textarea:focus{border-color:#888;outline:none}.comment-form button{color:#fff;cursor:pointer;background:#333;border:none;border-radius:6px;align-self:flex-end;padding:.5rem 1.5rem;font-size:.85rem;transition:background .2s}.comment-form button:hover:not(:disabled){background:#555}.comment-form button:disabled{cursor:not-allowed;background:#bbb}.comment-list{list-style:none}.comment-item{border-bottom:1px solid #eee;padding:.75rem 0}.comment-header{align-items:center;gap:.75rem;margin-bottom:.25rem;display:flex}.comment-header strong{font-size:.9rem}.comment-header time{color:#999;font-size:.75rem}.comment-item p{white-space:pre-wrap;font-size:.9rem;line-height:1.5}.no-comments{color:#999;font-size:.9rem}