/* The site's colors are the box's: plaster, a red wall, a green wall, and the green of a glass edge. */
:root {
  color-scheme: light dark;
  --paper: #f3f1ea;
  --paper-2: #e9e6dc;
  --ink: #141512;
  --ink-2: #33352e;
  --muted: #5d5f56;
  --line: rgba(20, 21, 18, 0.16);
  --line-2: rgba(20, 21, 18, 0.34);
  --red: #d2201a;
  --red-ink: #b3140f;
  --green: #0f8a55;
  --green-ink: #0a6f43;
  --glass: #8fd6c0;
  --on-red: #fff;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 14px 30px -18px rgba(20, 21, 18, 0.5);
  --wall: #e8e6df;
  --wall-2: #cfccc2;
  --wall-red: #d2231d;
  --wall-red-2: #8d110d;
  --wall-green: #2f9d62;
  --wall-green-2: #145c38;
  --wall-top: #a59f97;
  --floor: #e6e3dc;
  --floor-2: #c9c5bb;
  --lamp: #fff;
  --vinyl: #141512;

  --sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --plate: "Routed Gothic", "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --plate-wide: "Routed Gothic Wide", "Routed Gothic", ui-sans-serif, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 16px;
  --head: 52px;
  --wide: 1120px;
  --read: 38rem;

  /* The names the Manual's frame reads. */
  --d-bg: var(--paper);
  --d-bg-2: var(--paper-2);
  --d-surface: var(--paper-2);
  --d-ink: var(--ink);
  --d-muted: var(--muted);
  --d-line-strong: var(--line-2);
  --d-accent: var(--green-ink);
  --d-font-text: var(--sans);
  --d-font-display: var(--plate);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0c0d0c;
    --paper-2: #171816;
    --ink: #efede6;
    --ink-2: #d4d2ca;
    --muted: #a6a89e;
    --line: rgba(239, 237, 230, 0.16);
    --line-2: rgba(239, 237, 230, 0.34);
    --red: #e23a30;
    --red-ink: #ff7a6e;
    --green: #2fae74;
    --green-ink: #5fd39d;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 30px -18px #000;
    --wall: #1b1b19;
    --wall-2: #070707;
    --wall-red: #4a0d0a;
    --wall-red-2: #1a0403;
    --wall-green: #0f3a23;
    --wall-green-2: #06170e;
    --wall-top: #0e0e0d;
    --floor: #2a2925;
    --floor-2: #0b0b0a;
    --lamp: #3a3a37;
    --vinyl: #efede6;
  }
}
:root[data-theme="dark"] {
  --paper: #0c0d0c;
  --paper-2: #171816;
  --ink: #efede6;
  --ink-2: #d4d2ca;
  --muted: #a6a89e;
  --line: rgba(239, 237, 230, 0.16);
  --line-2: rgba(239, 237, 230, 0.34);
  --red: #e23a30;
  --red-ink: #ff7a6e;
  --green: #2fae74;
  --green-ink: #5fd39d;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 30px -18px #000;
  --wall: #1b1b19;
  --wall-2: #070707;
  --wall-red: #4a0d0a;
  --wall-red-2: #1a0403;
  --wall-green: #0f3a23;
  --wall-green-2: #06170e;
  --wall-top: #0e0e0d;
  --floor: #2a2925;
  --floor-2: #0b0b0a;
  --lamp: #3a3a37;
  --vinyl: #efede6;
}


@font-face { font-family: "Routed Gothic"; src: url("/fonts/routed-gothic.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Routed Gothic Wide"; src: url("/fonts/routed-gothic-wide.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-wght.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font: 400 1rem/1.55 var(--sans); background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
img, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a, button, summary { -webkit-tap-highlight-color: transparent; }
h1, h2, h3 { font-family: var(--plate); font-weight: 400; line-height: 1.12; margin: 0; letter-spacing: 0.002em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--green-ink); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 10px 14px; }
.skip:focus { left: 12px; }

/* The strip above every box. */
.site-head { position: relative; z-index: 20; height: var(--head); padding: 0 var(--gutter); display: flex; align-items: center; gap: 6px; background: var(--paper); }
.brand { display: inline-flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; font: 400 1.06rem/1 var(--plate); letter-spacing: 0.14em; flex: none; text-transform: uppercase; min-height: 44px; }
.brand svg { width: 22px; height: 22px; flex: none; }
.site-nav { display: none; align-items: center; gap: 2px; }
.site-nav a { font: 400 0.98rem/1 var(--plate); text-decoration: none; padding: 12px 10px; }
.site-nav a:hover { text-decoration: underline; }
.icon-btn { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 8px; text-decoration: none; }
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--line); }
.go { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin-left: 6px; padding: 0 11px; background: var(--red); color: var(--on-red); border-radius: 3px; font: 400 0.97rem/1 var(--plate); text-decoration: none; box-shadow: 0 0 0 1.5px var(--red), inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); white-space: nowrap; }
.go:hover { filter: brightness(1.08); }
.site-menu { position: relative; }
.site-menu > summary { list-style: none; }
.site-menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: -60px; top: 46px; z-index: 40; width: min(300px, calc(100vw - 32px)); background: var(--paper); border: 1px solid var(--line-2); box-shadow: var(--shadow); padding: 6px; }
.menu-panel a { display: block; font: 400 1.25rem/1 var(--plate); padding: 13px 12px; text-decoration: none; }
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--paper-2); }
@media (max-width: 899px) { .site-head > .icon-btn[href="/search/"] { display: none; } }
@media (min-width: 900px) {
  .brand { font-family: var(--plate-wide); letter-spacing: 0.11em; }
  .site-nav { display: flex; }
  .site-menu { display: none; }
  :root { --gutter: 28px; }
}

/* The foot of the page. */
.site-foot { margin-top: 72px; border-top: 1px solid var(--line-2); padding: 34px var(--gutter) 22px; background: var(--paper); }
.foot-inner { max-width: var(--wide); margin: 0 auto; display: grid; gap: 26px; }
.foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.foot-cols a { display: block; padding: 7px 0; font: 400 1.03rem/1.2 var(--plate); text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; }
.foot-sign { font: 400 1.5rem/1.1 var(--plate); max-width: 16ch; }
.fine { color: var(--muted); font-size: 0.86rem; }
@media (min-width: 720px) { .foot-inner { grid-template-columns: 1.1fr 1fr; align-items: start; } .fine, .site-credit { grid-column: 1 / -1; } }

.site-credit {
  --credit-ink: var(--ink);
  --credit-muted: var(--muted);
  --credit-line: var(--line-2);
  --credit-accent: var(--red);
  --credit-heart: var(--red);
  --credit-hover: var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 18px; border-top: 1px solid var(--line);
}
.site-credit-made { margin: 0; color: var(--credit-ink); font: 400 1.1rem/1.2 var(--plate); }
.site-credit-made a { color: inherit; text-decoration: underline; text-decoration-color: var(--credit-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.site-credit-social { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-credit-social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px; color: var(--credit-muted); transition: color 0.15s ease, background-color 0.15s ease; }
.site-credit-social a:hover { color: var(--credit-ink); background: var(--credit-hover); }
.site-credit-social svg { width: 19px; height: 19px; }
.site-credit-sponsor { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 40px; padding: 0 14px; border: 1px solid var(--credit-line); border-radius: 3px; color: var(--credit-ink); font: 400 1rem/1 var(--plate); text-decoration: none; transition: border-color 0.15s ease, background-color 0.15s ease; }
.site-credit-sponsor svg { width: 17px; height: 17px; color: var(--credit-heart); }
.site-credit-sponsor:hover { border-color: var(--credit-muted); background: var(--credit-hover); }
.site-credit a:focus-visible { outline: 2px solid var(--credit-accent); outline-offset: 2px; }
@media (max-width: 720px) { .site-credit-sponsor { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .site-credit a { transition: none; } }
@media (max-width: 379px) {
  .site-head { gap: 2px; }
  .brand { letter-spacing: 0.07em; gap: 7px; font-size: 1rem; }
  .go { padding: 0 9px; font-size: 0.92rem; }
  .icon-btn { width: 38px; }
}
@media (max-width: 339px) { .brand-word { display: none; } }