:root {
--bg: #07090f;
--bg-alt: #0e121b;
--text: #e8ebf2;
--muted: #8a93a6;
--line: #1c2331;

--accent: #7cc4ff;
--accent-old: #5d9dcc;

--mono: "JetBrains Mono", ui-monospace, monospace;
--sans: "Inter", system-ui, sans-serif;
}

/* ---------- Reset ---------- */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

html {
color-scheme: dark;
}

body {
min-height: 100vh;

background: var(--bg);
color: var(--text);

font-family: var(--sans);

-webkit-font-smoothing: antialiased;
}

a {
color: inherit;
text-decoration: none;
}

/* ---------- Layout ---------- */

.page {
width: min(760px, calc(100% - 40px));

margin: 0 auto;

padding: 50px 0 70px;
}

.back {
display: inline-block;

margin-bottom: 70px;

color: var(--muted);

font-family: var(--mono);
font-size: .8rem;

transition: color .2s;
}

.back:hover {
color: var(--accent);
}

/* ---------- Header ---------- */

.eyebrow {
color: var(--accent);

font-family: var(--mono);
font-size: .8rem;

margin-bottom: 16px;
}

h1 {
font-size: clamp(2rem, 7vw, 3.5rem);

line-height: 1.1;

letter-spacing: -.04em;

margin-bottom: 16px;
}

.intro {
max-width: 580px;

color: var(--muted);

line-height: 1.7;

margin-bottom: 40px;
}

/* ---------- Game ---------- */

.game {
background: var(--bg-alt);

border: 1px solid var(--line);

border-radius: 16px;

padding: 20px;
}

.grid {
display: grid;

grid-template-columns: repeat(20, 1fr);

width: 100%;
max-width: 600px;

aspect-ratio: 1;

margin: 0 auto;

border: 1px solid var(--line);

background: #05070c;

overflow: hidden;
}

/* ---------- Cells ---------- */

.cell {
appearance: none;

border: 0;

border-right:
1px solid rgba(124, 196, 255, .07);

border-bottom:
1px solid rgba(124, 196, 255, .07);

background: transparent;

padding: 0;

cursor: pointer;

transition:
background .12s ease,
box-shadow .12s ease;
}

.cell:hover {
background:
rgba(124, 196, 255, .15);
}

/*

* Newly born cells.
*
* These are deliberately brighter.
  */

.cell.alive {
background: var(--accent);

box-shadow:
inset 0 0 7px
rgba(255, 255, 255, .25);
}

/*

* Cells that have survived at least
* one previous generation.
*
* Slightly darker than new cells.
  */

.cell.alive.old {
background: var(--accent-old);

box-shadow:
inset 0 0 5px
rgba(255, 255, 255, .12);
}

.cell.alive:hover {
background: #a9dcff;
}

.cell.alive.old:hover {
background: #78b4df;
}

/* ---------- Controls ---------- */

.controls {
display: flex;

gap: 8px;

flex-wrap: wrap;

margin-top: 18px;
}

button.control {
appearance: none;

border: 1px solid var(--line);

background: transparent;

color: var(--text);

border-radius: 8px;

padding: 10px 16px;

font-family: var(--mono);
font-size: .78rem;

cursor: pointer;

transition:
border-color .2s,
background .2s,
transform .15s;
}

button.control:hover {
border-color: var(--accent);

background:
rgba(124, 196, 255, .08);
}

button.control:active {
transform: scale(.96);
}

button.control.primary {
background: var(--accent);

border-color: var(--accent);

color: #06121e;
}

/* ---------- Stats ---------- */

.stats {
display: flex;

justify-content: space-between;

margin-top: 14px;

color: var(--muted);

font-family: var(--mono);

font-size: .72rem;
}

.stats strong {
color: var(--accent);

font-weight: 500;
}

/* ---------- Rules ---------- */

.rules {
margin-top: 45px;

padding-top: 30px;

border-top: 1px solid var(--line);
}

.rules h2 {
font-size: 1rem;

margin-bottom: 12px;
}

.rules p {
max-width: 600px;

color: var(--muted);

font-size: .9rem;

line-height: 1.7;
}

/* ---------- Mobile ---------- */

@media (max-width: 600px) {

.page {
width: min(100% - 24px, 760px);

```
padding-top: 28px;
```

}

.back {
margin-bottom: 45px;
}

.game {
padding: 10px;
}

.controls {
display: grid;

```
grid-template-columns: 1fr 1fr;
```

}

button.control {
width: 100%;
}

}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
transition: none !important;
}

}