/* Strand: a minimal physics piece. Warm paper, a hairline thread between two small pegs and the letters of one
   word threaded on it like beads. The thread, the pegs and the letters are one SVG redrawn by the script at every
   frame; the only colour is the measure of the sag, on the right. */
:root {
  --paper: #f3f0e8;     /* the background */
  --ink: #141414;       /* the letters, the thread and the pegs */
  --guide: #c4bdae;     /* the straight guide between the pegs */
  --accent: #e5461f;    /* the measure of the sag */
  --muted: #8a8478;     /* the small print */
  --weight: 640;        /* how heavy the letters are (200 to 800) */
}

* {
  box-sizing: border-box;
}

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

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

.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: crosshair;
  outline: none;
}

.stage.is-pulling {
  cursor: grabbing;
}

.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.chord {
  fill: none;
  stroke: var(--guide);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}

.ext {
  fill: none;
  stroke: var(--guide);
  stroke-width: 1;
  stroke-dasharray: 1 4;
}

.dim {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.thread {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.letters text {
  fill: var(--ink);
  font-weight: var(--weight);
  font-size: 100px;
  text-anchor: middle;
}

.peg circle {
  fill: var(--ink);
}

.peg__slot {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.hint,
.read {
  position: absolute;
  bottom: 22px;
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 450;
  letter-spacing: 0.01em;
  color: var(--muted);
  pointer-events: none;
}

.hint {
  left: 24px;
  max-width: calc(100% - 170px);
}

.read {
  right: 24px;
  display: flex;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}

.read__value {
  display: inline-block;
  min-width: 3.8em;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
}

.stage:focus-visible .read__label {
  color: var(--ink);
}

@media (max-width: 560px) {
  .hint {
    left: 16px;
    bottom: 18px;
  }

  .read {
    right: 16px;
    bottom: 18px;
  }
}