:root { color-scheme: light dark; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  max-width: 720px; margin: 0 auto; padding: 2rem 1rem;
  background: #fdfcf8; color: #222;
}
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1e; color: #e8e6e1; }
  a { color: #8ab4f8; }
  .joke { background: #26262c; color: #eceae4; border-color: #3a3a42; }
  header h1 { color: #f0ede6; }
}
header h1 { font-size: 2rem; margin-bottom: .25rem; }
.date { color: #777; margin-top: 0; }
.stale {
  background: #fff3cd; color: #665100; padding: .5rem .75rem;
  border-radius: 6px; font-size: .9rem;
}
@media (prefers-color-scheme: dark) {
  .stale { background: #4a3c0a; color: #ffd970; }
}
ul.jokes { list-style: none; padding: 0; }
li.joke {
  background: #fff; color: #222; border: 1px solid #e2ddd2; border-radius: 10px;
  padding: 1rem 1.25rem; margin: .9rem 0; font-size: 1.15rem;
  line-height: 1.5; box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
li.joke::before { content: "\1F604  "; }
footer { margin-top: 2rem; font-size: .9rem; color: #888; }