:root {
  --ink-red:   #9b1120;
  --ink-black: #111111;
}

html.ink-pre .ink-content {
  opacity: 0;
}

.ink-content {
  position: relative;
  z-index: 1;
}

.ink-veil {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: all;
  will-change: clip-path;
}

.ink-veil--red   { background: var(--ink-red); }
.ink-veil--black { background: var(--ink-black); }

.ink-wait {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--ink-red);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .22s ease, transform .22s ease;
}

.ink-wait.is-on {
  opacity: 1;
  animation: ink-wait-pulse 1s ease-in-out infinite;
}

@keyframes ink-wait-pulse {
  0%, 100% { transform: scale(.6); }
  50%      { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ink-wait.is-on { animation: none; transform: scale(1); }
}

.ink-grain {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJuIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iMC45IiBudW1PY3RhdmVzPSI0IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI24pIiBvcGFjaXR5PSIuMDYiLz48L3N2Zz4=");
  background-size: 128px 128px;
}