* { box-sizing: border-box; }
body { margin: 0; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #0b1324; background: #fbfdff; }
.blog-app { max-width: 920px; margin: 0 auto; padding: 24px 16px 56px; }
.blog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blog-header h1 { margin: 0; font-size: 26px; }
.link { color: #3867ff; text-decoration: none; font-weight: 600; }

.posts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.post { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; padding: 16px; box-shadow: 0 10px 30px rgba(15,23,42,.06); display: grid; gap: 8px; }
.post h3 { margin: 0; font-size: 18px; }
.post p { margin: 0; color: #334155; line-height: 1.55; }
.post .meta { color: #64748b; font-size: 12px; }

@media (hover: none) and (pointer: coarse) {
  .post { padding: 18px; }
}