/* Simple, readable, responsive stylesheet */
:root{
  --bg:#ffffff;
  --muted:#666;
  --accent:#0b5fff;
  --card:#f8f9fb;
  --max-width:900px;
  --radius:8px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#111;line-height:1.5}
.wrap{max-width:var(--max-width);margin:0 auto;padding:1.25rem}
.site-header{background:linear-gradient(90deg,#f7f9ff,#ffffff);padding:1.25rem 0;border-bottom:1px solid #eee}
.site-title{margin:0;font-size:1.6rem}
.subtitle{margin:0;color:var(--muted);font-size:0.95rem}
.main-nav{margin-top:0.5rem}
.main-nav a{margin-right:0.75rem;color:var(--accent);text-decoration:none;font-weight:600}
.card{background:var(--card);padding:1rem;border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,0.02);margin-top:1rem}
.site-footer{border-top:1px solid #eee;padding:1rem 0;margin-top:2rem;color:var(--muted);font-size:0.9rem}
a{color:var(--accent)}
@media (max-width:640px){
  .main-nav{display:flex;flex-wrap:wrap;gap:0.5rem}
  .site-title{font-size:1.25rem}
}
.avatar {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #ccc;
  margin-right: 20px;
}