:root {
  --bg-start:#cfeaff; --bg-end:#ffffff; --text:#1f2a37; --muted:#5b6b7a;
  --primary-1:#7bd0ff; --primary-2:#b9edff; --primary-1-hover:#66c2ff; --primary-2-hover:#9fe7ff;
  --btn-text:#072635; --btn-text-hover:#011a29; --ring:#8adcff; --accent:#0b4f91;
}
@media (prefers-color-scheme: dark){:root{
  --bg-start:#0f172a; --bg-end:#111827; --text:#e5eef7; --muted:#93a4b8;
  --primary-1:#1692d6; --primary-2:#39b7ff; --primary-1-hover:#1aa3ee; --primary-2-hover:#59c6ff;
  --btn-text:#e9f6ff; --btn-text-hover:#ffffff; --ring:#51bfff; --accent:#7bd0ff;
}}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{
  margin:0; padding:0; font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans","Helvetica Neue",sans-serif;
  background:linear-gradient(180deg,var(--bg-start) 0%,var(--bg-end) 100%); color:var(--text); text-align:center;
  min-height:100vh; display:flex; flex-direction:column; align-items:center; background-attachment:fixed; line-height:1.5;
}
.container{width:100%; display:flex; justify-content:center}
.column{width:100%; max-width:560px; padding:24px}
.avatar{margin:32px auto 12px; width:clamp(120px,18vw,168px); height:clamp(120px,18vw,168px); object-fit:cover; background:#fff}
.avatar--rounded{border-radius:50%; border:4px solid var(--ring); box-shadow:0 0 24px rgba(138,220,255,.45)}
h1{margin:8px 16px 2px; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--accent); font-weight:800}
p{color:var(--muted); margin-bottom:20px}
.button-stack{margin-top:10px}
.link{
  display:block; width:min(92%,380px); margin:12px auto; padding:14px 18px;
  background:linear-gradient(90deg,var(--primary-1),var(--primary-2)); color:var(--btn-text); text-decoration:none; font-weight:700;
  border-radius:999px; box-shadow:0 6px 16px rgba(0,90,150,.28); border:1px solid rgba(0,0,0,.03);
  transition:transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease; will-change:transform;
}
.link:hover{
  background:linear-gradient(90deg,var(--primary-1-hover),var(--primary-2-hover)); color:var(--btn-text-hover);
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,120,200,.45);
}
.link:focus-visible{
  outline:none; box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ring),0 10px 26px rgba(0,120,200,.45);
  transform:translateY(-2px);
}
.link:active{transform:translateY(0); box-shadow:0 4px 12px rgba(0,80,140,.35)}
.icon{width:20px; height:20px; margin-right:8px; vertical-align:-4px}
footer{margin:26px 0 8px; color:var(--muted); font-size:.95rem}
@media (prefers-reduced-motion:reduce){.link{transition:none} html{scroll-behavior:auto}}