* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: #222;
  background: #fff;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #eee;
  flex-wrap: wrap;
  gap: 1rem;
}
header .brand { font-weight: 600; text-decoration: none; color: #111; }
header nav a { margin-left: 1rem; text-decoration: none; color: #555; }
header nav a:hover { color: #111; }
main { max-width: 900px; margin: 2rem auto; padding: 0 1.5rem; }
footer { max-width: 900px; margin: 4rem auto 2rem; padding: 0 1.5rem; color: #888; }
h1, h2 { font-weight: 600; line-height: 1.25; }
a { color: #0a5; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
}
.gallery img { width: 100%; height: auto; display: block; }
.gallery a { text-decoration: none; color: inherit; text-align: center; font-size: 0.85rem; }

table.files { width: 100%; border-collapse: collapse; }
table.files th, table.files td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid #eee; }
table.files td:nth-child(2), table.files td:nth-child(3) { white-space: nowrap; color: #666; }

.list li { margin-bottom: 0.4rem; }
.list small { color: #888; }

.speedtest { margin-top: 1rem; }
.speedtest button { padding: 0.5rem 1rem; font: inherit; cursor: pointer; }
.speedtest .results { margin-top: 1rem; display: grid; gap: 0.25rem; }

article img { max-width: 100%; height: auto; }
pre { background: #f6f6f6; padding: 0.75rem; overflow-x: auto; }
code { background: #f6f6f6; padding: 0.1rem 0.25rem; }

.breadcrumb { color: #666; font-size: 0.9rem; margin: 0 0 1rem; }
.breadcrumb a { color: #0a5; }

main > section.card {
  background: #f4f4f4;
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
main > section.card > h2:first-child { margin-top: 0; }
main > section.card > p:last-child { margin-bottom: 0; }