:root {
  --bg: #f5f5f7;
  --glow-1: rgba(236, 72, 153, 0.16);
  --glow-2: rgba(56, 189, 248, 0.16);
  --glow-3: rgba(250, 204, 21, 0.14);
  --surface: rgba(255, 255, 255, 0.72);
  --separator: rgba(60, 60, 67, 0.12);
  --hover: rgba(60, 60, 67, 0.05);
  --text: #1d1d1f;
  --secondary: #6e6e73;
  --tertiary: #b0b0b6;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -18px rgba(0, 0, 0, 0.22);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --glow-1: rgba(236, 72, 153, 0.18);
    --glow-2: rgba(56, 189, 248, 0.16);
    --glow-3: rgba(250, 204, 21, 0.10);
    --surface: rgba(28, 28, 30, 0.72);
    --separator: rgba(84, 84, 88, 0.5);
    --hover: rgba(255, 255, 255, 0.06);
    --text: #f5f5f7;
    --secondary: #98989d;
    --tertiary: #5a5a5f;
    --shadow: 0 12px 32px -20px rgba(0, 0, 0, 0.8);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  display: grid;
  place-items: center;
  padding: 48px 20px;
  background-color: var(--bg);
  background-image:
    radial-gradient(60vmax 60vmax at 12% 8%, var(--glow-1), transparent 60%),
    radial-gradient(55vmax 55vmax at 92% 22%, var(--glow-2), transparent 60%),
    radial-gradient(50vmax 50vmax at 50% 108%, var(--glow-3), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--shadow);
}

.name {
  margin: 18px 0 4px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.021em;
}

.tagline {
  margin: 0 0 30px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--secondary);
}

.links {
  overflow: hidden;
  border-radius: 16px;
  background: var(--surface);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--shadow);
  text-align: left;
}

.link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  color: var(--text);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background 0.2s ease;
}

.link + .link {
  box-shadow: inset 0 0.5px 0 var(--separator);
}

.link:hover {
  background: var(--hover);
}

.link:active {
  background: var(--hover);
}

.link:focus-visible {
  outline: 3px solid rgba(0, 122, 255, 0.5);
  outline-offset: -3px;
}

.link span {
  flex: 1;
}

.icon {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  fill: var(--secondary);
  transition: fill 0.2s ease;
}

.link:hover .icon { fill: var(--tint); }

.link:nth-of-type(1) { --tint: #c1558b; }
.link:nth-of-type(2) { --tint: #d4703c; }
.link:nth-of-type(3) { --tint: #4a9dc9; }
.link:nth-of-type(4) { --tint: #4b7fae; }

.chevron {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--tertiary);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .link, .icon { transition: none; }
}