* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: black;
  color: green;
  font-family: sans-serif;
}
.simulator {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: black;
  color: green;
  padding: 0 10px 24px;
}
canvas {
  border: 1px solid green;
  image-rendering: pixelated;
  width: 500px;
  height: 500px;
  max-width: 100%;
}
button {
  margin-top: 10px;
  display: block;
  background-color: green;
  color: black;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  font: inherit;
}
button:hover, button:focus-visible { background-color: #00b800; }
button:active { background-color: #006b00; }
#importFile {
  margin: 10px;
  padding: 5px;
  color: green;
  background-color: black;
  border: 1px solid green;
  max-width: 100%;
}
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 10px;
  width: 100%;
}
.control-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.seed-control { margin-top: 10px; }
label { line-height: 1.25; }
input[type=number], input[type=text], select {
  width: 90px;
  padding: 4px;
  background: black;
  color: green;
  border: 1px solid green;
  font: inherit;
}
select { width: auto; min-width: 90px; }
#seed { width: calc(12ch + 10px); }
input[type=range] { accent-color: green; }
#rule-space {
  margin-top: 10px;
  font-family: monospace;
  color: green;
  text-align: center;
  max-width: 90%;
  overflow-wrap: anywhere;
}
#message { min-height: 1.2em; margin: 10px 0 0; text-align: center; }
.help-link {
  margin: 10px 0 0;
  text-align: center;
}
.help-link a {
  color: green;
  text-decoration: underline;
}
.help-link a:hover, .help-link a:focus-visible {
  color: #00b800;
}
.error { color: #ff5555; }
.transport { display: flex; gap: 10px; }
@media (max-width: 540px) {
  canvas { height: auto; }
  .controls { gap: 12px; }
}