/* The word in the barcode: a row of thin bars that part under the pointer like reeds, each on its own spring, and
   a word printed behind them that shows through the gaps. One screen, a canvas under two small labels. */
:root {
  --paper: #f3f0e8;   /* the page, and the paper between the bars */
  --ink: #141414;     /* the bars and the labels */
  --accent: #e0461f;  /* the word behind the bars */
  --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 runs through the bars, it does not move the page */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.code {
  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.55em;
  margin: 0;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1;
}

.mark__bars {
  width: 0.9em;
  height: 1.05em;
  overflow: visible;
}

.mark__lean {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.mark__bars rect {
  fill: var(--ink);
}

.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;
}