/* The square that rolls and writes: a thin line on a warm white page, a thin accent square rolling along it and
   the letters it leaves behind, in a variable typeface that widens when the square lands. */
:root {
  --page: #f3f0e8;          /* the page */
  --ink: #141414;           /* the letters and the line */
  --muted: #9a9387;         /* the ticks and the turns counter */
  --accent: #e5401c;        /* the square */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Anybody Variable', 'Anybody', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.figure {
  display: block;
  width: min(100%, 980px);
  height: auto;
  overflow: visible;
}

.line {
  fill: none;
  stroke: var(--ink);
  stroke-linecap: butt;
}

.ticks path {
  fill: none;
  stroke: var(--muted);
}

.square {
  fill: none;
  stroke: var(--accent);
  stroke-linejoin: miter;
  stroke-miterlimit: 8;
}

.letters text {
  fill: var(--ink);
  text-anchor: middle;
  font-kerning: none;
}

.turns {
  fill: var(--muted);
  text-anchor: end;
  font-size: 21px;
  font-weight: 460;
  letter-spacing: 0.06em;
  font-variation-settings: 'wdth' 100;
  font-variant-numeric: tabular-nums;
}