/* The podcast's pages (build-page.py). Plain colours with strong contrast; no meaning in colour alone.
   Styled with unslop by Damir Sokolovsky (@heydamir), CC BY 4.0. Brand logos from Simple Icons 16.35.0, CC0.
   The Sketch look (computment, 2026-11-05: "maybe the background could be the actual image itself"; "a full UI and UX
   redesign"): his intro scan (B28) lies behind the page, sideways as it was printed; the page is a sheet of the paper
   his logo is printed on, torn on every side, its corners torn too. Text only ever sits on the sheet. Colours from his
   files: ripple green #11754E, drop blue #2F6B8C, the pale wave blue; the gradient green #21B760 and globe blue #84C4EF
   on a dark screen. Every change of state moves softly; under reduced motion the existing guards keep it still. */
:root { --paper: #e7e2d7; --bg: #fbfaf7; --raised: #f2efe8; --text: #1b1b19; --soft: #4b4a45; --line: #e2ddd2; --strong-line: #cfc9bc;
        --accent: #11754e; --on-accent: #fbfaf7; --accent-wash: #e5efe8; --blue: #2f6b8c; --wave: #e4eef5; --focus: #1b1b19;
        --shadow: rgba(52, 44, 30, 0.16); --shadow-strong: rgba(52, 44, 30, 0.28); --rim: #b9b1a1;
        color-scheme: light dark;
        --gap-top: 28px; --gap-bottom: 72px; --sheet: 100%; --k: 0.55; --pad: 26px;
        /* motion: every transition and animation of the page takes its time and curve from these (computment, 2026-11-06:
           "can u do a pass to see if and where animations are consistent"); the stop-motion logo film and the loading ring
           keep their own */
        --motion-fast: 160ms; --motion-medium: 260ms; --motion-slow: 420ms; --motion-ease: cubic-bezier(.2, .8, .2, 1);
        /* his paper's stop-motion: three frames at 8 a second, each held, no curve */
        --motion-papier: 375ms;
        /* what leaves under its own power, the mode switch's sheet pulling away: it starts gently, then goes */
        --motion-ease-weg: cubic-bezier(.45, 0, .2, 1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) { --paper: #0c0c0b; --bg: #1b1a18; --raised: #262522; --text: #f3f1ec; --soft: #c9c6be; --line: #33312d; --strong-line: #46433d; --accent: #21b760; --on-accent: #1b1a18; --accent-wash: #1f2e25; --blue: #84c4ef; --wave: #22303a; --focus: #f3f1ec; --shadow: rgba(0, 0, 0, 0.5); --shadow-strong: rgba(0, 0, 0, 0.7); --rim: #4a4740; }
}
:root[data-modus=donker] { --paper: #0c0c0b; --bg: #1b1a18; --raised: #262522; --text: #f3f1ec; --soft: #c9c6be; --line: #33312d; --strong-line: #46433d; --accent: #21b760; --on-accent: #1b1a18; --accent-wash: #1f2e25; --blue: #84c4ef; --wave: #22303a; --focus: #f3f1ec; --shadow: rgba(0, 0, 0, 0.5); --shadow-strong: rgba(0, 0, 0, 0.7); --rim: #4a4740; }
:root[data-modus=licht] { color-scheme: light; }  /* a chosen mode (modus.js): the browser's own parts follow it */
:root[data-modus=donker] { color-scheme: dark; }
@media (min-width: 640px) { :root { --gap-top: 40px; --gap-bottom: 110px; --k: 0.8; --pad: 40px; } }
@media (min-width: 960px) { :root { --gap-top: 56px; --gap-bottom: 150px; --sheet: 920px; --k: 1; --pad: 24px; } }

* { box-sizing: border-box; }
[hidden]:not(.season, .mini, .deelkeus) { display: none !important; }
.season[hidden], .mini[hidden], .deelkeus[hidden] { display: none; }  /* these three leave by a transition (below), which an !important rule would cut short */
picture { display: contents; }  /* a <picture> is laid out as its img alone (WebP with a JPEG fallback) */
picture > source { display: none; }  /* with display: contents its <source> became a grid cell and pushed the show cover into the second column on desktop (computment, 2026-11-04: "the composition is out of whack") */
.nw { white-space: nowrap; }
html { -webkit-text-size-adjust: 100%; overflow-anchor: none; overflow-x: clip; }  /* the page never scrolls by itself when something opens */
/* scrollbars: thin, no track, a quiet thumb in the paper's rim colour (computment, 2026-11-05: no grey track); the
   standard properties where ::-webkit-scrollbar doesn't exist (Firefox); Chrome and Safari take WebKit's own, which
   draw no arrow buttons (Chrome ignores them once the standard properties are set) */
@supports not selector(::-webkit-scrollbar) {
  html, .lezer-tekst, .pop-binnen { scrollbar-width: thin; scrollbar-color: var(--rim) transparent; }
}
html::-webkit-scrollbar, .lezer-tekst::-webkit-scrollbar, .pop-binnen::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
html::-webkit-scrollbar-track, .lezer-tekst::-webkit-scrollbar-track, .pop-binnen::-webkit-scrollbar-track { background: transparent; }
/* the "+" popup too (computment, 2026-11-06: its scrollbar had square ends and a track); kept clear of its torn corners */
.pop-binnen::-webkit-scrollbar-track { margin-block: 18px; }
html::-webkit-scrollbar-thumb, .lezer-tekst::-webkit-scrollbar-thumb, .pop-binnen::-webkit-scrollbar-thumb { background: var(--rim); border: 2px solid transparent; border-radius: 4px; background-clip: padding-box; }
/* computment's own hand (make-hand.py) for every text (2026-11-10: "just doing every writing in the font I drew"): his
   thin pen as the regular, his marker as the bold. A weight up to 500 takes the regular, 600 and up the bold, never a
   thickened copy; the system's fonts stand in only for a character he didn't draw. Italic text (the quote, the whole
   text's note) leans his regular, as italic did before */
@font-face { font-family: "Bewogen Hand"; src: url(/kunst/bewogen-hand-gewoon.woff2?v=a92ad43cca) format("woff2"); font-weight: 400;
             font-style: normal; font-display: swap; }
@font-face { font-family: "Bewogen Hand"; src: url(/kunst/bewogen-hand.woff2?v=cfaf990c30) format("woff2"); font-weight: 700;
             font-style: normal; font-display: swap; }
body { position: relative; margin: 0; padding: var(--gap-top) 0 var(--gap-bottom); background: var(--paper); color: var(--text);
       font: 17px/1.6 "Bewogen Hand", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-synthesis: style;
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a, button, summary { border-radius: 6px; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, audio:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; }
button { font: inherit; color: inherit; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 16px; top: 12px; background: var(--bg); padding: 12px 16px; border-radius: 8px; z-index: 5; box-shadow: 0 4px 16px var(--shadow); }
.top, main, footer { position: relative; max-width: 760px; margin: 0 auto; padding: 0 var(--pad); }
::selection { background: var(--accent-wash); }

/* the scan behind everything, smaller and over and over down the page, scrolling with it (computment, 2026-11-05: "i'm
   kinda sad only just a bit of that image gets seen"; "the background looks too symmetrical"): one A4 is SCAN_HIGH
   percent of the window's height (svh: a phone's address bar coming and going doesn't resize it), the copies in the
   tile shifted sideways by different amounts, its columns half an A4 apart in height, never mirrored (scan_tiles()),
   so it reads as one long scanned sheet; where it lies changes with every load (SCAN_PLACES, modus.js). It
   costs nothing per frame: no fixed layer, no animation. */
body::before { content: ""; position: absolute; z-index: -2; inset: 0; pointer-events: none;
               background: var(--paper) url(/kunst/scan-vel.webp?v=0e0e5c9527) 50% 0 / auto 260vh repeat; background-image: url(/kunst/scan-vel.webp?v=0e0e5c9527), var(--tiny-scan-vel, none);
               background-image: image-set(url(/kunst/scan-vel.webp?v=0e0e5c9527) 1x, url(/kunst/scan-vel-2x.webp?v=3f1515e61a) 2x), var(--tiny-scan-vel, none);
               background-size: auto 260svh; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) body::before { background-image: url(/kunst/scan-vel-donker.webp?v=82dc21e9d9), var(--tiny-scan-vel-donker, none); background-image: image-set(url(/kunst/scan-vel-donker.webp?v=82dc21e9d9) 1x, url(/kunst/scan-vel-donker-2x.webp?v=7ffc7af3ca) 2x), var(--tiny-scan-vel-donker, none); }
}
:root[data-modus=donker] body::before { background-image: url(/kunst/scan-vel-donker.webp?v=82dc21e9d9), var(--tiny-scan-vel-donker, none); background-image: image-set(url(/kunst/scan-vel-donker.webp?v=82dc21e9d9) 1x, url(/kunst/scan-vel-donker-2x.webp?v=7ffc7af3ca) 2x), var(--tiny-scan-vel-donker, none); }
:root[data-scan="1"] body::before { background-position: calc(50% + 0svh) 0svh; }
:root[data-scan="2"] body::before { background-position: calc(50% + 31svh) -52svh; }
:root[data-scan="3"] body::before { background-position: calc(50% + -24svh) -167svh; }
:root[data-scan="4"] body::before { background-position: calc(50% + 57svh) -288svh; }
:root[data-scan="5"] body::before { background-position: calc(50% + -46svh) -95svh; }
:root[data-scan="6"] body::before { background-position: calc(50% + 12svh) -229svh; }


/* the sheet (and the reading window): the paper in the middle, its tile the paper round the logo (kunst/papier.webp,
   at the frames' scale), and round it the torn strips and corners cut from the scan (kunst/rand-*): a corner, the top
   strip and the left strip, turned for the other sides, never mirrored (computment, 2026-11-08: "less symetrical").
   Each strip repeats a whole number of times ("round"), so it meets the corners at the same point of its tear every
   time; inside the tear it fades into the paper below. --k scales the edge: smaller on a phone. */
.vel { position: absolute; z-index: -1; top: var(--gap-top); bottom: var(--gap-bottom); left: calc(50% - var(--sheet) / 2); width: var(--sheet); }
.blad { pointer-events: none; --c: calc(110px * var(--k)); --d: calc(52px * var(--k)); --in: calc(35px * var(--k)); }
.blad::before { content: ""; position: absolute; inset: var(--in); border-radius: calc(80px * var(--k));
                background: var(--bg) url(/kunst/papier.webp?v=2bd29f3770) 0 0 / 226px auto repeat; background-image: url(/kunst/papier.webp?v=2bd29f3770), var(--tiny-papier, none); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .blad::before { background-image: url(/kunst/papier-donker.webp?v=9c6b32735e), var(--tiny-papier-donker, none); }
}
:root[data-modus=donker] .blad::before { background-image: url(/kunst/papier-donker.webp?v=9c6b32735e), var(--tiny-papier-donker, none); }
.blad > i { position: absolute; z-index: 1; display: block; background-repeat: no-repeat; }  /* over the wave pattern, which fades out under their paper */
.blad .h { width: var(--c); height: var(--c); background-size: 100% 100%; }
.blad .lb { left: 0; top: 0; }
.blad .rb { right: 0; top: 0; transform: rotate(90deg); }
.blad .lo { left: 0; bottom: 0; transform: rotate(-90deg); }
.blad .ro { right: 0; bottom: 0; transform: rotate(180deg); }
.blad .b { left: var(--c); right: var(--c); height: var(--d); background-repeat: round no-repeat; }
.blad .bo { top: 0; }
.blad .on { bottom: 0; transform: rotate(180deg); }
.blad .z { top: var(--c); bottom: var(--c); width: var(--d); background-repeat: no-repeat round; }
.blad .li { left: 0; }
.blad .re { right: 0; transform: rotate(180deg); }

/* his stop-motion intro itself (B28): the nine frames, each its whole rectangle, in the order a torn sheet slides
   across the logo (film.webp; the last is the whole logo, which stays). Their edges fade into the paper. On every
   page's top it plays once; in the footer as it scrolls into view. Under less motion the whole logo stands there. */
.film { display: block; width: 290px; max-width: 100%; aspect-ratio: 16 / 9; background: url(/kunst/film.webp?v=1ecd976824) 100% 0 / 900% 100% no-repeat; background-image: url(/kunst/film.webp?v=1ecd976824), var(--tiny-film, none); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .film { background-image: url(/kunst/film-donker.webp?v=ab5d106d92), var(--tiny-film-donker, none); }
}
:root[data-modus=donker] .film { background-image: url(/kunst/film-donker.webp?v=ab5d106d92), var(--tiny-film-donker, none); }
.kop { display: flex; justify-content: center; padding-top: calc(var(--d, 30px) * 0.4); }
.kop .film-link .film, .kop > .film { width: 290px; }
@media (min-width: 640px) { .kop > .film { width: 400px; } .kop .film-link .film { width: 330px; } }
@media (prefers-reduced-motion: no-preference) { .kop .film { animation: film 1150ms steps(9, jump-none) 150ms both; } }
@keyframes film { from { background-position: 0% 0; } to { background-position: 100% 0; } }
/* the logo stands still under the pointer (computment, 2026-11-05: no moving up); page.js plays its frames again on
   hover or focus, and the footer's once as it comes into view; without script the whole logo stands there */
.film-link { display: block; border-radius: 12px; }
footer .film { width: 220px; }
footer .film-link { width: max-content; margin: 18px auto 0; }
/* a page change: the new page fades over the old one and the top logo stays in its place (cross-document view
   transitions; other browsers simply load the page). Arriving so, modus.js skips the logo's opening frames. The logo
   never travels: its group doesn't move or resize (it stands where the new page has it, old and new fading into each
   other), and modus.js leaves its name off when it isn't on screen on either page (computment, 2026-11-05). Only the
   top logo has the name, never the footer's. */
@view-transition { navigation: auto; }
.kop .film { view-transition-name: logo; }
::view-transition-group(*) { animation-duration: var(--motion-medium); animation-timing-function: var(--motion-ease); }  /* old and new take theirs from it */
::view-transition-group(logo) { animation-name: none; }  /* only its move: old and new still fade, they take their timing from it */
/* The optional reveal wait (off by default after measuring the tiny layers) keeps the old transition while decoding;
   the new view is live, so it can fade in normally once ready. Without script or image.decode() none of this applies;
   modus.js also releases it after one second or when images fail. Pause the intro too, so all nine frames play. */
:root[data-kunst=laden] body { opacity: 0; }
:root[data-kunst=laden] .kop .film { animation-play-state: paused; }
:root[data-prerender] .kop .film { animation-play-state: paused; }
/* Keep the intro's rule separate: an unsupported transition pseudo-element must not invalidate it. */
:root[data-kunst=laden]::view-transition-group(*),
:root[data-kunst=laden]::view-transition-old(*),
:root[data-kunst=laden]::view-transition-new(*) { animation-play-state: paused; }
/* the top logo plays on every page load, page changes included (computment, 2026-11-05: "when going from homepage to an
   episode the animation doesnt play") */

/* labels: small capitals, spaced, quiet */
.num, .buren .dir, .buren .meer h2, .shead .span, .doc .updated, .eyebrow {
  font-size: 0.75rem; line-height: 1.4; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }

/* the brand logos, alone as the links, in their own colours (each at least 3:1 against both sheets, light #fbfaf7
   and dark #1b1a18: Apple 5.4 and 3.06, Instagram 3.7 and 4.5, YouTube 3.8 and 4.35; Spotify's green disc carries
   dark waves at 9.8:1, its official form; TikTok in the text colour) */
.logo { display: block; flex: none; width: 26px; height: 26px; fill: currentColor; transition: transform var(--motion-medium) var(--motion-ease); }
.logo.ap path { fill: #9933cc; } .logo.ap .u { fill: #ffffff; }
.logo.sp path { fill: #1ed760; } .logo.sp .u { fill: #121212; }
.logo.ig path { fill: #ff0069; }
.logo.yt path { fill: #ff0000; } .logo.yt .u { fill: #ffffff; }

/* the show: everything centred under the logo (computment, 2026-11-05: the season 3 cover beside it goes, "the season
   covers are all there") */
.hero { max-width: 620px; margin: 6px auto 0; text-align: center; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3rem); line-height: 1.08; font-weight: 760; letter-spacing: -0.025em; margin: 0 0 10px;
     text-wrap: balance; }
.by { margin: 0; font-size: 1.0625rem; font-weight: 500; }
.count { margin: 6px 0 0; color: var(--soft); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.about { font-size: 1.0625rem; line-height: 1.65; max-width: 56ch; margin: 20px auto 0; text-wrap: pretty; }
.about p { margin: 0 0 12px; }
@media (max-width: 639px) {
  .hero h1 { font-size: 1.75rem; }
  .count .nw { display: block; }
  .count .sep { display: none; }
}

/* where to follow and listen: one centred row of logos, the "+" last; no circle behind them, they lift a little */
.where { margin-top: 18px; }
.btns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
.lb { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; color: var(--text);
      transition: transform var(--motion-fast) var(--motion-ease); }
.lb:hover .logo { transform: translateY(-3px) scale(1.08); }
.lb:active { transform: scale(0.92); }

/* another app: the "+" opens a small sheet of torn paper with the other apps and the feed (popover: no script needed) */
.lb.plus { padding: 0; border: 0; background: none; color: var(--soft); cursor: pointer; }
.lb.plus .ic { width: 28px; height: 28px; stroke-width: 1.5; transition: transform var(--motion-medium) var(--motion-ease); }
.lb.plus:hover { color: var(--text); }
.lb.plus:hover .ic { transform: translateY(-3px) rotate(90deg); }
/* the same paper as the page and the whole-text window (computment, 2026-11-07: "the same paper feel as every other thing
   you know with paper teared edges"): .blad's paper and torn edges at the whole-text window's phone scale, the contents
   inside the tear in .pop-binnen, which scrolls only on a very short window; the paper reaches nearer the window's edge
   than the old card did, since its torn rim is mostly air */
.app-pop { --k: 0.5; --rand-y: calc(40px * var(--k)); --rand-x: calc(36px * var(--k));
           width: min(404px, calc(100vw - 8px)); max-width: none; max-height: none; margin: auto; text-align: center; padding: 0; border: 0; background: none;
           color: var(--text); overflow: visible;
           opacity: 0; transform: translateY(8px) scale(0.98);
           transition: opacity var(--motion-medium) var(--motion-ease), transform var(--motion-medium) var(--motion-ease), overlay var(--motion-medium) allow-discrete, display var(--motion-medium) allow-discrete; }
.app-pop:popover-open { opacity: 1; transform: none; }
@starting-style { .app-pop:popover-open { opacity: 0; transform: translateY(8px) scale(0.98); } }
.app-pop::backdrop { background: rgba(20, 18, 14, 0); transition: background-color var(--motion-medium) var(--motion-ease), overlay var(--motion-medium) allow-discrete, display var(--motion-medium) allow-discrete; }
.app-pop:popover-open::backdrop { background: rgba(20, 18, 14, 0.45); }
@starting-style { .app-pop:popover-open::backdrop { background: rgba(20, 18, 14, 0); } }
.app-pop .blad { position: absolute; inset: 0; z-index: -1; }
.pop-binnen { position: relative; max-height: calc(100dvh - 8px - 2 * var(--rand-y)); margin: var(--rand-y) var(--rand-x);
              padding: 8px 14px 4px; overflow-y: auto; overscroll-behavior: contain; }
.app-pop .pop-t { margin: 0 40px clamp(12px, 3dvh, 26px); font-weight: 650; line-height: 1.45; }
.app-pop .sluit { top: 0; }  /* level with the title, now that the box's own top padding is small */
/* the other apps: their logos, three across, centred (computment, 2026-11-06: "have the texts be middle", "row of three
   apps would look better"); the name shows as a hint on hover and keyboard focus, not under the tile ("it kinda kills the
   cleanliness"). The hint is part of the link and hidden from screen readers: the link's aria-label names it. On a touch
   screen, where there is no hover, the logo alone shows; a keyboard still gets the hint. */
/* on a short window the logos and spacing shrink so the card fits without scrolling (computment, 2026-11-06: "kinda annoying
   theres a scroll when its so miniscule"); the scrollbar stays only as a fallback for very small screens */
/* the logos at most 40 px, nearer the row's 26 px than the old 56 px tiles, big enough for his drawings' detail; the link
   round each stays at least 44 px tall */
.app-pop { --tegel: clamp(32px, 5dvh, 40px); }
.apps { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2px, 1.2dvh, 10px) 0; }
.apps li { flex: none; width: 33.3333%; }  /* the last row, if it isn't full, stands in the middle */
.app { position: relative; display: flex; justify-content: center; padding: 6px 0; border-radius: 14px; color: var(--text); text-decoration: none;
       transition: transform var(--motion-fast) var(--motion-ease); }
/* each app its logo alone on the paper, as the row's under the intro (computment, 2026-11-10: "I don't think the apps
   themselves need that artificial box that they're in. They could just function the same way that the ones on the
   homepage are working"): no tile, frame or shadow; a plain background that is the app's own look (Amazon Music,
   Podimo, Podverse, Podcast Guru) is part of its picture (make-logos.py). It lifts under the pointer as the row's
   logos do, with no shadow ("I don't want shadows when you hover") */
.app img { display: block; width: var(--tegel); height: var(--tegel); transition: transform var(--motion-medium) var(--motion-ease); }
.app:active { transform: scale(0.94); }
/* TuneIn's navy would vanish on the dark paper: there it takes the text's colour, as TikTok in the row does, and as
   TuneIn's own logo turns light on a dark ground */
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .app img[src^="/kunst/app-tunein."] { filter: brightness(0) invert(0.95); }
}
:root[data-modus=donker] .app img[src^="/kunst/app-tunein."] { filter: brightness(0) invert(0.95); }
/* the hint is a small torn label of the site's paper in his hand (computment, 2026-11-10: "simpler just in the style of
   our site"), not a dark pill: the labels' pieces and colours (.knop, knop_css()), a little askew like a label stuck on */
.app .hint { position: absolute; left: 50%; bottom: calc(100% - 6px); z-index: 1; isolation: isolate; padding: 5px 10px 3px;
             color: var(--knop-tekst); font-size: 0.8125rem; font-weight: 400; line-height: 1.2; white-space: nowrap; pointer-events: none;
             filter: drop-shadow(0 1px 0.5px var(--shadow-strong)) drop-shadow(0 2px 3px var(--shadow));
             opacity: 0; transform: translate(-50%, 4px) rotate(var(--tilt, -1.5deg));
             transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
/* its torn ends shrink with its height (about 7.5px each here), so the middle runs in under them, never leaving a slit
   between them (computment, 2026-11-10: "you see these fuckeries on the thing right?") */
.app .hint::before { content: ""; position: absolute; inset: 0; z-index: -1; --ende: 10px; }
.apps li:nth-child(even) .hint { --tilt: 1.2deg; }
.app:focus-visible .hint { opacity: 1; transform: translate(-50%, 0) rotate(var(--tilt, -1.5deg)); }
.app:focus-visible img { transform: translateY(-3px) scale(1.08); }
@media (hover: hover) {
  .app:hover .hint { opacity: 1; transform: translate(-50%, 0) rotate(var(--tilt, -1.5deg)); }
  .app:hover img { transform: translateY(-3px) scale(1.08); }
}
/* no line above the feed (computment, 2026-11-10: "remove the separator there"): space alone sets it apart */
.app-pop .pop-feed { margin: clamp(14px, 3.4dvh, 24px) 0 clamp(8px, 1.8dvh, 12px); }
.app-pop p { margin: 0 0 10px; }
.app-pop .row { margin: 4px 0 0; }
.sluit { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0;
         border-radius: 50%; background: none; color: var(--soft); cursor: pointer; transition: color var(--motion-fast) var(--motion-ease); }
.sluit:hover { color: var(--text); }
/* only the cross turns on hover, inside its round button: the whole button turning reached past the "+" card's edge
   halfway (its corners), and the card, which scrolls, flashed a sideways scrollbar (computment, 2026-11-05) */
.sluit .ic { transition: transform var(--motion-medium) var(--motion-ease), filter var(--motion-medium) var(--motion-ease); }
.sluit:hover .ic { transform: rotate(90deg) scale(1.1); filter: drop-shadow(0 2px 1px var(--shadow-strong)); }

/* a separator between the page's parts: two hairlines that fade out, a small mark between them */
.scheiding { display: flex; align-items: center; gap: 18px; max-width: 520px; margin: 44px auto 0; padding: 0 var(--pad); }
.scheiding span { display: block; flex: none; background: center / contain no-repeat; }

/* the seasons: their covers laid on the sheet; the chosen one lifts, the others fade (never colour alone); a season
   opens and closes softly, and the open one closes again when chosen again (computment, 2026-11-05). The browser eases
   it, in CSS alone (computment, 2026-11-06, "just fix the root issue"): a script that animated the height had to
   undo itself when interrupted, and lost its clipping and its place; page.js only chooses which one is open. The
   space above a season stands inside its box (a margin outside would jump while the box eases). It clips only while
   it moves: the overflow switches at the end of an opening and at the start of a closing, so a share choice at the
   foot of the last episode is never cut off at rest. Browsers that cannot ease to an automatic height (Safari for
   now) open and close it at once. */
#afleveringen { margin-top: 40px; scroll-margin-top: 12px; }
@media (min-width: 640px) { #afleveringen { margin-top: 52px; } }
.seasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 4px; }
.scard { display: flex; flex-direction: column; align-items: center; color: var(--text); text-align: center; text-decoration: none;
         border-radius: 10px; padding: 6px 4px 0; }
.scard img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; margin-bottom: 10px;
             background: var(--raised); box-shadow: 0 1px 2px var(--shadow), 0 8px 20px var(--shadow);
             transition: transform var(--motion-medium) var(--motion-ease), opacity var(--motion-medium) var(--motion-ease), box-shadow var(--motion-medium) var(--motion-ease); }
.scard:hover img, .scard[aria-selected="true"] img { transform: translateY(-4px);
             box-shadow: 0 2px 4px var(--shadow), 0 16px 32px var(--shadow-strong); }
.scard:active img { transform: translateY(-1px) scale(0.98); }
.scard .sn { font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; transition: color var(--motion-medium) var(--motion-ease); }
.seasons:has([aria-selected="true"]) .scard[aria-selected="false"] .sn { color: var(--soft); }
.seasons:has([aria-selected="true"]) .scard[aria-selected="false"] img { opacity: 0.5; }
.seasons:has([aria-selected="true"]) .scard[aria-selected="false"]:hover img { opacity: 0.85; }
@media (min-width: 640px) {
  .seasons { gap: 28px; }
  .scard .sn { font-size: 1.125rem; }
}
/* Switching from one season to another must look the same whichever way it goes (computment, 2026-11-06: going from 3 to 2
   "just appears" where 2 to 3 rises from below). The panels stand in a column whose order page.js sets: the season that
   comes in is always the last, so the one that leaves collapses above it and the new one rises as it grows, from
   season 1 to 3 and back alike. The one that leaves fades quickly (`.weg`). */
#afleveringen { display: flex; flex-direction: column; }
.season { --season-gap: 36px; scroll-margin-top: calc(12px - var(--season-gap)); flex: none; min-height: 0; }
.season::before { content: ""; display: block; height: var(--season-gap); }
@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
  .season { interpolate-size: allow-keywords; height: auto; opacity: 1; overflow: visible;
            transition: height var(--motion-slow) var(--motion-ease), opacity var(--motion-slow) var(--motion-ease),
                        overflow var(--motion-slow) steps(1, jump-end) allow-discrete, display var(--motion-slow) allow-discrete; }
  .season[hidden] { height: 0; opacity: 0; overflow: clip;
                    transition: height var(--motion-slow) var(--motion-ease), opacity var(--motion-slow) var(--motion-ease),
                                overflow var(--motion-slow) steps(1, jump-start) allow-discrete, display var(--motion-slow) allow-discrete; }
  .season[hidden].weg { transition: height var(--motion-slow) var(--motion-ease), opacity var(--motion-medium) var(--motion-ease),
                                    overflow var(--motion-slow) steps(1, jump-start) allow-discrete, display var(--motion-slow) allow-discrete; }
  @starting-style { html.seizoenen .season:not([hidden]) { height: 0; opacity: 0; overflow: clip; } }  /* only once page.js has taken over: without script, or before it runs, nothing opens by itself */
  html.seizoen-stil .season { transition: none; }  /* page.js, while it sets the first state or follows a link: at once */
}
.shead { padding-bottom: 14px; }
.shead h3 { font-size: 1.5rem; font-weight: 760; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 4px; }
.shead .span { margin: 0; }

/* the episodes: a thin torn strip of his paper between them (.streep, as the separators' strips; computment,
   2026-11-10), no box; the cover a small print */
.ep { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 22px 0 10px; scroll-margin-top: 12px; }
.ep > .streep { position: absolute; top: -5px; left: 0; right: 0; }
.ep:target { box-shadow: inset 4px 0 0 var(--accent); padding-left: 14px; }
.art { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; background: var(--raised); box-shadow: 0 1px 2px var(--shadow), 0 4px 12px var(--shadow); }
.body { min-width: 0; overflow-wrap: anywhere; }
.num { margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.ep h4 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 4px; text-wrap: pretty; }
.ep h4 a.page { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
                transition: background-size var(--motion-medium) var(--motion-ease); }
.ep h4 a.page:hover { background-size: 100% 1px; }
.meta { margin: 0 0 14px; color: var(--soft); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.desc, .tekst p { margin: 0 0 8px; color: var(--text); }
.tekst p:last-child { margin-bottom: 0; }
.desc.kort { margin: 0; }
.acts { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 4px; }
.more { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text);
        font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.more .ic { width: 18px; height: 18px; transition: transform var(--motion-medium) var(--motion-ease); }
.more[aria-expanded="true"] .ic { transform: rotate(180deg); }
.more .c, .more[aria-expanded="true"] .o { display: none; }
.more[aria-expanded="true"] .c { display: inline; }
.ibs { display: flex; align-items: center; gap: 2px; margin: 0 -11px 0 auto; }
.ib { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
      background: none; color: var(--soft); cursor: pointer; transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
/* no circle behind an icon on hover (computment, 2026-11-10: "i dont want that background thingy behind hover when you
   hover the X ... same on wherever else that is"): his drawing itself darkens and lifts a little off the paper, with a
   small shadow under it, as the logos and the labels do; the focus ring stays as it is */
.ib:hover { color: var(--text); }
.ib .ic { transition: transform var(--motion-medium) var(--motion-ease), filter var(--motion-medium) var(--motion-ease); }
.ib:hover .ic { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 2px 1px var(--shadow-strong)); }
.ib:active { transform: scale(0.92); }
@supports (transition-behavior: allow-discrete) {
}
.ic { display: block; flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
/* his drawings (computment, 2026-11-07): filled shapes from his marker, in the text's colour in both modes; each drawn
   three times and shown in turn, a calm boil ("so it's slightly moving/changing drawing"); under reduced motion his
   first stands still. One copy of each per page (.sprite), the icons <use> it */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg.hand, .ic.hand, .spring svg.hand { fill: currentColor; stroke: none; }
.hand .k2, .hand .k3 { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .hand use { animation: kook 1500ms step-end infinite; }
  .hand .k2 { animation-delay: -1000ms; }
  .hand .k3 { animation-delay: -500ms; }
}
@keyframes kook { 0% { visibility: visible; } 33.333% { visibility: hidden; } 100% { visibility: hidden; } }
.dir .ic { display: inline-block; width: 1.25em; height: 1.25em; margin: -0.2em 0.3em 0 0; vertical-align: middle; }
.next .dir .ic { margin: -0.2em 0 0 0.3em; }
@media (max-width: 480px) {
  .ep { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .art { width: 64px; height: 64px; }
}
@keyframes opkomen { from { opacity: 0; transform: translateY(6px); } }

/* the player: without script the browser's own; page.js puts a calmer one in its place (play, position, time,
   speed; on an episode's page also 15 s back and 30 s on) and keeps the browser's for nothing but sound. Its icons
   sit in the optical middle of their buttons (computment, 2026-11-05: they were off-centre) */
audio { display: block; width: 100%; height: 44px; margin: 0 0 12px; border-radius: 22px; }
audio::-webkit-media-controls-panel { background-color: var(--raised); }
.speler.klaar audio { display: none; }
.bed { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0 0 10px; }
.speel { position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
         background: none; color: var(--on-accent); cursor: pointer; filter: drop-shadow(0 2px 4px var(--shadow));
         transition: transform var(--motion-fast) var(--motion-ease), filter var(--motion-fast) var(--motion-ease); }
/* the button itself his drawn dot (computment, 2026-11-08: "have the play button also be the dot I drew ... The three
   of them"), in the logo's green, his three drawings in turn like his icons (BOIL_MS), the first alone under reduced
   motion; the whole round box stays the button, so the hit area is as before */
.speel::before { content: ""; position: absolute; inset: -1px; background: var(--accent);
                 -webkit-mask: url(/kunst/hand-bol-1.svg?v=c0f4a734b0) center / 100% 100% no-repeat; mask: url(/kunst/hand-bol-1.svg?v=c0f4a734b0) center / 100% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) { .speel::before { animation: bol-kook 1500ms step-end infinite; } }
@keyframes bol-kook { 0% { -webkit-mask-image: url(/kunst/hand-bol-1.svg?v=c0f4a734b0); mask-image: url(/kunst/hand-bol-1.svg?v=c0f4a734b0); }
                      33.333% { -webkit-mask-image: url(/kunst/hand-bol-2.svg?v=cda419a575); mask-image: url(/kunst/hand-bol-2.svg?v=cda419a575); }
                      66.667%, 100% { -webkit-mask-image: url(/kunst/hand-bol-3.svg?v=7dd3b06d3b); mask-image: url(/kunst/hand-bol-3.svg?v=7dd3b06d3b); } }
.speel:hover { transform: scale(1.05); filter: drop-shadow(0 4px 7px var(--shadow-strong)); }
.speel:active { transform: scale(0.93); }
.speel svg { position: relative; display: block; width: 18px; height: 18px; fill: currentColor; }
.speel .pauze, .speelt .speel .start { display: none; }
.speelt .speel .pauze { display: block; }
/* while the sound loads, a ring turns round the button (still, under less motion) */
.laadt .speel::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); border-right-color: transparent; }
@media (prefers-reduced-motion: no-preference) { .laadt .speel::after { animation: draai 800ms linear infinite; } }
@keyframes draai { to { transform: rotate(1turn); } }
.spoor { min-width: 0; }
/* the position: his drawn line, the part already played his thicker line (so it shows by more than colour), and his
   dot where the sound is (computment, 2026-11-07: "the line where you change the time of the audio on, the dot you
   drag"). The browser's slider lies over them, invisible but for its focus ring, and does the work */
.spoor { position: relative; }
.lijnen { position: absolute; left: 0; right: 0; top: 0; height: 24px; pointer-events: none; }
.lijnen .lijn, .lijnen .gespeeld { position: absolute; left: 0; top: 50%; width: 100%; overflow: visible; }
.lijnen .lijn { height: 5px; margin-top: -2.5px; color: var(--rim); }
.lijnen .gespeeld { height: 8px; margin-top: -4px; color: var(--accent); clip-path: inset(-4px calc(100% - var(--p, 0%)) -4px 0); }
.lijnen .baan { position: absolute; top: 0; bottom: 0; left: 8px; right: 8px; }
.lijnen .bol { position: absolute; top: 50%; left: var(--p, 0%); width: 16px; height: 16px; margin: -8px 0 0 -8px; color: var(--text);
               transition: transform var(--motion-fast) var(--motion-ease); }
.spoor:hover .bol, .spoor:active .bol { transform: scale(1.25); }
.pos { position: relative; display: block; width: 100%; height: 24px; margin: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
       -webkit-tap-highlight-color: transparent; }
.pos::-webkit-slider-runnable-track { height: 24px; background: none; }
.pos::-moz-range-track { height: 24px; background: none; }
.pos::-moz-range-progress { background: none; }
/* the slider's own handle is never seen, only his drawn dot (.bol): iPhone Safari still painted it as a white box
   under background: none (computment, 2026-11-10, a screenshot from his phone) */
.pos::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 24px; border: 0; background: transparent; box-shadow: none; opacity: 0; }
.pos::-moz-range-thumb { width: 16px; height: 24px; border: 0; background: transparent; box-shadow: none; opacity: 0; }
.pos:focus-visible { outline-offset: 2px; }
.tijden { display: flex; justify-content: space-between; margin-top: -2px; color: var(--soft); font-size: 0.8125rem; line-height: 1.3;
          font-variant-numeric: tabular-nums; }
.tempo, .spring { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: 22px; background: none;
                  color: var(--soft); font-size: 0.875rem; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer;
                  transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.spring { width: 44px; padding: 0; border-radius: 50%; }
.tempo:hover, .spring:hover { color: var(--text); }  /* no circle behind them either: they lift like the icons above */
.tempo, .spring svg { transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-medium) var(--motion-ease), filter var(--motion-medium) var(--motion-ease); }
.tempo:hover { transform: translateY(-2px); filter: drop-shadow(0 2px 1px var(--shadow-strong)); }
.spring:hover svg { transform: translateY(-2px) scale(1.1); filter: drop-shadow(0 2px 1px var(--shadow-strong)); }
.tempo:active, .spring:active { transform: scale(0.92); }
.spring svg { display: block; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fout .spoor::after { content: "Afspelen lukte niet. Probeer de download."; display: block; margin-top: 2px; color: var(--soft); font-size: 0.8125rem; }
/* an episode's own page: bigger, the buttons in a row under the position */
.groot .bed { grid-template-columns: auto auto auto 1fr auto; grid-template-areas: "spoor spoor spoor spoor spoor" "terug speel vooruit . tempo";
              row-gap: 6px; column-gap: 8px; }
.groot .spoor { grid-area: spoor; }
.groot .speel { grid-area: speel; width: 56px; height: 56px; }
.groot .speel svg { width: 22px; height: 22px; }
.groot .terug { grid-area: terug; } .groot .vooruit { grid-area: vooruit; } .groot .tempo { grid-area: tempo; }

/* the mini player: a slim card at the bottom of the window, over the scan, never over the end of the sheet */
.mini { position: fixed; z-index: 10; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); width: min(560px, calc(100vw - 24px));
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 18px 8px 8px;
        border: 1px solid var(--line); border-radius: 32px; background: var(--bg); transform: translateX(-50%);
        box-shadow: 0 2px 6px var(--shadow), 0 14px 40px var(--shadow-strong); }
/* it comes and goes the same way: a short rise and fade, by transitions on its hidden state (the display is held until it has gone) */
@supports (transition-behavior: allow-discrete) {
  .mini { transition: opacity var(--motion-medium) var(--motion-ease), transform var(--motion-medium) var(--motion-ease), display var(--motion-medium) allow-discrete; }
  .mini[hidden] { opacity: 0; transform: translate(-50%, 14px); }
  @starting-style { .mini:not([hidden]) { opacity: 0; transform: translate(-50%, 14px); } }
}
.mini .speel { width: 44px; height: 44px; filter: none; }
.mini.speelt .speel .start { display: none; }
.mini.speelt .speel .pauze { display: block; }
.mtitel { min-width: 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--text); font-size: 0.9375rem; font-weight: 650;
          text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.mtitel:hover { text-decoration: underline; text-underline-offset: 3px; }
.mtijd { color: var(--soft); font-size: 0.8125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
html.mini-aan { scroll-padding-bottom: 96px; }  /* a focused link never hides under the bar */

/* sharing from where the player is: a small choice under the share button, the episode or from this moment */
.ibs { position: relative; }
.deelkeus { position: absolute; z-index: 6; top: calc(100% + 6px); right: 0; display: grid; min-width: 190px; padding: 6px; border-radius: 12px;
            background: var(--bg); border: 1px solid var(--line); box-shadow: 0 2px 6px var(--shadow), 0 14px 36px var(--shadow-strong); }
/* and the share choice the same: in and out alike, by transitions on its hidden state */
@supports (transition-behavior: allow-discrete) {
  .deelkeus { transition: opacity var(--motion-medium) var(--motion-ease), transform var(--motion-medium) var(--motion-ease), display var(--motion-medium) allow-discrete; }
  .deelkeus[hidden] { opacity: 0; transform: translateY(6px); }
  @starting-style { .deelkeus:not([hidden]) { opacity: 0; transform: translateY(6px); } }
}
.deelkeus button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--text); font-size: 0.9375rem;
                   font-weight: 600; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; }
.deelkeus button:hover { text-decoration: underline; text-underline-offset: 3px; }  /* no block behind it: underlined, as the titles */
/* "Luister verder": when an episode ends, the next one in time, as a card under the player */
.verder { margin-top: 20px; padding: 14px 16px 16px; border-radius: 12px; background: var(--accent-wash); }
@media (prefers-reduced-motion: no-preference) { .verder:not([hidden]) { animation: opkomen var(--motion-medium) var(--motion-ease); } }
.verder-kop { margin: 0 0 8px; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); }
.verder-ep { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-rows: auto 1fr; column-gap: 14px; align-items: center;
             text-decoration: none; overflow-wrap: anywhere; }
.verder-ep img { grid-row: 1 / 3; grid-column: 1; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--raised);
                 box-shadow: 0 1px 2px var(--shadow), 0 4px 10px var(--shadow); }
.verder-ep .t { grid-column: 2; grid-row: 1 / 3; align-self: center; font-weight: 700; line-height: 1.3; }
.verder-knop { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
               background: var(--accent); color: var(--on-accent); transition: transform var(--motion-fast) var(--motion-ease); }
.verder-knop .ic { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.verder-ep:hover .t { text-decoration: underline; text-underline-offset: 3px; }
.verder-ep:hover .verder-knop { transform: scale(1.06); }

/* the feed address and its copy button, in the "+" card above */
.feedurl { overflow-wrap: anywhere; }
/* plain text in his hand, no box behind it (computment, 2026-11-10: "can you also remove that background over the
   link ... I don't like all that stuff"); still selected whole with one click */
.feedurl code { display: inline-block; color: var(--text); font: 0.875rem/1.5 "Bewogen Hand", ui-monospace, "SF Mono", Menlo, monospace;
                user-select: all; }
/* in his hand the address is narrower than it was in a monospace font, so it keeps its size on a 360 px phone too */

/* the page's text buttons (torn paper labels, below): the moments' times, "Over deze aflevering", "Lees de
   hele tekst", "Minder tonen", copying the feed and "Alle afleveringen". The shape is drawn by ::before, so the focus
   ring stays whole round the button itself. */
.knop { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px;
        border: 0; background: none; color: var(--knop-tekst); font-size: 0.9375rem; font-weight: 650; line-height: 1.2; text-decoration: none;
        cursor: pointer; list-style: none; transition: transform var(--motion-medium) var(--motion-ease), filter var(--motion-medium) var(--motion-ease); }
.knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--knop); transition: background-color var(--motion-medium) var(--motion-ease); }
.knop:hover::before { background-color: var(--knop-hover); }
.knop:hover { transform: translateY(-1px); }
.knop:active { transform: translateY(0) scale(0.97); }
.knop .ic { width: 18px; height: 18px; transition: transform var(--motion-medium) var(--motion-ease); }
.knop::-webkit-details-marker { display: none; }
.tijdknop { min-height: 34px; margin: -5px 0; padding: 0 13px 0 11px; gap: 6px; color: var(--knop-tijd); font-size: 0.875rem; font-weight: 700;
            white-space: nowrap; font-variant-numeric: tabular-nums; }
.tijdknop::after { content: ""; order: -1; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 7px;
                   border-color: transparent transparent transparent currentColor; }

/* an episode's own page */
.aflevering { padding-top: 4px; }
.ehead { display: grid; grid-template-columns: 280px minmax(0, 1fr); column-gap: 36px; align-items: start; margin-top: 12px;
         grid-template-areas: "cover num" "cover title" "cover meta" "cover play" "cover acts" "cover ."; grid-template-rows: auto auto auto auto auto 1fr; }
.ecover { grid-area: cover; display: block; width: 100%; height: auto; border-radius: 10px; background: var(--raised);
          box-shadow: 0 1px 2px var(--shadow), 0 14px 34px var(--shadow); }
.ehead .num { grid-area: num; margin: 6px 0 10px; }
.ehead h1 { grid-area: title; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); line-height: 1.15; text-wrap: pretty; }
.ehead .meta { grid-area: meta; margin-bottom: 18px; }
.ehead .speler, .ehead audio { grid-area: play; }
.ehead .acts { grid-area: acts; margin-top: -6px; }
/* on a phone: the cover small, the title and its date beside it, in the middle of its height (computment, 2026-11-05:
   "when on phone theres this empty space here") */
@media (max-width: 639px) {
  .ehead { grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px;
           grid-template-areas: "cover ." "cover num" "cover title" "cover meta" "cover ." "play play" "acts acts";
           grid-template-rows: 1fr auto auto auto 1fr auto auto; }
  .ecover { grid-row: 1 / 6; align-self: start; border-radius: 8px; }
  .ehead .num { margin: 0 0 4px; }
  .ehead h1 { font-size: 1.3125rem; line-height: 1.2; margin: 0 0 6px; letter-spacing: -0.015em; }
  .ehead .meta { margin: 0; font-size: 0.875rem; }
  .ehead .speler { margin-top: 22px; }
}
.verhaal { margin-top: 28px; max-width: 64ch; overflow-wrap: anywhere; font-size: 1.0625rem; line-height: 1.7; }
.verhaal p { margin: 0 0 16px; }
.aflevering .where { margin-top: 28px; }
/* the episodes before and after it: their covers, a direction and the title; the arrow moves a little under the pointer */
/* no line above them (computment, 2026-11-10: "just the line under the links. I don't think that one has really any
   purpose"): the eye's separator above the links is the only one */
.buren { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px; margin-top: 36px; }
.buren a.prev, .buren a.next, .buren .meer a { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr;
          column-gap: 14px; align-content: start; padding: 10px; margin: 0 -10px; border-radius: 10px; text-decoration: none;
          overflow-wrap: anywhere; }
.buren a.next { grid-column: 2; grid-template-columns: minmax(0, 1fr) 64px; text-align: right; }
.buren a img { grid-row: 1 / 3; grid-column: 1; width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--raised);
               box-shadow: 0 1px 2px var(--shadow), 0 4px 10px var(--shadow); }
.buren a.next img { grid-column: 2; }
.buren a .dir { grid-column: 1; align-self: end; } .buren a .t { grid-column: 1; }
.buren a:not(.next) .dir, .buren a:not(.next) .t { grid-column: 2; }
.buren a:not(.knop):hover .t { text-decoration: underline; text-underline-offset: 3px; }  /* no block behind it: the title underlined, the arrow moves */
.buren .t { font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; margin-top: 2px; }
.buren .dir span { display: inline-block; transition: transform var(--motion-medium) var(--motion-ease); }
.buren a.prev .dir span { margin-right: 0.35em; } .buren a.next .dir span { margin-left: 0.35em; }  /* the arrow its own space (inline-block drops it) */
.buren a.prev:hover .dir span { transform: translateX(-4px); }
.buren a.next:hover .dir span { transform: translateX(4px); }
/* more episodes like it: the same, in a list */
.buren .meer { grid-column: 1 / -1; margin-top: 28px; }
.buren .meer h2 { margin: 0 0 4px; }
.buren .meer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.buren .meer .dir { letter-spacing: 0.06em; }
.buren .alle { grid-column: 1 / -1; margin: 24px 0 0; }
.buren .alle a::after { content: "→"; transition: transform var(--motion-medium) var(--motion-ease); }
.buren .alle a:hover::after { transform: translateX(3px); }
@media (max-width: 639px) {
  .buren { grid-template-columns: minmax(0, 1fr); }
  .buren a.next { grid-column: 1; grid-template-columns: 64px minmax(0, 1fr); text-align: left; }
  .buren a.next img { grid-column: 1; }
  .buren a.next .dir, .buren a.next .t { grid-column: 2; }
}

/* the privacy and bots pages: a reading column; the headings plain (computment, 2026-11-05: the green mark goes) */
.doc { padding-top: 4px; }
/* the privacy text's column centred on the sheet, not a 64ch column against its left side (computment, 2026-11-05:
   "there is this empty space here not touched by sentences") */
.doc:not(.bots):not(.niet-gevonden) { max-width: calc(38rem + 2 * var(--pad)); }
.doc:not(.bots):not(.niet-gevonden) p, .doc:not(.bots):not(.niet-gevonden) ul { max-width: none; }
.doc h1 { margin: 20px 0 8px; }
.doc .updated { margin: 0 0 32px; }
.doc h2 { font-size: 1.25rem; font-weight: 720; line-height: 1.3; letter-spacing: -0.01em; margin: 36px 0 10px; max-width: 640px; }
.doc p, .doc ul { margin: 0 0 14px; max-width: 64ch; line-height: 1.7; }
.doc ul { padding-left: 0; list-style: none; }
.doc li { position: relative; margin: 0 0 10px; padding-left: 22px; }
.doc li::before, .over .onderwerpen li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 8px; height: 8px;
  border-radius: 50% 0 50% 50%; background: var(--blue); transform: rotate(-45deg); }  /* a drop, as in the logo */

/* the bots' page: the counts table comes from Clanker's podcast-bots-page. On opening it shows the top ten with only
   name, total and last seen; "Zie meer" opens every kind column and all names (computment, 2026-11-07: "alle extra
   columns, behalve totaal en laatst gezien ... dus dat is wat je gewoon ziet wanneer je de pagina opent. En dan de zie
   meer, dan opent die meerdere columns en alle bots"), without script: the kind cells (.soort) show only while the fold
   is open; a browser without :has() shows them always. It fits without scrolling sideways (computment, 2026-11-05): on
   a laptop the columns share the width and the headings wrap; on a phone each bot is a small block, its name and total
   on top, the rest as labelled pairs. Numbers right-aligned in one width of figure; a count of 0 is the digit itself,
   only quieter. */
.bots .leeg { padding: 14px 0; color: var(--soft); }
.bots .tabel { margin: 8px 0 24px; }
.bots .tabel:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.bots table { border-collapse: collapse; width: 100%; font-size: 0.875rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.bots caption { text-align: left; font-weight: 700; padding: 0 0 10px; }
.bots th, .bots td { padding: 10px 6px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.bots thead th { font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft);
                 vertical-align: bottom; border-bottom: 2px solid var(--strong-line); white-space: normal; hyphens: manual; }
.bots tbody tr { transition: background-color var(--motion-fast) var(--motion-ease); }
.bots tbody tr:hover { background: var(--raised); }
.bots th:first-child { padding-left: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.bots tbody th { font-weight: 600; }
.bots td.totaal { font-weight: 700; }
.bots td.nul { color: var(--soft); }
.bots th:last-child, .bots td:last-child { padding-right: 2px; }
.bots:not(:has(.meer-bots[open])) .soort { display: none; }
.bots .oud-uitleg { margin: 14px 0 0; color: var(--soft); font-size: 0.875rem; }
@media (max-width: 639px) {
  .bots thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .bots table, .bots tbody, .bots caption { display: block; }
  .bots tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 2px; padding: 12px 0;
                   border-bottom: 1px solid var(--line); }
  .bots tbody th, .bots tbody td { display: flex; flex-direction: column; align-items: flex-start; padding: 2px 0; border: 0; text-align: left; white-space: normal; }
  .bots tbody th { grid-column: 1 / 3; font-size: 1rem; align-self: center; }
  .bots tbody td.totaal { grid-column: 3; align-items: flex-end; font-size: 1rem; }
  .bots tbody td::before { font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--soft); }
  .bots tbody td.totaal::before { content: "Totaal"; }
  .bots tbody td:nth-child(3)::before { content: "Laatst gezien"; }
  .bots tbody td:nth-child(4)::before { content: "Pagina's"; }
  .bots tbody td:nth-child(5)::before { content: "Feed"; }
  .bots tbody td:nth-child(6)::before { content: "Audio"; }
  .bots tbody td:nth-child(7)::before { content: "Afbeeldingen"; }
  .bots tbody td:nth-child(8)::before { content: "Robots en sitemap"; }
  .bots tbody td:nth-child(9)::before { content: "Site-bestanden"; }
  .bots tbody td:nth-child(10)::before { content: "Bestaat niet"; }
  .bots tbody td:nth-child(11)::before { content: "Overig (oud)"; }
  .bots th:last-child, .bots td:last-child { padding-right: 0; }
}
/* the kind columns come and go with the fold: they fade, and on a phone each block grows to its new height, where the
   browser can animate it; else they simply show */
@supports (transition-behavior: allow-discrete) and selector(:has(*)) {
  .bots .soort { transition: opacity var(--motion-slow) var(--motion-ease), display var(--motion-slow) allow-discrete; }
  .bots:not(:has(.meer-bots[open])) .soort { opacity: 0; }
  @starting-style { .bots:has(.meer-bots[open]) .soort { opacity: 0; } }
  @media (max-width: 639px) {
    @supports (interpolate-size: allow-keywords) {
      .bots tbody td.soort { interpolate-size: allow-keywords; block-size: auto; overflow: clip;
                             transition: block-size var(--motion-slow) var(--motion-ease), opacity var(--motion-slow) var(--motion-ease),
                                         display var(--motion-slow) allow-discrete; }
      .bots:not(:has(.meer-bots[open])) tbody td.soort { block-size: 0; }
      @starting-style { .bots:has(.meer-bots[open]) tbody td.soort { block-size: 0; } }
    }
  }
  @media (prefers-reduced-motion: reduce) { .bots .soort, .bots tbody td.soort { transition: none; } }
}
/* "Zie meer" (podcast-bots-page; since 2026-11-07 also the kind columns): a torn paper label like "Lees de hele tekst",
   "Minder tonen" while open. It stays under the top ten; under it, the other names in a second table with the same
   columns. From a laptop up both tables share fixed column widths, so the second continues the first; on a phone it is
   the same small blocks. It unfolds softly without script where the browser can animate a details element's content,
   else it simply opens. */
.meer-bots { margin: 0 0 24px; }
.meer-bots > summary { margin: 0 0 6px; }
.meer-bots > summary.knop:hover { transform: none; }  /* a fold's label stays where it is under the pointer */
.meer-bots .c, .meer-bots[open] .o { display: none; }
.meer-bots[open] .c { display: inline; }
.meer-bots[open] > summary .ic { transform: rotate(180deg); }
.meer-bots caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meer-bots .tabel { margin: 0; }
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
  .meer-bots { interpolate-size: allow-keywords; }
  .meer-bots::details-content { block-size: 0; opacity: 0; overflow: clip;
                                transition: block-size var(--motion-slow) var(--motion-ease), opacity var(--motion-slow) var(--motion-ease), content-visibility var(--motion-slow) allow-discrete; }
  .meer-bots[open]::details-content { block-size: auto; opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .meer-bots::details-content { transition: none; } }
}
@media (min-width: 640px) {
  .bots table { table-layout: fixed; }
  /* closed: name, total and last seen; open: all ten columns, or eleven while old "other" counts show, a little
     closer together */
  .bots thead th:nth-child(1) { width: 56%; }
  .bots thead th:nth-child(2), .bots thead th:nth-child(3) { width: 22%; }
  .bots:has(.meer-bots[open]) th, .bots:has(.meer-bots[open]) td { padding-left: 4px; padding-right: 4px; }
  .bots:has(.meer-bots[open]) th:first-child { padding-left: 0; }
  .bots:has(.meer-bots[open]) th:last-child, .bots:has(.meer-bots[open]) td:last-child { padding-right: 2px; }
  .bots:has(.meer-bots[open]) thead th { font-size: 0.625rem; letter-spacing: 0.03em; }
  .bots:has(.meer-bots[open]) thead th:nth-child(1) { width: 22%; }
  .bots:has(.meer-bots[open]) thead th:nth-child(2) { width: 8%; }
  .bots:has(.meer-bots[open]) thead th:nth-child(3), .bots:has(.meer-bots[open]) thead th:nth-child(4) { width: 9%; }
  .bots:has(.meer-bots[open]) thead th:nth-child(5), .bots:has(.meer-bots[open]) thead th:nth-child(6) { width: 7%; }
  .bots:has(.meer-bots[open]) thead th:nth-child(7), .bots:has(.meer-bots[open]) thead th:nth-child(8),
  .bots:has(.meer-bots[open]) thead th:nth-child(9), .bots:has(.meer-bots[open]) thead th:nth-child(10) { width: 9.5%; }
  .bots:has(.meer-bots[open]) .oud thead th:nth-child(1) { width: 21%; }
  .bots:has(.meer-bots[open]) .oud thead th:nth-child(2) { width: 7.5%; }
  .bots:has(.meer-bots[open]) .oud thead th:nth-child(3), .bots:has(.meer-bots[open]) .oud thead th:nth-child(4),
  .bots:has(.meer-bots[open]) .oud thead th:nth-child(7), .bots:has(.meer-bots[open]) .oud thead th:nth-child(8),
  .bots:has(.meer-bots[open]) .oud thead th:nth-child(9), .bots:has(.meer-bots[open]) .oud thead th:nth-child(10) { width: 8.5%; }
  .bots:has(.meer-bots[open]) .oud thead th:nth-child(5) { width: 6%; }
  .bots:has(.meer-bots[open]) .oud thead th:nth-child(6) { width: 6.5%; }
  .bots:has(.meer-bots[open]) .oud thead th:nth-child(11) { width: 8%; }
}

/* an episode's notes and its whole text (computment, 2026-11-04: "number one, yes. Number two. Yes. Full text."):
   headings, lists and space, no boxes; the quote in a serif, large; the topics with drop marks; the times page.js turns
   into buttons that play from there. "Over deze aflevering" and all under it fold away, without script (2026-11-05). */
.over { margin-top: 36px; max-width: 64ch; overflow-wrap: anywhere; }
.over > details + details, .over > details + .knop { margin-top: 12px; }
.over > details { display: block; }
.over summary h2 { display: inline; margin: 0; font: inherit; letter-spacing: inherit; }
.over details[open] > summary .ic { transform: rotate(180deg); }
/* a fold's label stays where it is under the pointer: the labels' 1px lift on hover moved it up just after it was
   clicked open, and on a phone the tap's hover kept it there (computment, 2026-11-05: the shift after opening) */
.over details > summary.knop:hover { transform: none; }
.over details > div { padding-top: 14px; }
/* "Over deze aflevering" eases open and shut by the browser itself, no script (computment, 2026-11-06: "just fix the root
   issue": a script animating the fold fought the browser's own open and close at both ends). Browsers without these
   features (Safari for now) open and close it at once, without a jump. */
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
  details.notities { interpolate-size: allow-keywords; }
  details.notities::details-content { height: 0; overflow: clip; opacity: 0;
    transition: height var(--motion-slow) var(--motion-ease), opacity var(--motion-slow) var(--motion-ease), content-visibility var(--motion-slow) allow-discrete; }
  details.notities[open]::details-content { height: auto; opacity: 1; }
}
.notities-in h3 { font-size: 0.75rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--soft); line-height: 1.4; margin: 32px 0 12px; }
.notities-in > p { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.7; }
/* the quote: set apart by its type and the space round it alone (computment, 2026-11-05: no green bar) */
.over .citaat { position: relative; margin: 34px 0 34px 1.1em; max-width: 34ch;
                font: italic 1.375rem/1.45 "Bewogen Hand", Georgia, "Iowan Old Style", "Palatino Linotype", serif; letter-spacing: -0.005em; text-wrap: pretty;
                text-indent: -0.45em; }
@media (min-width: 640px) { .over .citaat { font-size: 1.625rem; } }
/* his handwritten quote (make-citaten.py): every word an image of his ink as scanned, laid out like the typed quote
   it stands in for, so the words wrap at any width, his letters as big as the typed quote's (build-page.py's QUOTE_*).
   Each word's baseline sits on the line's; a line keeps some room above and under it, and what he wrote higher or
   lower (his opening quote marks, a long tail) reaches past, as on his sheets; the first word's line makes room for
   all of it. Dark: his ink turned light, its texture kept. */
/* his quote takes the column's whole width, like the text round it (computment, 2026-11-10: "there is plenty of
   fucking space here to have the sentence go there"); the typed quote keeps its 34ch */
.over .citaat.hand { line-height: 0; max-width: none; }
.hand-woorden { word-spacing: 0.08em; }
.hand-woorden img { --a: 40; width: auto; height: calc((var(--a) + 30) * 0.0667em);
                    margin: calc((18 - var(--a)) * 0.0667em) 0 calc((12 - 30) * 0.0667em);
                    vertical-align: calc(-12 * 0.0667em); }
.hand-woorden img:first-child { margin-top: 0; }
.hand-woorden .h87 { margin-left: -0.87em; }
.hand-woorden .a15 { --a: 15; } .hand-woorden .a20 { --a: 20; } .hand-woorden .a25 { --a: 25; } .hand-woorden .a30 { --a: 30; } .hand-woorden .a35 { --a: 35; } .hand-woorden .a40 { --a: 40; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .hand-woorden img { filter: invert(1) hue-rotate(180deg) brightness(1.3); }
}
:root[data-modus=donker] .hand-woorden img { filter: invert(1) hue-rotate(180deg) brightness(1.3); }
.over ul { margin: 0; padding: 0; list-style: none; }
.over .onderwerpen li { position: relative; margin: 0 0 10px; padding-left: 24px; line-height: 1.55; }
.over .momenten li { display: grid; grid-template-columns: 6em minmax(0, 1fr); column-gap: 12px; align-items: baseline; margin: 0 0 10px; }
.momenten.uren li { grid-template-columns: 7em minmax(0, 1fr); }  /* room for "1:03:30" */
.tijd { color: var(--blue); font-weight: 650; font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
.momenten .tijd { justify-self: start; }
.heel .c, .heel[open] .o { display: none; }
.heel[open] .c { display: inline; }
.heletekst { padding: 6px 0 0; }  /* no rule beside it, as none in its window (computment, 2026-11-10) */
.heletekst p { margin: 0 0 16px; font-size: 1.0625rem; line-height: 1.75; }
.heletekst p.tijd { margin: 32px 0 8px; font-size: 0.875rem; line-height: 24px; }
.heletekst .noot { color: var(--soft); font-size: 0.9375rem; font-style: italic; }

/* "Lees de hele tekst" in its own window: over the page, the same torn paper on every side as the page;
   closes with its button, Escape and a click outside. The text itself is the page's own, moved in by page.js. */
.lezer { width: min(720px, calc(100vw - 16px)); height: min(860px, calc(100dvh - 24px)); max-width: none; max-height: none; margin: auto;
         padding: 0; border: 0; background: none; color: var(--text); overflow: visible; --k: 0.7;
         opacity: 0; transform: translateY(14px) scale(0.985);
         transition: opacity var(--motion-medium) var(--motion-ease), transform var(--motion-medium) var(--motion-ease), overlay var(--motion-medium) allow-discrete, display var(--motion-medium) allow-discrete; }
.lezer[open] { opacity: 1; transform: none; }
@starting-style { .lezer[open] { opacity: 0; transform: translateY(14px) scale(0.985); } }
.lezer::backdrop { background: rgba(20, 18, 14, 0); transition: background-color var(--motion-medium) var(--motion-ease), overlay var(--motion-medium) allow-discrete, display var(--motion-medium) allow-discrete; }
.lezer[open]::backdrop { background: rgba(20, 18, 14, 0.5); }
@starting-style { .lezer[open]::backdrop { background: rgba(20, 18, 14, 0); } }
@media (max-width: 639px) { .lezer { --k: 0.5; } }
.lezer .blad { position: absolute; inset: 0; z-index: -1; }
.lezer-binnen { position: absolute; inset: calc(40px * var(--k)) calc(36px * var(--k)); display: flex; flex-direction: column; }
/* no line under its title (computment, 2026-11-10: "I also don't think the separator, the visual at least, in the whole
   text really serves a great purpose") */
.lezer-kop { position: relative; flex: none; padding: 18px 64px 14px 24px; }
.lezer-kop .eyebrow { margin: 0 0 2px; }
.lezer-kop h2 { margin: 0; font-size: 1.125rem; line-height: 1.3; font-weight: 720; letter-spacing: -0.01em; }
.lezer-kop .sluit { top: 10px; right: 8px; }
.lezer-tekst { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px 24px 28px; }
.lezer-tekst .heletekst { padding: 0; max-width: 64ch; }
@media (max-width: 639px) { .lezer-kop { padding: 14px 56px 12px 16px; } .lezer-tekst { padding: 16px 16px 24px; } }

footer { padding-top: 20px; padding-bottom: calc(var(--d, 30px) + 22px); color: var(--soft); font-size: 0.9375rem; text-align: center; }
footer p { margin: 0; }
footer p a { display: inline-flex; min-height: 44px; align-items: center; text-decoration-color: var(--strong-line); transition: color var(--motion-fast) var(--motion-ease), text-decoration-color var(--motion-fast) var(--motion-ease); }
footer p a:hover { color: var(--text); text-decoration-color: currentColor; }
footer .modus { display: inline-flex; min-height: 44px; align-items: center; padding: 0; border: 0; background: none;
                font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--strong-line);
                text-underline-offset: 0.12em; transition: color var(--motion-fast) var(--motion-ease), text-decoration-color var(--motion-fast) var(--motion-ease); }
footer .modus:hover { color: var(--text); text-decoration-color: currentColor; }
@media (max-width: 479px) {  /* a phone: the switch on a line of its own under the four links, without a dot before it */
  footer .modus-deel { display: block; margin-top: -8px; }
  footer .modus-deel .tussen { display: none; }
}
footer { --d: calc(52px * var(--k)); }
.kop { --d: calc(52px * var(--k)); }
@media (max-width: 420px) { footer { font-size: 0.8125rem; } }  /* the footer's four parts on one line */
@media (max-width: 359px) {  /* small phones, last so it wins: smaller season labels */
  .count .nw { white-space: normal; }
  .scard .sn { font-size: 0.875rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
:root[data-wissel] *, :root[data-wissel] *::before, :root[data-wissel] *::after { transition: none !important; }  /* modus.js, while the mode switches: the whole page cross-fades once (view transition, the group's time above), nothing fades on its own */
:root[data-wissel] .kop .film { view-transition-name: none; }  /* and the logo is part of that fade, not its own group */
/* the wave pattern on the paper (computment, 2026-11-05: 1%, bigger, no mirror joins): A3's lattice of waves, one
   rectangular cell as a seamless tile, in the drop blue at GOLF_LICHT percent on light paper, GOLF_DONKER on dark
   (with_modes() pairs the dark one with the chosen mode like every dark rule). The tiles are drawn already coloured
   (wave_tiles(): kunst/golf-licht.svg, golf-donker.svg), no mask, so fast scrolling stays light */
.vel::after { content: ""; position: absolute; inset: var(--in); border-radius: calc(80px * var(--k));
              background: url(/kunst/golf-licht.svg?v=cf4aab5111) 0 0 / 911px 358px repeat; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .vel::after { background-image: url(/kunst/golf-donker.svg?v=cdcc24b159); }
}
:root[data-modus=donker] .vel::after { background-image: url(/kunst/golf-donker.svg?v=cdcc24b159); }

/* the text buttons as real paper (computment, 2026-11-08: "You must have enough material to make real paper buttons
   ... And of course, with a papery background, so they're not that flat"): each label cut from his torn edges
   (make-papier.py): a torn end either side (--l, --r) and a strip torn top and bottom (--m, from --mx along it), the
   mask their meeting; the same pieces lay his paper's torn white core along the tears (hard-light: their grey 128
   leaves the colour as it is), over his crumpled paper and the page's paper tile in the label's colour (KNOP_KLEUR).
   The labels take LABELS combinations in turn down a page (.v1 to .vLABELS), so neighbours always differ. */
:root { --knop: #ebe4d4; --knop-hover: #e2d9c5; --knop-tekst: #1b1b19; --knop-tijd: #1c4f6c; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) { --knop: #34312b; --knop-hover: #3d3a33; --knop-tekst: #f3f1ec; --knop-tijd: #bfe0f8; }
}
:root[data-modus=donker] { --knop: #34312b; --knop-hover: #3d3a33; --knop-tekst: #f3f1ec; --knop-tijd: #bfe0f8; }
.knop { --l: url(/kunst/knop-l-1.webp?v=125b8d59ab); --r: url(/kunst/knop-r-1.webp?v=dc11ef0c59); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: 0px; --kx: 0px; --ky: 0px;
        filter: drop-shadow(0 1px 0.5px var(--shadow-strong)) drop-shadow(0 3px 5px var(--shadow)); }
.knop:hover { filter: drop-shadow(0 1px 0.5px var(--shadow-strong)) drop-shadow(0 6px 10px var(--shadow)); }
.knop::before, .app .hint::before { background: var(--m) var(--mx) 0 / auto 100% repeat-x, var(--r) right top / auto 100% no-repeat, var(--l) left top / auto 100% no-repeat, url(/kunst/kreukel.webp?v=a90cb2e04a) var(--kx) var(--ky) / 260px auto, url(/kunst/papier.webp?v=2bd29f3770) 0 0 / 226px auto, var(--knop);
                background-blend-mode: hard-light, hard-light, hard-light, multiply, multiply;
                transition: background-color var(--motion-medium) var(--motion-ease);
                -webkit-mask: var(--m) var(--mx) 0 / auto 100% repeat-x, var(--r) right top / auto 100% no-repeat, var(--l) left top / auto 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - var(--ende, 18px)) 100% no-repeat;
                -webkit-mask-composite: source-in, source-over, source-over, source-over;
                mask: var(--m) var(--mx) 0 / auto 100% repeat-x, var(--r) right top / auto 100% no-repeat, var(--l) left top / auto 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - var(--ende, 18px)) 100% no-repeat;
                mask-composite: intersect, add, add, add; }
.knop:hover::before { background-color: var(--knop-hover); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .knop::before, :root:not([data-modus=licht]) .app .hint::before { background-image: var(--m), var(--r), var(--l), url(/kunst/kreukel-donker.webp?v=55738ac7af), url(/kunst/papier-donker.webp?v=9c6b32735e); background-blend-mode: overlay, overlay, overlay, screen, screen; }
}
:root[data-modus=donker] .knop::before, :root[data-modus=donker] .app .hint::before { background-image: var(--m), var(--r), var(--l), url(/kunst/kreukel-donker.webp?v=55738ac7af), url(/kunst/papier-donker.webp?v=9c6b32735e); background-blend-mode: overlay, overlay, overlay, screen, screen; }
.knop.v1 { --l: url(/kunst/knop-l-1.webp?v=125b8d59ab); --r: url(/kunst/knop-r-8.webp?v=959df72a40); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -233px; --kx: -71px; --ky: -37px; }
.knop.v2 { --l: url(/kunst/knop-l-2.webp?v=b40f96589d); --r: url(/kunst/knop-r-5.webp?v=9e67b94e96); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -466px; --kx: -142px; --ky: -74px; }
.knop.v3 { --l: url(/kunst/knop-l-3.webp?v=9e9d8321c8); --r: url(/kunst/knop-r-2.webp?v=56dd982d57); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -99px; --kx: -213px; --ky: -111px; }
.knop.v4 { --l: url(/kunst/knop-l-4.webp?v=2c6a8f47c7); --r: url(/kunst/knop-r-7.webp?v=2f5a0bbafc); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -332px; --kx: -24px; --ky: -148px; }
.knop.v5 { --l: url(/kunst/knop-l-5.webp?v=8f9a1a525c); --r: url(/kunst/knop-r-4.webp?v=570c3c97c9); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -565px; --kx: -95px; --ky: -185px; }
.knop.v6 { --l: url(/kunst/knop-l-6.webp?v=7aa493e422); --r: url(/kunst/knop-r-1.webp?v=dc11ef0c59); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -198px; --kx: -166px; --ky: -222px; }
.knop.v7 { --l: url(/kunst/knop-l-7.webp?v=6b5694ba42); --r: url(/kunst/knop-r-6.webp?v=a4deb1e7cb); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -431px; --kx: -237px; --ky: -259px; }
.knop.v8 { --l: url(/kunst/knop-l-8.webp?v=51a88e4235); --r: url(/kunst/knop-r-3.webp?v=f9e38ba0bb); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -64px; --kx: -48px; --ky: -36px; }
.knop.v9 { --l: url(/kunst/knop-l-1.webp?v=125b8d59ab); --r: url(/kunst/knop-r-8.webp?v=959df72a40); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -297px; --kx: -119px; --ky: -73px; }
.knop.v10 { --l: url(/kunst/knop-l-2.webp?v=b40f96589d); --r: url(/kunst/knop-r-5.webp?v=9e67b94e96); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -530px; --kx: -190px; --ky: -110px; }
.knop.v11 { --l: url(/kunst/knop-l-3.webp?v=9e9d8321c8); --r: url(/kunst/knop-r-2.webp?v=56dd982d57); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -163px; --kx: -1px; --ky: -147px; }
.knop.v12 { --l: url(/kunst/knop-l-4.webp?v=2c6a8f47c7); --r: url(/kunst/knop-r-7.webp?v=2f5a0bbafc); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -396px; --kx: -72px; --ky: -184px; }
.apps li:nth-child(1) .hint { --l: url(/kunst/knop-l-6.webp?v=7aa493e422); --r: url(/kunst/knop-r-1.webp?v=dc11ef0c59); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -198px; --kx: -166px; --ky: -222px; }
.apps li:nth-child(2) .hint { --l: url(/kunst/knop-l-7.webp?v=6b5694ba42); --r: url(/kunst/knop-r-6.webp?v=a4deb1e7cb); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -431px; --kx: -237px; --ky: -259px; }
.apps li:nth-child(3) .hint { --l: url(/kunst/knop-l-8.webp?v=51a88e4235); --r: url(/kunst/knop-r-3.webp?v=f9e38ba0bb); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -64px; --kx: -48px; --ky: -36px; }
.apps li:nth-child(4) .hint { --l: url(/kunst/knop-l-1.webp?v=125b8d59ab); --r: url(/kunst/knop-r-8.webp?v=959df72a40); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -297px; --kx: -119px; --ky: -73px; }
.apps li:nth-child(5) .hint { --l: url(/kunst/knop-l-2.webp?v=b40f96589d); --r: url(/kunst/knop-r-5.webp?v=9e67b94e96); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -530px; --kx: -190px; --ky: -110px; }
.apps li:nth-child(6) .hint { --l: url(/kunst/knop-l-3.webp?v=9e9d8321c8); --r: url(/kunst/knop-r-2.webp?v=56dd982d57); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -163px; --kx: -1px; --ky: -147px; }
.apps li:nth-child(7) .hint { --l: url(/kunst/knop-l-4.webp?v=2c6a8f47c7); --r: url(/kunst/knop-r-7.webp?v=2f5a0bbafc); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -396px; --kx: -72px; --ky: -184px; }
.apps li:nth-child(8) .hint { --l: url(/kunst/knop-l-5.webp?v=8f9a1a525c); --r: url(/kunst/knop-r-4.webp?v=570c3c97c9); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -29px; --kx: -143px; --ky: -221px; }
.apps li:nth-child(9) .hint { --l: url(/kunst/knop-l-6.webp?v=7aa493e422); --r: url(/kunst/knop-r-1.webp?v=dc11ef0c59); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -262px; --kx: -214px; --ky: -258px; }
.apps li:nth-child(10) .hint { --l: url(/kunst/knop-l-7.webp?v=6b5694ba42); --r: url(/kunst/knop-r-6.webp?v=a4deb1e7cb); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -495px; --kx: -25px; --ky: -35px; }
.apps li:nth-child(11) .hint { --l: url(/kunst/knop-l-8.webp?v=51a88e4235); --r: url(/kunst/knop-r-3.webp?v=f9e38ba0bb); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -128px; --kx: -96px; --ky: -72px; }
.apps li:nth-child(12) .hint { --l: url(/kunst/knop-l-1.webp?v=125b8d59ab); --r: url(/kunst/knop-r-8.webp?v=959df72a40); --m: url(/kunst/knop-rand-2.webp?v=88855bc96d); --mx: -361px; --kx: -167px; --ky: -109px; }
.apps li:nth-child(13) .hint { --l: url(/kunst/knop-l-2.webp?v=b40f96589d); --r: url(/kunst/knop-r-5.webp?v=9e67b94e96); --m: url(/kunst/knop-rand-1.webp?v=38740eac96); --mx: -594px; --kx: -238px; --ky: -146px; }

/* the torn edge: the corners torn round (computment's pick from v6's three); each side's tear one of EDGE_SETS and
   starts at one of EDGE_ROLLS points along it, each side on its own (computment, 2026-11-08: "you could make it all
   less symetrical by randomizing which kind of tear you have next to each other"): modus.js puts them on <html> as
   data-boven, data-rechts, data-onder and data-links ("scheur-3"); each corner takes the set of the side clockwise
   from it. Without script a fixed mix (edge_css()). The "+" popup and the whole-text window take the page's. */
.blad .bo, :root[data-boven="rond-1"] .blad .bo { background-image: url(/kunst/rand-rond-boven.webp?v=3564b7b22f), var(--tiny-rand-rond-boven, none); background-size: calc(455px * var(--k)) 100%; }
:root[data-boven="rond-2"] .blad .bo { background-image: url(/kunst/rand-rond-boven-2.webp?v=1e590f5a98), var(--tiny-rand-rond-boven-2, none); background-size: calc(455px * var(--k)) 100%; }
:root[data-boven="rond-3"] .blad .bo { background-image: url(/kunst/rand-rond-boven-3.webp?v=f4b2e5acdd), var(--tiny-rand-rond-boven-3, none); background-size: calc(455px * var(--k)) 100%; }
:root[data-boven="rond-4"] .blad .bo { background-image: url(/kunst/rand-rond-boven-4.webp?v=a84f7cd5dc), var(--tiny-rand-rond-boven-4, none); background-size: calc(455px * var(--k)) 100%; }
:root[data-boven="scheur-1"] .blad .bo { background-image: url(/kunst/rand-scheur-boven.webp?v=c364c9aef5), var(--tiny-rand-scheur-boven, none); background-size: calc(744.5px * var(--k)) 100%; }
:root[data-boven="scheur-2"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-2.webp?v=1d1dd723eb), var(--tiny-rand-scheur-boven-2, none); background-size: calc(744.5px * var(--k)) 100%; }
:root[data-boven="scheur-3"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-3.webp?v=559c924b74), var(--tiny-rand-scheur-boven-3, none); background-size: calc(744.5px * var(--k)) 100%; }
:root[data-boven="scheur-4"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-4.webp?v=63086ffc21), var(--tiny-rand-scheur-boven-4, none); background-size: calc(744.5px * var(--k)) 100%; }
:root[data-boven="klein-1"] .blad .bo { background-image: url(/kunst/rand-klein-boven.webp?v=7dc8114650), var(--tiny-rand-klein-boven, none); background-size: calc(843.5px * var(--k)) 100%; }
:root[data-boven="klein-2"] .blad .bo { background-image: url(/kunst/rand-klein-boven-2.webp?v=48d16de300), var(--tiny-rand-klein-boven-2, none); background-size: calc(843.5px * var(--k)) 100%; }
:root[data-boven="klein-3"] .blad .bo { background-image: url(/kunst/rand-klein-boven-3.webp?v=20a92c46b4), var(--tiny-rand-klein-boven-3, none); background-size: calc(843.5px * var(--k)) 100%; }
:root[data-boven="klein-4"] .blad .bo { background-image: url(/kunst/rand-klein-boven-4.webp?v=4b08dd9b23), var(--tiny-rand-klein-boven-4, none); background-size: calc(843.5px * var(--k)) 100%; }
:root[data-rechts="rond-1"] .blad .re { background-image: url(/kunst/rand-rond-zij.webp?v=86e8b54b1f), var(--tiny-rand-rond-zij, none); background-size: 100% calc(1123px * var(--k)); }
:root[data-rechts="rond-2"] .blad .re { background-image: url(/kunst/rand-rond-zij-2.webp?v=3318cfbab5), var(--tiny-rand-rond-zij-2, none); background-size: 100% calc(1123px * var(--k)); }
:root[data-rechts="rond-3"] .blad .re { background-image: url(/kunst/rand-rond-zij-3.webp?v=335304679b), var(--tiny-rand-rond-zij-3, none); background-size: 100% calc(1123px * var(--k)); }
:root[data-rechts="rond-4"] .blad .re { background-image: url(/kunst/rand-rond-zij-4.webp?v=e919d81536), var(--tiny-rand-rond-zij-4, none); background-size: 100% calc(1123px * var(--k)); }
:root[data-rechts="scheur-1"] .blad .re { background-image: url(/kunst/rand-scheur-zij.webp?v=357685fa6b), var(--tiny-rand-scheur-zij, none); background-size: 100% calc(1012px * var(--k)); }
.blad .re, :root[data-rechts="scheur-2"] .blad .re { background-image: url(/kunst/rand-scheur-zij-2.webp?v=5b7fbafa19), var(--tiny-rand-scheur-zij-2, none); background-size: 100% calc(1012px * var(--k)); }
:root[data-rechts="scheur-3"] .blad .re { background-image: url(/kunst/rand-scheur-zij-3.webp?v=9b6d55ecda), var(--tiny-rand-scheur-zij-3, none); background-size: 100% calc(1012px * var(--k)); }
:root[data-rechts="scheur-4"] .blad .re { background-image: url(/kunst/rand-scheur-zij-4.webp?v=84d5a55a57), var(--tiny-rand-scheur-zij-4, none); background-size: 100% calc(1012px * var(--k)); }
:root[data-rechts="klein-1"] .blad .re { background-image: url(/kunst/rand-klein-zij.webp?v=2c4bfab753), var(--tiny-rand-klein-zij, none); background-size: 100% calc(1172px * var(--k)); }
:root[data-rechts="klein-2"] .blad .re { background-image: url(/kunst/rand-klein-zij-2.webp?v=c21b71a97f), var(--tiny-rand-klein-zij-2, none); background-size: 100% calc(1172px * var(--k)); }
:root[data-rechts="klein-3"] .blad .re { background-image: url(/kunst/rand-klein-zij-3.webp?v=3c9e79a85c), var(--tiny-rand-klein-zij-3, none); background-size: 100% calc(1172px * var(--k)); }
:root[data-rechts="klein-4"] .blad .re { background-image: url(/kunst/rand-klein-zij-4.webp?v=c6cfcb3eab), var(--tiny-rand-klein-zij-4, none); background-size: 100% calc(1172px * var(--k)); }
:root[data-onder="rond-1"] .blad .on { background-image: url(/kunst/rand-rond-boven.webp?v=3564b7b22f), var(--tiny-rand-rond-boven, none); background-size: calc(455px * var(--k)) 100%; }
:root[data-onder="rond-2"] .blad .on { background-image: url(/kunst/rand-rond-boven-2.webp?v=1e590f5a98), var(--tiny-rand-rond-boven-2, none); background-size: calc(455px * var(--k)) 100%; }
:root[data-onder="rond-3"] .blad .on { background-image: url(/kunst/rand-rond-boven-3.webp?v=f4b2e5acdd), var(--tiny-rand-rond-boven-3, none); background-size: calc(455px * var(--k)) 100%; }
:root[data-onder="rond-4"] .blad .on { background-image: url(/kunst/rand-rond-boven-4.webp?v=a84f7cd5dc), var(--tiny-rand-rond-boven-4, none); background-size: calc(455px * var(--k)) 100%; }
:root[data-onder="scheur-1"] .blad .on { background-image: url(/kunst/rand-scheur-boven.webp?v=c364c9aef5), var(--tiny-rand-scheur-boven, none); background-size: calc(744.5px * var(--k)) 100%; }
:root[data-onder="scheur-2"] .blad .on { background-image: url(/kunst/rand-scheur-boven-2.webp?v=1d1dd723eb), var(--tiny-rand-scheur-boven-2, none); background-size: calc(744.5px * var(--k)) 100%; }
:root[data-onder="scheur-3"] .blad .on { background-image: url(/kunst/rand-scheur-boven-3.webp?v=559c924b74), var(--tiny-rand-scheur-boven-3, none); background-size: calc(744.5px * var(--k)) 100%; }
:root[data-onder="scheur-4"] .blad .on { background-image: url(/kunst/rand-scheur-boven-4.webp?v=63086ffc21), var(--tiny-rand-scheur-boven-4, none); background-size: calc(744.5px * var(--k)) 100%; }
:root[data-onder="klein-1"] .blad .on { background-image: url(/kunst/rand-klein-boven.webp?v=7dc8114650), var(--tiny-rand-klein-boven, none); background-size: calc(843.5px * var(--k)) 100%; }
:root[data-onder="klein-2"] .blad .on { background-image: url(/kunst/rand-klein-boven-2.webp?v=48d16de300), var(--tiny-rand-klein-boven-2, none); background-size: calc(843.5px * var(--k)) 100%; }
.blad .on, :root[data-onder="klein-3"] .blad .on { background-image: url(/kunst/rand-klein-boven-3.webp?v=20a92c46b4), var(--tiny-rand-klein-boven-3, none); background-size: calc(843.5px * var(--k)) 100%; }
:root[data-onder="klein-4"] .blad .on { background-image: url(/kunst/rand-klein-boven-4.webp?v=4b08dd9b23), var(--tiny-rand-klein-boven-4, none); background-size: calc(843.5px * var(--k)) 100%; }
:root[data-links="rond-1"] .blad .li { background-image: url(/kunst/rand-rond-zij.webp?v=86e8b54b1f), var(--tiny-rand-rond-zij, none); background-size: 100% calc(1123px * var(--k)); }
:root[data-links="rond-2"] .blad .li { background-image: url(/kunst/rand-rond-zij-2.webp?v=3318cfbab5), var(--tiny-rand-rond-zij-2, none); background-size: 100% calc(1123px * var(--k)); }
:root[data-links="rond-3"] .blad .li { background-image: url(/kunst/rand-rond-zij-3.webp?v=335304679b), var(--tiny-rand-rond-zij-3, none); background-size: 100% calc(1123px * var(--k)); }
.blad .li, :root[data-links="rond-4"] .blad .li { background-image: url(/kunst/rand-rond-zij-4.webp?v=e919d81536), var(--tiny-rand-rond-zij-4, none); background-size: 100% calc(1123px * var(--k)); }
:root[data-links="scheur-1"] .blad .li { background-image: url(/kunst/rand-scheur-zij.webp?v=357685fa6b), var(--tiny-rand-scheur-zij, none); background-size: 100% calc(1012px * var(--k)); }
:root[data-links="scheur-2"] .blad .li { background-image: url(/kunst/rand-scheur-zij-2.webp?v=5b7fbafa19), var(--tiny-rand-scheur-zij-2, none); background-size: 100% calc(1012px * var(--k)); }
:root[data-links="scheur-3"] .blad .li { background-image: url(/kunst/rand-scheur-zij-3.webp?v=9b6d55ecda), var(--tiny-rand-scheur-zij-3, none); background-size: 100% calc(1012px * var(--k)); }
:root[data-links="scheur-4"] .blad .li { background-image: url(/kunst/rand-scheur-zij-4.webp?v=84d5a55a57), var(--tiny-rand-scheur-zij-4, none); background-size: 100% calc(1012px * var(--k)); }
:root[data-links="klein-1"] .blad .li { background-image: url(/kunst/rand-klein-zij.webp?v=2c4bfab753), var(--tiny-rand-klein-zij, none); background-size: 100% calc(1172px * var(--k)); }
:root[data-links="klein-2"] .blad .li { background-image: url(/kunst/rand-klein-zij-2.webp?v=c21b71a97f), var(--tiny-rand-klein-zij-2, none); background-size: 100% calc(1172px * var(--k)); }
:root[data-links="klein-3"] .blad .li { background-image: url(/kunst/rand-klein-zij-3.webp?v=3c9e79a85c), var(--tiny-rand-klein-zij-3, none); background-size: 100% calc(1172px * var(--k)); }
:root[data-links="klein-4"] .blad .li { background-image: url(/kunst/rand-klein-zij-4.webp?v=c6cfcb3eab), var(--tiny-rand-klein-zij-4, none); background-size: 100% calc(1172px * var(--k)); }
.blad .lb, :root[data-boven^="rond-"] .blad .lb { background-image: url(/kunst/rand-rond-hoek.webp?v=5ee3e5755d), var(--tiny-rand-rond-hoek, none); }
:root[data-boven^="scheur-"] .blad .lb { background-image: url(/kunst/rand-scheur-hoek.webp?v=07189d34b8), var(--tiny-rand-scheur-hoek, none); }
:root[data-boven^="klein-"] .blad .lb { background-image: url(/kunst/rand-klein-hoek.webp?v=260459b5a6), var(--tiny-rand-klein-hoek, none); }
:root[data-rechts^="rond-"] .blad .rb { background-image: url(/kunst/rand-rond-hoek.webp?v=5ee3e5755d), var(--tiny-rand-rond-hoek, none); }
.blad .rb, :root[data-rechts^="scheur-"] .blad .rb { background-image: url(/kunst/rand-scheur-hoek.webp?v=07189d34b8), var(--tiny-rand-scheur-hoek, none); }
:root[data-rechts^="klein-"] .blad .rb { background-image: url(/kunst/rand-klein-hoek.webp?v=260459b5a6), var(--tiny-rand-klein-hoek, none); }
:root[data-onder^="rond-"] .blad .ro { background-image: url(/kunst/rand-rond-hoek.webp?v=5ee3e5755d), var(--tiny-rand-rond-hoek, none); }
:root[data-onder^="scheur-"] .blad .ro { background-image: url(/kunst/rand-scheur-hoek.webp?v=07189d34b8), var(--tiny-rand-scheur-hoek, none); }
.blad .ro, :root[data-onder^="klein-"] .blad .ro { background-image: url(/kunst/rand-klein-hoek.webp?v=260459b5a6), var(--tiny-rand-klein-hoek, none); }
.blad .lo, :root[data-links^="rond-"] .blad .lo { background-image: url(/kunst/rand-rond-hoek.webp?v=5ee3e5755d), var(--tiny-rand-rond-hoek, none); }
:root[data-links^="scheur-"] .blad .lo { background-image: url(/kunst/rand-scheur-hoek.webp?v=07189d34b8), var(--tiny-rand-scheur-hoek, none); }
:root[data-links^="klein-"] .blad .lo { background-image: url(/kunst/rand-klein-hoek.webp?v=260459b5a6), var(--tiny-rand-klein-hoek, none); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .blad .bo, :root:not([data-modus=licht])[data-boven="rond-1"] .blad .bo { background-image: url(/kunst/rand-rond-boven-donker.webp?v=4f2bed38c6), var(--tiny-rand-rond-boven-donker, none); }
  :root:not([data-modus=licht])[data-boven="rond-2"] .blad .bo { background-image: url(/kunst/rand-rond-boven-2-donker.webp?v=2c9f151a20), var(--tiny-rand-rond-boven-2-donker, none); }
  :root:not([data-modus=licht])[data-boven="rond-3"] .blad .bo { background-image: url(/kunst/rand-rond-boven-3-donker.webp?v=9116ef34ab), var(--tiny-rand-rond-boven-3-donker, none); }
  :root:not([data-modus=licht])[data-boven="rond-4"] .blad .bo { background-image: url(/kunst/rand-rond-boven-4-donker.webp?v=21f26e6c8f), var(--tiny-rand-rond-boven-4-donker, none); }
  :root:not([data-modus=licht])[data-boven="scheur-1"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-donker.webp?v=effeeb6d6a), var(--tiny-rand-scheur-boven-donker, none); }
  :root:not([data-modus=licht])[data-boven="scheur-2"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-2-donker.webp?v=0433fa89d1), var(--tiny-rand-scheur-boven-2-donker, none); }
  :root:not([data-modus=licht])[data-boven="scheur-3"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-3-donker.webp?v=a1d1ca6f6a), var(--tiny-rand-scheur-boven-3-donker, none); }
  :root:not([data-modus=licht])[data-boven="scheur-4"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-4-donker.webp?v=3c5d12562c), var(--tiny-rand-scheur-boven-4-donker, none); }
  :root:not([data-modus=licht])[data-boven="klein-1"] .blad .bo { background-image: url(/kunst/rand-klein-boven-donker.webp?v=6dedb4b9ff), var(--tiny-rand-klein-boven-donker, none); }
  :root:not([data-modus=licht])[data-boven="klein-2"] .blad .bo { background-image: url(/kunst/rand-klein-boven-2-donker.webp?v=6eee4a0fc7), var(--tiny-rand-klein-boven-2-donker, none); }
  :root:not([data-modus=licht])[data-boven="klein-3"] .blad .bo { background-image: url(/kunst/rand-klein-boven-3-donker.webp?v=049f83bd73), var(--tiny-rand-klein-boven-3-donker, none); }
  :root:not([data-modus=licht])[data-boven="klein-4"] .blad .bo { background-image: url(/kunst/rand-klein-boven-4-donker.webp?v=1941a24b2b), var(--tiny-rand-klein-boven-4-donker, none); }
  :root:not([data-modus=licht])[data-rechts="rond-1"] .blad .re { background-image: url(/kunst/rand-rond-zij-donker.webp?v=bee296b8e1), var(--tiny-rand-rond-zij-donker, none); }
  :root:not([data-modus=licht])[data-rechts="rond-2"] .blad .re { background-image: url(/kunst/rand-rond-zij-2-donker.webp?v=756fb10120), var(--tiny-rand-rond-zij-2-donker, none); }
  :root:not([data-modus=licht])[data-rechts="rond-3"] .blad .re { background-image: url(/kunst/rand-rond-zij-3-donker.webp?v=d913d2a6ee), var(--tiny-rand-rond-zij-3-donker, none); }
  :root:not([data-modus=licht])[data-rechts="rond-4"] .blad .re { background-image: url(/kunst/rand-rond-zij-4-donker.webp?v=7ee5566659), var(--tiny-rand-rond-zij-4-donker, none); }
  :root:not([data-modus=licht])[data-rechts="scheur-1"] .blad .re { background-image: url(/kunst/rand-scheur-zij-donker.webp?v=7256b5527f), var(--tiny-rand-scheur-zij-donker, none); }
  :root:not([data-modus=licht]) .blad .re, :root:not([data-modus=licht])[data-rechts="scheur-2"] .blad .re { background-image: url(/kunst/rand-scheur-zij-2-donker.webp?v=5c17a30f8a), var(--tiny-rand-scheur-zij-2-donker, none); }
  :root:not([data-modus=licht])[data-rechts="scheur-3"] .blad .re { background-image: url(/kunst/rand-scheur-zij-3-donker.webp?v=9811187f50), var(--tiny-rand-scheur-zij-3-donker, none); }
  :root:not([data-modus=licht])[data-rechts="scheur-4"] .blad .re { background-image: url(/kunst/rand-scheur-zij-4-donker.webp?v=f1af24c2d4), var(--tiny-rand-scheur-zij-4-donker, none); }
  :root:not([data-modus=licht])[data-rechts="klein-1"] .blad .re { background-image: url(/kunst/rand-klein-zij-donker.webp?v=9390a84e7d), var(--tiny-rand-klein-zij-donker, none); }
  :root:not([data-modus=licht])[data-rechts="klein-2"] .blad .re { background-image: url(/kunst/rand-klein-zij-2-donker.webp?v=e551408849), var(--tiny-rand-klein-zij-2-donker, none); }
  :root:not([data-modus=licht])[data-rechts="klein-3"] .blad .re { background-image: url(/kunst/rand-klein-zij-3-donker.webp?v=30dd14a365), var(--tiny-rand-klein-zij-3-donker, none); }
  :root:not([data-modus=licht])[data-rechts="klein-4"] .blad .re { background-image: url(/kunst/rand-klein-zij-4-donker.webp?v=b3003d5007), var(--tiny-rand-klein-zij-4-donker, none); }
  :root:not([data-modus=licht])[data-onder="rond-1"] .blad .on { background-image: url(/kunst/rand-rond-boven-donker.webp?v=4f2bed38c6), var(--tiny-rand-rond-boven-donker, none); }
  :root:not([data-modus=licht])[data-onder="rond-2"] .blad .on { background-image: url(/kunst/rand-rond-boven-2-donker.webp?v=2c9f151a20), var(--tiny-rand-rond-boven-2-donker, none); }
  :root:not([data-modus=licht])[data-onder="rond-3"] .blad .on { background-image: url(/kunst/rand-rond-boven-3-donker.webp?v=9116ef34ab), var(--tiny-rand-rond-boven-3-donker, none); }
  :root:not([data-modus=licht])[data-onder="rond-4"] .blad .on { background-image: url(/kunst/rand-rond-boven-4-donker.webp?v=21f26e6c8f), var(--tiny-rand-rond-boven-4-donker, none); }
  :root:not([data-modus=licht])[data-onder="scheur-1"] .blad .on { background-image: url(/kunst/rand-scheur-boven-donker.webp?v=effeeb6d6a), var(--tiny-rand-scheur-boven-donker, none); }
  :root:not([data-modus=licht])[data-onder="scheur-2"] .blad .on { background-image: url(/kunst/rand-scheur-boven-2-donker.webp?v=0433fa89d1), var(--tiny-rand-scheur-boven-2-donker, none); }
  :root:not([data-modus=licht])[data-onder="scheur-3"] .blad .on { background-image: url(/kunst/rand-scheur-boven-3-donker.webp?v=a1d1ca6f6a), var(--tiny-rand-scheur-boven-3-donker, none); }
  :root:not([data-modus=licht])[data-onder="scheur-4"] .blad .on { background-image: url(/kunst/rand-scheur-boven-4-donker.webp?v=3c5d12562c), var(--tiny-rand-scheur-boven-4-donker, none); }
  :root:not([data-modus=licht])[data-onder="klein-1"] .blad .on { background-image: url(/kunst/rand-klein-boven-donker.webp?v=6dedb4b9ff), var(--tiny-rand-klein-boven-donker, none); }
  :root:not([data-modus=licht])[data-onder="klein-2"] .blad .on { background-image: url(/kunst/rand-klein-boven-2-donker.webp?v=6eee4a0fc7), var(--tiny-rand-klein-boven-2-donker, none); }
  :root:not([data-modus=licht]) .blad .on, :root:not([data-modus=licht])[data-onder="klein-3"] .blad .on { background-image: url(/kunst/rand-klein-boven-3-donker.webp?v=049f83bd73), var(--tiny-rand-klein-boven-3-donker, none); }
  :root:not([data-modus=licht])[data-onder="klein-4"] .blad .on { background-image: url(/kunst/rand-klein-boven-4-donker.webp?v=1941a24b2b), var(--tiny-rand-klein-boven-4-donker, none); }
  :root:not([data-modus=licht])[data-links="rond-1"] .blad .li { background-image: url(/kunst/rand-rond-zij-donker.webp?v=bee296b8e1), var(--tiny-rand-rond-zij-donker, none); }
  :root:not([data-modus=licht])[data-links="rond-2"] .blad .li { background-image: url(/kunst/rand-rond-zij-2-donker.webp?v=756fb10120), var(--tiny-rand-rond-zij-2-donker, none); }
  :root:not([data-modus=licht])[data-links="rond-3"] .blad .li { background-image: url(/kunst/rand-rond-zij-3-donker.webp?v=d913d2a6ee), var(--tiny-rand-rond-zij-3-donker, none); }
  :root:not([data-modus=licht]) .blad .li, :root:not([data-modus=licht])[data-links="rond-4"] .blad .li { background-image: url(/kunst/rand-rond-zij-4-donker.webp?v=7ee5566659), var(--tiny-rand-rond-zij-4-donker, none); }
  :root:not([data-modus=licht])[data-links="scheur-1"] .blad .li { background-image: url(/kunst/rand-scheur-zij-donker.webp?v=7256b5527f), var(--tiny-rand-scheur-zij-donker, none); }
  :root:not([data-modus=licht])[data-links="scheur-2"] .blad .li { background-image: url(/kunst/rand-scheur-zij-2-donker.webp?v=5c17a30f8a), var(--tiny-rand-scheur-zij-2-donker, none); }
  :root:not([data-modus=licht])[data-links="scheur-3"] .blad .li { background-image: url(/kunst/rand-scheur-zij-3-donker.webp?v=9811187f50), var(--tiny-rand-scheur-zij-3-donker, none); }
  :root:not([data-modus=licht])[data-links="scheur-4"] .blad .li { background-image: url(/kunst/rand-scheur-zij-4-donker.webp?v=f1af24c2d4), var(--tiny-rand-scheur-zij-4-donker, none); }
  :root:not([data-modus=licht])[data-links="klein-1"] .blad .li { background-image: url(/kunst/rand-klein-zij-donker.webp?v=9390a84e7d), var(--tiny-rand-klein-zij-donker, none); }
  :root:not([data-modus=licht])[data-links="klein-2"] .blad .li { background-image: url(/kunst/rand-klein-zij-2-donker.webp?v=e551408849), var(--tiny-rand-klein-zij-2-donker, none); }
  :root:not([data-modus=licht])[data-links="klein-3"] .blad .li { background-image: url(/kunst/rand-klein-zij-3-donker.webp?v=30dd14a365), var(--tiny-rand-klein-zij-3-donker, none); }
  :root:not([data-modus=licht])[data-links="klein-4"] .blad .li { background-image: url(/kunst/rand-klein-zij-4-donker.webp?v=b3003d5007), var(--tiny-rand-klein-zij-4-donker, none); }
  :root:not([data-modus=licht]) .blad .lb, :root:not([data-modus=licht])[data-boven^="rond-"] .blad .lb { background-image: url(/kunst/rand-rond-hoek-donker.webp?v=3ad8c49637), var(--tiny-rand-rond-hoek-donker, none); }
  :root:not([data-modus=licht])[data-boven^="scheur-"] .blad .lb { background-image: url(/kunst/rand-scheur-hoek-donker.webp?v=c04b80f2ab), var(--tiny-rand-scheur-hoek-donker, none); }
  :root:not([data-modus=licht])[data-boven^="klein-"] .blad .lb { background-image: url(/kunst/rand-klein-hoek-donker.webp?v=9a9db1de28), var(--tiny-rand-klein-hoek-donker, none); }
  :root:not([data-modus=licht])[data-rechts^="rond-"] .blad .rb { background-image: url(/kunst/rand-rond-hoek-donker.webp?v=3ad8c49637), var(--tiny-rand-rond-hoek-donker, none); }
  :root:not([data-modus=licht]) .blad .rb, :root:not([data-modus=licht])[data-rechts^="scheur-"] .blad .rb { background-image: url(/kunst/rand-scheur-hoek-donker.webp?v=c04b80f2ab), var(--tiny-rand-scheur-hoek-donker, none); }
  :root:not([data-modus=licht])[data-rechts^="klein-"] .blad .rb { background-image: url(/kunst/rand-klein-hoek-donker.webp?v=9a9db1de28), var(--tiny-rand-klein-hoek-donker, none); }
  :root:not([data-modus=licht])[data-onder^="rond-"] .blad .ro { background-image: url(/kunst/rand-rond-hoek-donker.webp?v=3ad8c49637), var(--tiny-rand-rond-hoek-donker, none); }
  :root:not([data-modus=licht])[data-onder^="scheur-"] .blad .ro { background-image: url(/kunst/rand-scheur-hoek-donker.webp?v=c04b80f2ab), var(--tiny-rand-scheur-hoek-donker, none); }
  :root:not([data-modus=licht]) .blad .ro, :root:not([data-modus=licht])[data-onder^="klein-"] .blad .ro { background-image: url(/kunst/rand-klein-hoek-donker.webp?v=9a9db1de28), var(--tiny-rand-klein-hoek-donker, none); }
  :root:not([data-modus=licht]) .blad .lo, :root:not([data-modus=licht])[data-links^="rond-"] .blad .lo { background-image: url(/kunst/rand-rond-hoek-donker.webp?v=3ad8c49637), var(--tiny-rand-rond-hoek-donker, none); }
  :root:not([data-modus=licht])[data-links^="scheur-"] .blad .lo { background-image: url(/kunst/rand-scheur-hoek-donker.webp?v=c04b80f2ab), var(--tiny-rand-scheur-hoek-donker, none); }
  :root:not([data-modus=licht])[data-links^="klein-"] .blad .lo { background-image: url(/kunst/rand-klein-hoek-donker.webp?v=9a9db1de28), var(--tiny-rand-klein-hoek-donker, none); }
}
:root[data-modus=donker] .blad .bo, :root[data-modus=donker][data-boven="rond-1"] .blad .bo { background-image: url(/kunst/rand-rond-boven-donker.webp?v=4f2bed38c6), var(--tiny-rand-rond-boven-donker, none); }
:root[data-modus=donker][data-boven="rond-2"] .blad .bo { background-image: url(/kunst/rand-rond-boven-2-donker.webp?v=2c9f151a20), var(--tiny-rand-rond-boven-2-donker, none); }
:root[data-modus=donker][data-boven="rond-3"] .blad .bo { background-image: url(/kunst/rand-rond-boven-3-donker.webp?v=9116ef34ab), var(--tiny-rand-rond-boven-3-donker, none); }
:root[data-modus=donker][data-boven="rond-4"] .blad .bo { background-image: url(/kunst/rand-rond-boven-4-donker.webp?v=21f26e6c8f), var(--tiny-rand-rond-boven-4-donker, none); }
:root[data-modus=donker][data-boven="scheur-1"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-donker.webp?v=effeeb6d6a), var(--tiny-rand-scheur-boven-donker, none); }
:root[data-modus=donker][data-boven="scheur-2"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-2-donker.webp?v=0433fa89d1), var(--tiny-rand-scheur-boven-2-donker, none); }
:root[data-modus=donker][data-boven="scheur-3"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-3-donker.webp?v=a1d1ca6f6a), var(--tiny-rand-scheur-boven-3-donker, none); }
:root[data-modus=donker][data-boven="scheur-4"] .blad .bo { background-image: url(/kunst/rand-scheur-boven-4-donker.webp?v=3c5d12562c), var(--tiny-rand-scheur-boven-4-donker, none); }
:root[data-modus=donker][data-boven="klein-1"] .blad .bo { background-image: url(/kunst/rand-klein-boven-donker.webp?v=6dedb4b9ff), var(--tiny-rand-klein-boven-donker, none); }
:root[data-modus=donker][data-boven="klein-2"] .blad .bo { background-image: url(/kunst/rand-klein-boven-2-donker.webp?v=6eee4a0fc7), var(--tiny-rand-klein-boven-2-donker, none); }
:root[data-modus=donker][data-boven="klein-3"] .blad .bo { background-image: url(/kunst/rand-klein-boven-3-donker.webp?v=049f83bd73), var(--tiny-rand-klein-boven-3-donker, none); }
:root[data-modus=donker][data-boven="klein-4"] .blad .bo { background-image: url(/kunst/rand-klein-boven-4-donker.webp?v=1941a24b2b), var(--tiny-rand-klein-boven-4-donker, none); }
:root[data-modus=donker][data-rechts="rond-1"] .blad .re { background-image: url(/kunst/rand-rond-zij-donker.webp?v=bee296b8e1), var(--tiny-rand-rond-zij-donker, none); }
:root[data-modus=donker][data-rechts="rond-2"] .blad .re { background-image: url(/kunst/rand-rond-zij-2-donker.webp?v=756fb10120), var(--tiny-rand-rond-zij-2-donker, none); }
:root[data-modus=donker][data-rechts="rond-3"] .blad .re { background-image: url(/kunst/rand-rond-zij-3-donker.webp?v=d913d2a6ee), var(--tiny-rand-rond-zij-3-donker, none); }
:root[data-modus=donker][data-rechts="rond-4"] .blad .re { background-image: url(/kunst/rand-rond-zij-4-donker.webp?v=7ee5566659), var(--tiny-rand-rond-zij-4-donker, none); }
:root[data-modus=donker][data-rechts="scheur-1"] .blad .re { background-image: url(/kunst/rand-scheur-zij-donker.webp?v=7256b5527f), var(--tiny-rand-scheur-zij-donker, none); }
:root[data-modus=donker] .blad .re, :root[data-modus=donker][data-rechts="scheur-2"] .blad .re { background-image: url(/kunst/rand-scheur-zij-2-donker.webp?v=5c17a30f8a), var(--tiny-rand-scheur-zij-2-donker, none); }
:root[data-modus=donker][data-rechts="scheur-3"] .blad .re { background-image: url(/kunst/rand-scheur-zij-3-donker.webp?v=9811187f50), var(--tiny-rand-scheur-zij-3-donker, none); }
:root[data-modus=donker][data-rechts="scheur-4"] .blad .re { background-image: url(/kunst/rand-scheur-zij-4-donker.webp?v=f1af24c2d4), var(--tiny-rand-scheur-zij-4-donker, none); }
:root[data-modus=donker][data-rechts="klein-1"] .blad .re { background-image: url(/kunst/rand-klein-zij-donker.webp?v=9390a84e7d), var(--tiny-rand-klein-zij-donker, none); }
:root[data-modus=donker][data-rechts="klein-2"] .blad .re { background-image: url(/kunst/rand-klein-zij-2-donker.webp?v=e551408849), var(--tiny-rand-klein-zij-2-donker, none); }
:root[data-modus=donker][data-rechts="klein-3"] .blad .re { background-image: url(/kunst/rand-klein-zij-3-donker.webp?v=30dd14a365), var(--tiny-rand-klein-zij-3-donker, none); }
:root[data-modus=donker][data-rechts="klein-4"] .blad .re { background-image: url(/kunst/rand-klein-zij-4-donker.webp?v=b3003d5007), var(--tiny-rand-klein-zij-4-donker, none); }
:root[data-modus=donker][data-onder="rond-1"] .blad .on { background-image: url(/kunst/rand-rond-boven-donker.webp?v=4f2bed38c6), var(--tiny-rand-rond-boven-donker, none); }
:root[data-modus=donker][data-onder="rond-2"] .blad .on { background-image: url(/kunst/rand-rond-boven-2-donker.webp?v=2c9f151a20), var(--tiny-rand-rond-boven-2-donker, none); }
:root[data-modus=donker][data-onder="rond-3"] .blad .on { background-image: url(/kunst/rand-rond-boven-3-donker.webp?v=9116ef34ab), var(--tiny-rand-rond-boven-3-donker, none); }
:root[data-modus=donker][data-onder="rond-4"] .blad .on { background-image: url(/kunst/rand-rond-boven-4-donker.webp?v=21f26e6c8f), var(--tiny-rand-rond-boven-4-donker, none); }
:root[data-modus=donker][data-onder="scheur-1"] .blad .on { background-image: url(/kunst/rand-scheur-boven-donker.webp?v=effeeb6d6a), var(--tiny-rand-scheur-boven-donker, none); }
:root[data-modus=donker][data-onder="scheur-2"] .blad .on { background-image: url(/kunst/rand-scheur-boven-2-donker.webp?v=0433fa89d1), var(--tiny-rand-scheur-boven-2-donker, none); }
:root[data-modus=donker][data-onder="scheur-3"] .blad .on { background-image: url(/kunst/rand-scheur-boven-3-donker.webp?v=a1d1ca6f6a), var(--tiny-rand-scheur-boven-3-donker, none); }
:root[data-modus=donker][data-onder="scheur-4"] .blad .on { background-image: url(/kunst/rand-scheur-boven-4-donker.webp?v=3c5d12562c), var(--tiny-rand-scheur-boven-4-donker, none); }
:root[data-modus=donker][data-onder="klein-1"] .blad .on { background-image: url(/kunst/rand-klein-boven-donker.webp?v=6dedb4b9ff), var(--tiny-rand-klein-boven-donker, none); }
:root[data-modus=donker][data-onder="klein-2"] .blad .on { background-image: url(/kunst/rand-klein-boven-2-donker.webp?v=6eee4a0fc7), var(--tiny-rand-klein-boven-2-donker, none); }
:root[data-modus=donker] .blad .on, :root[data-modus=donker][data-onder="klein-3"] .blad .on { background-image: url(/kunst/rand-klein-boven-3-donker.webp?v=049f83bd73), var(--tiny-rand-klein-boven-3-donker, none); }
:root[data-modus=donker][data-onder="klein-4"] .blad .on { background-image: url(/kunst/rand-klein-boven-4-donker.webp?v=1941a24b2b), var(--tiny-rand-klein-boven-4-donker, none); }
:root[data-modus=donker][data-links="rond-1"] .blad .li { background-image: url(/kunst/rand-rond-zij-donker.webp?v=bee296b8e1), var(--tiny-rand-rond-zij-donker, none); }
:root[data-modus=donker][data-links="rond-2"] .blad .li { background-image: url(/kunst/rand-rond-zij-2-donker.webp?v=756fb10120), var(--tiny-rand-rond-zij-2-donker, none); }
:root[data-modus=donker][data-links="rond-3"] .blad .li { background-image: url(/kunst/rand-rond-zij-3-donker.webp?v=d913d2a6ee), var(--tiny-rand-rond-zij-3-donker, none); }
:root[data-modus=donker] .blad .li, :root[data-modus=donker][data-links="rond-4"] .blad .li { background-image: url(/kunst/rand-rond-zij-4-donker.webp?v=7ee5566659), var(--tiny-rand-rond-zij-4-donker, none); }
:root[data-modus=donker][data-links="scheur-1"] .blad .li { background-image: url(/kunst/rand-scheur-zij-donker.webp?v=7256b5527f), var(--tiny-rand-scheur-zij-donker, none); }
:root[data-modus=donker][data-links="scheur-2"] .blad .li { background-image: url(/kunst/rand-scheur-zij-2-donker.webp?v=5c17a30f8a), var(--tiny-rand-scheur-zij-2-donker, none); }
:root[data-modus=donker][data-links="scheur-3"] .blad .li { background-image: url(/kunst/rand-scheur-zij-3-donker.webp?v=9811187f50), var(--tiny-rand-scheur-zij-3-donker, none); }
:root[data-modus=donker][data-links="scheur-4"] .blad .li { background-image: url(/kunst/rand-scheur-zij-4-donker.webp?v=f1af24c2d4), var(--tiny-rand-scheur-zij-4-donker, none); }
:root[data-modus=donker][data-links="klein-1"] .blad .li { background-image: url(/kunst/rand-klein-zij-donker.webp?v=9390a84e7d), var(--tiny-rand-klein-zij-donker, none); }
:root[data-modus=donker][data-links="klein-2"] .blad .li { background-image: url(/kunst/rand-klein-zij-2-donker.webp?v=e551408849), var(--tiny-rand-klein-zij-2-donker, none); }
:root[data-modus=donker][data-links="klein-3"] .blad .li { background-image: url(/kunst/rand-klein-zij-3-donker.webp?v=30dd14a365), var(--tiny-rand-klein-zij-3-donker, none); }
:root[data-modus=donker][data-links="klein-4"] .blad .li { background-image: url(/kunst/rand-klein-zij-4-donker.webp?v=b3003d5007), var(--tiny-rand-klein-zij-4-donker, none); }
:root[data-modus=donker] .blad .lb, :root[data-modus=donker][data-boven^="rond-"] .blad .lb { background-image: url(/kunst/rand-rond-hoek-donker.webp?v=3ad8c49637), var(--tiny-rand-rond-hoek-donker, none); }
:root[data-modus=donker][data-boven^="scheur-"] .blad .lb { background-image: url(/kunst/rand-scheur-hoek-donker.webp?v=c04b80f2ab), var(--tiny-rand-scheur-hoek-donker, none); }
:root[data-modus=donker][data-boven^="klein-"] .blad .lb { background-image: url(/kunst/rand-klein-hoek-donker.webp?v=9a9db1de28), var(--tiny-rand-klein-hoek-donker, none); }
:root[data-modus=donker][data-rechts^="rond-"] .blad .rb { background-image: url(/kunst/rand-rond-hoek-donker.webp?v=3ad8c49637), var(--tiny-rand-rond-hoek-donker, none); }
:root[data-modus=donker] .blad .rb, :root[data-modus=donker][data-rechts^="scheur-"] .blad .rb { background-image: url(/kunst/rand-scheur-hoek-donker.webp?v=c04b80f2ab), var(--tiny-rand-scheur-hoek-donker, none); }
:root[data-modus=donker][data-rechts^="klein-"] .blad .rb { background-image: url(/kunst/rand-klein-hoek-donker.webp?v=9a9db1de28), var(--tiny-rand-klein-hoek-donker, none); }
:root[data-modus=donker][data-onder^="rond-"] .blad .ro { background-image: url(/kunst/rand-rond-hoek-donker.webp?v=3ad8c49637), var(--tiny-rand-rond-hoek-donker, none); }
:root[data-modus=donker][data-onder^="scheur-"] .blad .ro { background-image: url(/kunst/rand-scheur-hoek-donker.webp?v=c04b80f2ab), var(--tiny-rand-scheur-hoek-donker, none); }
:root[data-modus=donker] .blad .ro, :root[data-modus=donker][data-onder^="klein-"] .blad .ro { background-image: url(/kunst/rand-klein-hoek-donker.webp?v=9a9db1de28), var(--tiny-rand-klein-hoek-donker, none); }
:root[data-modus=donker] .blad .lo, :root[data-modus=donker][data-links^="rond-"] .blad .lo { background-image: url(/kunst/rand-rond-hoek-donker.webp?v=3ad8c49637), var(--tiny-rand-rond-hoek-donker, none); }
:root[data-modus=donker][data-links^="scheur-"] .blad .lo { background-image: url(/kunst/rand-scheur-hoek-donker.webp?v=c04b80f2ab), var(--tiny-rand-scheur-hoek-donker, none); }
:root[data-modus=donker][data-links^="klein-"] .blad .lo { background-image: url(/kunst/rand-klein-hoek-donker.webp?v=9a9db1de28), var(--tiny-rand-klein-hoek-donker, none); }
/* the "+" popup's and the whole-text window's paper: his crumpled sheet's creases over it, always, as the paper the
   ball opens out into (computment, 2026-11-08: "the crinkly thing is good for that pop-up ... and the whole text";
   the page's own sheet stays plain: "I don't like the crinkly background for just the page in general"); kreukel.webp,
   a seamless grey tile of their shading alone, multiplied over light paper and screened over dark */
.app-pop .blad::before, .lezer .blad::before { background-image: url(/kunst/kreukel.webp?v=a90cb2e04a), url(/kunst/papier.webp?v=2bd29f3770);
                                               background-size: 443px auto, 226px auto; background-blend-mode: multiply, normal; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .app-pop .blad::before, :root:not([data-modus=licht]) .lezer .blad::before { background-image: url(/kunst/kreukel-donker.webp?v=55738ac7af), url(/kunst/papier-donker.webp?v=9c6b32735e); background-blend-mode: screen, normal; }
}
:root[data-modus=donker] .app-pop .blad::before, :root[data-modus=donker] .lezer .blad::before { background-image: url(/kunst/kreukel-donker.webp?v=55738ac7af), url(/kunst/papier-donker.webp?v=9c6b32735e); background-blend-mode: screen, normal; }

/* the separators' mark: A12, the eye with the world, about half the v6 sketch's size */
.scheiding span { width: 36px; height: 19px; background-image: url(/kunst/oog.webp?v=f7b2cc678d); }
.scheiding i { position: relative; flex: 1; height: 10px; --streep: #e6dece; filter: drop-shadow(0 1px 0.5px var(--shadow)) drop-shadow(0 2px 3px var(--shadow)); }
.streep { position: relative; display: block; height: 10px; --streep: #e6dece; filter: drop-shadow(0 1px 0.5px var(--shadow)) drop-shadow(0 2px 3px var(--shadow)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .scheiding i, :root:not([data-modus=licht]) .streep { --streep: #2a2824; }
}
:root[data-modus=donker] .scheiding i, :root[data-modus=donker] .streep { --streep: #2a2824; }
.scheiding i::before, .streep::before { content: ""; position: absolute; inset: 0; background: var(--s) var(--sx) 0 / auto 100% repeat-x, var(--r) right top / 9px 100% no-repeat, var(--l) left top / 9px 100% no-repeat, url(/kunst/papier.webp?v=2bd29f3770) 0 0 / 226px auto, var(--streep);
                      background-blend-mode: hard-light, hard-light, hard-light, multiply;
                      -webkit-mask: var(--s) var(--sx) 0 / auto 100% repeat-x, var(--r) right top / 9px 100% no-repeat, var(--l) left top / 9px 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - 14px) 100% no-repeat;
                      -webkit-mask-composite: source-in, source-over, source-over, source-over;
                      mask: var(--s) var(--sx) 0 / auto 100% repeat-x, var(--r) right top / 9px 100% no-repeat, var(--l) left top / 9px 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - 14px) 100% no-repeat;
                      mask-composite: intersect, add, add, add; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .scheiding i::before, :root:not([data-modus=licht]) .streep::before { background-image: var(--s), var(--r), var(--l), url(/kunst/papier-donker.webp?v=9c6b32735e); background-blend-mode: overlay, overlay, overlay, screen; }
}
:root[data-modus=donker] .scheiding i::before, :root[data-modus=donker] .streep::before { background-image: var(--s), var(--r), var(--l), url(/kunst/papier-donker.webp?v=9c6b32735e); background-blend-mode: overlay, overlay, overlay, screen; }
.scheiding.s1 i:first-child { --s: url(/kunst/streep-1.webp?v=1781b772ab); --sx: -311px; --l: url(/kunst/knop-l-1.webp?v=125b8d59ab); --r: url(/kunst/knop-r-4.webp?v=570c3c97c9); }
.scheiding.s1 i:last-child { --s: url(/kunst/streep-2.webp?v=96066e1e12); --sx: -173px; --l: url(/kunst/knop-l-6.webp?v=7aa493e422); --r: url(/kunst/knop-r-2.webp?v=56dd982d57); }
.scheiding.s2 i:first-child { --s: url(/kunst/streep-2.webp?v=96066e1e12); --sx: -22px; --l: url(/kunst/knop-l-2.webp?v=b40f96589d); --r: url(/kunst/knop-r-5.webp?v=9e67b94e96); }
.scheiding.s2 i:last-child { --s: url(/kunst/streep-3.webp?v=0b5ad5fb78); --sx: -346px; --l: url(/kunst/knop-l-7.webp?v=6b5694ba42); --r: url(/kunst/knop-r-3.webp?v=f9e38ba0bb); }
.scheiding.s3 i:first-child { --s: url(/kunst/streep-3.webp?v=0b5ad5fb78); --sx: -333px; --l: url(/kunst/knop-l-3.webp?v=9e9d8321c8); --r: url(/kunst/knop-r-6.webp?v=a4deb1e7cb); }
.scheiding.s3 i:last-child { --s: url(/kunst/streep-1.webp?v=1781b772ab); --sx: -519px; --l: url(/kunst/knop-l-8.webp?v=51a88e4235); --r: url(/kunst/knop-r-4.webp?v=570c3c97c9); }
.streep { --s: url(/kunst/streep-1.webp?v=1781b772ab); --sx: -311px; --l: url(/kunst/knop-l-1.webp?v=125b8d59ab); --r: url(/kunst/knop-r-4.webp?v=570c3c97c9); }
.streep.t1 { --s: url(/kunst/streep-1.webp?v=1781b772ab); --sx: -311px; --l: url(/kunst/knop-l-1.webp?v=125b8d59ab); --r: url(/kunst/knop-r-4.webp?v=570c3c97c9); }
.streep.t2 { --s: url(/kunst/streep-2.webp?v=96066e1e12); --sx: -173px; --l: url(/kunst/knop-l-6.webp?v=7aa493e422); --r: url(/kunst/knop-r-2.webp?v=56dd982d57); }
.streep.t3 { --s: url(/kunst/streep-2.webp?v=96066e1e12); --sx: -22px; --l: url(/kunst/knop-l-2.webp?v=b40f96589d); --r: url(/kunst/knop-r-5.webp?v=9e67b94e96); }
.streep.t4 { --s: url(/kunst/streep-3.webp?v=0b5ad5fb78); --sx: -346px; --l: url(/kunst/knop-l-7.webp?v=6b5694ba42); --r: url(/kunst/knop-r-3.webp?v=f9e38ba0bb); }
.streep.t5 { --s: url(/kunst/streep-3.webp?v=0b5ad5fb78); --sx: -333px; --l: url(/kunst/knop-l-3.webp?v=9e9d8321c8); --r: url(/kunst/knop-r-6.webp?v=a4deb1e7cb); }
.streep.t6 { --s: url(/kunst/streep-1.webp?v=1781b772ab); --sx: -519px; --l: url(/kunst/knop-l-8.webp?v=51a88e4235); --r: url(/kunst/knop-r-4.webp?v=570c3c97c9); }

@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .scheiding span { background-image: url(/kunst/oog-donker.webp?v=c3ef339c2c); }
}
:root[data-modus=donker] .scheiding span { background-image: url(/kunst/oog-donker.webp?v=c3ef339c2c); }

/* his paper in motion (computment, 2026-11-07: "i feel like you have enough from here to make plenty of animations"):
   stop-motion at 8 frames a second, as the logo and the 404, so the page reacts at once and the paper covers while the
   change happens under it (make-papier.py makes the frames from his scans, light and dark: no white sheet over a dark
   page). The frames are named here once per mode; a name costs nothing until a frame is shown, and page.js fetches the
   ones a page can play once it is idle or something that plays them is near. Under reduced motion, read live, none of
   it plays or is fetched: what changes, changes at once. */
:root { --bal-1: url(/kunst/bal-1.webp?v=1a82fdab29); --bal-2: url(/kunst/bal-2.webp?v=950c9cf401); --bal-3: url(/kunst/bal-3.webp?v=0432ad65b1);
        --knipper: url(/kunst/oog-knipper.webp?v=fc2228c70f); --film-oog: url(/kunst/film-oog.webp?v=871de3c84b); --kreukel: url(/kunst/kreukel.webp?v=a90cb2e04a); }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) { --bal-1: url(/kunst/bal-1-donker.webp?v=1711c378c2); --bal-2: url(/kunst/bal-2-donker.webp?v=de80f349b2); --bal-3: url(/kunst/bal-3-donker.webp?v=e848c0aa20); --knipper: url(/kunst/oog-knipper-donker.webp?v=55c2c8cd9c); --film-oog: url(/kunst/film-oog-donker.webp?v=0b3a94f498); --kreukel: url(/kunst/kreukel-donker.webp?v=55738ac7af); }
}
:root[data-modus=donker] { --bal-1: url(/kunst/bal-1-donker.webp?v=1711c378c2); --bal-2: url(/kunst/bal-2-donker.webp?v=de80f349b2); --bal-3: url(/kunst/bal-3-donker.webp?v=e848c0aa20); --knipper: url(/kunst/oog-knipper-donker.webp?v=55c2c8cd9c); --film-oog: url(/kunst/film-oog-donker.webp?v=0b3a94f498); --kreukel: url(/kunst/kreukel-donker.webp?v=55738ac7af); }
/* what page.js fetches ahead, in the mode the page has now, and again in the other once the mode changes (a hidden
   layer: drawn nowhere); under reduced motion it isn't laid out at all, so it fetches nothing, live */
.voorraad { position: fixed; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; background-size: 1px 1px; }
@media (prefers-reduced-motion: reduce) { .voorraad { display: none; } }

/* the "+" popup and the whole-text window (drie/): a paper ball, a bigger one, the crumpled sheet, then the window's
   own torn sheet; closing, crumpled up again. The window is there, and focused, from the first frame, only unseen. */
@keyframes bal-open { 0% { background-image: var(--bal-1); } 33.333% { background-image: var(--bal-2); } 66.667%, 100% { background-image: var(--bal-3); } }
@keyframes bal-dicht { 0% { background-image: var(--bal-3); } 33.333% { background-image: var(--bal-2); } 66.667%, 100% { background-image: var(--bal-1); } }
@keyframes ongezien { 0%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .app-pop, .lezer { opacity: 1; transform: none;
                     transition: overlay var(--motion-papier) allow-discrete, display var(--motion-papier) allow-discrete; }
  @starting-style { .app-pop:popover-open, .lezer[open] { opacity: 1; transform: none; } }
  .app-pop::after, .lezer::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: none 50% 50% / 100% 100% no-repeat; }
  .app-pop:popover-open > *, .lezer[open] > * { animation: ongezien var(--motion-papier) step-end; }
  .app-pop:not(:popover-open) > *, .lezer:not([open]) > * { opacity: 0; }
  .app-pop:popover-open::after, .lezer[open]::after { animation: bal-open var(--motion-papier) step-end; }
  .app-pop:not(:popover-open)::after, .lezer:not([open])::after { animation: bal-dicht var(--motion-papier) step-end; }
}

/* the eyes blink now and then (computment, 2026-11-07): the logo's own eye (film.webp's last frame) and the separators'
   mark, each on its own calm, uneven clock and never two at once (page.js); his paper eye half shut, shut under his
   lid, half shut again, at 8 a second. Not while the logo's film plays, and never under reduced motion. */
.film { position: relative; }
.knipoog { position: absolute; left: 44.31%; top: 43.21%; width: 11.94%; height: 12.84%; visibility: hidden; pointer-events: none;
           background: none 0 0 / 200% 100% no-repeat; }
@keyframes knipoog { 0% { visibility: visible; background-image: var(--film-oog); background-position: 0 0; }
                     33.333% { visibility: visible; background-image: var(--film-oog); background-position: 100% 0; }
                     66.667%, 100% { visibility: visible; background-image: var(--film-oog); background-position: 0 0; } }
@keyframes knipper { 0% { background-image: var(--knipper); background-size: 300% 100%; background-position: 50% 0; }
                     33.333% { background-image: var(--knipper); background-size: 300% 100%; background-position: 100% 0; }
                     66.667%, 100% { background-image: var(--knipper); background-size: 300% 100%; background-position: 50% 0; } }
@media (prefers-reduced-motion: no-preference) {
  .film.knipt > .knipoog { animation: knipoog var(--motion-papier) step-end; }
  .scheiding span.knipt { animation: knipper var(--motion-papier) step-end; }
}

/* the Licht/Donker switch (vouw/ p-003; computment, 2026-11-08: "it should come in at an angle ... make it smoother,
   as it's quite jarring right now"): his sheet torn on every side, in the tone of the mode it brings, with the page's
   own paper (modusvel.webp is his scan's shading alone: multiplied over the light paper tile, screened over the dark;
   "when you scan it, it's just very blank"), its shadow under it. modus.js sizes it to cover the window and moves it:
   in from the top left at an angle, over the whole window while the mode changes, away to the right. Its tone is the
   mode it brings, so these are no dark-screen rules. */
.modusvel { position: fixed; left: 50%; top: 50%; z-index: 2147483647; pointer-events: none; will-change: transform; }
.modusvel[hidden] { display: none; }
/* its shadow a soft image of its own under it (a filter over the whole window cost too much on every frame) */
.modusvel::after { content: ""; position: absolute; z-index: -1; left: calc(-4.706% - 6px); right: calc(-4.706% + 6px); top: calc(-6.287% + 10px); bottom: calc(-6.287% - 10px);
                   background: url(/kunst/modusvel-schaduw.webp?v=e4bd532cda) 0 0 / 100% 100% no-repeat; opacity: 0.4; }
.modusvel[data-naar="donker"]::after { opacity: 0.75; }
.modusvel::before { content: ""; position: absolute; inset: 0;
                    background: url(/kunst/modusvel.webp?v=3e627c18e2) 0 0 / 100% 100% no-repeat, url(/kunst/papier.webp?v=2bd29f3770) 0 0 / 226px auto;
                    background-blend-mode: multiply, normal;
                    -webkit-mask: url(/kunst/modusvel.webp?v=3e627c18e2) 0 0 / 100% 100% no-repeat; mask: url(/kunst/modusvel.webp?v=3e627c18e2) 0 0 / 100% 100% no-repeat; }
.modusvel[data-naar="donker"]::before { background-image: url(/kunst/modusvel-donker.webp?v=7da08a1cc6), url(/kunst/papier-donker.webp?v=9c6b32735e);
                                        background-blend-mode: screen, normal; }
@media (prefers-reduced-motion: reduce) { .modusvel { display: none !important; } }

/* a page change (vouw/ p-002; computment, 2026-11-08): the big torn sheet comes down over the old page, covers the
   window while the new page takes its place under it, and goes up off the new one: three frames at 8 a second, his
   sheet moved by hand between them. Only browsers with cross-document view transitions; modus.js marks the arriving
   page (html.omslaan) when the sheet's frame is at hand and motion is welcome, else the page fades as before. The
   sheet is three still elements, only there while the transition runs (:active-view-transition), each a group of its
   own over both pages and shown on its step; omslag_css() places their torn edge. */
.omslag { display: none; }
:root.omslaan:active-view-transition .omslag { display: block; position: fixed; left: 0; top: 0; width: 100vw; height: 100vh;
                                               z-index: 2147483647; pointer-events: none; }
/* his sheet's shading over the page's own paper (omslag.webp multiplied over the light tile, screened over the dark),
   cut to his paper, its shadow under it; the tile moves with the sheet */
.omslag > i { position: absolute; inset: 0; filter: drop-shadow(10px 6px 16px rgba(40, 38, 30, 0.3)); }
.omslag > i::before { content: ""; position: absolute; inset: 0;
                      background: url(/kunst/omslag.webp?v=2a32cff2fb) 50% var(--oy) / var(--ow) auto no-repeat, url(/kunst/papier.webp?v=2bd29f3770) 0 var(--oy) / 226px auto;
                      background-blend-mode: multiply, normal;
                      -webkit-mask: url(/kunst/omslag.webp?v=2a32cff2fb) 50% var(--oy) / var(--ow) auto no-repeat;
                      mask: url(/kunst/omslag.webp?v=2a32cff2fb) 50% var(--oy) / var(--ow) auto no-repeat; }
:root.omslaan:active-view-transition .omslag { --ow: max(100vw, calc(100vh * 0.7402)); }
:root.omslaan:active-view-transition .omslag[data-k="1"] { view-transition-name: omslag-1; --oy: calc(55vh - 1.3980 * var(--ow)); }
:root.omslaan::view-transition-new(omslag-1) { animation: omslag-1 var(--motion-papier) step-end; animation-fill-mode: both; }
@keyframes omslag-1 { 0% { opacity: 1; } 33.333%, 100% { opacity: 0; } }
:root.omslaan:active-view-transition .omslag[data-k="2"] { view-transition-name: omslag-2; --oy: calc(100vh - 1.3510 * var(--ow)); }
:root.omslaan::view-transition-new(omslag-2) { animation: omslag-2 var(--motion-papier) step-end; animation-fill-mode: both; }
@keyframes omslag-2 { 0% { opacity: 0; } 33.333% { opacity: 1; } 66.667%, 100% { opacity: 0; } }
:root.omslaan:active-view-transition .omslag[data-k="3"] { view-transition-name: omslag-3; --oy: calc(38vh - 1.3980 * var(--ow)); }
:root.omslaan::view-transition-new(omslag-3) { animation: omslag-3 var(--motion-papier) step-end; animation-fill-mode: both; }
@keyframes omslag-3 { 0% { opacity: 0; } 66.667%, 100% { opacity: 1; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht]) .omslag > i { filter: drop-shadow(10px 6px 16px rgba(0, 0, 0, 0.55)); }
  :root:not([data-modus=licht]) .omslag > i::before { background-image: url(/kunst/omslag-donker.webp?v=623e753d0f), url(/kunst/papier-donker.webp?v=9c6b32735e); background-blend-mode: screen, normal; -webkit-mask-image: url(/kunst/omslag-donker.webp?v=623e753d0f); mask-image: url(/kunst/omslag-donker.webp?v=623e753d0f); }
}
:root[data-modus=donker] .omslag > i { filter: drop-shadow(10px 6px 16px rgba(0, 0, 0, 0.55)); }
:root[data-modus=donker] .omslag > i::before { background-image: url(/kunst/omslag-donker.webp?v=623e753d0f), url(/kunst/papier-donker.webp?v=9c6b32735e); background-blend-mode: screen, normal; -webkit-mask-image: url(/kunst/omslag-donker.webp?v=623e753d0f); mask-image: url(/kunst/omslag-donker.webp?v=623e753d0f); }
:root.omslaan::view-transition-old(root) { animation: omslag-oud var(--motion-papier) step-end; animation-fill-mode: both; }
:root.omslaan::view-transition-new(root) { animation: omslag-nieuw var(--motion-papier) step-end; animation-fill-mode: both; }
@keyframes omslag-oud { 0% { opacity: 1; } 33.333%, 100% { opacity: 0; } }
@keyframes omslag-nieuw { 0% { opacity: 0; } 33.333%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .omslag { display: none !important; }
  /* a fade already running when reduced motion is turned on ends at once (security, 2026-11-08) */
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* the not-found page: his torn 404 over the whole window, the window one link home (NOT_FOUND_FILMS; the frames'
   rules follow, from not_found_films()). No scan behind it and no sheet; the paper is his. One quiet torn label says
   where a click goes. Its focus ring sits just inside the window's edge. */
:root[data-404] body { min-height: 100svh; padding: 0; background: var(--bg); }
:root[data-404] body::before { display: none; }
.verdwaald { position: fixed; inset: 0; display: block; overflow: hidden; border-radius: 0; color: var(--text); text-decoration: none; }
.verdwaald:focus-visible { outline: none; }  /* the frames would cover an inset outline: the ring is drawn over them */
.verdwaald:focus-visible::after { content: ""; position: absolute; inset: 10px; border: 3px solid var(--focus); border-radius: 18px; pointer-events: none; }
.verdwaald-film, .verdwaald-film i { position: absolute; inset: 0; }
.verdwaald-film i { display: none; background: 50% 50% / cover no-repeat; }
.verdwaald-film i:first-child { display: block; }
@media (prefers-reduced-motion: no-preference) { .verdwaald-film i { display: block; visibility: hidden; } .verdwaald-film i:first-child { visibility: visible; } }
/* computment's own hand: every text since 10 Nov (body, above). These short lines were in his bold before he drew a
   regular (2026-11-07: "mostly headings and bold text ... the '5 april 2021 · 1 uur 22 min' short texts like that"),
   and they stay bold though their weight says regular: the dates and lengths, the player's times and the apps' hints */
.meta, .mtijd, .tijden, .app .hint { font-weight: 700; }
h1, h2, h3, h4, .scard .sn, .buren .t, .verder-ep .t, .mtitel { letter-spacing: 0; }
/* scheur: 9 frames, 8 a second, the loop 16 steps */
:root[data-404="1"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-scheur-1-breed.webp?v=d54ac8b254); }
:root[data-404="1"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-scheur-2-breed.webp?v=ae07cae577); }
:root[data-404="1"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-scheur-3-breed.webp?v=219874ba01); }
:root[data-404="1"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-scheur-4-breed.webp?v=fe4409d43b); }
:root[data-404="1"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-scheur-5-breed.webp?v=aacb899d66); }
:root[data-404="1"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-scheur-6-breed.webp?v=317aa8fa21); }
:root[data-404="1"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-scheur-7-breed.webp?v=48bc186e11); }
:root[data-404="1"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-scheur-8-breed.webp?v=a045e9db62); }
:root[data-404="1"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-scheur-9-breed.webp?v=7fdc453c73); }
@media (max-aspect-ratio: 4/5) {
  :root[data-404="1"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-scheur-1-smal.webp?v=d37d8a6b44); }
  :root[data-404="1"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-scheur-2-smal.webp?v=7fb29000eb); }
  :root[data-404="1"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-scheur-3-smal.webp?v=20999d053b); }
  :root[data-404="1"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-scheur-4-smal.webp?v=7d7c0d7844); }
  :root[data-404="1"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-scheur-5-smal.webp?v=3f34315a8d); }
  :root[data-404="1"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-scheur-6-smal.webp?v=81871baa8c); }
  :root[data-404="1"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-scheur-7-smal.webp?v=ed6e0d663b); }
  :root[data-404="1"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-scheur-8-smal.webp?v=ba63418256); }
  :root[data-404="1"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-scheur-9-smal.webp?v=1ab300c88a); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-scheur-1-breed-donker.webp?v=d54ac8b254); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-scheur-2-breed-donker.webp?v=ae07cae577); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-scheur-3-breed-donker.webp?v=219874ba01); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-scheur-4-breed-donker.webp?v=fe4409d43b); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-scheur-5-breed-donker.webp?v=aacb899d66); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-scheur-6-breed-donker.webp?v=317aa8fa21); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-scheur-7-breed-donker.webp?v=48bc186e11); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-scheur-8-breed-donker.webp?v=a045e9db62); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-scheur-9-breed-donker.webp?v=7fdc453c73); }
}
:root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-scheur-1-breed-donker.webp?v=d54ac8b254); }
:root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-scheur-2-breed-donker.webp?v=ae07cae577); }
:root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-scheur-3-breed-donker.webp?v=219874ba01); }
:root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-scheur-4-breed-donker.webp?v=fe4409d43b); }
:root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-scheur-5-breed-donker.webp?v=aacb899d66); }
:root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-scheur-6-breed-donker.webp?v=317aa8fa21); }
:root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-scheur-7-breed-donker.webp?v=48bc186e11); }
:root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-scheur-8-breed-donker.webp?v=a045e9db62); }
:root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-scheur-9-breed-donker.webp?v=7fdc453c73); }
@media (prefers-color-scheme: dark) and (max-aspect-ratio: 4/5) {
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-scheur-1-smal-donker.webp?v=d37d8a6b44); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-scheur-2-smal-donker.webp?v=7fb29000eb); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-scheur-3-smal-donker.webp?v=20999d053b); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-scheur-4-smal-donker.webp?v=7d7c0d7844); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-scheur-5-smal-donker.webp?v=3f34315a8d); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-scheur-6-smal-donker.webp?v=81871baa8c); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-scheur-7-smal-donker.webp?v=ed6e0d663b); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-scheur-8-smal-donker.webp?v=ba63418256); }
  :root:not([data-modus=licht])[data-404="1"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-scheur-9-smal-donker.webp?v=1ab300c88a); }
}
@media (max-aspect-ratio: 4/5) {
  :root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-scheur-1-smal-donker.webp?v=d37d8a6b44); }
  :root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-scheur-2-smal-donker.webp?v=7fb29000eb); }
  :root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-scheur-3-smal-donker.webp?v=20999d053b); }
  :root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-scheur-4-smal-donker.webp?v=7d7c0d7844); }
  :root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-scheur-5-smal-donker.webp?v=3f34315a8d); }
  :root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-scheur-6-smal-donker.webp?v=81871baa8c); }
  :root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-scheur-7-smal-donker.webp?v=ed6e0d663b); }
  :root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-scheur-8-smal-donker.webp?v=ba63418256); }
  :root[data-modus=donker][data-404="1"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-scheur-9-smal-donker.webp?v=1ab300c88a); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-404="1"] .verdwaald-film i:nth-child(2) { animation: v404-1-2 2000ms step-end infinite; }
  :root[data-404="1"] .verdwaald-film i:nth-child(3) { animation: v404-1-3 2000ms step-end infinite; }
  :root[data-404="1"] .verdwaald-film i:nth-child(4) { animation: v404-1-4 2000ms step-end infinite; }
  :root[data-404="1"] .verdwaald-film i:nth-child(5) { animation: v404-1-5 2000ms step-end infinite; }
  :root[data-404="1"] .verdwaald-film i:nth-child(6) { animation: v404-1-6 2000ms step-end infinite; }
  :root[data-404="1"] .verdwaald-film i:nth-child(7) { animation: v404-1-7 2000ms step-end infinite; }
  :root[data-404="1"] .verdwaald-film i:nth-child(8) { animation: v404-1-8 2000ms step-end infinite; }
  :root[data-404="1"] .verdwaald-film i:nth-child(9) { animation: v404-1-9 2000ms step-end infinite; }
}
@keyframes v404-1-2 { 0% { visibility: hidden; } 6.25% { visibility: visible; } 12.5% { visibility: hidden; } 93.75% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes v404-1-3 { 0% { visibility: hidden; } 12.5% { visibility: visible; } 18.75% { visibility: hidden; } 87.5% { visibility: visible; } 93.75% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-1-4 { 0% { visibility: hidden; } 18.75% { visibility: visible; } 25% { visibility: hidden; } 81.25% { visibility: visible; } 87.5% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-1-5 { 0% { visibility: hidden; } 25% { visibility: visible; } 31.25% { visibility: hidden; } 75% { visibility: visible; } 81.25% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-1-6 { 0% { visibility: hidden; } 31.25% { visibility: visible; } 37.5% { visibility: hidden; } 68.75% { visibility: visible; } 75% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-1-7 { 0% { visibility: hidden; } 37.5% { visibility: visible; } 43.75% { visibility: hidden; } 62.5% { visibility: visible; } 68.75% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-1-8 { 0% { visibility: hidden; } 43.75% { visibility: visible; } 50% { visibility: hidden; } 56.25% { visibility: visible; } 62.5% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-1-9 { 0% { visibility: hidden; } 50% { visibility: visible; } 56.25% { visibility: hidden; } 100% { visibility: hidden; } }
:root[data-404="1"] .verdwaald-film i:nth-child(n+10) { display: none; }
/* laag: 8 frames, 8 a second, the loop 14 steps */
:root[data-404="2"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-laag-1-breed.webp?v=05234b3dd0); }
:root[data-404="2"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-laag-2-breed.webp?v=bc88485b03); }
:root[data-404="2"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-laag-3-breed.webp?v=3a43ca901b); }
:root[data-404="2"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-laag-4-breed.webp?v=ec3282fb58); }
:root[data-404="2"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-laag-5-breed.webp?v=a7569c7c0e); }
:root[data-404="2"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-laag-6-breed.webp?v=2c77c6f9e3); }
:root[data-404="2"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-laag-7-breed.webp?v=f0e13c2cee); }
:root[data-404="2"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-laag-8-breed.webp?v=3ef2dd5834); }
@media (max-aspect-ratio: 4/5) {
  :root[data-404="2"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-laag-1-smal.webp?v=9011e246b6); }
  :root[data-404="2"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-laag-2-smal.webp?v=2c2db7cc79); }
  :root[data-404="2"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-laag-3-smal.webp?v=bb4969611d); }
  :root[data-404="2"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-laag-4-smal.webp?v=8e35c62f11); }
  :root[data-404="2"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-laag-5-smal.webp?v=5e35ede9fd); }
  :root[data-404="2"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-laag-6-smal.webp?v=9be219cd24); }
  :root[data-404="2"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-laag-7-smal.webp?v=6b92f88359); }
  :root[data-404="2"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-laag-8-smal.webp?v=3cac7aa493); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-laag-1-breed-donker.webp?v=eaa7eabcdd); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-laag-2-breed-donker.webp?v=20e93ef0d9); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-laag-3-breed-donker.webp?v=2cf0f0bf15); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-laag-4-breed-donker.webp?v=8ecf9c9e8b); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-laag-5-breed-donker.webp?v=0e745fb029); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-laag-6-breed-donker.webp?v=82d2e943ce); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-laag-7-breed-donker.webp?v=fa7c3ab76a); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-laag-8-breed-donker.webp?v=acee2988d1); }
}
:root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-laag-1-breed-donker.webp?v=eaa7eabcdd); }
:root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-laag-2-breed-donker.webp?v=20e93ef0d9); }
:root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-laag-3-breed-donker.webp?v=2cf0f0bf15); }
:root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-laag-4-breed-donker.webp?v=8ecf9c9e8b); }
:root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-laag-5-breed-donker.webp?v=0e745fb029); }
:root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-laag-6-breed-donker.webp?v=82d2e943ce); }
:root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-laag-7-breed-donker.webp?v=fa7c3ab76a); }
:root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-laag-8-breed-donker.webp?v=acee2988d1); }
@media (prefers-color-scheme: dark) and (max-aspect-ratio: 4/5) {
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-laag-1-smal-donker.webp?v=dbf6dd0305); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-laag-2-smal-donker.webp?v=a691bae21f); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-laag-3-smal-donker.webp?v=175300b70e); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-laag-4-smal-donker.webp?v=4150655b48); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-laag-5-smal-donker.webp?v=3f8b05f813); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-laag-6-smal-donker.webp?v=500479b760); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-laag-7-smal-donker.webp?v=1fc8b813d0); }
  :root:not([data-modus=licht])[data-404="2"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-laag-8-smal-donker.webp?v=ce991514ed); }
}
@media (max-aspect-ratio: 4/5) {
  :root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-laag-1-smal-donker.webp?v=dbf6dd0305); }
  :root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-laag-2-smal-donker.webp?v=a691bae21f); }
  :root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-laag-3-smal-donker.webp?v=175300b70e); }
  :root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-laag-4-smal-donker.webp?v=4150655b48); }
  :root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-laag-5-smal-donker.webp?v=3f8b05f813); }
  :root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-laag-6-smal-donker.webp?v=500479b760); }
  :root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-laag-7-smal-donker.webp?v=1fc8b813d0); }
  :root[data-modus=donker][data-404="2"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-laag-8-smal-donker.webp?v=ce991514ed); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-404="2"] .verdwaald-film i:nth-child(2) { animation: v404-2-2 1750ms step-end infinite; }
  :root[data-404="2"] .verdwaald-film i:nth-child(3) { animation: v404-2-3 1750ms step-end infinite; }
  :root[data-404="2"] .verdwaald-film i:nth-child(4) { animation: v404-2-4 1750ms step-end infinite; }
  :root[data-404="2"] .verdwaald-film i:nth-child(5) { animation: v404-2-5 1750ms step-end infinite; }
  :root[data-404="2"] .verdwaald-film i:nth-child(6) { animation: v404-2-6 1750ms step-end infinite; }
  :root[data-404="2"] .verdwaald-film i:nth-child(7) { animation: v404-2-7 1750ms step-end infinite; }
  :root[data-404="2"] .verdwaald-film i:nth-child(8) { animation: v404-2-8 1750ms step-end infinite; }
}
@keyframes v404-2-2 { 0% { visibility: hidden; } 7.14286% { visibility: visible; } 14.2857% { visibility: hidden; } 92.8571% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes v404-2-3 { 0% { visibility: hidden; } 14.2857% { visibility: visible; } 21.4286% { visibility: hidden; } 85.7143% { visibility: visible; } 92.8571% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-2-4 { 0% { visibility: hidden; } 21.4286% { visibility: visible; } 28.5714% { visibility: hidden; } 78.5714% { visibility: visible; } 85.7143% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-2-5 { 0% { visibility: hidden; } 28.5714% { visibility: visible; } 35.7143% { visibility: hidden; } 71.4286% { visibility: visible; } 78.5714% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-2-6 { 0% { visibility: hidden; } 35.7143% { visibility: visible; } 42.8571% { visibility: hidden; } 64.2857% { visibility: visible; } 71.4286% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-2-7 { 0% { visibility: hidden; } 42.8571% { visibility: visible; } 50% { visibility: hidden; } 57.1429% { visibility: visible; } 64.2857% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-2-8 { 0% { visibility: hidden; } 50% { visibility: visible; } 57.1429% { visibility: hidden; } 100% { visibility: hidden; } }
:root[data-404="2"] .verdwaald-film i:nth-child(n+9) { display: none; }
/* hand: 8 frames, 8 a second, the loop 14 steps */
:root[data-404="3"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-hand-1-breed.webp?v=814cd6ba6e); }
:root[data-404="3"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-hand-2-breed.webp?v=f70a7a6ae3); }
:root[data-404="3"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-hand-3-breed.webp?v=a98c71e81d); }
:root[data-404="3"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-hand-4-breed.webp?v=38e4471abf); }
:root[data-404="3"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-hand-5-breed.webp?v=2a88ce3d6e); }
:root[data-404="3"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-hand-6-breed.webp?v=14b1d07844); }
:root[data-404="3"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-hand-7-breed.webp?v=935d906a4c); }
:root[data-404="3"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-hand-8-breed.webp?v=c1cd6d16a4); }
@media (max-aspect-ratio: 4/5) {
  :root[data-404="3"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-hand-1-smal.webp?v=ecea6d2924); }
  :root[data-404="3"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-hand-2-smal.webp?v=5cbaffaf53); }
  :root[data-404="3"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-hand-3-smal.webp?v=031754d4cb); }
  :root[data-404="3"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-hand-4-smal.webp?v=38e92d41b2); }
  :root[data-404="3"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-hand-5-smal.webp?v=37132c0fd8); }
  :root[data-404="3"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-hand-6-smal.webp?v=a503cacfa6); }
  :root[data-404="3"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-hand-7-smal.webp?v=51221c588a); }
  :root[data-404="3"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-hand-8-smal.webp?v=3c2299ef8b); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-hand-1-breed-donker.webp?v=814cd6ba6e); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-hand-2-breed-donker.webp?v=f70a7a6ae3); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-hand-3-breed-donker.webp?v=a98c71e81d); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-hand-4-breed-donker.webp?v=38e4471abf); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-hand-5-breed-donker.webp?v=2a88ce3d6e); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-hand-6-breed-donker.webp?v=14b1d07844); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-hand-7-breed-donker.webp?v=935d906a4c); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-hand-8-breed-donker.webp?v=c1cd6d16a4); }
}
:root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-hand-1-breed-donker.webp?v=814cd6ba6e); }
:root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-hand-2-breed-donker.webp?v=f70a7a6ae3); }
:root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-hand-3-breed-donker.webp?v=a98c71e81d); }
:root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-hand-4-breed-donker.webp?v=38e4471abf); }
:root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-hand-5-breed-donker.webp?v=2a88ce3d6e); }
:root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-hand-6-breed-donker.webp?v=14b1d07844); }
:root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-hand-7-breed-donker.webp?v=935d906a4c); }
:root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-hand-8-breed-donker.webp?v=c1cd6d16a4); }
@media (prefers-color-scheme: dark) and (max-aspect-ratio: 4/5) {
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-hand-1-smal-donker.webp?v=ecea6d2924); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-hand-2-smal-donker.webp?v=5cbaffaf53); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-hand-3-smal-donker.webp?v=031754d4cb); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-hand-4-smal-donker.webp?v=38e92d41b2); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-hand-5-smal-donker.webp?v=37132c0fd8); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-hand-6-smal-donker.webp?v=a503cacfa6); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-hand-7-smal-donker.webp?v=51221c588a); }
  :root:not([data-modus=licht])[data-404="3"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-hand-8-smal-donker.webp?v=3c2299ef8b); }
}
@media (max-aspect-ratio: 4/5) {
  :root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-hand-1-smal-donker.webp?v=ecea6d2924); }
  :root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-hand-2-smal-donker.webp?v=5cbaffaf53); }
  :root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-hand-3-smal-donker.webp?v=031754d4cb); }
  :root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-hand-4-smal-donker.webp?v=38e92d41b2); }
  :root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-hand-5-smal-donker.webp?v=37132c0fd8); }
  :root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-hand-6-smal-donker.webp?v=a503cacfa6); }
  :root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-hand-7-smal-donker.webp?v=51221c588a); }
  :root[data-modus=donker][data-404="3"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-hand-8-smal-donker.webp?v=3c2299ef8b); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-404="3"] .verdwaald-film i:nth-child(2) { animation: v404-3-2 1750ms step-end infinite; }
  :root[data-404="3"] .verdwaald-film i:nth-child(3) { animation: v404-3-3 1750ms step-end infinite; }
  :root[data-404="3"] .verdwaald-film i:nth-child(4) { animation: v404-3-4 1750ms step-end infinite; }
  :root[data-404="3"] .verdwaald-film i:nth-child(5) { animation: v404-3-5 1750ms step-end infinite; }
  :root[data-404="3"] .verdwaald-film i:nth-child(6) { animation: v404-3-6 1750ms step-end infinite; }
  :root[data-404="3"] .verdwaald-film i:nth-child(7) { animation: v404-3-7 1750ms step-end infinite; }
  :root[data-404="3"] .verdwaald-film i:nth-child(8) { animation: v404-3-8 1750ms step-end infinite; }
}
@keyframes v404-3-2 { 0% { visibility: hidden; } 7.14286% { visibility: visible; } 14.2857% { visibility: hidden; } 92.8571% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes v404-3-3 { 0% { visibility: hidden; } 14.2857% { visibility: visible; } 21.4286% { visibility: hidden; } 85.7143% { visibility: visible; } 92.8571% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-3-4 { 0% { visibility: hidden; } 21.4286% { visibility: visible; } 28.5714% { visibility: hidden; } 78.5714% { visibility: visible; } 85.7143% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-3-5 { 0% { visibility: hidden; } 28.5714% { visibility: visible; } 35.7143% { visibility: hidden; } 71.4286% { visibility: visible; } 78.5714% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-3-6 { 0% { visibility: hidden; } 35.7143% { visibility: visible; } 42.8571% { visibility: hidden; } 64.2857% { visibility: visible; } 71.4286% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-3-7 { 0% { visibility: hidden; } 42.8571% { visibility: visible; } 50% { visibility: hidden; } 57.1429% { visibility: visible; } 64.2857% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-3-8 { 0% { visibility: hidden; } 50% { visibility: visible; } 57.1429% { visibility: hidden; } 100% { visibility: hidden; } }
:root[data-404="3"] .verdwaald-film i:nth-child(n+9) { display: none; }
/* prop: 16 frames, 8 a second, the loop 30 steps */
:root[data-404="4"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-prop-1-breed.webp?v=c0dcfb3ce5); }
:root[data-404="4"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-prop-2-breed.webp?v=c42edc7264); }
:root[data-404="4"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-prop-3-breed.webp?v=c49b13f8dc); }
:root[data-404="4"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-prop-4-breed.webp?v=cecfc1a35d); }
:root[data-404="4"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-prop-5-breed.webp?v=a0235f56a3); }
:root[data-404="4"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-prop-6-breed.webp?v=cb1e4237d7); }
:root[data-404="4"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-prop-7-breed.webp?v=fbdbac7359); }
:root[data-404="4"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-prop-8-breed.webp?v=b5f76f61c3); }
:root[data-404="4"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-prop-9-breed.webp?v=3417f448fe); }
:root[data-404="4"] .verdwaald-film i:nth-child(10) { background-image: url(/kunst/404-prop-10-breed.webp?v=986c0e43ce); }
:root[data-404="4"] .verdwaald-film i:nth-child(11) { background-image: url(/kunst/404-prop-11-breed.webp?v=6524aec157); }
:root[data-404="4"] .verdwaald-film i:nth-child(12) { background-image: url(/kunst/404-prop-12-breed.webp?v=4789635685); }
:root[data-404="4"] .verdwaald-film i:nth-child(13) { background-image: url(/kunst/404-prop-13-breed.webp?v=14011309be); }
:root[data-404="4"] .verdwaald-film i:nth-child(14) { background-image: url(/kunst/404-prop-14-breed.webp?v=609e3fef97); }
:root[data-404="4"] .verdwaald-film i:nth-child(15) { background-image: url(/kunst/404-prop-15-breed.webp?v=682fd672a1); }
:root[data-404="4"] .verdwaald-film i:nth-child(16) { background-image: url(/kunst/404-prop-16-breed.webp?v=91bef63e8b); }
@media (max-aspect-ratio: 4/5) {
  :root[data-404="4"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-prop-1-smal.webp?v=48ebe35383); }
  :root[data-404="4"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-prop-2-smal.webp?v=d1d431fca9); }
  :root[data-404="4"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-prop-3-smal.webp?v=d8b22551d9); }
  :root[data-404="4"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-prop-4-smal.webp?v=6623244389); }
  :root[data-404="4"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-prop-5-smal.webp?v=21959bf75c); }
  :root[data-404="4"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-prop-6-smal.webp?v=548e5bf829); }
  :root[data-404="4"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-prop-7-smal.webp?v=f87e660bf2); }
  :root[data-404="4"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-prop-8-smal.webp?v=a5370dbafd); }
  :root[data-404="4"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-prop-9-smal.webp?v=33058785cd); }
  :root[data-404="4"] .verdwaald-film i:nth-child(10) { background-image: url(/kunst/404-prop-10-smal.webp?v=2953d01b25); }
  :root[data-404="4"] .verdwaald-film i:nth-child(11) { background-image: url(/kunst/404-prop-11-smal.webp?v=dbf92696de); }
  :root[data-404="4"] .verdwaald-film i:nth-child(12) { background-image: url(/kunst/404-prop-12-smal.webp?v=bae8b31d51); }
  :root[data-404="4"] .verdwaald-film i:nth-child(13) { background-image: url(/kunst/404-prop-13-smal.webp?v=428afa89b1); }
  :root[data-404="4"] .verdwaald-film i:nth-child(14) { background-image: url(/kunst/404-prop-14-smal.webp?v=3fa4d8645f); }
  :root[data-404="4"] .verdwaald-film i:nth-child(15) { background-image: url(/kunst/404-prop-15-smal.webp?v=04f1337cff); }
  :root[data-404="4"] .verdwaald-film i:nth-child(16) { background-image: url(/kunst/404-prop-16-smal.webp?v=aa5c6aedb3); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-prop-1-breed-donker.webp?v=c0dcfb3ce5); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-prop-2-breed-donker.webp?v=c42edc7264); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-prop-3-breed-donker.webp?v=c49b13f8dc); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-prop-4-breed-donker.webp?v=cecfc1a35d); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-prop-5-breed-donker.webp?v=a0235f56a3); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-prop-6-breed-donker.webp?v=cb1e4237d7); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-prop-7-breed-donker.webp?v=fbdbac7359); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-prop-8-breed-donker.webp?v=b5f76f61c3); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-prop-9-breed-donker.webp?v=3417f448fe); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(10) { background-image: url(/kunst/404-prop-10-breed-donker.webp?v=986c0e43ce); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(11) { background-image: url(/kunst/404-prop-11-breed-donker.webp?v=6524aec157); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(12) { background-image: url(/kunst/404-prop-12-breed-donker.webp?v=4789635685); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(13) { background-image: url(/kunst/404-prop-13-breed-donker.webp?v=14011309be); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(14) { background-image: url(/kunst/404-prop-14-breed-donker.webp?v=609e3fef97); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(15) { background-image: url(/kunst/404-prop-15-breed-donker.webp?v=682fd672a1); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(16) { background-image: url(/kunst/404-prop-16-breed-donker.webp?v=91bef63e8b); }
}
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-prop-1-breed-donker.webp?v=c0dcfb3ce5); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-prop-2-breed-donker.webp?v=c42edc7264); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-prop-3-breed-donker.webp?v=c49b13f8dc); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-prop-4-breed-donker.webp?v=cecfc1a35d); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-prop-5-breed-donker.webp?v=a0235f56a3); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-prop-6-breed-donker.webp?v=cb1e4237d7); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-prop-7-breed-donker.webp?v=fbdbac7359); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-prop-8-breed-donker.webp?v=b5f76f61c3); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-prop-9-breed-donker.webp?v=3417f448fe); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(10) { background-image: url(/kunst/404-prop-10-breed-donker.webp?v=986c0e43ce); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(11) { background-image: url(/kunst/404-prop-11-breed-donker.webp?v=6524aec157); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(12) { background-image: url(/kunst/404-prop-12-breed-donker.webp?v=4789635685); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(13) { background-image: url(/kunst/404-prop-13-breed-donker.webp?v=14011309be); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(14) { background-image: url(/kunst/404-prop-14-breed-donker.webp?v=609e3fef97); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(15) { background-image: url(/kunst/404-prop-15-breed-donker.webp?v=682fd672a1); }
:root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(16) { background-image: url(/kunst/404-prop-16-breed-donker.webp?v=91bef63e8b); }
@media (prefers-color-scheme: dark) and (max-aspect-ratio: 4/5) {
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-prop-1-smal-donker.webp?v=48ebe35383); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-prop-2-smal-donker.webp?v=d1d431fca9); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-prop-3-smal-donker.webp?v=d8b22551d9); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-prop-4-smal-donker.webp?v=6623244389); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-prop-5-smal-donker.webp?v=21959bf75c); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-prop-6-smal-donker.webp?v=548e5bf829); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-prop-7-smal-donker.webp?v=f87e660bf2); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-prop-8-smal-donker.webp?v=a5370dbafd); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-prop-9-smal-donker.webp?v=33058785cd); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(10) { background-image: url(/kunst/404-prop-10-smal-donker.webp?v=2953d01b25); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(11) { background-image: url(/kunst/404-prop-11-smal-donker.webp?v=dbf92696de); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(12) { background-image: url(/kunst/404-prop-12-smal-donker.webp?v=bae8b31d51); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(13) { background-image: url(/kunst/404-prop-13-smal-donker.webp?v=428afa89b1); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(14) { background-image: url(/kunst/404-prop-14-smal-donker.webp?v=3fa4d8645f); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(15) { background-image: url(/kunst/404-prop-15-smal-donker.webp?v=04f1337cff); }
  :root:not([data-modus=licht])[data-404="4"] .verdwaald-film i:nth-child(16) { background-image: url(/kunst/404-prop-16-smal-donker.webp?v=aa5c6aedb3); }
}
@media (max-aspect-ratio: 4/5) {
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-prop-1-smal-donker.webp?v=48ebe35383); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-prop-2-smal-donker.webp?v=d1d431fca9); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-prop-3-smal-donker.webp?v=d8b22551d9); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-prop-4-smal-donker.webp?v=6623244389); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-prop-5-smal-donker.webp?v=21959bf75c); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-prop-6-smal-donker.webp?v=548e5bf829); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-prop-7-smal-donker.webp?v=f87e660bf2); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-prop-8-smal-donker.webp?v=a5370dbafd); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-prop-9-smal-donker.webp?v=33058785cd); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(10) { background-image: url(/kunst/404-prop-10-smal-donker.webp?v=2953d01b25); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(11) { background-image: url(/kunst/404-prop-11-smal-donker.webp?v=dbf92696de); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(12) { background-image: url(/kunst/404-prop-12-smal-donker.webp?v=bae8b31d51); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(13) { background-image: url(/kunst/404-prop-13-smal-donker.webp?v=428afa89b1); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(14) { background-image: url(/kunst/404-prop-14-smal-donker.webp?v=3fa4d8645f); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(15) { background-image: url(/kunst/404-prop-15-smal-donker.webp?v=04f1337cff); }
  :root[data-modus=donker][data-404="4"] .verdwaald-film i:nth-child(16) { background-image: url(/kunst/404-prop-16-smal-donker.webp?v=aa5c6aedb3); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-404="4"] .verdwaald-film i:nth-child(2) { animation: v404-4-2 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(3) { animation: v404-4-3 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(4) { animation: v404-4-4 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(5) { animation: v404-4-5 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(6) { animation: v404-4-6 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(7) { animation: v404-4-7 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(8) { animation: v404-4-8 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(9) { animation: v404-4-9 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(10) { animation: v404-4-10 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(11) { animation: v404-4-11 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(12) { animation: v404-4-12 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(13) { animation: v404-4-13 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(14) { animation: v404-4-14 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(15) { animation: v404-4-15 3750ms step-end infinite; }
  :root[data-404="4"] .verdwaald-film i:nth-child(16) { animation: v404-4-16 3750ms step-end infinite; }
}
@keyframes v404-4-2 { 0% { visibility: hidden; } 3.33333% { visibility: visible; } 6.66667% { visibility: hidden; } 96.6667% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes v404-4-3 { 0% { visibility: hidden; } 6.66667% { visibility: visible; } 10% { visibility: hidden; } 93.3333% { visibility: visible; } 96.6667% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-4 { 0% { visibility: hidden; } 10% { visibility: visible; } 13.3333% { visibility: hidden; } 90% { visibility: visible; } 93.3333% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-5 { 0% { visibility: hidden; } 13.3333% { visibility: visible; } 16.6667% { visibility: hidden; } 86.6667% { visibility: visible; } 90% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-6 { 0% { visibility: hidden; } 16.6667% { visibility: visible; } 20% { visibility: hidden; } 83.3333% { visibility: visible; } 86.6667% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-7 { 0% { visibility: hidden; } 20% { visibility: visible; } 23.3333% { visibility: hidden; } 80% { visibility: visible; } 83.3333% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-8 { 0% { visibility: hidden; } 23.3333% { visibility: visible; } 26.6667% { visibility: hidden; } 76.6667% { visibility: visible; } 80% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-9 { 0% { visibility: hidden; } 26.6667% { visibility: visible; } 30% { visibility: hidden; } 73.3333% { visibility: visible; } 76.6667% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-10 { 0% { visibility: hidden; } 30% { visibility: visible; } 33.3333% { visibility: hidden; } 70% { visibility: visible; } 73.3333% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-11 { 0% { visibility: hidden; } 33.3333% { visibility: visible; } 36.6667% { visibility: hidden; } 66.6667% { visibility: visible; } 70% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-12 { 0% { visibility: hidden; } 36.6667% { visibility: visible; } 40% { visibility: hidden; } 63.3333% { visibility: visible; } 66.6667% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-13 { 0% { visibility: hidden; } 40% { visibility: visible; } 43.3333% { visibility: hidden; } 60% { visibility: visible; } 63.3333% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-14 { 0% { visibility: hidden; } 43.3333% { visibility: visible; } 46.6667% { visibility: hidden; } 56.6667% { visibility: visible; } 60% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-15 { 0% { visibility: hidden; } 46.6667% { visibility: visible; } 50% { visibility: hidden; } 53.3333% { visibility: visible; } 56.6667% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-4-16 { 0% { visibility: hidden; } 50% { visibility: visible; } 53.3333% { visibility: hidden; } 100% { visibility: hidden; } }
:root[data-404="4"] .verdwaald-film i:nth-child(n+17) { display: none; }
/* kaartjes: 9 frames, 8 a second, the loop 16 steps */
:root[data-404="5"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-kaartjes-1-breed.webp?v=277f91fa48); }
:root[data-404="5"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-kaartjes-2-breed.webp?v=0d1d8833a9); }
:root[data-404="5"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-kaartjes-3-breed.webp?v=8b5bdfa6e3); }
:root[data-404="5"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-kaartjes-4-breed.webp?v=63756fa69e); }
:root[data-404="5"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-kaartjes-5-breed.webp?v=1b512ac63c); }
:root[data-404="5"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-kaartjes-6-breed.webp?v=91c9162b02); }
:root[data-404="5"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-kaartjes-7-breed.webp?v=4b8b6cff44); }
:root[data-404="5"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-kaartjes-8-breed.webp?v=fec9317382); }
:root[data-404="5"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-kaartjes-9-breed.webp?v=aa8fece3ea); }
@media (max-aspect-ratio: 4/5) {
  :root[data-404="5"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-kaartjes-1-smal.webp?v=c16f8aee3e); }
  :root[data-404="5"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-kaartjes-2-smal.webp?v=8d1be9de80); }
  :root[data-404="5"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-kaartjes-3-smal.webp?v=676ecf6c67); }
  :root[data-404="5"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-kaartjes-4-smal.webp?v=b6290768d5); }
  :root[data-404="5"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-kaartjes-5-smal.webp?v=8e34c47a67); }
  :root[data-404="5"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-kaartjes-6-smal.webp?v=bba2a74150); }
  :root[data-404="5"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-kaartjes-7-smal.webp?v=e4f7bf0104); }
  :root[data-404="5"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-kaartjes-8-smal.webp?v=8483c3e67c); }
  :root[data-404="5"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-kaartjes-9-smal.webp?v=608cfddb2f); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-kaartjes-1-breed-donker.webp?v=277f91fa48); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-kaartjes-2-breed-donker.webp?v=0d1d8833a9); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-kaartjes-3-breed-donker.webp?v=8b5bdfa6e3); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-kaartjes-4-breed-donker.webp?v=63756fa69e); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-kaartjes-5-breed-donker.webp?v=1b512ac63c); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-kaartjes-6-breed-donker.webp?v=91c9162b02); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-kaartjes-7-breed-donker.webp?v=4b8b6cff44); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-kaartjes-8-breed-donker.webp?v=fec9317382); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-kaartjes-9-breed-donker.webp?v=aa8fece3ea); }
}
:root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-kaartjes-1-breed-donker.webp?v=277f91fa48); }
:root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-kaartjes-2-breed-donker.webp?v=0d1d8833a9); }
:root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-kaartjes-3-breed-donker.webp?v=8b5bdfa6e3); }
:root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-kaartjes-4-breed-donker.webp?v=63756fa69e); }
:root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-kaartjes-5-breed-donker.webp?v=1b512ac63c); }
:root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-kaartjes-6-breed-donker.webp?v=91c9162b02); }
:root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-kaartjes-7-breed-donker.webp?v=4b8b6cff44); }
:root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-kaartjes-8-breed-donker.webp?v=fec9317382); }
:root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-kaartjes-9-breed-donker.webp?v=aa8fece3ea); }
@media (prefers-color-scheme: dark) and (max-aspect-ratio: 4/5) {
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-kaartjes-1-smal-donker.webp?v=c16f8aee3e); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-kaartjes-2-smal-donker.webp?v=8d1be9de80); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-kaartjes-3-smal-donker.webp?v=676ecf6c67); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-kaartjes-4-smal-donker.webp?v=b6290768d5); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-kaartjes-5-smal-donker.webp?v=8e34c47a67); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-kaartjes-6-smal-donker.webp?v=bba2a74150); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-kaartjes-7-smal-donker.webp?v=e4f7bf0104); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-kaartjes-8-smal-donker.webp?v=8483c3e67c); }
  :root:not([data-modus=licht])[data-404="5"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-kaartjes-9-smal-donker.webp?v=608cfddb2f); }
}
@media (max-aspect-ratio: 4/5) {
  :root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-kaartjes-1-smal-donker.webp?v=c16f8aee3e); }
  :root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-kaartjes-2-smal-donker.webp?v=8d1be9de80); }
  :root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-kaartjes-3-smal-donker.webp?v=676ecf6c67); }
  :root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-kaartjes-4-smal-donker.webp?v=b6290768d5); }
  :root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-kaartjes-5-smal-donker.webp?v=8e34c47a67); }
  :root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-kaartjes-6-smal-donker.webp?v=bba2a74150); }
  :root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-kaartjes-7-smal-donker.webp?v=e4f7bf0104); }
  :root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(8) { background-image: url(/kunst/404-kaartjes-8-smal-donker.webp?v=8483c3e67c); }
  :root[data-modus=donker][data-404="5"] .verdwaald-film i:nth-child(9) { background-image: url(/kunst/404-kaartjes-9-smal-donker.webp?v=608cfddb2f); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-404="5"] .verdwaald-film i:nth-child(2) { animation: v404-5-2 2000ms step-end infinite; }
  :root[data-404="5"] .verdwaald-film i:nth-child(3) { animation: v404-5-3 2000ms step-end infinite; }
  :root[data-404="5"] .verdwaald-film i:nth-child(4) { animation: v404-5-4 2000ms step-end infinite; }
  :root[data-404="5"] .verdwaald-film i:nth-child(5) { animation: v404-5-5 2000ms step-end infinite; }
  :root[data-404="5"] .verdwaald-film i:nth-child(6) { animation: v404-5-6 2000ms step-end infinite; }
  :root[data-404="5"] .verdwaald-film i:nth-child(7) { animation: v404-5-7 2000ms step-end infinite; }
  :root[data-404="5"] .verdwaald-film i:nth-child(8) { animation: v404-5-8 2000ms step-end infinite; }
  :root[data-404="5"] .verdwaald-film i:nth-child(9) { animation: v404-5-9 2000ms step-end infinite; }
}
@keyframes v404-5-2 { 0% { visibility: hidden; } 6.25% { visibility: visible; } 12.5% { visibility: hidden; } 93.75% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes v404-5-3 { 0% { visibility: hidden; } 12.5% { visibility: visible; } 18.75% { visibility: hidden; } 87.5% { visibility: visible; } 93.75% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-5-4 { 0% { visibility: hidden; } 18.75% { visibility: visible; } 25% { visibility: hidden; } 81.25% { visibility: visible; } 87.5% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-5-5 { 0% { visibility: hidden; } 25% { visibility: visible; } 31.25% { visibility: hidden; } 75% { visibility: visible; } 81.25% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-5-6 { 0% { visibility: hidden; } 31.25% { visibility: visible; } 37.5% { visibility: hidden; } 68.75% { visibility: visible; } 75% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-5-7 { 0% { visibility: hidden; } 37.5% { visibility: visible; } 43.75% { visibility: hidden; } 62.5% { visibility: visible; } 68.75% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-5-8 { 0% { visibility: hidden; } 43.75% { visibility: visible; } 50% { visibility: hidden; } 56.25% { visibility: visible; } 62.5% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-5-9 { 0% { visibility: hidden; } 50% { visibility: visible; } 56.25% { visibility: hidden; } 100% { visibility: hidden; } }
:root[data-404="5"] .verdwaald-film i:nth-child(n+10) { display: none; }
/* stapel: 7 frames, 8 a second, the loop 12 steps */
:root[data-404="6"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-stapel-1-breed.webp?v=9ecb76a505); }
:root[data-404="6"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-stapel-2-breed.webp?v=65828a5674); }
:root[data-404="6"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-stapel-3-breed.webp?v=5037db07ec); }
:root[data-404="6"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-stapel-4-breed.webp?v=3ab5be16eb); }
:root[data-404="6"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-stapel-5-breed.webp?v=00a9aa22a1); }
:root[data-404="6"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-stapel-6-breed.webp?v=607d4c7f50); }
:root[data-404="6"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-stapel-7-breed.webp?v=f8820a8699); }
@media (max-aspect-ratio: 4/5) {
  :root[data-404="6"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-stapel-1-smal.webp?v=9b85846f05); }
  :root[data-404="6"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-stapel-2-smal.webp?v=38bd784b0d); }
  :root[data-404="6"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-stapel-3-smal.webp?v=fbf4fec521); }
  :root[data-404="6"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-stapel-4-smal.webp?v=a9b0612b60); }
  :root[data-404="6"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-stapel-5-smal.webp?v=56a243cfcd); }
  :root[data-404="6"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-stapel-6-smal.webp?v=15adab3dcc); }
  :root[data-404="6"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-stapel-7-smal.webp?v=b98b5331be); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-stapel-1-breed-donker.webp?v=9ecb76a505); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-stapel-2-breed-donker.webp?v=65828a5674); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-stapel-3-breed-donker.webp?v=5037db07ec); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-stapel-4-breed-donker.webp?v=3ab5be16eb); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-stapel-5-breed-donker.webp?v=00a9aa22a1); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-stapel-6-breed-donker.webp?v=607d4c7f50); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-stapel-7-breed-donker.webp?v=f8820a8699); }
}
:root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-stapel-1-breed-donker.webp?v=9ecb76a505); }
:root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-stapel-2-breed-donker.webp?v=65828a5674); }
:root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-stapel-3-breed-donker.webp?v=5037db07ec); }
:root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-stapel-4-breed-donker.webp?v=3ab5be16eb); }
:root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-stapel-5-breed-donker.webp?v=00a9aa22a1); }
:root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-stapel-6-breed-donker.webp?v=607d4c7f50); }
:root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-stapel-7-breed-donker.webp?v=f8820a8699); }
@media (prefers-color-scheme: dark) and (max-aspect-ratio: 4/5) {
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-stapel-1-smal-donker.webp?v=9b85846f05); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-stapel-2-smal-donker.webp?v=38bd784b0d); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-stapel-3-smal-donker.webp?v=fbf4fec521); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-stapel-4-smal-donker.webp?v=a9b0612b60); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-stapel-5-smal-donker.webp?v=56a243cfcd); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-stapel-6-smal-donker.webp?v=15adab3dcc); }
  :root:not([data-modus=licht])[data-404="6"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-stapel-7-smal-donker.webp?v=b98b5331be); }
}
@media (max-aspect-ratio: 4/5) {
  :root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(1) { background-image: url(/kunst/404-stapel-1-smal-donker.webp?v=9b85846f05); }
  :root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(2) { background-image: url(/kunst/404-stapel-2-smal-donker.webp?v=38bd784b0d); }
  :root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(3) { background-image: url(/kunst/404-stapel-3-smal-donker.webp?v=fbf4fec521); }
  :root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(4) { background-image: url(/kunst/404-stapel-4-smal-donker.webp?v=a9b0612b60); }
  :root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(5) { background-image: url(/kunst/404-stapel-5-smal-donker.webp?v=56a243cfcd); }
  :root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(6) { background-image: url(/kunst/404-stapel-6-smal-donker.webp?v=15adab3dcc); }
  :root[data-modus=donker][data-404="6"] .verdwaald-film i:nth-child(7) { background-image: url(/kunst/404-stapel-7-smal-donker.webp?v=b98b5331be); }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-404="6"] .verdwaald-film i:nth-child(2) { animation: v404-6-2 1500ms step-end infinite; }
  :root[data-404="6"] .verdwaald-film i:nth-child(3) { animation: v404-6-3 1500ms step-end infinite; }
  :root[data-404="6"] .verdwaald-film i:nth-child(4) { animation: v404-6-4 1500ms step-end infinite; }
  :root[data-404="6"] .verdwaald-film i:nth-child(5) { animation: v404-6-5 1500ms step-end infinite; }
  :root[data-404="6"] .verdwaald-film i:nth-child(6) { animation: v404-6-6 1500ms step-end infinite; }
  :root[data-404="6"] .verdwaald-film i:nth-child(7) { animation: v404-6-7 1500ms step-end infinite; }
}
@keyframes v404-6-2 { 0% { visibility: hidden; } 8.33333% { visibility: visible; } 16.6667% { visibility: hidden; } 91.6667% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes v404-6-3 { 0% { visibility: hidden; } 16.6667% { visibility: visible; } 25% { visibility: hidden; } 83.3333% { visibility: visible; } 91.6667% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-6-4 { 0% { visibility: hidden; } 25% { visibility: visible; } 33.3333% { visibility: hidden; } 75% { visibility: visible; } 83.3333% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-6-5 { 0% { visibility: hidden; } 33.3333% { visibility: visible; } 41.6667% { visibility: hidden; } 66.6667% { visibility: visible; } 75% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-6-6 { 0% { visibility: hidden; } 41.6667% { visibility: visible; } 50% { visibility: hidden; } 58.3333% { visibility: visible; } 66.6667% { visibility: hidden; } 100% { visibility: hidden; } }
@keyframes v404-6-7 { 0% { visibility: hidden; } 50% { visibility: visible; } 58.3333% { visibility: hidden; } 100% { visibility: hidden; } }
:root[data-404="6"] .verdwaald-film i:nth-child(n+8) { display: none; }

:root[data-tiny] {
  --tiny-scan-vel: url(/kunst/scan-vel-tiny.webp?v=59e45b3890);
  --tiny-papier: url(/kunst/papier-tiny.webp?v=57fcd757e1);
  --tiny-film: url(/kunst/film-tiny.webp?v=11f5b106d9);
  --tiny-rand-rond-hoek: url(/kunst/rand-rond-hoek-tiny.webp?v=aa6acf09f4);
  --tiny-rand-scheur-hoek: url(/kunst/rand-scheur-hoek-tiny.webp?v=046f38cfa7);
  --tiny-rand-klein-hoek: url(/kunst/rand-klein-hoek-tiny.webp?v=0da6d90471);
  --tiny-rand-rond-boven: url(/kunst/rand-rond-boven-tiny.webp?v=3d14fadee4);
  --tiny-rand-rond-boven-2: url(/kunst/rand-rond-boven-2-tiny.webp?v=4ee387e70e);
  --tiny-rand-rond-boven-3: url(/kunst/rand-rond-boven-3-tiny.webp?v=2af66b9efd);
  --tiny-rand-rond-boven-4: url(/kunst/rand-rond-boven-4-tiny.webp?v=8dbb9c277f);
  --tiny-rand-rond-zij: url(/kunst/rand-rond-zij-tiny.webp?v=cdf818da73);
  --tiny-rand-rond-zij-2: url(/kunst/rand-rond-zij-2-tiny.webp?v=ae47606644);
  --tiny-rand-rond-zij-3: url(/kunst/rand-rond-zij-3-tiny.webp?v=829a6905d7);
  --tiny-rand-rond-zij-4: url(/kunst/rand-rond-zij-4-tiny.webp?v=4fedecf579);
  --tiny-rand-scheur-boven: url(/kunst/rand-scheur-boven-tiny.webp?v=e1624bf4e5);
  --tiny-rand-scheur-boven-2: url(/kunst/rand-scheur-boven-2-tiny.webp?v=713e127eaf);
  --tiny-rand-scheur-boven-3: url(/kunst/rand-scheur-boven-3-tiny.webp?v=0b2693be93);
  --tiny-rand-scheur-boven-4: url(/kunst/rand-scheur-boven-4-tiny.webp?v=dc7b7c4554);
  --tiny-rand-scheur-zij: url(/kunst/rand-scheur-zij-tiny.webp?v=ea0ffc7def);
  --tiny-rand-scheur-zij-2: url(/kunst/rand-scheur-zij-2-tiny.webp?v=3c6266e33a);
  --tiny-rand-scheur-zij-3: url(/kunst/rand-scheur-zij-3-tiny.webp?v=3a60a52096);
  --tiny-rand-scheur-zij-4: url(/kunst/rand-scheur-zij-4-tiny.webp?v=e60a791e43);
  --tiny-rand-klein-boven: url(/kunst/rand-klein-boven-tiny.webp?v=740152ea3b);
  --tiny-rand-klein-boven-2: url(/kunst/rand-klein-boven-2-tiny.webp?v=321ac3b3ef);
  --tiny-rand-klein-boven-3: url(/kunst/rand-klein-boven-3-tiny.webp?v=32334aac57);
  --tiny-rand-klein-boven-4: url(/kunst/rand-klein-boven-4-tiny.webp?v=6d4dd7f7d0);
  --tiny-rand-klein-zij: url(/kunst/rand-klein-zij-tiny.webp?v=8dba5794c9);
  --tiny-rand-klein-zij-2: url(/kunst/rand-klein-zij-2-tiny.webp?v=d34492bf3b);
  --tiny-rand-klein-zij-3: url(/kunst/rand-klein-zij-3-tiny.webp?v=bdb35b06c5);
  --tiny-rand-klein-zij-4: url(/kunst/rand-klein-zij-4-tiny.webp?v=9c33489d56);
  --tiny-scan-vel-donker: url(/kunst/scan-vel-donker-tiny.webp?v=07dd26edfd);
  --tiny-papier-donker: url(/kunst/papier-donker-tiny.webp?v=bab38494ee);
  --tiny-film-donker: url(/kunst/film-donker-tiny.webp?v=29863159dd);
  --tiny-rand-rond-hoek-donker: url(/kunst/rand-rond-hoek-donker-tiny.webp?v=8bae58d84e);
  --tiny-rand-scheur-hoek-donker: url(/kunst/rand-scheur-hoek-donker-tiny.webp?v=201e9f4739);
  --tiny-rand-klein-hoek-donker: url(/kunst/rand-klein-hoek-donker-tiny.webp?v=a6e4a2ce8c);
  --tiny-rand-rond-boven-donker: url(/kunst/rand-rond-boven-donker-tiny.webp?v=6dacfa2684);
  --tiny-rand-rond-boven-2-donker: url(/kunst/rand-rond-boven-2-donker-tiny.webp?v=f3d846d4f2);
  --tiny-rand-rond-boven-3-donker: url(/kunst/rand-rond-boven-3-donker-tiny.webp?v=e56bf810fa);
  --tiny-rand-rond-boven-4-donker: url(/kunst/rand-rond-boven-4-donker-tiny.webp?v=7b59053074);
  --tiny-rand-rond-zij-donker: url(/kunst/rand-rond-zij-donker-tiny.webp?v=d34c877f14);
  --tiny-rand-rond-zij-2-donker: url(/kunst/rand-rond-zij-2-donker-tiny.webp?v=54b0dfc860);
  --tiny-rand-rond-zij-3-donker: url(/kunst/rand-rond-zij-3-donker-tiny.webp?v=e18aa39c2b);
  --tiny-rand-rond-zij-4-donker: url(/kunst/rand-rond-zij-4-donker-tiny.webp?v=76f006077b);
  --tiny-rand-scheur-boven-donker: url(/kunst/rand-scheur-boven-donker-tiny.webp?v=fdfadfaaf3);
  --tiny-rand-scheur-boven-2-donker: url(/kunst/rand-scheur-boven-2-donker-tiny.webp?v=71f9983466);
  --tiny-rand-scheur-boven-3-donker: url(/kunst/rand-scheur-boven-3-donker-tiny.webp?v=e4c7b0de9e);
  --tiny-rand-scheur-boven-4-donker: url(/kunst/rand-scheur-boven-4-donker-tiny.webp?v=da4b89474b);
  --tiny-rand-scheur-zij-donker: url(/kunst/rand-scheur-zij-donker-tiny.webp?v=8234a3d7ed);
  --tiny-rand-scheur-zij-2-donker: url(/kunst/rand-scheur-zij-2-donker-tiny.webp?v=ee7f026764);
  --tiny-rand-scheur-zij-3-donker: url(/kunst/rand-scheur-zij-3-donker-tiny.webp?v=f24680cf5c);
  --tiny-rand-scheur-zij-4-donker: url(/kunst/rand-scheur-zij-4-donker-tiny.webp?v=2bb11ab97f);
  --tiny-rand-klein-boven-donker: url(/kunst/rand-klein-boven-donker-tiny.webp?v=66f12e9185);
  --tiny-rand-klein-boven-2-donker: url(/kunst/rand-klein-boven-2-donker-tiny.webp?v=ecec875797);
  --tiny-rand-klein-boven-3-donker: url(/kunst/rand-klein-boven-3-donker-tiny.webp?v=da215dbdfd);
  --tiny-rand-klein-boven-4-donker: url(/kunst/rand-klein-boven-4-donker-tiny.webp?v=88a77bcc5e);
  --tiny-rand-klein-zij-donker: url(/kunst/rand-klein-zij-donker-tiny.webp?v=11c95abf0b);
  --tiny-rand-klein-zij-2-donker: url(/kunst/rand-klein-zij-2-donker-tiny.webp?v=b833056832);
  --tiny-rand-klein-zij-3-donker: url(/kunst/rand-klein-zij-3-donker-tiny.webp?v=d33774c96e);
  --tiny-rand-klein-zij-4-donker: url(/kunst/rand-klein-zij-4-donker-tiny.webp?v=f29e0fcda8);
}