.reader-comments {
  box-sizing: border-box;
  max-width: 52rem;
  margin: 2.5rem auto;
  padding: clamp(1rem, 4vw, 2.25rem);
  background: #171924;
  color: #fff4e4;
  border: 1px solid #4b4e60;
  border-top: 4px solid #8ce8ef;
  font: 1rem/1.55 system-ui, sans-serif;
}
.reader-comments h1, .reader-comments h2 { margin: .25rem 0; color: inherit; }
.reader-comments .comment-kicker { color: #8ce8ef; font: 700 .78rem/1.4 monospace; letter-spacing: .11em; }
.reader-comments label { display: block; font-weight: 700; }
.reader-comments textarea, .reader-comments input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: .75rem;
  margin: .35rem 0;
  border: 1px solid #888ca2;
  background: #11131d;
  color: #fff4e4;
  font: inherit;
}
.reader-comments textarea { resize: vertical; }
.reader-comments button {
  display: inline-block;
  margin: .5rem .5rem .5rem 0;
  padding: .65rem 1rem;
  min-height: 44px;
  color: #11131d;
  background: #8ce8ef;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 700 1rem/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.reader-comments button:disabled { opacity: .65; cursor: wait; }
.reader-comments :focus-visible { outline: 3px solid #ff80ab; outline-offset: 3px; }
.comment-list { margin: 0; padding: 0; list-style: none; }
.comment-list li { border-top: 1px solid #4b4e60; padding: 1rem 0; }
.comment-list p { white-space: pre-wrap; overflow-wrap: anywhere; }
.moderation-page { background: #11131d; padding: 0 .75rem; }