/* One display pigment uses each untouched PNG's alpha, regardless of source ink. */
:root { --manuscript-pigment: #f0dfbd; }
.manuscript-art,
.manuscript-art[data-tone='dark'] { background: transparent; }
.manuscript-art[data-ink-mask='true']::before {
  position: absolute;
  inset: 0;
  display: block;
  content: '';
  background: var(--manuscript-pigment);
  -webkit-mask-image: var(--art-image);
  mask-image: var(--art-image);
  mask-mode: alpha;
  -webkit-mask-size: var(--art-width, 100%) auto;
  mask-size: var(--art-width, 100%) auto;
  -webkit-mask-position: var(--art-mask-x, 0%) var(--art-mask-y, 0%);
  mask-position: var(--art-mask-x, 0%) var(--art-mask-y, 0%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}
/* Keep the original image and its alt text in the document and download path. */
.manuscript-art[data-ink-mask='true'] > img { opacity: 0 !important; }
.manuscript-view,
.manuscript-view[data-tone='dark'] {
  background: #17130e;
  scrollbar-color: #8b6d40 #17130e;
}
/* Override the former fixed-height stage image with the shared focus geometry. */
.stage__manuscript .manuscript-art > .stage__handwriting {
  position: absolute;
  top: var(--art-top, 0%);
  left: var(--art-left, 0%);
  width: var(--art-width, 100%);
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  mix-blend-mode: normal;
  filter: none;
}
.stage__manuscript .manuscript-art {
  width: min(100%, 240px, calc(min(49svh, 440px) * var(--preview-ratio, 1)));
  max-height: min(49svh, 440px);
}