body {
  font-family: Arial, sans-serif;
  text-align: center;
  background: #fafafa;
  margin: 20px;
}

h1 {
  margin-bottom: 20px;
}

#heatmap {
  display: grid;
  grid-template-columns: repeat(52, 14px);
  grid-template-rows: repeat(7, 14px);
  gap: 2px;
  justify-content: center;
}

.cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-color: #ebedf0; /* default (no reading) */
}

.cell[data-value="0"] { background-color: #ebedf0; }
.cell[data-value="1"] { background-color: #c6e48b; }
.cell[data-value="2"] { background-color: #7bc96f; }
.cell[data-value="3"] { background-color: #239a3b; }
.cell[data-value="4"] { background-color: #196127; }