:root {
  --bg: #0b0d12; --bg-2: #11141b; --line: #222836; --text: #e8eaf0; --muted: #9aa3b5; --accent: #5ee6c1;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: light) {
  :root { --bg: #f7f8fa; --bg-2: #ffffff; --line: #dde1ea; --text: #12151c; --muted: #566075; --accent: #0a8a6c; }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(60% 50% at 50% 40%, rgba(94,230,193,.12), transparent 70%), var(--bg);
  color: var(--text); font: 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
main { width: 100%; max-width: 760px; text-align: center; }
.mono { font-family: var(--mono); }
h1 { font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 2rem; font-weight: 600; }
.cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: center; }
.card {
  display: flex; flex-direction: column; align-items: center; gap: .25rem; width: 260px; padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--line); border-radius: 18px; background: var(--bg-2); color: var(--text); text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card:hover, .card:focus-visible { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 12px 40px rgba(94,230,193,.15); outline: none; }
.card img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; border: 2px solid var(--accent); margin-bottom: 1rem; }
.name { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.role { color: var(--muted); font-size: .95rem; }
.go { margin-top: 1rem; font-size: .85rem; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } .card:hover { transform: none; } }