@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/figtree-latin-400.woff2") format("woff2");
}

:root {
  --paper: #f2f0ef;
  --ink: #212121;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Figtree", system-ui, sans-serif;
  background-color: var(--paper);
  color: var(--ink);
  /* Cursor hidden on desktop; replaced by the figure preview canvas. */
  cursor: none;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-touch-callout: none;
}

/* Touch devices have no pointer to hide. */
@media (hover: none) {
  body {
    cursor: auto;
  }
}

canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#ink,
#text {
  z-index: 0;
}

/* Barely perceptible paper grain, laid OVER the knockout text so paper and */
/* text (identical color) are grained equally and the text stays invisible  */
/* until green ink knocks it out beneath. Inline data-URI, no network call.  */
#grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

#preview {
  z-index: 4;
  pointer-events: none;
}