.article-comments { padding-top: 32px; border-top: 1px solid var(--rule); }
.comment-form { display: grid; gap: 12px; margin-top: 30px; }
.comment-form label { font-size: 14px; }
.comment-form input, .comment-form textarea { width: 100%; max-width: 100%; border: 1px solid var(--rule); border-radius: 9px; background: var(--surface); color: var(--foreground); font-size: 16px; line-height: 1.6; font-family: inherit; padding: 13px 16px; }
.comment-form textarea { resize: vertical; min-height: 150px; }
.comment-form input { margin-bottom: 10px; }
.comment-form :is(input,textarea):focus-visible { outline: 2px solid var(--foreground); outline-offset: 3px; }
.comment-form .article-cta { width: fit-content; border: 0; cursor: pointer; font-family: inherit; }
.comment-form button:disabled { opacity: .55; cursor: not-allowed; }
.article-copy .comment-help, .article-copy .comments-load, .article-copy .comments-preview, .article-copy .comment-result { font-size: 13px; line-height: 1.7; margin: 4px 0 14px; color: var(--muted); }
.comment-result:empty { display: none; }
.article-copy .comment-result[data-error="true"] { color: var(--foreground); border-left: 2px solid currentColor; padding-left: 14px; }
.comment-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.reader-comment { padding: 24px 0; border-top: 1px solid var(--rule); }
.reader-comment header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 12px; }
.reader-comment time { font-size: 12px; color: var(--muted); }
.article-copy .reader-comment p { font-size: 17px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.comment-form[hidden] { display: none; }