:root {
  --bg: #fdfcf9;
  --fg: #1f1f1f;
  --muted: #6b6b6b;
  --rule: #e2dfd8;
  --link: #1d5fb8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161616;
    --fg: #e8e6e1;
    --muted: #9a978f;
    --rule: #333;
    --link: #7fb0f0;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0 auto;
  max-width: 44rem;
  padding: 3rem 1rem 4rem;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

a { color: var(--link); }
h1 { font-size: 1.8rem; line-height: 1.2; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 .5rem; }
nav { margin-bottom: 2.5rem; font-size: .95rem; }
nav a { margin-right: 1rem; }
.muted { color: var(--muted); }
footer { margin-top: 4rem; font-size: .85rem; color: var(--muted); }
code { font-size: .9em; }

ul.ports { list-style: none; padding: 0; margin: 0; }
ul.ports li {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .8rem 0;
  border-top: 1px solid var(--rule);
}
ul.ports li:last-child { border-bottom: 1px solid var(--rule); }
ul.ports .name { font-weight: 600; }
ul.ports .meta { display: block; font-size: .9rem; color: var(--muted); }
ul.ports .dl { white-space: nowrap; font-size: .95rem; }
ul.ports .info { flex: 1; }
ul.ports .icon { flex: none; width: 64px; height: 64px; image-rendering: pixelated; }
ul.ports .beta {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0 .35rem;
  vertical-align: .1em;
}