@font-face {
  font-family: 'Chicago';
  src: url('/fonts/ChicagoFLF.woff2') format('woff2'),
       url('/fonts/ChicagoFLF.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Espy Sans 12';
  src: url('/fonts/EspySansRevivedTwelve-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Espy Sans 12';
  src: url('/fonts/EspySansRevivedTwelve-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Espy Sans 10';
  src: url('/fonts/EspySansRevivedTen-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Espy Sans 10';
  src: url('/fonts/EspySansRevivedTen-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Espy Sans 9';
  src: url('/fonts/EspySansRevivedNine-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Espy Sans 9';
  src: url('/fonts/EspySansRevivedNine-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fairfax';
  src: url('/fonts/FairfaxHaxHD.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LcdSolid';
  src: url('/fonts/LcdSolid-VPzB.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Palette.
     Use these variables for site colors instead of ad hoc hex values. */
  --c-cream: #fffdf0;
  --c-cream-light: #fffef5;
  --c-peach: #ffd6ab;
  --c-peach-light: #ffead6;
  --c-tan: #d8aa7b;
  --c-tan-light: #e9c7a1;
  --c-orange: #ff7e46;
  --c-orange-light: #ffad94;
  --c-mint: #00fbad;
  --c-mint-light: #bfffe0;
  --c-green: #00c423;
  --c-green-light: #a6f08a;
  --c-teal: #30a77b;
  --c-teal-light: #83dcbf;
  --c-deep-teal: #3c7879;
  --c-deep-teal-light: #9ec8cb;
  --c-ice-blue: #a1fdff;
  --c-ice-blue-light: #d9feff;
  --c-sky-blue: #00a9fd;
  --c-sky-blue-light: #8edcff;
  --c-blue: #151de0;
  --c-blue-light: #9aa5ff;
  --c-purple: #4715a7;
  --c-purple-light: #c093ed;
  --c-lavender: #d6d6fe;
  --c-lavender-light: #eee8ff;
  --c-periwinkle: #aaabfd;
  --c-periwinkle-light: #ded1ff;
  --c-slate-blue: #7b7bd3;
  --c-slate-blue-light: #b5bbdc;
  --c-indigo: #434478;
  --c-indigo-light: #a39fc3;
  --c-pink: #ff81d4;
  --c-pink-light: #fbc4e9;
  --c-magenta: #af1e78;
  --c-magenta-light: #de8ac4;
  --c-mauve: #ac7ca8;
  --c-mauve-light: #cfc0df;
  --c-white: #ffffff;
  --c-gray-97: #f7f7f7;
  --c-gray-95: #f1f1f1;
  --c-gray-89: #e4e4e4;
  --c-gray-84: #d6d6d6;
  --c-gray-78: #c7c7c7;
  --c-gray-72: #b8b8b8;
  --c-gray-60: #9a9a9a;
  --c-gray-54: #8a8a8a;
  --c-gray-41: #686868;
  --c-gray-34: #565656;
  --c-gray-18: #2d2d2d;
  --c-gray-8: #151515;
  --c-black: #000000;
  --c-yellow: #fefd32;
  --c-yellow-light: #FFFBB5;
  --c-red: #ea2504;
  --c-red-light: #ff9d90;
  --paper-warm: var(--c-cream-light);
  --desktop: var(--c-gray-84);
  --rule: var(--c-black);
  --soft-rule: var(--c-gray-72);
  /* 4x4 Bayer dither tokens. The number is filled cells out of 16.
     Threshold order: 0 8 2 10 / 12 4 14 6 / 3 11 1 9 / 15 7 13 5. */
  --d1: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='white'/><rect x='0' y='0' width='1' height='1' fill='black'/></svg>");
  --d2: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='white'/><rect x='0' y='0' width='1' height='1' fill='black'/><rect x='2' y='2' width='1' height='1' fill='black'/></svg>");
  --d3: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='white'/><rect x='0' y='0' width='1' height='1' fill='black'/><rect x='2' y='2' width='1' height='1' fill='black'/><rect x='2' y='0' width='1' height='1' fill='black'/></svg>");
  --d4: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='white'/><rect x='0' y='0' width='1' height='1' fill='black'/><rect x='2' y='0' width='1' height='1' fill='black'/><rect x='0' y='2' width='1' height='1' fill='black'/><rect x='2' y='2' width='1' height='1' fill='black'/></svg>");
  --d5: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='white'/><rect x='0' y='0' width='1' height='1' fill='black'/><rect x='2' y='2' width='1' height='1' fill='black'/><rect x='2' y='0' width='1' height='1' fill='black'/><rect x='0' y='2' width='1' height='1' fill='black'/><rect x='1' y='1' width='1' height='1' fill='black'/></svg>");
  --d6: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='white'/><rect x='0' y='0' width='1' height='1' fill='black'/><rect x='2' y='2' width='1' height='1' fill='black'/><rect x='2' y='0' width='1' height='1' fill='black'/><rect x='0' y='2' width='1' height='1' fill='black'/><rect x='1' y='1' width='1' height='1' fill='black'/><rect x='3' y='3' width='1' height='1' fill='black'/></svg>");
  --d7: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='white'/><rect x='0' y='0' width='1' height='1' fill='black'/><rect x='2' y='2' width='1' height='1' fill='black'/><rect x='2' y='0' width='1' height='1' fill='black'/><rect x='0' y='2' width='1' height='1' fill='black'/><rect x='1' y='1' width='1' height='1' fill='black'/><rect x='3' y='3' width='1' height='1' fill='black'/><rect x='3' y='1' width='1' height='1' fill='black'/></svg>");
  --d8: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='white'/><rect x='0' y='0' width='1' height='1' fill='black'/><rect x='2' y='0' width='1' height='1' fill='black'/><rect x='1' y='1' width='1' height='1' fill='black'/><rect x='3' y='1' width='1' height='1' fill='black'/><rect x='0' y='2' width='1' height='1' fill='black'/><rect x='2' y='2' width='1' height='1' fill='black'/><rect x='1' y='3' width='1' height='1' fill='black'/><rect x='3' y='3' width='1' height='1' fill='black'/></svg>");
  --d9: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='black'/><rect x='3' y='0' width='1' height='1' fill='white'/><rect x='0' y='1' width='1' height='1' fill='white'/><rect x='2' y='1' width='1' height='1' fill='white'/><rect x='1' y='2' width='1' height='1' fill='white'/><rect x='3' y='2' width='1' height='1' fill='white'/><rect x='0' y='3' width='1' height='1' fill='white'/><rect x='2' y='3' width='1' height='1' fill='white'/></svg>");
  --d10: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='black'/><rect x='3' y='0' width='1' height='1' fill='white'/><rect x='0' y='1' width='1' height='1' fill='white'/><rect x='2' y='1' width='1' height='1' fill='white'/><rect x='1' y='2' width='1' height='1' fill='white'/><rect x='0' y='3' width='1' height='1' fill='white'/><rect x='2' y='3' width='1' height='1' fill='white'/></svg>");
  --d11: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='black'/><rect x='0' y='1' width='1' height='1' fill='white'/><rect x='2' y='1' width='1' height='1' fill='white'/><rect x='1' y='2' width='1' height='1' fill='white'/><rect x='0' y='3' width='1' height='1' fill='white'/><rect x='2' y='3' width='1' height='1' fill='white'/></svg>");
  --d12: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='black'/><rect x='0' y='1' width='1' height='1' fill='white'/><rect x='2' y='1' width='1' height='1' fill='white'/><rect x='0' y='3' width='1' height='1' fill='white'/><rect x='2' y='3' width='1' height='1' fill='white'/></svg>");
  --d13: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='black'/><rect x='2' y='1' width='1' height='1' fill='white'/><rect x='0' y='3' width='1' height='1' fill='white'/><rect x='2' y='3' width='1' height='1' fill='white'/></svg>");
  --d14: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='black'/><rect x='2' y='1' width='1' height='1' fill='white'/><rect x='0' y='3' width='1' height='1' fill='white'/></svg>");
  --d15: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4'><rect width='4' height='4' fill='black'/><rect x='0' y='3' width='1' height='1' fill='white'/></svg>");
  --button-default-ring: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='2' y='2' width='14' height='14' fill='%23999999'/><rect x='2' y='0' width='14' height='1' fill='black'/><rect x='2' y='17' width='14' height='1' fill='black'/><rect x='0' y='2' width='1' height='14' fill='black'/><rect x='17' y='2' width='1' height='14' fill='black'/><rect x='1' y='1' width='1' height='1' fill='black'/><rect x='16' y='1' width='1' height='1' fill='black'/><rect x='1' y='16' width='1' height='1' fill='black'/><rect x='16' y='16' width='1' height='1' fill='black'/><rect x='2' y='1' width='14' height='1' fill='%23dddddd'/><rect x='1' y='2' width='1' height='14' fill='%23dddddd'/><rect x='2' y='2' width='1' height='14' fill='%23bbbbbb'/><rect x='3' y='2' width='1' height='1' fill='%23bbbbbb'/><rect x='15' y='2' width='1' height='14' fill='%23777777'/><rect x='16' y='2' width='1' height='14' fill='%235f5f5f'/><rect x='2' y='16' width='14' height='1' fill='%23777777'/><rect x='14' y='15' width='1' height='1' fill='%23777777'/></svg>");
  --button-raised: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='2' y='2' width='14' height='14' fill='%23dddddd'/><rect x='2' y='0' width='14' height='1' fill='black'/><rect x='2' y='17' width='14' height='1' fill='black'/><rect x='0' y='2' width='1' height='14' fill='black'/><rect x='17' y='2' width='1' height='14' fill='black'/><rect x='1' y='1' width='1' height='1' fill='black'/><rect x='16' y='1' width='1' height='1' fill='black'/><rect x='1' y='16' width='1' height='1' fill='black'/><rect x='16' y='16' width='1' height='1' fill='black'/><rect x='2' y='1' width='14' height='1' fill='%23f2f2f2'/><rect x='1' y='2' width='1' height='14' fill='white'/><rect x='2' y='2' width='1' height='14' fill='%23f2f2f2'/><rect x='3' y='2' width='1' height='1' fill='%23f2f2f2'/><rect x='15' y='2' width='1' height='14' fill='%23c6c6c6'/><rect x='16' y='2' width='1' height='14' fill='%23a8a8a8'/><rect x='2' y='16' width='14' height='1' fill='%23c6c6c6'/><rect x='14' y='15' width='1' height='1' fill='%23c6c6c6'/></svg>");
  --button-pressed: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' shape-rendering='crispEdges'><rect x='2' y='2' width='14' height='14' fill='%23737373'/><rect x='2' y='0' width='14' height='1' fill='black'/><rect x='2' y='17' width='14' height='1' fill='black'/><rect x='0' y='2' width='1' height='14' fill='black'/><rect x='17' y='2' width='1' height='14' fill='black'/><rect x='1' y='1' width='1' height='1' fill='black'/><rect x='16' y='1' width='1' height='1' fill='black'/><rect x='1' y='16' width='1' height='1' fill='black'/><rect x='16' y='16' width='1' height='1' fill='black'/><rect x='2' y='1' width='14' height='1' fill='%23636363'/><rect x='1' y='2' width='1' height='14' fill='%23545454'/><rect x='2' y='2' width='1' height='14' fill='%23636363'/><rect x='3' y='2' width='1' height='1' fill='%23636363'/><rect x='15' y='2' width='1' height='14' fill='%239a9a9a'/><rect x='16' y='2' width='1' height='14' fill='%23b8b8b8'/><rect x='2' y='16' width='14' height='1' fill='%239a9a9a'/><rect x='14' y='15' width='1' height='1' fill='%239a9a9a'/></svg>");
  --stripes: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='1' height='2'><rect width='1' height='1' fill='black'/><rect y='1' width='1' height='1' fill='white'/></svg>");
  --font-ui: 'Chicago', Geneva, sans-serif;
  --font-chrome: 'Chicago', 'ChicagoFLF', monospace;
  --font-espy-9: 'Espy Sans 9', Geneva, sans-serif;
  --font-espy-9-1x: 9px;
  --font-espy-9-2x: 18px;
  --font-espy-9-3x: 27px;
  --font-espy-10: 'Espy Sans 10', Geneva, sans-serif;
  --font-espy-10-1x: 10px;
  --font-espy-10-2x: 20px;
  --font-espy-10-3x: 30px;
  --font-espy-12: 'Espy Sans 12', Geneva, sans-serif;
  --font-espy-12-1x: 12px;
  --font-espy-12-2x: 24px;
  --font-espy-12-3x: 36px;
  --font-espy-12-4x: 48px;
  --font-copy: var(--font-espy-10);
  --font-copy-size: var(--font-espy-10-2x);
  --font-body: var(--font-espy-12);
  --font-small: var(--font-espy-9);
  --font-small-size: var(--font-espy-9-2x);
  --font-display: var(--font-espy-12);
  --font-display-size: var(--font-espy-12-2x);
  --font-display-size-large: var(--font-espy-12-3x);
  --font-code: Monaco, 'Courier New', monospace;
  --font-inline-code: 'Iosevka Web', monospace;
  --font-block-code: 'Iosevka Web', monospace;
  --spx: 2px;
  --space-1: var(--spx);
  --space-2: calc(var(--spx) * 2);
  --space-3: calc(var(--spx) * 3);
  --space-4: calc(var(--spx) * 4);
  --space-5: calc(var(--spx) * 5);
  --space-6: calc(var(--spx) * 6);
  --space-8: calc(var(--spx) * 8);
  --space-10: calc(var(--spx) * 10);
  --space-12: calc(var(--spx) * 12);
  --space-16: calc(var(--spx) * 16);
  --dither-matrix-size: 4;
  --dither-pixel-native: 1px;
  --dither-pixel-ui: var(--space-1);
  --dither-pixel-chunky: var(--space-2);
  --dither-tile-native: calc(var(--dither-pixel-native) * var(--dither-matrix-size));
  --dither-tile-ui: calc(var(--dither-pixel-ui) * var(--dither-matrix-size));
  --dither-tile-chunky: calc(var(--dither-pixel-chunky) * var(--dither-matrix-size));
  --dither-checker-ui: repeating-conic-gradient(var(--c-black) 0 25%, transparent 0 50%);
  --dither-checker-ui-size: calc(var(--dither-pixel-ui) * 2) calc(var(--dither-pixel-ui) * 2);
  --stripe-pixel-native: 1px;
  --stripe-pixel-chunky: 2px;
  --scrollbar-size: 30px;
  --scrollbar-border: 2px;
  --scrollbar-track-min-height: 96px;
  --scrollbar-thumb-min-height: 40px;
  --pixel-panel-border: 3px solid var(--c-black);
  --pixel-panel-shadow: var(--spx) var(--spx) 0 var(--c-black);
  --pixel-card-border: 2px solid var(--c-black);
  --pixel-card-shadow: 4px 4px 0 var(--c-black);
  --pixel-card-shadow-pressed: 2px 2px 0 var(--c-black);
  --chrome-rule: 2px solid var(--c-black);
  --inline-highlight-padding: 2px;
  --readable-stroke-width: 4px;
  --cursor-hand: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAAAnElEQVQ4EaWSgQrAIAhEc+z/f7lpeM4ky7FghHo9b1Zr+epckm+7KKl2XqNENCSZrl0JoJz+DbiLreIs7JdKDmQemInuNmAPsGTFFUCwwvE0deu4g8kNeQdDC9DuoK8BwDCY4dejbkSIfNwBAUC1LwSC0+4BJ+1UV0cUAZz/5iJT261MbTVAdwmjA+iXTlbuMgcCis9XcqJHfpx9ABFKKyPsGNguAAAAAElFTkSuQmCC") 7 0, pointer;
}
* {
  box-sizing: border-box;
}

html {
  background: var(--desktop);
  background-image: var(--d1);
  background-size: var(--dither-tile-native) var(--dither-tile-native);
  scrollbar-width: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  height: 0;
  width: 0;
}

body {
  color: var(--c-black);
  font-family: var(--font-copy);
  font-size: var(--font-copy-size);
  line-height: 1.7;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  max-width: 74ch;
  margin: 0 auto;
  padding: var(--space-8) var(--space-10) var(--space-12);
  padding-right: calc(var(--space-10) + var(--scrollbar-size));
}

.site-header,
main,
footer {
  background: var(--paper-warm);
  border: 2px solid var(--rule);
  box-shadow: 6px 6px 0 var(--c-black);
}

.site-header {
  padding: var(--space-8);
  margin-bottom: var(--space-12);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "name nav"
    "tagline nav";
  align-items: center;
  column-gap: var(--space-12);
}

.site-name { grid-area: name; }
.site-tagline { grid-area: tagline; }
.site-nav { grid-area: nav; }

main {
  padding: clamp(var(--space-8), 4vw, var(--space-16));
}

footer {
  align-items: center;
  display: flex;
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  gap: var(--space-6);
  justify-content: space-between;
  margin-top: var(--space-12);
  padding: var(--space-6) var(--space-8);
}

.site-name {
  display: inline-block;
  color: var(--c-black);
  font-family: var(--font-ui);
  font-size: 1rem;
  text-decoration: none;
}

.site-name:hover,
a:hover {
  background: var(--c-black);
  color: var(--c-white);
  text-decoration-color: var(--c-white);
}

.site-tagline {
  margin: var(--space-3) 0 0;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ui-button-frame {
  display: inline-block;
  margin: 0;
  position: relative;
  /* padding-left: var(--space-2); */
}

.ui-button-frame::before {
  border: 12px solid transparent;
  border-image-source: var(--button-default-ring);
  border-image-slice: 6 fill;
  border-image-width: 12px;
  border-image-repeat: stretch;
  content: '';
  inset: -4px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.ui-button-frame:hover::before,
.ui-button-frame:focus-within::before,
.ui-button-frame:active::before {
  opacity: 1;
}

.ui-button {
  appearance: none;
  background: transparent;
  border-top: var(--space-6) solid transparent;
  border-bottom: var(--space-6) solid transparent;
  border-image-source: var(--button-raised);
  border-image-slice: 6 fill;
  border-image-width: var(--space-6);
  border-image-repeat: stretch;
  color: var(--c-black);
  display: inline-block;
  font-family: var(--font-copy);
  font-size: var(--font-copy-size);
  font-weight: inherit;
  line-height: 1;
  margin: 0;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
  position: relative;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  z-index: 2;
}

.ui-button:hover,
.ui-button:focus-visible {
  background: transparent;
  color: var(--c-black);
  -webkit-text-stroke: 0;
  paint-order: normal;
}

.ui-button:focus-visible {
  outline: 0;
}

.ui-button:active {
  border-image-source: var(--button-pressed);
  color: var(--c-white);
}

.ui-button:active:hover {
  background: transparent;
  color: var(--c-white);
}

a {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--c-black);
  cursor: var(--cursor-hand);
  margin: calc(-1 * var(--inline-highlight-padding));
  padding: var(--inline-highlight-padding);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

abbr[title] {
  cursor: help;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.abbr-expansion {
  font-family: var(--font-small);
  font-size: var(--font-small-size);
}

dfn {
  font-style: italic;
}
.page-scrollbar {
  bottom: 0;
  image-rendering: pixelated;
  position: fixed;
  right: 0;
  top: 0;
  width: var(--scrollbar-size);
  z-index: 400;
}

.page-scrollbar-inner {
  background: var(--c-white);
  border: var(--scrollbar-border) solid var(--c-black);
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.page-scroll-button {
  appearance: none;
  background: var(--c-white);
  border: 0;
  flex: 0 0 var(--scrollbar-size);
  padding: 0;
  position: relative;
}

.page-scroll-button::before {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  image-rendering: pixelated;
  inset: var(--space-1);
  position: absolute;
}

.page-scroll-up { border-bottom: var(--scrollbar-border) solid var(--c-black); }
.page-scroll-down { border-top: var(--scrollbar-border) solid var(--c-black); }

.page-scroll-up::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' shape-rendering='crispEdges'><path d='M7 1L14 8H10V14H4V8H0Z' fill='white' stroke='black' stroke-width='1' stroke-linejoin='miter'/></svg>");
}

.page-scroll-down::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' shape-rendering='crispEdges'><path d='M4 1H10V7H14L7 14L0 7H4Z' fill='white' stroke='black' stroke-width='1' stroke-linejoin='miter'/></svg>");
}

.page-scroll-button:active {
  background-color: var(--c-white);
  background-image: var(--d4);
  background-size: var(--dither-tile-native) var(--dither-tile-native);
}

.page-scroll-track {
  background-color: var(--c-white);
  background-image: var(--dither-checker-ui);
  background-size: var(--dither-checker-ui-size);
  flex: 1;
  min-height: var(--scrollbar-track-min-height);
  position: relative;
}

.page-scroll-thumb {
  background: var(--c-white);
  border-bottom: var(--scrollbar-border) solid var(--c-black);
  border-top: var(--scrollbar-border) solid var(--c-black);
  left: 0;
  min-height: var(--scrollbar-thumb-min-height);
  position: absolute;
  right: 0;
  top: 0;
}
.glossary-ref {
  cursor: help;
  font-style: italic;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.glossary-ref:focus-visible,
.glossary-ref.is-open {
  background: var(--c-peach);
  outline: 2px solid var(--c-magenta);
  outline-offset: 2px;
}

.article-glossary {
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  line-height: 1.4;
}

.glossary-list {
  margin: 0;
}

.glossary-entry {
  margin-top: 0.9rem;
}

.glossary-entry:first-child {
  margin-top: 0;
}

.glossary-term {
  font-weight: bold;
}

.glossary-definition {
  margin: 0.25rem 0 0 1.25rem;
}

.glossary-definition p {
  margin-bottom: 10px;
}

.glossary-definition ul,
.glossary-definition ol {
  margin-bottom: 10px;
  padding-left: 28px;
}

.glossary-definition > :last-child {
  margin-bottom: 0;
}

.glossary-popover {
  --note-fill: var(--c-pink-light);
  --note-rule: var(--c-magenta);
  --note-top-light: var(--c-peach);
  --note-top-dark: var(--c-pink);
  --note-button-fill: var(--c-peach);
  --note-button-dark: var(--c-pink);
  background: var(--note-fill);
  border: 2px solid var(--note-rule);
  box-shadow: 6px 6px 0 var(--c-black);
  color: var(--c-black);
  display: none;
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  line-height: 1.25;
  max-width: min(22rem, calc(100vw - 1.5rem));
  min-width: min(15rem, calc(100vw - 1.5rem));
  position: fixed;
  z-index: 30;
}

.glossary-popover.is-visible {
  display: block;
}

.glossary-popover::before {
  background: var(--note-fill);
  border-bottom: 2px solid var(--note-rule);
  border-right: 2px solid var(--note-rule);
  bottom: -9px;
  content: "";
  height: 14px;
  left: var(--caret-left, 50%);
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  z-index: 1;
}

.glossary-popover::after {
  background: var(--c-black);
  bottom: -15px;
  content: "";
  height: 14px;
  left: calc(var(--caret-left, 50%) + 6px);
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  z-index: -1;
}

.glossary-popover-chrome {
  align-items: start;
  background-color: var(--note-top-light);
  background-image:
    linear-gradient(45deg, var(--note-top-dark) 25%, transparent 25%),
    linear-gradient(-45deg, var(--note-top-dark) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--note-top-dark) 75%),
    linear-gradient(-45deg, transparent 75%, var(--note-top-dark) 75%);
  background-position: 0 0, 0 calc(var(--dither-tile-ui) / 2), calc(var(--dither-tile-ui) / 2) calc(-1 * var(--dither-tile-ui) / 2), calc(-1 * var(--dither-tile-ui) / 2) 0;
  background-size: var(--dither-tile-ui) var(--dither-tile-ui);
  display: flex;
  min-height: 22px;
  padding: 4px 6px 3px;
}

.glossary-popover-close,
.glossary-popover-back {
  --close-pixel: 3px;
  appearance: none;
  background-color: var(--note-button-fill);
  border: 0;
  height: calc(var(--close-pixel) * 7);
  margin: 0;
  padding: 0;
  position: relative;
  width: calc(var(--close-pixel) * 7);
}

.glossary-popover-back {
  margin-left: 5px;
}

.glossary-popover-back[hidden] {
  display: none;
}

.glossary-popover-close::before,
.glossary-popover-close::after,
.glossary-popover-back::before,
.glossary-popover-back::after {
  content: "";
  inset: 0;
  position: absolute;
}

.glossary-popover-close::before {
  background:
    linear-gradient(var(--note-button-dark) 0 0)
      calc(var(--close-pixel) * 1) calc(var(--close-pixel) * 1)
      / calc(var(--close-pixel) * 4) var(--close-pixel) no-repeat,
    linear-gradient(var(--note-button-dark) 0 0)
      calc(var(--close-pixel) * 1) calc(var(--close-pixel) * 1)
      / var(--close-pixel) calc(var(--close-pixel) * 4) no-repeat;
}

.glossary-popover-close::after {
  background:
    linear-gradient(var(--note-button-dark) 0 0)
      calc(var(--close-pixel) * 6) 0
      / var(--close-pixel) calc(var(--close-pixel) * 7) no-repeat,
    linear-gradient(var(--note-button-dark) 0 0)
      0 calc(var(--close-pixel) * 6)
      / calc(var(--close-pixel) * 7) var(--close-pixel) no-repeat;
}

.glossary-popover-back::before {
  background:
    linear-gradient(var(--note-button-dark) 0 0)
      calc(var(--close-pixel) * 2) calc(var(--close-pixel) * 3)
      / calc(var(--close-pixel) * 4) var(--close-pixel) no-repeat,
    linear-gradient(var(--note-button-dark) 0 0)
      calc(var(--close-pixel) * 2) calc(var(--close-pixel) * 2)
      / var(--close-pixel) calc(var(--close-pixel) * 3) no-repeat,
    linear-gradient(var(--note-button-dark) 0 0)
      calc(var(--close-pixel) * 3) calc(var(--close-pixel) * 1)
      / var(--close-pixel) var(--close-pixel) no-repeat,
    linear-gradient(var(--note-button-dark) 0 0)
      calc(var(--close-pixel) * 3) calc(var(--close-pixel) * 5)
      / var(--close-pixel) var(--close-pixel) no-repeat;
}

.glossary-popover-back::after {
  background:
    linear-gradient(var(--note-button-dark) 0 0)
      calc(var(--close-pixel) * 6) 0
      / var(--close-pixel) calc(var(--close-pixel) * 7) no-repeat,
    linear-gradient(var(--note-button-dark) 0 0)
      0 calc(var(--close-pixel) * 6)
      / calc(var(--close-pixel) * 7) var(--close-pixel) no-repeat;
}

.glossary-popover-close:focus-visible {
  outline: 2px solid var(--c-black);
  outline-offset: 2px;
}

.glossary-popover-back:focus-visible {
  outline: 2px solid var(--c-black);
  outline-offset: 2px;
}

.glossary-popover-content {
  padding: 11px 14px 14px;
  position: relative;
  z-index: 2;
}

.glossary-popover-body {
  margin: 0;
}

.glossary-popover-body > :last-child {
  margin-bottom: 0;
}

.glossary-popover .glossary-definition {
  margin: 0;
}

.glossary-popover .glossary-ref {
  cursor: help;
  font-style: italic;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.glossary-popover .glossary-ref:hover,
.glossary-popover .glossary-ref:focus-visible {
  background: var(--c-peach);
  outline: 2px solid var(--c-magenta);
  outline-offset: 2px;
}

.citation-ref {
  font-family: var(--font-small);
  font-size: 0.78em;
  font-weight: bold;
  text-decoration: none;
  vertical-align: super;
}

.citation-ref:focus-visible,
.citation-ref.is-open {
  background: var(--c-ice-blue);
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

.citation-popover .citation-source {
  margin-bottom: 0.45rem;
}

.citation-popover li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.citation-popover .citation-source a {
  font-weight: bold;
}

.citation-popover .citation-source span,
.citation-popover .citation-source time {
  display: block;
  margin-top: 0.25rem;
}

.citation-popover .citation-note > :last-child {
  margin-bottom: 0;
}

.glossary-popover.note-yellow {
  --note-fill: var(--c-cream);
  --note-rule: var(--c-orange);
  --note-top-light: var(--c-cream);
  --note-top-dark: var(--c-yellow);
  --note-button-fill: var(--c-cream);
  --note-button-dark: var(--c-orange);
}

.glossary-popover.note-blue {
  --note-fill: var(--c-lavender);
  --note-rule: var(--c-indigo);
  --note-top-light: var(--c-lavender);
  --note-top-dark: var(--c-periwinkle);
  --note-button-fill: var(--c-lavender);
  --note-button-dark: var(--c-slate-blue);
}

.glossary-popover.note-green {
  --note-fill: var(--c-mint);
  --note-rule: var(--c-deep-teal);
  --note-top-light: var(--c-mint);
  --note-top-dark: var(--c-teal);
  --note-button-fill: var(--c-mint);
  --note-button-dark: var(--c-teal);
}
var {
  font-family: var(--font-inline-code);
  font-style: normal;
}

button,
[role="button"] {
  cursor: var(--cursor-hand);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: bold;
  line-height: 1.15;
  margin: 2rem 0 0.75rem;
}

h1 {
  font-size: clamp(2.1rem, 8vw, 4.6rem);
  letter-spacing: -0.04em;
}

h2 {
  font-size: var(--font-display-size-large);
}

h3 {
  font-size: var(--font-display-size);
}

h4 {
  font-size: var(--font-display-size);
}

p,
ul,
ol,
blockquote,
pre,
table,
.callout {
  margin: 0 0 1.25rem;
}

ul,
ol {
  padding-left: 2rem;
}

li {
  margin-bottom: 0.25rem;
}

hr {
  border: 0;
  border-top: 2px solid var(--c-black);
  margin: 2.25rem 0;
}

.section-description,
.post-desc {
  font-size: 1rem;
}

.content-type,
.post-date,
time {
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  letter-spacing: 0.02em;
}

.content-type {
  -webkit-text-stroke: var(--readable-stroke-width) var(--c-white);
  paint-order: stroke;
  display: inline-block;
  border: 2px solid var(--c-black);
  padding: 0.1rem 0.35rem;
  margin-bottom: 0.65rem;
  background-image: var(--d1);
  background-size: var(--dither-tile-native) var(--dither-tile-native);
}

.post-header {
  border-bottom: 2px solid var(--c-black);
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
}

.post-header h1 {
  margin-top: 0;
}

.post-title-display {
  font-weight: bold;
}

.post-summary {
  border-left: 6px solid var(--c-black);
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  line-height: 1.55;
  margin: 1.25rem 0 0;
  padding-left: 1rem;
}

.post-hero {
  background: var(--c-white);
  border: var(--pixel-card-border);
  margin: 0 0 1.5rem;
  padding: 0.45rem;
}

.post-hero img {
  display: block;
  image-rendering: pixelated;
  width: 100%;
  height: auto;
}

.principle-infographic img {
  image-rendering: auto;
}

.post-hero figcaption {
  border-top: var(--chrome-rule);
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  line-height: 1.55;
  padding: 0.55rem 1rem 0.65rem;
}

.ui-dither-strip {
  background-color: var(--c-white);
  background-image: var(--d1);
  background-size: var(--dither-tile-native) var(--dither-tile-native);
  border-top: var(--chrome-rule);
}

.ui-dither-strip > * {
  -webkit-text-stroke: var(--readable-stroke-width) var(--c-white);
  paint-order: stroke;
}

.code-window-body img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: auto;
}

.article-body {
  max-width: 65ch;
}

.article-body img {
  max-width: 100%;
}

.article-backmatter {
  border-top: var(--chrome-rule);
  margin-top: 2rem;
  padding-top: 1rem;
}

.article-backmatter h2 {
  font-size: var(--font-display-size);
  margin-top: 0;
}

.article-citations {
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  line-height: 1.4;
}

.article-citations ol {
  padding-left: 2rem;
}

.article-citations li {
  margin-bottom: 0.8rem;
}

.citation-source {
  margin-bottom: 0.35rem;
}

.citation-source a {
  font-weight: bold;
}

.citation-source span,
.citation-source time {
  color: var(--c-gray-34);
  display: block;
  margin-top: 0.2rem;
}

.citation-note > :last-child {
  margin-bottom: 0;
}

.callout {
  --callout-padding-inline: 0.8rem;
  --callout-padding-block-start: 0.7rem;
  --callout-padding-block-end: 0.75rem;
  background: var(--c-white);
  border: 2px solid var(--c-black);
  box-shadow: var(--pixel-panel-shadow);
  padding: var(--callout-padding-block-start) var(--callout-padding-inline) var(--callout-padding-block-end);
  position: relative;
}

.callout-note {
  --note-fold-size: calc(var(--callout-padding-inline) + 8px);
  --note-fold-overdraw: var(--spx);
  background: var(--c-yellow-light);
  box-shadow: var(--pixel-panel-shadow);
}

.callout-note::before {
  background: var(--paper-warm);
  bottom: calc(-2px - var(--spx));
  content: "";
  height: var(--note-fold-size);
  position: absolute;
  right: calc(-2px - var(--spx));
  width: var(--note-fold-size);
  z-index: 1;
}

.callout-note::after {
  background:
    linear-gradient(135deg, transparent calc(50% - 1px), var(--c-black) 0 calc(50% + 3px), var(--c-cream-light) 0)
      var(--note-fold-overdraw) var(--note-fold-overdraw) / var(--note-fold-size) var(--note-fold-size) no-repeat,
    linear-gradient(var(--c-black) 0 0)
      var(--note-fold-overdraw) var(--note-fold-overdraw) / var(--note-fold-size) 2px no-repeat,
    linear-gradient(var(--c-black) 0 0)
      var(--note-fold-overdraw) var(--note-fold-overdraw) / 2px var(--note-fold-size) no-repeat,
    linear-gradient(var(--c-yellow) 0 0)
      var(--note-fold-overdraw) var(--note-fold-overdraw) / var(--note-fold-size) var(--note-fold-size) no-repeat;
  bottom: calc(-2px - var(--note-fold-overdraw));
  content: "";
  height: calc(var(--note-fold-size) + var(--note-fold-overdraw));
  position: absolute;
  right: calc(-2px - var(--note-fold-overdraw));
  width: calc(var(--note-fold-size) + var(--note-fold-overdraw));
  z-index: 2;
}

.callout-warning {
  background: var(--c-yellow-light);
}

.callout-heading {
  align-items: center;
  display: flex;
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  gap: 0.5rem;
  line-height: 1.2;
  margin-bottom: 0.45rem;
}

.callout-icon {
  flex: 0 0 auto;
}

.callout-body > :last-child {
  margin-bottom: 0;
}

.post-list {
  list-style: none;
  padding: 0;
}

.post-list li {
  border-bottom: 2px solid var(--soft-rule);
  margin: 0;
  padding: 1.1rem 0;
}

.post-list li:last-child {
  border-bottom: 0;
}

.post-list .post-title {
  font-family: var(--font-copy);
  font-size: var(--font-copy-size);
  font-weight: bold;
  margin: 0 0 0.25rem;
}

.post-list .post-date {
  display: block;
  margin-bottom: 0.4rem;
}

.post-list .post-desc {
  margin: 0;
}
/* System 6 window chrome on the 2px scaled pixel grid. */
.window,
.code-window {
  background: var(--c-white);
  border: var(--pixel-panel-border); /* 2px */
  border-top: none;
  box-shadow: var(--pixel-panel-shadow); /* 1px */
  image-rendering: pixelated;
  margin: var(--space-10) 0;
  min-width: 0;
  width: 100%;
}

.window {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.titlebar {
  background: var(--c-white);
  border: var(--chrome-rule); /* 1px */
  flex-shrink: 0;
  height: 31px; /* 19px */
  margin: 0 -3px; /* -2px */
  padding: var(--space-2) 0; /* 3px */
  position: relative;
}

.titlebar::before {
  background-image: var(--stripes);
  background-size: calc(var(--stripe-pixel-chunky) * 1) calc(var(--stripe-pixel-chunky) * 2);
  bottom: var(--space-2); /* 3px */
  content: '';
  left: 3px; /* 2px */
  position: absolute;
  right: 3px; /* 2px */
  top: var(--space-2); /* 3px */
}

.close-box {
  background: var(--c-white);
  border: var(--chrome-rule); /* 1px */
  cursor: var(--cursor-hand);
  height: 18px; /* 11px */
  left: 15px; /* 10px */
  outline: 2px solid var(--c-white); /* 1px */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; /* 11px */
  z-index: 1;
}

.close-box:hover,
.close-box:active {
  background: var(--c-black);
}

.window-title {
  align-items: center;
  background: var(--c-white);
  bottom: var(--space-2); /* 3px */
  display: flex;
  font-family: var(--font-chrome);
  font-size: 18px; /* 12px */
  left: 50%;
  letter-spacing: 0.04em;
  padding: 0 12px; /* 8px */
  position: absolute;
  top: 3px; /* 2px */
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
}

.window-body {
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  line-height: 1.55;
  padding: 21px 24px; /* 14px 16px */
}

.window-statusbar {
  align-items: center;
  display: flex;
  padding: var(--space-2) var(--space-8) var(--space-1);
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  line-height: 1.55;
}

.resize-grip {
  background-image: var(--d8);
  background-size: var(--dither-tile-chunky) var(--dither-tile-chunky);
  border: var(--chrome-rule); /* 1px */
  height: var(--space-8); /* 11px */
  margin-left: auto;
  width: var(--space-8); /* 11px */
}

.finder .window-body {
  padding: 0;
}

.finder-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.finder-cols {
  align-items: center;
  column-gap: var(--space-10);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
}

.finder-header {
  background-color: var(--c-white);
  background-image: var(--d4);
  background-size: var(--dither-tile-native) var(--dither-tile-native);
  border-bottom: 3px solid var(--c-black); /* 2px */
  font-family: var(--font-chrome);
  font-size: 18px; /* 12px */
  letter-spacing: 0.08em;
}

.finder-header .finder-cols {
  padding: 6px 15px; /* 4px 10px */
}

.finder-header span:not(:first-child) {
  text-align: right;
}

.finder-row {
  border-bottom: 2px solid var(--c-black); /* 1px */
  user-select: none;
}

.finder-row:last-child {
  border-bottom: none;
}

.finder-row .finder-cols {
  padding: 12px 18px; /* roomier than the prototype's 5px 10px */
}

.finder-row:hover .finder-cols,
.finder-row.is-selected .finder-cols {
  background: var(--c-black);
  color: var(--c-white);
}

.finder-row:hover a,
.finder-row.is-selected a {
  color: var(--c-white);
}

.finder-name-cell {
  display: flex;
  flex-direction: column;
  font-family: var(--font-small);
  font-size: var(--font-small-size); /* 12px */
  line-height: 1.35;
  min-width: 0;
  overflow: hidden;
}

.finder-name-cell h2 {
  font-family: var(--font-small);
  font-size: var(--font-small-size); /* 12px */
  font-weight: bold;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finder-name-cell h2 a {
  text-decoration-thickness: 2px;
}

.finder-name-cell p {
  display: -webkit-box;
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  font-weight: normal;
  line-height: 1.55;
  margin: var(--space-3) 0 0;
  max-height: 3.1rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  text-overflow: ellipsis;
}

.finder-num,
.finder-date {
  font-family: var(--font-small);
  font-size: var(--font-small-size); /* 12px */
  text-align: right;
  white-space: nowrap;
}

.principles-grid {
  display: grid;
  gap: var(--space-6);
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
}

.principles-grid li {
  margin: 0;
}

.principles-grid a {
  align-items: center;
  background: var(--c-white);
  border: var(--pixel-card-border);
  box-shadow: var(--pixel-card-shadow);
  color: var(--c-black);
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 3.25rem 1fr;
  margin: 0;
  padding: var(--space-8);
  text-decoration: none;
}

.principles-grid a:hover {
  transform: translate(2px, 2px);
  box-shadow: var(--pixel-card-shadow-pressed);
}

.principle-num {
  aspect-ratio: 1;
  background-image: var(--dither-checker-ui);
  background-size: var(--dither-checker-ui-size);
  border: var(--pixel-card-border);
  color: var(--c-white);
  display: grid;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  place-items: center;
  text-shadow: 1px 1px 0 var(--c-black);
}

.principle-title {
  display: block;
  font-weight: bold;
  line-height: 1.25;
}

.principle-desc {
  display: block;
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  line-height: 1.4;
  margin-top: var(--space-3);
}
.note-body > :last-child {
  margin-bottom: 0;
}

.note-list-compact {
  margin-bottom: 2rem;
}

code {
  background: var(--c-white);
  border: 2px dotted var(--c-black);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-family: var(--font-inline-code);
  font-size: 0.95em;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  margin: 0 0.12em;
  padding: calc(0.1em + var(--inline-highlight-padding)) calc(0.3em + var(--inline-highlight-padding));
}

samp {
  font-family: var(--font-block-code);
}

q {
  background: var(--c-gray-89);
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  font-style: italic;
  margin: 0 0.12em;
  padding: calc(0.05em + var(--inline-highlight-padding)) calc(0.15em + var(--inline-highlight-padding));
  quotes: none;
}

q::before {
  content: "“";
}

q::after {
  content: "”";
}

mark {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: calc(-1 * var(--inline-highlight-padding));
  padding: var(--inline-highlight-padding);
  background-color: var(--c-yellow);
}

.code-window-body {
  background: var(--c-gray-97);
}

.code-window figcaption,
.code-window-note {
  padding: var(--space-2) var(--space-8) var(--space-1);
  font-family: var(--font-small);
  font-size: var(--font-small-size);
  line-height: 1.55;
}

.code-window .highlight,
.code-window pre {
  margin: 0;
}

.code-window--text pre,
.code-window--text pre code,
.code-window--wrap pre,
.code-window--wrap pre code {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.code-window--text pre code > span,
.code-window--wrap pre code > span {
  display: block !important;
}

.code-window--text pre code span,
.code-window--wrap pre code span {
  white-space: inherit;
}

mark.diff-ins {
  background-color: var(--c-green-light);
}

mark.diff-del {
  background-color: var(--c-red-light);
}

mark.diff-hl {
  background-color: var(--c-yellow);
}

pre {
  font-family: var(--font-block-code);
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: auto;
  padding: 21px 24px;
  width: 100%;
}

pre code,
pre samp {
  background: transparent;
  border: 0;
  display: block;
  font-family: var(--font-block-code);
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
  padding: 0;
  position: static;
  top: auto;
}

.has-indent {
  background-image: repeating-linear-gradient(
    to right,
    var(--soft-rule),
    var(--soft-rule) 1px,
    transparent 1px,
    transparent 2ch
  );
  background-size: calc(var(--depth) * 1ch) 100%;
  background-repeat: no-repeat;
}

blockquote {
  border-left: 6px solid var(--c-black);
  padding-left: 1rem;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  border: 2px solid var(--c-black);
  padding: var(--space-4) var(--space-5);
  text-align: left;
}

th {
  background-image: var(--d1);
  background-size: var(--dither-tile-native) var(--dither-tile-native);
  font-family: var(--font-ui);
  font-size: 0.78rem;
}
@media (max-width: 640px) {
  body {
    padding: var(--space-6);
  }

  .site-header,
  main,
  footer {
    box-shadow: 3px 3px 0 var(--c-black);
  }

  .site-header {
    display: block;
  }

  .site-nav {
    margin-top: var(--space-4);
  }

  .site-nav ul {
    --site-nav-gap: var(--space-2);
    flex-wrap: nowrap;
    gap: var(--site-nav-gap);
    justify-content: space-between;
    font-size: 14px;
  }

  .site-nav .ui-button-frame {
    flex: 0 0 calc((100% - (3 * var(--site-nav-gap))) / 4);
    min-width: 0;
  }

  .site-nav .ui-button {
    box-sizing: border-box;
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    width: 100%;
  }

  .page-scrollbar {
    display: none;
  }

  main {
    padding: var(--space-8);
  }

  pre {
    padding: 12px 14px;
  }

  pre code {
    font-size: 14px;
  }

  .finder-header {
    display: none;
  }

  .finder-cols {
    grid-template-columns: 1fr;
  }

  .finder-date {
    display: block;
    margin-top: var(--space-4);
    text-align: left;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 640px) {
    body {
      padding: var(--space-4);
    }

    .site-header {
      padding: var(--space-6);
    }

    .site-nav {
      margin-top: var(--space-6);
    }

    .site-nav ul {
      --site-nav-gap: var(--space-1);
      font-size: 13px;
    }

    .site-nav .ui-button {
      padding: var(--space-1) var(--space-1) var(--space-1) var(--space-1);
    }
  }
}