:root {
  color-scheme: light dark;
  --surface: #f4f5f7;
  --text: #1c2430;
  --muted: #586170;
  --accent: #2854ae;
  --rule: #d3d8e0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--text); }
.page { min-height: 100dvh; max-width: 1440px; margin-inline: auto; padding: 32px clamp(24px, 7vw, 112px); display: grid; grid-template-rows: auto 1fr auto; }
header { font-size: 17px; font-weight: 600; letter-spacing: -.035em; }
main { padding-block: clamp(56px, 10vh, 96px); align-self: center; }
h1 { margin: 0 0 36px; font-size: clamp(40px, 7vw, 96px); line-height: 1.1; font-weight: 650; letter-spacing: -.065em; }
.profile { color: var(--accent); display: inline-flex; align-items: center; gap: 24px; min-height: 48px; padding: 8px 0; font-size: 20px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--accent); transition: transform 150ms ease; }
.profile:hover { transform: translateX(4px); }
.profile:active { transform: translateX(2px); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 8px; }
footer { color: var(--muted); font-size: 13px; padding-top: 24px; border-top: 1px solid var(--rule); }
@media (prefers-color-scheme: dark) {
  :root { --surface: #11171f; --text: #ecedf0; --muted: #a3adba; --accent: #abc5fc; --rule: #354050; }
}
@media (max-width: 767px) {
  .page { padding: 24px; }
  main { padding-block: 56px; }
  h1 { max-width: 7ch; margin-bottom: 28px; }
  .profile { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .profile { transition: none; }
  .profile:hover, .profile:active { transform: none; }
}