body {
  font-family: Verdana, Geneva, sans-serif;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
  color: #ccc;
  background: #111318;
  line-height: 1.6;
}
a { color: #55aae0; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; border: none; }
.site-header { text-align: center; }
.logo { margin: 1rem 0; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; padding: 0.5rem 0; }
header { border-bottom: 1px solid #444; margin-bottom: 1.5rem; padding-bottom: 0.5rem; }
main { min-height: 60vh; }
main img { display: block; margin: 0.5rem auto; }
.image-caption { font-size: 0.85rem; color: #999; text-align: center; margin-top: 0.25rem; margin-bottom: 1rem; }
.page-list { list-style: none; padding: 0; }
.page-list li { margin-bottom: 2rem; border-bottom: 1px solid #333; padding-bottom: 1rem; }
.page-list li a { font-weight: bold; text-decoration: none; color: #55aae0; }
.page-list img { max-height: 200px; width: auto; margin: 0.5rem 0; }
footer { border-top: 1px solid #333; margin-top: 2rem; padding: 1rem 0; text-align: center; font-size: 0.85rem; color: #999; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.gallery-tile {
  aspect-ratio: 1; background: #222 center / cover;
  display: flex; align-items: end; text-decoration: none; position: relative; overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.gallery-tile::before {
  content: ''; position: absolute; inset: -8px;
  background: inherit;
  z-index: 0;
}
.gallery-tile span {
  position: relative; z-index: 1;
  width: 100%; padding: 0.75rem 0.65rem; color: #fff; font-size: 0.9rem; font-weight: bold;
  background: linear-gradient(transparent 0%, rgba(0,0,0,0.75) 100%);
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.gallery-tile:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 20px rgba(85,170,224,0.25), 0 2px 8px rgba(0,0,0,0.5);
  text-decoration: none;
}
@media (max-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.65rem; }
  .gallery-tile span { font-size: 0.75rem; padding: 0.5rem 0.45rem; }
}
code { color: #e0a870; background: #1a1d24; padding: 0.15rem 0.35rem; border-radius: 3px; font-size: 1.05em; }
pre { background: #1a1d24; padding: 1rem; border-radius: 5px; overflow-x: auto; }
pre code { background: none; padding: 0; }