.comment-section{--avatar:3.5rem;--indent:5rem;color:#e5e7eb;margin-top:4rem}@media screen and (max-width:768px){.comment-section{--indent:3.5rem}}@media screen and (max-width:500px){.comment-section{--avatar:2.5rem;--indent:2.75rem}}.comment-section .comment-title{color:#fff;margin-bottom:1.5rem;font-size:1rem;font-weight:400}.comment-section .comment-empty{color:#747884;margin-top:2.5rem}.comment-section.header-below-form .comment-title{border-top:1px solid #ffffff4d;margin:1.5rem 0 0;padding-top:2rem;font-size:1.25rem}.comment-form{background-color:#4b4e5a59;border-radius:.8rem;padding:1rem}.comment-form .form-row{gap:1rem;margin-bottom:1rem;display:flex}.comment-form .form-field{flex:1;align-items:center;gap:.75rem;display:flex}.comment-form .form-field .field-label{color:#e5e7eb;flex-shrink:0}.comment-form input,.comment-form textarea{color:#fff;width:100%;font:inherit;background-color:#00000040;border:1px solid #0000;border-radius:.5rem;padding:.625rem 1rem;transition:border-color .2s}.comment-form input::placeholder,.comment-form textarea::placeholder{color:#a1a8b3}.comment-form input:focus,.comment-form textarea:focus{border-color:#ff0266b3;outline:none}.comment-form .form-content{resize:vertical;min-height:4rem;display:block}.comment-form .form-actions{justify-content:flex-end;align-items:center;gap:.75rem;margin-top:.75rem;display:flex}.comment-form .form-error{color:#ff0266;margin-right:auto;font-size:.875rem}.comment-form .btn-submit,.comment-form .btn-cancel{color:#fff;font:inherit;cursor:pointer;background:0 0;border:1px solid #fff;padding:.5rem 1.5rem;font-size:.875rem;font-weight:700;transition:color .2s,border-color .2s,background-color .2s}.comment-form .btn-submit:hover,.comment-form .btn-submit:focus-visible,.comment-form .btn-cancel:hover,.comment-form .btn-cancel:focus-visible{color:#ff0266;border-color:#ff0266}.comment-form .btn-cancel{color:#a1a8b3;border-color:#ffffff4d;font-weight:400}.comment-form.has-labels .form-row{flex-direction:column}.comment-form.has-labels .field-label{width:3.5rem}.comment-form.has-labels .form-field.is-content{align-items:flex-start}.comment-form.has-labels .form-field.is-content .field-label{padding-top:.625rem}.comment-form.is-compact{margin-top:.75rem;padding:.75rem}.comment-form.is-compact .form-row{margin-bottom:.75rem}.comment-list{margin-top:2.5rem}.comment-thread{padding-bottom:1.5rem}.comment-thread+.comment-thread{border-top:1px solid #fff3;padding-top:1.5rem}.comment-item{gap:1rem;display:flex}.comment-avatar{z-index:1;width:var(--avatar);height:var(--avatar);color:#1e1f25;background-color:#e5e7eb;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:inline-flex;position:relative}.comment-body{flex:1;min-width:0;padding-top:.25rem}.comment-meta{align-items:baseline;gap:.5rem;margin-bottom:.5rem;display:flex}.comment-meta .comment-nickname{color:#a1a8b3;font-weight:400}.comment-meta time{color:#747884;font-size:.75rem}.comment-content{white-space:pre-line;color:#fff;word-break:break-word;line-height:1.6}.btn-reply{color:#a1a8b3;font:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:.375rem;margin-top:.75rem;padding:0;font-size:.9375rem;transition:color .2s;display:inline-flex}.btn-reply:hover,.btn-reply:focus-visible,.btn-reply[aria-expanded=true]{color:#ff0266}.comment-replies{padding-left:var(--indent);margin-top:1.5rem;position:relative}.comment-replies:before{content:"";left:calc(var(--avatar)/2);top:-1.5rem;bottom:calc(var(--avatar)/2);background-color:#ffffff40;width:1px;position:absolute}.comment-reply{position:relative}.comment-reply+.comment-reply{margin-top:1.5rem}.comment-reply:before{content:"";left:calc(var(--avatar)/2 - var(--indent));width:calc(var(--indent) - var(--avatar)/2);height:calc(var(--avatar)/2);border-bottom:1px solid #ffffff40;border-left:1px solid #ffffff40;border-bottom-left-radius:1rem;position:absolute;top:0}@media screen and (max-width:768px){.comment-form .form-row{flex-direction:column;gap:.75rem}}@media screen and (max-width:500px){.comment-item{gap:.75rem}.comment-form .form-field{flex-direction:column;align-items:stretch;gap:.375rem}}
