/* A fixed paint layer also works on mobile browsers that scroll body backgrounds. */
@media (max-width: 720px) {
  body:not([data-category]) { isolation: isolate; background-image: none; }
  body:not([data-category])::before {
    content: ''; position: fixed; top: 0; right: 0; bottom: auto; left: 0;
    height: 100vh; height: 100lvh; z-index: -1; pointer-events: none;
    background:
      url('/assets/frost-grain.svg'),
      radial-gradient(ellipse at 7% 12%, #f8dc87a6 0, transparent 45%),
      radial-gradient(ellipse at 93% 26%, #acdeda9c 0, transparent 43%),
      radial-gradient(ellipse at 64% 85%, #d4c3e7a6 0, transparent 48%),
      linear-gradient(135deg, #f8f1df, #f0edf4 55%, #e5f0ec);
  }
  body[data-view="category"][data-category]::before { bottom: auto; height: 100vh; height: 100lvh; }
}