/* Needles that write: a field of thin needles that turn toward the pointer like compass needles, in a wave, and
   where the pointer rests write a word in negative. One screen, a canvas under two small labels. */
:root {
  --paper: #f3f0e8;   /* the page */
  --ink: #161513;     /* the needles and the words */
  --tip: #e0461f;     /* the tips of the needles nearest the pointer, as on a compass */
  --muted: #7b776e;   /* the hint */
  --edge: clamp(16px, 3.2vw, 40px);
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Mona Sans Variable', 'Mona Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  height: 100vh;
  height: 100lvh;
  overflow: hidden;
  /* the finger moves the field, not the page */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

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

/* ---------------------------------------------------------------- the two labels */
.mark {
  position: absolute;
  top: var(--edge);
  left: var(--edge);
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1;
}

.mark__needle {
  width: 1.45em;
  height: 1.45em;
  overflow: visible;
}

.mark__tail {
  fill: var(--ink);
}

.mark__tip {
  fill: var(--tip);
}

.mark__name {
  font-weight: 640;
  font-stretch: 112%;
  letter-spacing: 0.01em;
}

.hint {
  position: absolute;
  left: var(--edge);
  bottom: var(--edge);
  margin: 0;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.3;
  color: var(--muted);
  font-weight: 460;
  font-stretch: 104%;
}

/* the two sentences one above the other in a window one line tall: the script rolls them */
.hint__roll {
  display: block;
  height: 1.3em;
  overflow: hidden;
}

.hint__line {
  display: block;
  white-space: nowrap;
}

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