:root{
  --brand: {{ site.brand_color | default: "#111827" }};
  --accent: {{ site.accent_color | default: "#2563eb" }};
  --bg: {{ site.bg_color | default: "#0b1020" }};
  --card: {{ site.card_color | default: "#0f172a" }};
  --text: {{ site.text_color | default: "#e5e7eb" }};
  --muted: {{ site.muted_text | default: "#94a3b8" }};
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(70vmax 70vmax at 10% -10%, rgba(37,99,235,.15), transparent 60%),
    radial-gradient(70vmax 70vmax at 110% 10%, rgba(16,185,129,.12), transparent 60%),
    radial-gradient(70vmax 70vmax at -10% 110%, rgba(236,72,153,.10), transparent 60%),
    var(--bg);
  color:var(--text);
  display:grid; place-items:center;
  padding:32px;
}
.container{ width:100%; max-width:640px; }
.card{
  background:linear-gradient(180deg, color-mix(in oklab, var(--card), white 2%), var(--card));
  border:1px solid color-mix(in oklab, var(--card), white 8%);
  border-radius:24px;
  padding:28px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.header{ display:flex; gap:20px; align-items:center; }
.avatar{ width:88px; aspect-ratio:1/1; border-radius:18px; border:1px solid color-mix(in oklab, var(--card), white 14%); object-fit:cover; }
.hgroup{ flex:1; }
.name{ font-size:28px; font-weight:750; letter-spacing:.2px; margin:0; }
.bio{ margin:6px 0 0; color:var(--muted); line-height:1.5; }

.links{ margin:24px 0 0; display:grid; gap:12px; }
.link{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-radius:14px;
  background: color-mix(in oklab, var(--card), white 4%);
  border:1px solid color-mix(in oklab, var(--card), white 8%);
  text-decoration:none; color:var(--text); font-weight:600;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.link:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--accent), white 20%); background: color-mix(in oklab, var(--card), var(--accent) 5%); }
.link:active{ transform: translateY(0); }

.icon{ width:20px; height:20px; display:inline-grid; place-items:center; opacity:.9; }
.footer{ margin-top:20px; color:var(--muted); font-size:12px; text-align:center; }
.footer a{ color:var(--muted); }