Improve invertibility

- Don't use multiply
- Set background on separate div

overlayer.js

@@ -10,11 +10,6 @@ export class Overlayer {
             width: '100%', height: '100%',
             pointerEvents: 'none',
         })
-        const darkMode = matchMedia('(prefers-color-scheme: dark)')
-        const setBlendMode = () => this.#svg.style.mixBlendMode =
-            darkMode.matches ? 'normal' : 'multiply'
-        darkMode.addEventListener('change', setBlendMode)
-        setBlendMode()
     }
     get element() {
         return this.#svg

paginator.js

@@ -337,6 +337,7 @@ class View {
 // NOTE: everything here assumes the so-called "negative scroll type" for RTL
 export class Paginator {
     #element = document.createElement('div')
+    #background = document.createElement('div')
     #maxSizeContainer = document.createElement('div')
     #container = document.createElement('div')
     #header = document.createElement('div')
@@ -365,6 +366,16 @@ export class Paginator {
             position: 'relative',
             overflow: 'hidden',
         })
+
+        this.#element.append(this.#background)
+        Object.assign(this.#background.style, {
+            width: '100%',
+            height: '100%',
+            position: 'absolute',
+            top: '0', left: '0',
+        })
+        this.#background.classList.add('filter')
+
         this.#element.append(this.#maxSizeContainer)
         Object.assign(this.#maxSizeContainer.style, {
             width: '100%',
@@ -408,9 +419,9 @@ export class Paginator {
         this.#vertical = vertical
         this.#rtl = rtl
 
-        // set `document` background to `doc` background
+        // set background to `doc` background
         // this is needed because the iframe does not fill the whole element
-        this.#element.style.background = background
+        this.#background.style.background = background
 
         const { flow, margin, gap, maxColumnWidth, maxColumns } = this.layout