:root { --bg: #fff; --fg: #111; --muted: #555; --link: #0b57d0; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #0d1117; --fg: #e6edf3; --muted: #8b949e; --link: #58a6ff; }
  .socials img { filter: invert(1); }
}
body { margin: 0; background: var(--bg); color: var(--fg); font-family: ui-monospace, Menlo, Consolas, monospace; }
main { max-width: 640px; margin: 15vh auto; padding: 0 1.5rem; }
h1 { margin-bottom: 0; }
.role { color: var(--muted); margin-top: .25rem; }
ul { list-style: none; padding: 0; }
li { margin: .4rem 0; }
a { color: var(--link); }
.socials { display: flex; gap: 1.25rem; margin: 1.5rem 0; }
.socials li { margin: 0; }
.socials a { display: block; opacity: .75; transition: opacity .15s; }
.socials a:hover, .socials a:focus-visible { opacity: 1; }
.socials img { display: block; }