:root { font-family: Arial, sans-serif; color-scheme: dark; background: #101916; color: #e7f5eb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 16px; }
main { width: min(100%, 768px, calc(100svh - 112px)); }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; background: #101916; border: 1px solid #395147; }
.overview-link { display: inline-block; color: #c2f9c4; margin-bottom: 14px; font-size: .9rem; }
.controls { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
button { min-height: 44px; padding: 10px 18px; font: 700 .95rem Arial, sans-serif; color: #e7f5eb; background: #233e31; border: 1px solid #577561; border-radius: 8px; cursor: pointer; }
#toggle { min-width: 84px; }
button:hover { background: #32533f; }
input { flex: 1; min-width: 40px; min-height: 44px; margin: 0; accent-color: #a4e8a7; cursor: pointer; }
:focus-visible { outline: 3px solid #c2f9c4; outline-offset: 4px; }
@media (max-width: 400px) { .controls { gap: 8px; } button { padding-inline: 10px; } }
@media (max-height: 400px) and (orientation: landscape) { body { padding: 8px; } main { width: min(100%, calc(100svh - 80px)); } .controls { gap: 6px; margin-top: 8px; } button { padding-inline: 8px; } }

.simulation-page { height: 100svh; height: 100dvh; min-height: 0; }
.simulation-page main, .simulation-board { width: min(100%, 768px); height: 100%; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.board-viewport { min-width: 0; min-height: 0; container-type: size; display: grid; place-items: center; }
.board-viewport #life { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
.simulation-page .controls, .simulation-board .controls { flex-wrap: wrap; }
.simulation-page input, .simulation-board input { flex-basis: 80px; }