:root {
  --fondo: #ffffff;
  --inchiostro: #161514;
  --grigio: #8d8983;
  --filo: #d8d4cd;
  --guida: #c4bfb7;
  --accento: #d9472b;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--fondo);
  color: var(--inchiostro);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.stage {
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 16px;
}

.just {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 3.4vmin, 22px);
  font-size: clamp(15px, min(4.8vw, 4.6vh), 23px);
}

.just__brand {
  font-size: 0.56em;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grigio);
  font-variation-settings: 'wdth' 112, 'wght' 460;
}

/* the pill: its width and height are set by the script, the content sits in the middle */
.just__btn {
  position: relative;
  display: block;
  border: 1px solid var(--filo);
  border-radius: 999px;
  background: var(--fondo);
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s ease;
}

.just__btn.is-close { border-color: var(--inchiostro); }

.just__btn:focus { outline: none; }
.just__btn:focus-visible { outline: 1px solid var(--inchiostro); outline-offset: 4px; }

.just__stack,
.just__single {
  position: absolute;
  left: 50%;
  top: 50%;
}

.just__line {
  position: absolute;
  left: 0;
  white-space: nowrap;
  line-height: 1;
  font-variation-settings: 'wdth' 100, 'wght' 520;
}

/* the hairlines at the two edges of the measure, like the margins of a proof */
.just__guide {
  position: absolute;
  top: 50%;
  width: 1px;
  background: var(--guida);
  transform-origin: 50% 50%;
}

.just__single {
  display: flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
  opacity: 0;
}

.just__row { display: flex; gap: 0.26em; line-height: 1; font-variation-settings: 'wdth' 100, 'wght' 560; }
.just__word { display: inline-block; }

.just__arrow {
  width: 1.15em;
  height: 0.7em;
  overflow: visible;
}

.just__arrow path {
  fill: none;
  stroke: var(--accento);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.just__note {
  font-size: 0.62em;
  color: var(--grigio);
  letter-spacing: 0.02em;
  font-variation-settings: 'wdth' 100, 'wght' 420;
  min-height: 1.2em;
}

.just__note.is-on { color: var(--accento); }

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