/* Plain page, browser defaults, one column. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

body {
  max-width: 40rem;
  margin: 3rem 0 4rem 5rem;
  padding: 0 1rem;
  font: 1.2rem/1.6 "Times New Roman", Times, serif;
}

h1 { font-size: 1.6rem; line-height: 1.25; margin: 0; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 0.4rem; }
hr { border: 0; border-top: 1px solid GrayText; opacity: 0.5; margin: 1.2rem 0; }
li { margin: 0.25rem 0; }
img { max-width: 100%; height: auto; }
code { font-size: 0.85em; }
pre { overflow-x: auto; padding: 0.8rem 1rem; font-size: 0.8rem; line-height: 1.5;
      border: 1px solid color-mix(in srgb, CanvasText 20%, Canvas);
      background: color-mix(in srgb, CanvasText 5%, Canvas); }
pre code { font-size: inherit; }
figure { margin: 1.4rem 0; }
figcaption, .meta, .m { color: color-mix(in srgb, CanvasText 65%, Canvas); }
figcaption, .meta, .small { font-size: 0.85em; }
.meta { margin: 0.2rem 0 1.2rem; }

.name { font-size: 1.35rem; font-weight: bold; color: inherit; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; column-gap: 0.9rem; }
#theme { font: inherit; color: LinkText; background: none; border: 0; padding: 0;
         text-decoration: underline; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Figures drawn as inline SVG: one wide version, one stacked for phones */
.diagram { border: 1px solid color-mix(in srgb, CanvasText 20%, Canvas);
           background: color-mix(in srgb, CanvasText 5%, Canvas); padding: 1rem; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram .tall { display: none; }

@media (max-width: 600px) {
  body { margin: 1.5rem 0 3rem; font-size: 1.125rem; }
  nav a, #theme { padding: 0.55rem 0; }
  li { margin: 0.6rem 0; }
  .diagram .wide { display: none; }
  .diagram .tall { display: block; }
}