:root{
--bg:#f6f7fb;
--card:#ffffff;
--accent:#2563eb;
--text:#14202b;
--muted:#5b6b76;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text);}
.container{max-width:1000px;margin:0 auto;padding:20px}
.site-header{background:linear-gradient(90deg, #fff, #f8fafc);border-bottom:1px solid rgba(20,32,43,0.06)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px}
.brand{display:flex;gap:12px;align-items:center}
.avatar{width:72px;height:72px;border-radius:12px;object-fit:cover;border:2px solid rgba(37,99,235,0.08)}
.name{margin:0;font-size:1.3rem}
.tagline{margin:0;color:var(--muted)}
.menu-toggle{display:none;background:none;border:0;font-size:1.1rem}


main{padding:24px 20px}
.card{background:var(--card);border-radius:12px;padding:18px;margin-bottom:18px;box-shadow:0 6px 18px rgba(14,30,37,0.04)}
.card h2{margin-top:0}
.hobby-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.hobby{padding:12px;border-radius:10px;background:linear-gradient(180deg, rgba(37,99,235,0.03), transparent)}
.hobby-icon{font-size:1.6rem;margin-bottom:8px}
.social-list{list-style:none;padding:0;margin:0;display:flex;gap:12px;flex-wrap:wrap}
.social-list a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;text-decoration:none;border:1px solid rgba(20,32,43,0.04)}
.site-footer{padding:12px 0;text-align:center;color:var(--muted)}


/* Responsive */
@media (max-width:800px){
.hobby-grid{grid-template-columns:repeat(1,1fr)}
.header-inner{padding:12px}
.menu-toggle{display:block}
}


@media (max-width:480px){
.avatar{width:56px;height:56px}
.name{font-size:1.05rem}
}