:root{
  --bg:#f6f7f8;
  --card:#ffffff;
  --muted:#6b7280;
  --text:#0f172a;
  --accent:#59647a;
  --shadow: 0 6px 18px rgba(22,28,36,0.06);
}

:root[data-theme='dark']{
  --bg:#0b0d0f;
  --card:#0f1113;
  --muted:#95a0ab;
  --text:#f2f6f8;
  --accent:#9aa6b2;
  --shadow: 0 8px 28px rgba(2,6,10,0.6);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system,"Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.topbar{
  position:fixed;
  left:0;right:0;top:18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 28px;
  pointer-events:auto;
}
.brand{
  font-weight:600;
  color:var(--text);
}
.theme-toggle{
  background:transparent;border:0;padding:8px;border-radius:8px;cursor:pointer;color:var(--accent)
}
.theme-toggle:focus{outline:2px solid rgba(99,102,241,0.12)}

.center{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 24px;
}
.card{
  width:740px;max-width:96%;text-align:center;padding:40px 28px;border-radius:12px;background:transparent;box-shadow:none
}
.avatar-wrap{display:flex;justify-content:center}
.avatar{width:120px;height:120px;border-radius:50%;border:6px solid var(--card);box-shadow:0 6px 18px rgba(0,0,0,0.08);display:block}

.name{font-size:36px;margin:18px 0 0 0;line-height:0.95;font-weight:800}
.title{margin:8px 0 18px 0;color:var(--muted);font-weight:600}

.bio{max-width:640px;margin:20px auto 28px auto;color:var(--muted);line-height:1.6}

.social{display:flex;gap:20px;justify-content:center;margin:18px 0 26px}
.social-link{color:var(--accent);opacity:0.9;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px}
.social-link svg{display:block}

.foot{color:var(--muted);font-size:13px;margin-top:18px}

/* small screens */
@media (max-width:420px){
  .avatar{width:96px;height:96px}
  .name{font-size:28px}
  .card{padding:28px}
}

/* subtle center accent */
body::after{content:"";position:fixed;left:0;right:0;top:0;bottom:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent 20%)}

/* Make things match the screenshot more closely */
.card{display:flex;flex-direction:column;align-items:center}

/* small animation */
.avatar{transition:transform .35s ease,box-shadow .35s ease}
.avatar:hover{transform:translateY(-4px)}

/* reduce contrast for light theme social icons */
:root:not([data-theme='dark']) .social-link{background:rgba(88,100,122,0.05)}
:root[data-theme='dark'] .social-link{background:rgba(255,255,255,0.02)}