.live-comment{position:relative;padding:20px;border:1px solid #ffffff24;border-radius:15px;background:linear-gradient(135deg,#5369af 0%,#7560b5 100%);color:#fff;min-width:0;font-family:Rebond,Arial,sans-serif;text-align:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.live-comment .comment-author{display:flex;align-items:center;gap:10px;padding-right:20px;margin-bottom:16px}
.live-comment .comment-author h3{font:700 14px/1.35 Rebond,Arial,sans-serif;color:#fff;margin:0 0 3px;letter-spacing:0;min-height:0}
.live-comment .comment-author p{font:400 11px/1.4 Rebond,Arial,sans-serif;color:#fff;margin:0}
.comment-portrait{--portrait-size:40px;display:block;position:relative;flex:0 0 var(--portrait-size);width:var(--portrait-size);height:var(--portrait-size);border-radius:50%;background-repeat:no-repeat;background-size:calc(var(--portrait-size)*5.27835) calc(var(--portrait-size)*2.63918)}
.felix-portrait{background-image:url('assets/highlight-felix-comment.png');background-position:calc(var(--portrait-size)*-.31959) calc(var(--portrait-size)*-.59278)}
.james-portrait{background-image:url('assets/highlight-james-comment.png');background-position:calc(var(--portrait-size)*-.60309) calc(var(--portrait-size)*-.59278)}
.live-comment blockquote{font:400 14px/1.5 Rebond,Arial,sans-serif;margin:0;color:#fff;letter-spacing:0}
.live-comment .comment-mentions{font:400 11px/1.5 Rebond,Arial,sans-serif;margin:12px 0 0;color:#f0ebff}
.comment-expand{display:inline-flex;align-items:center;justify-content:center;position:absolute;right:12px;top:14px;width:28px;height:28px;padding:0;border:0;background:transparent;color:#fff;border-radius:50%;font:400 20px/1 Rebond,Arial,sans-serif;cursor:pointer}
.comment-expand:hover{background:#ffffff20}
.comment-expand:focus-visible{outline:2px solid #fff;outline-offset:3px}
.highlight-comments>.live-comment:is(:hover,:focus-within){transform:rotate(.7deg) translateY(-2px)}
.comment-image-dialog{width:min(680px,calc(100% - 48px));max-width:calc(100% - 48px);padding:54px 24px 24px}
.comment-image-dialog .live-comment{padding:32px;border-radius:18px}
.comment-image-dialog .comment-author{margin-bottom:24px;gap:14px}
.comment-image-dialog .comment-portrait{--portrait-size:56px}
.comment-image-dialog .comment-author h3{font-size:20px}
.comment-image-dialog .comment-author p{font-size:14px}
.comment-image-dialog blockquote{font-size:20px;line-height:1.5}
.comment-image-dialog .comment-mentions{font-size:14px;margin-top:20px}
@media(max-width:700px){.comment-image-dialog{width:calc(100% - 24px);max-width:calc(100% - 24px);padding:52px 12px 12px}.comment-image-dialog .live-comment{padding:24px}.comment-image-dialog blockquote{font-size:18px}}
@media(prefers-reduced-motion:reduce){.live-comment{transition:none}.highlight-comments>.live-comment:is(:hover,:focus-within){transform:none}}