/* The sheet that smooths out: a sheet of ruled paper under a low light on a dark table. The canvas fills the page;
   the colours below are read by the script for the paper and what is printed on it. */
:root {
  --table: #121212;    /* the table */
  --sheet: #f4f1ea;    /* the paper */
  --ink: #141414;      /* the word and the ruled lines */
  --accent: #e8431f;   /* the margin line of the ruled paper */
  --soft: #8a857c;     /* the small button */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--table);
  color: var(--sheet);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.stage {
  position: fixed;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

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

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  margin: 0;
}

/* the one control: a quiet line of type at the bottom; on hover the word widens on the wdth axis */
.again {
  position: absolute;
  left: 50%;
  bottom: max(18px, 3.2vh);
  translate: -50% 0;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: var(--soft);
  font: inherit;
  font-size: 11px;
  font-weight: 460;
  font-variation-settings: 'wdth' 108;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: font-variation-settings 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.again:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

@media (hover: hover) {
  .again:hover {
    color: var(--sheet);
    font-variation-settings: 'wdth' 125;
  }
}

/* without WebGL: the printed sheet, flat */
.fallback {
  position: absolute;
  left: 50%;
  top: 47%;
  height: min(80vh, 120vw);
  width: auto;
  transform: translate(-50%, -50%);
}