body {
  font-family: Georgia, serif;
  background: #fdfcf9;
  color: #333;
  max-width: 700px;
  margin: auto;
  padding: 2em;
  line-height: 1.6;
}
a { color: #0366d6; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 2em; border-bottom: 2px solid #ccc; padding-bottom: 0.2em; }
h3 { margin-bottom: 0.2em; }
ul { list-style-type: none; padding-left: 0; }
li { margin-bottom: 2em; border-bottom: 1px solid #ddd; padding-bottom: 1em; }
audio { margin: 0.5em 0; width: 100%; }
small { color: #777; }
img { max-width: 100%; height: auto; border-radius: 4px; }
.back-link { display: inline-block; margin-top: 2em; color: #999; }
.comment { border-top: 1px solid #ccc; margin-top: 1em; padding-top: 0.5em; }
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #e0e0e0; }
  a { color: #6ca0ff; }
  h1 { border-color: #444; }
  small { color: #aaa; }
  li { border-color: #333; }
  .comment { border-color: #444; }
}