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