:root { color-scheme: dark; }
body { margin: 0; background: #0c0810; color: #d8d0c0; font: 16px/1.6 ui-monospace, Menlo, Consolas, monospace; }
main { max-width: 760px; margin: 0 auto; padding: 32px 16px 64px; overflow-wrap: break-word; }
h1 { margin: 0 0 4px; font-size: 26px; font-weight: normal; color: #f8d878; }
h2 { margin: 36px 0 8px; font-size: 18px; font-weight: normal; color: #f8d878; }
a { color: #3cbcfc; }
a:focus-visible { outline: 2px solid #f8d878; outline-offset: 2px; }
.updated { margin-top: 0; color: #a8a098; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px; text-align: left; vertical-align: top; border: 1px solid #3c3438; }
th { font-weight: normal; color: #f8d878; background: #1c1420; }
ul { padding-left: 20px; }
/* Three columns are too narrow to read on a phone, so each row becomes a block with its labels written in. */
@media (max-width: 600px) {
  thead { display: none; }
  tr, td { display: block; }
  tr { margin-bottom: 12px; border: 1px solid #3c3438; }
  td { border: 0; padding: 4px 8px; }
  td:first-child { color: #f8d878; background: #1c1420; }
  td[data-label]::before { content: attr(data-label) ": "; color: #a8a098; }
}