/* sivug ASCII backdrop (see ascii.js). One continuous backdrop behind the whole page; no borders or bands.
   Needs the page's --paper variable (sivug style.css has it, light and dark). */
.ascii-host { position: relative; } /* the backdrop below is sized to the whole page */
/* Outside the book pin the canvas sits in the page and moves only by whole character rows, so it scrolls natively
   with the text. While the book is pinned, and always on mobile (.is-fixed), it is fixed to the viewport and nudged
   by the sub-row remainder. */
.ascii-backdrop { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: var(--ascii-opacity, .9); contain: layout paint; }
.ascii-backdrop.is-fixed { position: fixed; }
.ascii-backdrop canvas { position: absolute; top: 0; left: 0; display: block; will-change: transform; }
:root[data-theme='dark'] .ascii-backdrop { opacity: calc(var(--ascii-opacity, .9) * .8); }
/* Soft edges at the viewport and under the header (paper painted over the art), kept off the canvas so they stay
   put while the art moves. --head is set by ascii.js to the header's bottom edge. */
.ascii-fade { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  --head: -1000px; --pa: color-mix(in srgb, var(--paper, #faf9f5) 84%, transparent); --pb: color-mix(in srgb, var(--paper, #faf9f5) 50%, transparent); --pc: color-mix(in srgb, var(--paper, #faf9f5) 16%, transparent);
  background: linear-gradient(to bottom, var(--paper, #faf9f5) calc(var(--head) - 10px), var(--pa) calc(var(--head) + 15px), var(--pb) calc(var(--head) + 40px), var(--pc) calc(var(--head) + 65px), transparent calc(var(--head) + 90px)),
    linear-gradient(to bottom, var(--paper, #faf9f5) 0, transparent 18%, transparent 78%, var(--paper, #faf9f5) 100%), linear-gradient(to right, var(--paper, #faf9f5) 0, transparent 8%, transparent 92%, var(--paper, #faf9f5) 100%); }
@media print { .ascii-backdrop, .ascii-fade { display: none; } }