* { box-sizing: border-box; }
:root { --max: 900px; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.5; color: #111; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 1rem; }
header { display: flex; align-items: baseline; gap: 1rem; justify-content: space-between; flex-wrap: wrap; background: #f6f6f6; }
h1 { margin: 0; }
nav a { margin-left: 1rem; text-decoration: none; color: #06c; }
nav a:hover { text-decoration: underline; }
section { margin-top: 2rem; }
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.card { border: 1px solid #ddd; border-radius: 10px; padding: 1rem; background: #fff; }
.card h3 { margin-top: 0; }
footer { text-align: center; color: #555; padding: 1rem 0 2rem; }
@media (max-width: 640px) { header { align-items: center; } }