/* Il logo dal campionario dei pesi: un fondo nero, il nome scritto in tutti i pesi come in un campionario di
   caratteri, e una linea sottile vermiglia che sceglie il peso giusto. */
:root {
  --bg: #0d0d0c;       /* il fondo */
  --ink: #f2eee6;      /* il nome */
  --muted: #6f6a62;    /* i numeri dei pesi */
  --accent: #ff4f2b;   /* la linea che sceglie e il peso scelto */
}

* {
  box-sizing: border-box;
}

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

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

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.rows {
  position: absolute;
  inset: 0;
}

/* una riga del campionario: posizione, peso e grandezza li scrive lo script */
.row {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  white-space: nowrap;
  line-height: 1;
  opacity: 0;
  transform-origin: 50% 60%;
}

.label {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-variation-settings: 'wght' 450, 'wdth' 100;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  opacity: 0;
  white-space: nowrap;
}

.sel {
  position: absolute;
  left: 0;
  top: 0;
  height: 1.5px;
  background: var(--accent);
  transform-origin: 50% 50%;
  opacity: 0;
}