.controls { display: flex; flex-wrap: wrap; gap: 10px; margin: -14px 0 18px; }
.controls button { border: 1px solid var(--frame); border-radius: 4px; background: var(--button); color: var(--ink); font: inherit; padding: 7px 14px; cursor: pointer; }
.controls button:hover { border-color: var(--link); }
.controls button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* The board keeps its own colours (deep conifer, pale fur cells) in both schemes, with the same hairline as the
   photos. It is an outline, not a border, so clicks still map exactly onto cells. */
#life { display: block; width: 100%; max-width: 900px; height: auto; outline: 1px solid var(--frame); cursor: crosshair; touch-action: manipulation; }