.comment-card{box-sizing:border-box;width:min(100%, var(--comment-max-width));max-width:var(--comment-max-width);padding:var(--comment-padding);color:var(--comment-text);background:var(--comment-background);border:var(--comment-border-width) solid var(--comment-border-color);border-radius:var(--comment-radius);box-shadow:var(--comment-shadow);font-family:var(--comment-font-family);transform-origin:var(--comment-origin-x,center) var(--comment-origin-y,center);isolation:isolate;align-items:center;gap:clamp(12px,.6em,20px);display:flex;position:relative;overflow:hidden}.comment-card:before{z-index:2;border-radius:max(0px, calc(var(--comment-radius) - 2px));content:"";pointer-events:none;border:1px solid #fff3;position:absolute;inset:1px}.comment-card:after{z-index:-1;background:linear-gradient(135deg, color-mix(in srgb, var(--comment-accent) 7%, transparent), transparent 55%);content:"";opacity:var(--comment-background-opacity,1);pointer-events:none;position:absolute;inset:0}.comment-card__accent{background:var(--comment-accent);width:clamp(4px,.14em,7px);box-shadow:none;position:absolute;inset:0 auto 0 0}.comment-card[data-kind=superSticker] .comment-card__accent{background:#ec4899}.comment-card[data-kind=membership] .comment-card__accent{background:#22c55e}.comment-card__avatar{box-sizing:border-box;width:var(--comment-avatar-size);height:var(--comment-avatar-size);aspect-ratio:1;border:2px solid color-mix(in srgb, var(--comment-accent) 65%, white 10%);border-radius:var(--comment-avatar-radius);object-fit:cover;object-position:center;transform-origin:50%;background:#ffffff14;flex:none;align-self:center;box-shadow:0 5px 14px #00000038}.comment-card__avatar--fallback{color:#fff;background:linear-gradient(145deg, var(--comment-accent), #4338ca);font-size:clamp(16px, calc(var(--comment-avatar-size) * .4), 52px);place-items:center;font-weight:800;line-height:1;display:grid}.comment-card__body{flex:auto;min-width:0}.comment-card__meta{min-width:0;font-size:var(--comment-author-size);flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 .38em;display:flex}.comment-card__meta:last-child{margin-bottom:0}.comment-card__author{min-width:0;max-width:100%;color:var(--comment-author);font-size:1em;font-weight:var(--comment-author-weight);letter-spacing:.01em;text-overflow:ellipsis;white-space:nowrap;flex:0 auto;line-height:1.25;overflow:hidden}.comment-card__role,.comment-card__kind,.comment-card__amount{box-sizing:border-box;color:#ffffffeb;letter-spacing:.045em;white-space:nowrap;background:#ffffff1a;border:1px solid #ffffff26;border-radius:999px;align-items:center;min-height:1.7em;padding:.23em .62em;font-size:.58em;font-weight:750;line-height:1;display:inline-flex}.comment-card__role--owner{background:#ef444447}.comment-card__role--moderator{background:#3b82f647}.comment-card__role--member{background:#22c55e40}.comment-card__kind{color:#fef3c7;background:#f59e0b38}.comment-card__amount{color:#fef08a;background:#713f1273;border-color:#fde04747}.comment-card[data-kind=superChat] .comment-card__amount{background:color-mix(in srgb, var(--comment-text) 12%, transparent);min-height:0;color:var(--comment-text);letter-spacing:0;border:0;border-radius:3px;padding:.2em .4em;font-size:.82em;line-height:1.2}.comment-card[data-super-chat-tier]:after{background:0 0}.comment-card[data-super-chat-tier] .comment-card__amount,.comment-card[data-super-chat-tier] .comment-card__avatar--fallback{background:var(--super-chat-header);color:var(--super-chat-header-text)}.comment-card[data-super-chat-tier] .comment-card__role{border-color:color-mix(in srgb, var(--comment-text) 30%, transparent);color:var(--comment-text);background:0 0}.comment-card__visually-hidden{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.comment-card__message{color:var(--comment-text);font-size:var(--comment-font-size);font-weight:var(--comment-font-weight);letter-spacing:.012em;line-height:var(--comment-line-height);overflow-wrap:anywhere;text-wrap:pretty;-webkit-line-clamp:var(--comment-lines);-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}.comment-card--compact{box-shadow:var(--comment-shadow)}.comment-card--animate[data-animation=slide]{animation:comment-card-slide var(--comment-animation-duration) cubic-bezier(.16, 1, .3, 1) both}.comment-card--animate[data-animation=fade]{animation:comment-card-fade var(--comment-animation-duration) ease-out both}.comment-card--animate[data-animation=zoom]{animation:comment-card-zoom var(--comment-animation-duration) cubic-bezier(.16, 1, .3, 1) both}.comment-card--animate[data-animation=rise]{animation:comment-card-rise var(--comment-animation-duration) cubic-bezier(.16, 1, .3, 1) both}.comment-card--animate[data-animation=pop]{animation:comment-card-pop var(--comment-animation-duration) cubic-bezier(.2, 1.35, .4, 1) both}.comment-card--animate[data-animation=flip]{animation:comment-card-flip var(--comment-animation-duration) cubic-bezier(.16, 1, .3, 1) both}.comment-card--animate[data-animation=bounce]{animation:comment-card-bounce var(--comment-animation-duration) ease-out both}.comment-card--exit{pointer-events:none;animation:comment-card-exit var(--comment-exit-duration) ease-in both}@keyframes comment-card-slide{0%{opacity:0;transform:translate(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes comment-card-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes comment-card-fade{0%{opacity:0}to{opacity:1}}@keyframes comment-card-zoom{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes comment-card-pop{0%{opacity:0;transform:translateY(10px)scale(.96)}72%{opacity:1;transform:translateY(-2px)scale(1.005)}to{opacity:1;transform:scale(1)rotate(0)}}@keyframes comment-card-flip{0%{opacity:0;transform:perspective(900px)rotateX(-12deg)translateY(10px)}to{opacity:1;transform:perspective(900px)rotateX(0)translateY(0)}}@keyframes comment-card-bounce{0%{opacity:0;transform:translateY(12px)scale(.98)}62%{opacity:1;transform:translateY(-3px)scale(1.003)}82%{transform:translateY(1px)scale(1)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes comment-card-exit{0%{opacity:1;transform:translateY(0)scale(1)}to{opacity:0;transform:translateY(6px)scale(.98)}}@media (prefers-reduced-motion:reduce){.comment-card--animate,.comment-card--exit{animation-duration:1ms!important}}