:root { color-scheme: dark; --i: #f2f6fb; --d: #0f3460; --s: #123a6b; --l: #9fc0e6; --k: #ffffff; }
html { color: var(--i); background-color: var(--d); }
body { box-sizing: border-box; max-width: 40em; margin: 3rem auto; padding: 3.5rem 3em 4.5rem; color: var(--i);
  background-color: var(--s); border: 1px solid var(--l);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", P052, Georgia, serif;
  font-size: 21px; line-height: 1.6; }
header p:first-child { margin-bottom: 2.4em; }
header p:first-child a { color: var(--i); text-decoration: none; text-transform: uppercase; letter-spacing: .3em;
  font-weight: bold; }
main h1 + p + pre { border: 0; padding: 0; margin: 2.4em auto 1em; width: 41ch; line-height: 1; }
main h1 + p + pre + p { text-align: center; margin-bottom: 2.4em; }
h1, h2, h3 { font-size: 1em; font-weight: bold; margin: 2.4em 0 1em; }
h1 { margin-top: 1.2em; }
p, ul, table, pre { margin: 0 0 1.2em; }
ul { padding-left: 1.3em; }
li { margin-bottom: .4em; }
a { color: var(--k); text-decoration-color: var(--l); text-underline-offset: .15em; }
hr { border: 0; border-top: 1px dashed var(--l); margin: 2.4em 0; width: 100%; }
table { border-collapse: collapse; font-size: .9em; }
th, td { border-bottom: 1px solid var(--l); padding: .3em .6em; text-align: left; vertical-align: top;
  font-weight: normal; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: "Courier New", Courier, monospace;
  font-size: .8em; line-height: 1.5; border-left: 1px solid var(--l); padding-left: 1em; }
@media (max-width: 640px) {
  html { background-color: var(--s); }
  body { margin: 0; padding: 1.5rem 1.1rem 3rem; border: 0; font-size: 18px; }
  main h1 + p + pre { font-size: 13px; }
}
@keyframes draw { from { width: 20%; } }
@media screen and (prefers-reduced-motion: no-preference) { hr { animation: draw 1.2s ease-out; } }
@media print {
  :root { --i: #000000; --d: #ffffff; --s: #ffffff; --l: #000000; --k: #000000; }
  body { border: 0; margin: 0; max-width: none; padding: 0; }
}