/* CRT subpixel overlay. Two full-cover layers blended in "overlay" mode over everything inside .crt: horizontal
   red-green-blue bands every 4px and vertical red-green-blue stripes every 2px, plus a phosphor glow and a 1px
   magenta / cyan fringe on all text. Overlay blending leaves pure black, pure white and fully saturated primaries
   alone and only grains the in-between tones (anti-aliased edges, glows, gradients, photos), so the page reads as
   a lit screen without getting darker. Colours and periods are the source's. */
.crt {
  --crt-r: rgb(218, 49, 49);
  --crt-g: rgb(112, 159, 115);
  --crt-b: rgb(40, 129, 206);
  --crt-row: 4px;                 /* horizontal band period (r 0 -> g 2px -> b 4px) */
  --crt-col: 2px;                 /* vertical stripe period (r 1px -> g 2px -> b 3px) */
  --crt-blend: overlay;
  --crt-opacity: 1;
  --crt-glow: 0 0 .2em currentColor;
  --crt-fringe: 1px 1px rgba(255, 0, 255, .5), -1px -1px rgba(0, 255, 255, .4);
  --crt-text-shadow: var(--crt-glow), var(--crt-fringe);
  --crt-z: 5;
  position: relative;
  isolation: isolate;
}
.crt, .crt * { text-shadow: var(--crt-text-shadow); }   /* per element, so currentColor is each element's own ink */
.crt::before,
.crt::after {
  content: "";
  position: absolute; inset: 0;
  z-index: var(--crt-z);
  pointer-events: none;
  mix-blend-mode: var(--crt-blend);
  opacity: var(--crt-opacity);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* tiles of exactly one period: same picture as the source's repeating gradients, no seams in WebKit */
.crt::before {
  background: linear-gradient(var(--crt-r) 0, var(--crt-g) calc(var(--crt-row) / 2), var(--crt-b) var(--crt-row)) 0 0 / 100% var(--crt-row) repeat;
}
.crt::after {
  background: linear-gradient(90deg, var(--crt-r) 0, var(--crt-g) calc(var(--crt-col) / 2), var(--crt-b) var(--crt-col)) calc(var(--crt-col) / 2) 0 / var(--crt-col) 100% repeat;
}
.crt--no-rows::before, .crt--no-cols::after { display: none; }
.crt--no-text, .crt--no-text * { text-shadow: none; }

/* optional: the source's fine grain on display type (SVG turbulence displacement, injected by part.js) */
.crt-noise { filter: url(#crt-text-noise); }