:root {
  --library-bg: #0b1410;
  --library-grid-color: rgba(90,154,106,0.05);
  --library-glow-a: rgba(91,168,122,.16);
  --library-glow-b: rgba(107,159,212,.12);
  --library-glow-c: rgba(200,148,63,.08);
  --library-noise-opacity: .5;
}

[data-theme="light"] {
  --library-bg: #f5edd6;
  --library-grid-color: rgba(120,90,40,0.10);
  --library-glow-a: rgba(91,168,122,.10);
  --library-glow-b: rgba(107,159,212,.08);
  --library-glow-c: rgba(200,148,63,.08);
  --library-noise-opacity: .3;
}

html,
body {
  min-height: 100%;
}

body {
  background: var(--library-bg);
  background-image:
    linear-gradient(var(--library-grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--library-grid-color) 1px, transparent 1px);
  background-size: 28px 28px;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: var(--library-noise-opacity);
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 18%, var(--library-glow-a), transparent 28%),
    radial-gradient(circle at 84% 20%, var(--library-glow-b), transparent 26%),
    radial-gradient(circle at 52% 72%, var(--library-glow-c), transparent 34%);
  opacity: .75;
  z-index: 0;
}