/* A single dotted notebook sheet behind the entire page, including the editor
   canvas. Keep the pattern below the artwork, controls, and translucent cards. */
:root {
  --paper: #fdfbf7;
  --paper-dot: rgb(153 127 94 / 12%);
  --paper-dot-gap: 28px;
  --paper-dot-radius: 1.35px;
}

body { isolation: isolate; }
/* Keep Next's page contents above the fixed paper layer, including composited
   video surfaces. The original HTML placed its content directly in <body>. */
#__next { isolation: isolate; }
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--paper-dot) var(--paper-dot-radius), transparent 1.8px);
  background-size: var(--paper-dot-gap) var(--paper-dot-gap);
  background-position: 0 0;
  opacity: 1;
  mix-blend-mode: normal;
}

/* Do not reset the grid origin at each section or fade it out with the stamps. */
.story-stage, .join-section { background: transparent; }
.story-stage::before { content: none; }

/* Readable paper inserts may cover the dots; the main sheet stays continuous. */
.guest-journey { background: rgb(242 236 225 / 78%); }

@media print {
  body::before { display: none; }
}