body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Segoe WP", Ubuntu, sans-serif;
  max-width: 1000px;
  margin: 40px auto;
  color: #333;
  line-height: 1.6;
}
.logo {
  display: flex;
  justify-content: space-between;
}
.logo img {
  max-height: 60px;
}
.buttons {
  display: flex;
  gap: 8px;
}
.buttons button {
  padding: 10px 20px;
  border: 2px solid #ccc;
  background-color: white;
  color: #333;
  cursor: pointer;
  font-size: 16px;
  margin-right: 10px;
  border-radius: 5px;
}
.buttons button.selected {
  border-color: #007bff;
  background-color: #007bff;
  color: white;
}
h1 { font-size: 2em; margin-bottom: 0.5em; }
h2 { font-size: 1.8em;   margin-top: 0.5em; margin-bottom: 0.5em; }
h3 { font-size: 1.5em; margin-top: 0.5em; margin-bottom: 0.4em; }
h4 { font-size: 1.2em; margin-top: 0.5em;   margin-bottom: 0.3em; }
h3 > a {
  color: inherit;
}
p  { margin-bottom: 1em; }
ul { margin-bottom: 1em; }
ul li { margin-bottom: 0.3em; }
table { border-collapse: collapse; width: 100%; }
table + p { margin-top: 1.5em; }
table th, table td { padding: 8px; border: 1px solid #ddd; }
table th { background-color: #eaecef; text-align: left; }
code, pre {
  background-color: #f6f8fa;
  padding: 0.5em;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.95em;
}
pre { overflow-x: auto; margin-bottom: 1em; }
code { white-space: pre-wrap; }
summary h4 {
  display: inline-block;
  cursor: pointer;
}
b { font-weight: bold; }
.assets-wrapper {
  display: inline-block;
}
.assets-wrapper img {
  max-height: 20px;
}
.assets-wrapper td {
  border: 0;
}
.color-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 4rem;
  row-gap: 1.5rem;
}
.color-box {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  align-items: center;
}
.color-box > div:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
}
.color-box p {
  margin: 0;
  line-height: 1.2;
}
.color-box p:nth-of-type(1) {
  grid-column: 2;
  grid-row: 1;
  font-weight: 500;
}
.color-box p:nth-of-type(2) {
  grid-column: 2;
  grid-row: 2;
  color: #666;
  font-size: 0.9rem;
}
@media (max-width: 600px) {
  .color-container {
    grid-template-columns: 1fr;
    column-gap: 1rem;
    row-gap: 1rem;
  }
}