:root {
  --paper: #dfdacf;
  --ink: #232019;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  overscroll-behavior: none;
}

.sheet {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--paper);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

#page {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

/* Invisible hit areas sitting over the marks drawn on the paper. Their
   positions are set from script to match exactly where the ink landed. */
#another,
#link-a,
#link-b,
#move,
#motion {
  position: absolute;
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The words themselves are ink, so a press cannot change them. A breath of
   shadow on the paper under the thumb is the whole feedback. */
#another:active,
#link-a:active,
#link-b:active,
#move:active,
#motion:active { background: rgba(35, 32, 25, 0.08); }

#another:focus-visible,
#link-a:focus-visible,
#link-b:focus-visible,
#move:focus-visible,
#motion:focus-visible {
  outline: 1px dashed var(--ink);
  outline-offset: 3px;
}

/* Measured, not typeset: script reads this box's height to find out how much
   of the bottom of the sheet the phone's home indicator is sitting on. */
#safe {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
}