:root{
  --bg:#0a0a0a;
  --fg:#ffffff;
  --muted:#9ca3af;
  --hover:#1f1f1f;
  --border:#2a2a2a;
  --icon-size:22px;
}

*{box-sizing:border-box;user-select:none}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
main{min-height:100dvh;display:grid;place-items:center;padding:24px}
.wrap{max-width:560px;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.avatar{width:clamp(96px,24vw,144px);aspect-ratio:1;border-radius:50%;object-fit:cover;border:1px solid #262626}
h1{margin:4px 0 0;font-size:clamp(26px,6vw,40px);font-weight:700;letter-spacing:.02em}
.subtitle{margin:0;font-size:clamp(14px,3.6vw,18px);color:var(--muted)}
.socials{margin-top:8px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.icon-btn{
  width:44px;height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid transparent;text-decoration:none;
  transition:background .2s ease,border-color .2s ease,transform .08s ease,filter .2s ease;
  -webkit-tap-highlight-color:transparent;outline:none
}
.icon-btn:hover,.icon-btn:focus-visible{background:var(--hover);border-color:var(--border)}
.icon-btn:active{transform:scale(.96)}
.icon-img{width:var(--icon-size);height:var(--icon-size);display:block;filter:brightness(0) invert(1)}
.footer{
  margin-top:12px;font-size:13px;font-weight:400;letter-spacing:.02em;color:#a3a3a3;opacity:.9
}
@media (max-width:360px){
  .icon-btn{width:40px;height:40px}
  .icon-img{--icon-size:20px}
}