section#comments #comments-wrapper {
         margin: 1.5em 0;
         padding: 0 var(--card-padding);
}
 section#comments .comment {
         display: grid;
         column-gap: 1rem;
         grid-template-areas: "avatar name" "avatar time" "avatar post" "...... interactions";
         grid-template-columns: min-content;
         justify-items: start;
         margin: 0em auto 0em -1em;
         padding: 0.5em;
}
 section#comments .comment.comment-reply {
         margin: 0em auto 0em 1em;
}
 section#comments .comment .avatar-link {
         grid-area: avatar;
         height: 2rem;
         position: relative;
         width: 2rem;
}
 section#comments .comment .avatar-link .avatar {
         height: 100%;
         width: 100%;
}
 section#comments .comment .avatar-link.op::after {
         background-color: var(--accent-color);
         border-radius: 50%;
         bottom: -0.25rem;
         color: var(--accent-color-text);
         content: "✓";
         display: block;
         font-size: 1.25rem;
         font-weight: bold;
         height: 1.5rem;
         line-height: 1.5rem;
         position: absolute;
         right: -0.25rem;
         text-align: center;
         width: 1.5rem;
}
 section#comments .comment .author {
         align-items: center;
         display: flex;
         font-weight: bold;
         gap: 0.5em;
         grid-area: name;
}
 section#comments .comment .author .instance {
         background-color: var(--code-background-color);
         border-radius: 9999px;
         color: var(--neutral);
         font-size: smaller;
         font-weight: normal;
         padding: 0.25em 0.75em;
}
 section#comments .comment .author .instance:hover {
         opacity: 0.8;
         text-decoration: none;
}
 section#comments .comment .author .instance.op {
         background-color: var(--accent-color);
         color: var(--accent-color-text);
}
 section#comments .comment .author .instance.op::before {
         content: "✓";
         font-weight: bold;
         margin-inline-end: 0.25em;
         margin-inline-start: -0.25em;
}
 section#comments .comment .emoji {
         display: inline;
         height: 1.25em;
         vertical-align: middle;
         width: 1.25em;
}
 section#comments .comment .invisible {
         display: none;
}
 section#comments .comment .ellipsis::after {
         content: "…";
}