:root {
  --type-depth-1: 8px;
  --type-depth-2: 16px;
  --type-depth-3: 24px;
  --type-depth-4: 32px;
  --state-locked: var(--type-depth-4);
  --grid-cell-size: var(--state-locked);
  --palette-bg: #0a0a0a;
  --palette-active: #ffffff;
  --palette-base: #1a1a1a;
  --palette-border: #333333;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--palette-bg);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, var(--grid-cell-size));
  grid-template-rows: repeat(8, var(--grid-cell-size));
  gap: 0;
  overflow: hidden;
  box-sizing: border-box;
  width: calc(12 * var(--grid-cell-size));
  height: calc(8 * var(--grid-cell-size));
  background: var(--palette-bg);
}

.grid-cell {
  width: var(--grid-cell-size);
  height: var(--grid-cell-size);
  background: var(--palette-base);
  border: 1px solid var(--palette-border);
  box-sizing: border-box;
}

.grid-cell.active {
  background: var(--palette-active);
}

#latency-probe {
  font-family: monospace;
  font-size: var(--type-depth-2);
  padding: var(--type-depth-1);
  background: var(--palette-bg);
  color: var(--palette-active);
  overflow: hidden;
  box-sizing: border-box;
}