@import url('https://fonts.googleapis.com/css2?family=Fragment+Mono&family=Instrument+Serif:ital@0;1&display=swap');
:root {
  --bg: #0B0C0D;
  --ink: #E6E3DA;
  --muted: #7F8481;
  --accent: #9ED9CF;
  --sheet: transparent;
  --rule: #25292B;
  --rule-soft: #1A1D1F;
  --zebra: transparent;
  --chip: transparent;
  --chip-ink: #9A9E9A;
  --chip-on: transparent;
  --chip-on-ink: #E6E3DA;
  --code-bg: #111416;
  --byte-a: #2C3336;
  --byte-b: #4A5557;
  --mono: 'Fragment Mono', ui-monospace, monospace;
  --display: 'Instrument Serif', Georgia, serif;
  --prose: 'Instrument Serif', Georgia, serif;
  --prose-size: 20px;
  --brand-size: 30px;
}
body { padding-bottom: 18vh; }
canvas.river { position: fixed; left: 0; right: 0; bottom: 0; width: 100vw; height: 18vh; image-rendering: pixelated; z-index: 3; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 40%); mask-image: linear-gradient(to bottom, transparent 0%, #000 40%); }
.sheet { border: 0; max-width: 820px; padding-top: 8px; }
.brand { font-style: italic; }
.nav { gap: 18px; }
.nav a { padding: 0; font-size: 12px; border-bottom: 1px solid transparent; }
.nav a[aria-current] { border-bottom-color: var(--ink); }
h1, h2 { font-style: italic; }
h1 { font-size: 40px; line-height: 1.1; }
h2 { font-size: 26px; margin-top: 44px; }
.redacted { color: transparent; user-select: none; background-image: var(--tile); background-repeat: repeat-x; background-size: 96px 70%; background-position: 0 50%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; image-rendering: pixelated; animation: flow 9s linear infinite; }
@keyframes flow { from { background-position: 0 50%; } to { background-position: 96px 50%; } }
