.life-page {
  --life-dead: #dff5f0;
  --life-alive: #173f3d;
  --life-grid: rgb(23 63 61 / 13%);
}

.life-workspace {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);
  gap: clamp(1.2rem, 3vw, 2.25rem);
  align-items: start;
}

.canvas-frame {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: var(--life-dead);
  box-shadow: var(--shadow);
}

#life-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  cursor: crosshair;
  touch-action: none;
}

@media (prefers-color-scheme: dark) {
  .life-page {
    --life-dead: #1d3431;
    --life-alive: #9ee2d8;
    --life-grid: rgb(158 226 216 / 13%);
  }
}

@media (max-width: 48rem) {
  .life-workspace {
    grid-template-columns: 1fr;
  }
}