*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:#1a1a1a;-webkit-font-smoothing:antialiased;background:#faf8f5;font-family:Inter,-apple-system,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.wrap{max-width:720px;margin:0 auto;padding:0 28px}.blog-nav{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:28px 0;display:flex}.blog-logo{letter-spacing:-.02em;font-size:1.25rem;font-weight:900}.blog-logo .g{color:#16a34a}.blog-nav-right{align-items:center;gap:20px;display:flex}.blog-nav-right a{color:#666;font-size:.88rem;font-weight:500;transition:color .15s}.blog-nav-right a:hover{color:#1a1a1a}.lang-toggle{align-items:center;gap:6px;font-size:.85rem;font-weight:700;display:flex}.lang-toggle a{color:#bbb}.lang-toggle a.active{color:#16a34a}.lang-sep{color:#ddd}.post-list-header{padding:8px 0 36px}.eyebrow{color:#16a34a;background:#f0fdf4;border-radius:100px;align-items:center;gap:8px;margin-bottom:16px;padding:5px 12px;font-size:.8rem;font-weight:700;display:inline-flex}.eyebrow:before{content:"●";font-size:.5rem}.post-list-header h1{letter-spacing:-.03em;margin-bottom:12px;font-size:2.4rem;font-weight:900}.post-list-header p{color:#666;max-width:48ch;font-size:1.05rem}.post-list{flex-direction:column;gap:14px;display:flex}.post-item{background:#fff;border:1px solid #e8e4de;border-radius:16px;align-items:flex-start;gap:18px;padding:24px;transition:border-color .15s,transform .15s;display:flex}.post-item:hover{border-color:#16a34a;transform:translateY(-2px)}.post-item:hover .post-item-title{color:#16a34a}.post-item-icon{background:#f0fdf4;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.4rem;display:flex}.post-item-content{flex:1;min-width:0}.post-item time{color:#999;letter-spacing:.02em;font-size:.8rem;font-weight:600}.post-item-title{letter-spacing:-.015em;margin:6px 0 8px;font-size:1.25rem;font-weight:800;transition:color .15s}.post-item-desc{color:#666;font-size:.95rem;line-height:1.6}.post-item-tags{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.tech-tag{color:#666;background:#f5f3ef;border-radius:6px;padding:4px 10px;font-size:.75rem;font-weight:600}.post{padding:8px 0 48px}.post-meta{flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px;display:flex}.post-meta time{color:#999;font-size:.85rem;font-weight:600}.post-tags{flex-wrap:wrap;gap:6px;display:flex}.post h1{letter-spacing:-.03em;margin-bottom:36px;font-size:clamp(1.9rem,4.5vw,2.7rem);font-weight:900;line-height:1.1}.post-body{color:#2a2a2a;font-size:1.05rem;line-height:1.8}.post-body h2{letter-spacing:-.02em;margin:44px 0 16px;font-size:1.5rem;font-weight:800}.post-body h3{margin:32px 0 12px;font-size:1.2rem;font-weight:700}.post-body p{margin-bottom:20px}.post-body ul,.post-body ol{margin:0 0 20px 1.3em}.post-body li{margin-bottom:8px}.post-body a{color:#16a34a;border-bottom:2px solid #dcfce7;font-weight:600}.post-body a:hover{border-color:#16a34a}.post-body strong{font-weight:700}.post-body img,.post-body svg{border-radius:12px;max-width:100%;margin:28px 0}.post-body figure{margin:28px 0}.post-body figcaption{color:#999;text-align:center;margin-top:8px;font-size:.85rem}.callout{color:#333;background:#f0fdf4;border:1px solid #dcfce7;border-left:4px solid #16a34a;border-radius:10px;margin:24px 0;padding:16px 20px;font-size:.95rem;line-height:1.6}.callout strong{color:#15803d;margin-bottom:4px;font-size:.95rem;display:block}.post-body blockquote{color:#555;border-left:3px solid #16a34a;margin:24px 0;padding:4px 0 4px 18px;font-style:italic}.post-body pre{background:#1a1a1a;border-radius:12px;margin:24px 0;padding:20px 22px;font-size:.88rem;line-height:1.6;overflow-x:auto}.post-body code{font-family:SF Mono,Fira Code,Consolas,monospace;font-size:.88em}.post-body :not(pre)>code{color:#b5476b;background:#f0ede8;border-radius:5px;padding:2px 6px}.blog-footer{border-top:1px solid #e8e4de;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-top:24px;padding:32px 0 44px;display:flex}.blog-footer a{color:#16a34a;font-size:.85rem;font-weight:600}.blog-footer span{color:#bbb;font-size:.8rem}@media (width<=600px){.blog-nav-right a:not(.lang-toggle a){font-size:.8rem}}