body {
      font-family: sans-serif;
      max-width: 700px;
      margin: 20px auto;
      padding: 0 16px;
      line-height: 1.6;
      color: #222;
    }
    h1 { font-size: 1.8em; }
    h2 { margin-top: 2em; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
    .table-wrapper { overflow-x: auto; }
    table { border-collapse: collapse; width: 100%; margin-top: 1em; min-width: 400px; }
    th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
    th { background: #f5f5f5; }
    footer { margin-top: 3em; font-size: 0.85em; color: #666; border-top: 1px solid #ccc; padding-top: 1em; }
    a { color: #2a7a2a; }

    @media (max-width: 480px) {
      h1 { font-size: 1.4em; }
      h2 { font-size: 1.1em; }
      body { margin: 12px auto; }
    }
    nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1em 0;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
}
nav a {
  flex: 1;
  text-align: center;
  padding: 8px 12px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #2a7a2a;
  text-decoration: none;
  font-weight: bold;
}
nav a:hover {
  background: #2a7a2a;
  color: white;
}