/* The monitor pixel: the brand's signature texture. Type (or an image) seen through an LCD's red, green and blue
   subpixel stripes with a dark line between pixel rows. Used on the site's titles and hero video, the app icon on the
   social profiles, the big numbers in posts. Fixed to the screen (background-attachment: fixed) so every title on a
   page shares one grid. */
.hype-pixel {
  --px: 4px;                 /* one pixel: snap to whole device pixels */
  --px-line: 1px;            /* the dark row line */
  background:
    linear-gradient(180deg, transparent 0 calc(var(--px) - var(--px-line)), rgba(0, 0, 0, 0.34) calc(var(--px) - var(--px-line))) 0 0 / var(--px) var(--px),
    linear-gradient(90deg, #ff9db2 0 33.333%, #a0ffc8 33.333% 66.666%, #a8bbff 66.666%) 0 0 / var(--px) var(--px);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* On an image: each pixel keeps the image's own colour, multiplied by its stripe tint and the row line, then a gain
   gives back the light the mask takes (about x1.35). Never sample the image per cell: small text and the logo's gaps
   would fill. */