.playground{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:start;gap:1.5rem}@media(max-width:900px){.playground{grid-template-columns:minmax(0,1fr)}}.lab{padding:1rem;border:1px solid #1e3a2f;border-radius:1rem;background:radial-gradient(ellipse at 50% 0%,rgb(34 197 94 / .18),transparent 60%),linear-gradient(160deg,#0b1220,#020617);box-shadow:0 20px 50px -20px #020617cc,inset 0 1px #ffffff0d;color:#cbd5e1}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem}.lab .control{margin:0;padding:.45rem .9rem;border:1px solid #334155;border-radius:999px;background:#0f172acc;box-shadow:none;color:#e2e8f0;font-size:.9rem;font-weight:600;line-height:1.2;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}.lab .control:hover{border-color:#4ade80;background:#1e293b}.lab .control:active{transform:scale(.96)}.lab .control.primary{min-width:6.5rem;border-color:#22c55e;background:#16a34a;color:#f0fdf4}.lab .control.primary:hover{background:#22c55e}.speed{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 0 auto;color:#94a3b8;font-size:.85rem}.speed input{margin:0;accent-color:#22c55e}.board{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:2px;padding:2px;border-radius:.5rem;background:#0f1a2b;touch-action:none;user-select:none}.board .cell{aspect-ratio:1;min-width:0;margin:0;padding:0;border:none;border-radius:3px;background:#111c2e;box-shadow:none;cursor:crosshair}.board .cell:hover{background:#263449}.board .cell.alive{background:#22c55e;box-shadow:0 0 6px #22c55eb3}.board .cell.born{background:#bef264;box-shadow:0 0 10px #bef264e6}.board .cell.dying{animation:fade .6s ease-out both}@keyframes fade{0%{background:#f472b699}}@media(prefers-reduced-motion:reduce){.board .cell.dying{animation:none}}.board .cell:focus-visible{outline:2px solid #facc15;outline-offset:-1px}.stats{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;margin-top:1rem}.stat{display:flex;flex-direction:column}.stat span{color:#64748b;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}.stat strong{min-width:4ch;color:#f1f5f9;font-family:monospace;font-size:1.4rem;font-variant-numeric:tabular-nums}.sparkline{flex:1;min-width:120px;height:40px}.sparkline .line{fill:none;stroke:#4ade80;stroke-width:1.5;vector-effect:non-scaling-stroke}.sparkline .area{fill:#4ade801f}.hint{flex-basis:100%;margin:0;color:#f472b6;font-size:.85rem}.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem;margin:0;padding:0;list-style:none}.rules li{list-style:none;margin:0;padding:.75rem 1rem;border-left:3px solid #22c55e;border-radius:.5rem;background:#22c55e14;font-size:.9rem}.rules strong{display:block}
