.out {
  width: max-content;
  perspective: 800px;
}
.grid {
  display: grid;
  grid-template-rows: repeat(7, 14px);
  grid-auto-flow: column;
  grid-auto-columns: 14px;
  gap: 2px;
  width: max-content;
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.3s ease-out;
  position: relative;
}
.glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  grid-template-rows: inherit;
  grid-auto-flow: inherit;
  grid-auto-columns: inherit;
  gap: inherit;
  pointer-events: none;
}
.glass-cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: inherit;
  grid-auto-flow: inherit;
  grid-auto-columns: inherit;
  gap: inherit;
  filter: url(#liquid);
}
.glass-rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-tint);
  box-shadow: var(--glass-rim);
}
.cell {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  cursor: pointer;
}
.cell.empty {
  background: transparent;
  cursor: default;
}