:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f8f2;
  color: #123b31;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }
.app { width: min(1600px, 100%); margin: 0 auto; padding: 0 28px 30px; }
.topbar { height: 72px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e6dd; margin-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 18px; letter-spacing: -.02em; }
.brand-mark { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #163e31; font-size: 12px; background: #9ed778; box-shadow: inset -4px -5px 0 #71b867; }
.topbar-note { color: #74877d; font-size: 13px; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, 440px); align-items: start; gap: clamp(25px, 3vw, 48px); }
.board-panel { min-width: 0; }
.board-viewport { overflow-x: auto; }
#board { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border: 1.5px solid #a9c2ae; border-radius: 9px; background: #fffef9; cursor: crosshair; touch-action: manipulation; }
.board-footer { display: flex; justify-content: space-between; gap: 16px; min-height: 42px; padding: 11px 1px; color: #60796b; font-size: 13px; }
.controls { padding-top: 5px; }
h1 { margin: 0 0 15px; font-size: clamp(36px, 3vw, 50px); line-height: 1.02; letter-spacing: -.055em; font-weight: 800; }
.intro { margin: 0 0 27px; font-size: 17px; line-height: 1.52; color: #2b4b3e; }
.score-card { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border: 1px solid #d8e1d6; border-radius: 14px; background: #f0f2e9; font-size: 21px; font-weight: 700; }
.score-card strong { font-size: 42px; line-height: 1; letter-spacing: -.04em; }
.button-row { display: flex; gap: 12px; margin: 16px 0 28px; }
.button { min-height: 60px; border-radius: 11px; padding: 0 20px; border: 1px solid #abc4b5; cursor: pointer; font-weight: 700; display: inline-flex; justify-content: center; align-items: center; gap: 12px; transition: transform .15s, background .15s, box-shadow .15s; }
.button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px #244c3220; }
.button:active { transform: translateY(0); }
.button:focus-visible, input:focus-visible, #board:focus-visible { outline: 3px solid #e9ad41; outline-offset: 3px; }
.primary { flex: 1; color: white; border-color: #17533e; background: #17533e; }
.primary:hover { background: #1d664a; }
.secondary { min-width: 135px; background: #fffef9; color: #174331; }
.play-icon { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid currentColor; }
.pause-icon { width: 12px; height: 16px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.reset-icon { font-size: 26px; line-height: 1; font-weight: 400; }
.speed-control label { display: block; margin-bottom: 11px; font-size: 16px; font-weight: 750; }
.speed-control input { width: 100%; margin: 0; accent-color: #216847; cursor: pointer; }
.speed-labels { display: flex; justify-content: space-between; color: #416251; font-size: 13px; margin-top: 5px; }
.legend { border: 1px solid #d5ded4; border-radius: 15px; padding: 19px 20px 14px; margin-top: 31px; background: #fffef9; }
.legend h2 { margin: 0 0 16px; font-size: 18px; letter-spacing: -.02em; }
.legend-row { display: flex; align-items: center; gap: 15px; margin: 13px 0; color: #294d3a; font-size: 14px; line-height: 1.35; }
.legend-worm, .legend-food, .legend-cell { width: 27px; height: 27px; flex: 0 0 27px; }
.legend-worm { border-radius: 50%; background: radial-gradient(circle at 34% 29%, #c4e69b, #5fa75e); box-shadow: 0 2px 5px #376a3a40; }
.legend-food { border-radius: 50%; background: radial-gradient(circle at 46% 42%, #fff 0 16%, #eead35 21% 53%, #ffeab0 57%); box-shadow: 0 0 10px #f5bd4c99; }
.legend-cell { border: 1px solid #a9c2ae; border-radius: 5px; }
.project-note { color: #72867a; font-size: 12px; line-height: 1.45; margin: 20px 1px 0; }
.project-note a { color: #216847; }
.brain-card { margin-top: 26px; padding: 18px; border: 1px solid #d5ded4; border-radius: 15px; background: #f8fbf4; }
.brain-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.brain-heading h2 { margin: 0; font-size: 18px; }
.brain-heading span { color: #567465; font-size: 12px; }
.neural-grid { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 3px; }
.neuron { display: block; aspect-ratio: 1; border-radius: 50%; background: #9bbc96; opacity: calc(.23 + var(--activity, 0) * .72); transition: opacity .12s, background .12s; }
.neuron.firing { background: #f0a32a; box-shadow: 0 0 5px #eda92e; }
.brain-readout { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; color: #456454; font-size: 13px; margin-top: 15px; }
.brain-readout strong { color: #1c513c; }
.brain-caption { margin: 10px 0 0; font-size: 11px; line-height: 1.4; color: #6d8676; }
@media (max-width: 990px) { .layout { grid-template-columns: 1fr; } .controls { padding-top: 0; max-width: 650px; } h1 { font-size: 42px; } }
@media (max-width: 600px) { .app { padding: 0 14px 28px; } .topbar { height: 58px; margin-bottom: 15px; } .brand { font-size: 16px; } .topbar-note { display: none; } .layout { gap: 13px; } #board { width: 600px; max-width: none; } .board-footer { flex-direction: column; gap: 2px; font-size: 11px; } .board-footer span:last-child::after { content: ' · листайте поле →'; } h1 { font-size: 36px; } .intro { font-size: 15px; margin-bottom: 17px; } .score-card { font-size: 18px; } .button { min-height: 54px; } .legend { margin-top: 22px; } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } }