:root { --accent: #7357d8; }

/* simple.css centres a narrow reading column; the screenshot grid needs room. */
body { grid-template-columns: 1fr min(64rem, 90%) 1fr; }
/* simple.css lets the header span the full width; keep it on the content grid. */
body > header > * { max-width: 64rem; margin-inline: auto; }
body > main { padding-block: 1.5rem; }
main > section:first-child, main > section:first-child > :first-child { margin-top: 0; }
main > section { margin-top: 2.5rem; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; margin-bottom: .5rem; }

/* Nav */
body > header { padding-block: 1rem; text-align: left; }
body > header > p { max-width: 64rem; margin: 0 auto; }
header nav { margin-bottom: .5rem; justify-content: flex-start; }
header nav a.brand { font-size: 1.25rem; font-weight: 750; }
header nav a.brand,
header nav a.brand:visited {
  margin-left: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
}
header nav a.brand:hover { border: 0; color: var(--accent); }

/* Example grid: a terminal capture per example, linking to its source. */
.example-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.example-grid a.example { display: block; padding: .5rem; border: 1px solid var(--border); border-radius: .5rem; text-decoration: none; color: var(--text); }
.example-grid a.example:hover { border-color: var(--accent); }
.example-grid img { display: block; width: 100%; height: 12rem; border-radius: .35rem; background: #111; object-fit: contain; }
.example-grid span { display: block; padding: .5rem .25rem 0; font-weight: 600; }

/* Archived documentation versions */
.version-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; list-style: none; }
.version-list li { margin: 0; }
.version-list a { display: inline-block; border: 1px solid var(--border); border-radius: .4rem; padding: .35rem .8rem; text-decoration: none; }
.version-list a:hover { border-color: var(--accent); }

pre { overflow-x: auto; tab-size: 4; }
/* Landing-page snippet: wrap long dependency URLs instead of scrolling sideways. */
pre.snippet code { white-space: pre-wrap; overflow-wrap: anywhere; }