:root {
  color-scheme: light dark;
  font-family: sans-serif;
}
body {
  margin-block: 2rem 4rem;
  margin-inline: auto;
  max-width: 40em;
  width: 90%;
  line-height: 2;
}
h1 {
  font-size: 150%;
}
h2 {
  margin-block: 3rem 0;
  font-size: 120%;
}
object {
  vertical-align: bottom;
}
ul, ol {
  padding-inline-start: 2rem;
}
pre {
  text-wrap-mode: wrap;
  white-space-collapse: preserve;
}
pre, code {
  font-family: ui-monospace, monospace;
}
table {
  margin-block: 1rem;
  border-collapse: collapse;
}
th, td {
  padding-block: .375rem;
  padding-inline: .25rem;
  border-block: 1px solid #757575;

  @media (prefers-color-scheme: dark) {
    border-block-color: #898989;
  }
}
th {
  padding-inline-end: 1rem;
  text-align: left;
}
td > small {
  margin-inline-start: .5rem;
}

.sample {
  display: grid;
  grid-template-columns: repeat(auto-fill, 11.25em);
  gap: 0 1rem;
  padding-inline-start: .25rem;
  list-style-type: none;
}
.favicon {
  border: 1px solid Canvas;
  border-radius: 50%;
  vertical-align: calc((1ex - 1ch) - (26px - 1em) / 2);

  td > & {
    margin-inline-end: .125em;
  }

  @media (prefers-color-scheme: dark) {
    border-color: #898989;
  }
}