/* Shared surface for the desktop showcase and online tool directory. */
body {
  --showcase-grid-line: rgba(102, 74, 139, .17);
  background:
    radial-gradient(ellipse at 8% 10%, rgba(192, 136, 202, .34), transparent 48%),
    radial-gradient(ellipse at 95% 42%, rgba(137, 176, 227, .29), transparent 52%),
    radial-gradient(ellipse at 24% 92%, rgba(224, 175, 208, .22), transparent 46%),
    linear-gradient(135deg, #faf3fc 0%, #f0edfa 48%, #edf5fc 100%);
}
body::before {
  background-image:
    linear-gradient(var(--showcase-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--showcase-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .78) 62%, rgba(0, 0, 0, .3) 100%);
}
:root[data-theme="dark"] body {
  --showcase-grid-line: rgba(192, 179, 226, .12);
  background:
    radial-gradient(ellipse at 8% 10%, rgba(143, 88, 163, .23), transparent 48%),
    radial-gradient(ellipse at 95% 42%, rgba(78, 119, 180, .22), transparent 52%),
    linear-gradient(135deg, #191321 0%, #141827 48%, #101e2b 100%);
}