@font-face{font-display:swap;font-family:Rubik;font-style:normal;font-weight:400;src:url(/assets/rubik-v31-latin-regular-j0pmKyiQ.woff2)format("woff2")}@font-face{font-display:swap;font-family:Rubik;font-style:normal;font-weight:500;src:url(/assets/rubik-v31-latin-500-1os41rQk.woff2)format("woff2")}@font-face{font-display:swap;font-family:Rubik;font-style:normal;font-weight:700;src:url(/assets/rubik-v31-latin-700-D-tMm-eS.woff2)format("woff2")}:root{--purple-600:#5457b6;--purple-200:#c3c3ef;--pink-400:#ed6468;--pink-200:#ffb8bb;--grey-800:#324152;--grey-500:#67727e;--grey-100:#eaecf1;--grey-50:#f5f6fa;--white:#fff;font-family:Rubik,sans-serif}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}.attribution{text-align:center;font-size:.6875rem}.attribution a{color:#3e52a3}body{background-color:var(--grey-50)}body:has(dialog[open]){overflow:hidden}main{width:100%;min-width:320px;margin:0 auto}button{cursor:pointer;text-transform:capitalize;background-color:#0000;border:none;font-size:16px;font-weight:700;transition:all .2s}button:disabled{cursor:not-allowed}.svgTextButton{align-items:center;gap:8px;font-weight:700;display:inline-flex}.svgTextButton>img{width:16px;height:16px}.commentSubmitButton{background-color:var(--purple-600);color:var(--white);text-transform:uppercase;border-radius:8px;grid-area:submit-button;justify-content:center;align-items:center;width:108px;height:48px;padding:16px 20px;display:flex}.dialogButtonGroup>button{text-transform:uppercase;border-radius:8px;width:50%;padding:16px 20px}.commentScore>button{padding:8px}@media (hover:hover) and (pointer:fine){button:not(:disabled):hover{opacity:.35}.commentScore button:hover{opacity:1}.commentScore button:not(:disabled):hover path{fill:var(--purple-600)}}button:focus-visible{outline:1.5px solid var(--purple-600)}button:active{opacity:.45}.commentScore button:active path{opacity:1}.commentScore button:not(:disabled):active path{fill:var(--purple-600)}img{object-fit:cover;width:100%;height:100%}ul{list-style:none}main>.listFormContainer{background-color:var(--grey-50);margin:32px 16px}.commentCard{background-color:var(--white);color:var(--grey-500);border-radius:8px;grid-template:"meta meta""content content""score action"/auto 1fr;gap:16px;padding:16px;display:grid}ul>li:not(:first-child){margin-top:16px}.commentListItem .commentFormContainer,.commentListItem .updateCommentFormContainer{margin-top:8px}.replyList{border-left:solid 2.5px var(--grey-100);margin:16px 0 0}.replyListItem .commentCard{margin-left:16px}.replyListItem .commentFormContainer,.replyListItem .updateCommentFormContainer{margin:8px 0 0 16px}.textBold{font-weight:700}.textSemiBold{font-weight:500}.darkGreyText{color:var(--grey-800)}.lightGreyText{color:var(--grey-500)}.whiteText{color:var(--white)}.darkPurple{color:var(--purple-600)}.lightPurple{color:var(--purple-200)}.darkPink{color:var(--pink-400)}.darkPurpleBackground{background-color:var(--purple-600)}.darkGreyBackground{background-color:var(--grey-800)}.lightGreyBackground{background-color:var(--grey-500)}.darkPinkBackground{background-color:var(--pink-400)}.userIconContainer{width:32px;height:32px}.elementsGroup{align-items:center;gap:16px;display:flex}.currentUserLabel{background-color:var(--purple-600);color:var(--white);border-radius:2px;padding:4px 8px;font-size:12px;font-weight:700}.commentMeta{grid-area:meta}.commentContent{grid-area:content;line-height:1.4}.commentScore{background-color:var(--grey-50);border-radius:10px;grid-area:score;justify-content:space-evenly;align-items:center;width:100px;height:40px;display:flex}.commentScore>button,.commentScore>p{align-items:center;padding:8px;display:flex}.commentScore>button>svg{width:12px;height:auto}.commentAction{grid-area:action;justify-self:end}.commentFormContainer,.updateCommentFormContainer{background-color:var(--white);border-radius:8px;margin-top:16px;padding:16px}li .commentFormContainer,li .updateCommentFormContainer{margin:0}.commentFormContainer>form{grid-template:"textarea textarea""icon submit-button"/1fr auto;gap:16px;display:grid}.updateCommentFormContainer>form{grid-template-rows:repeat(4,auto);grid-template-columns:1fr auto;grid-template-areas:"update-comment-meta update-comment-meta""update-textarea update-textarea""update-comment-score update-comment-action"".update-submit-button";gap:20px;display:grid}textarea::placeholder{color:var(--grey-500);font-family:Rubik,sans-serif;font-size:16px}textarea:focus-visible{color:var(--grey-500);outline:1.5px solid var(--purple-600);font-family:Rubik,sans-serif;font-size:16px;line-height:1.4}.commentFormContainer textarea,.updateCommentFormContainer textarea{width:100%;min-height:96px;color:var(--grey-800);border:1.5px solid var(--grey-50);resize:none;field-sizing:content;cursor:pointer;border-radius:8px;padding:16px 24px;font-family:Rubik,sans-serif;font-size:16px;line-height:1.4}.commentFormContainer textarea{grid-area:textarea}.updateCommentFormContainer textarea{grid-area:update-textarea}.commentFormContainer .formUserIcon,.updateCommentFormContainer .formUserIcon{align-self:center}.commentFormContainer .formUserIcon{grid-area:icon}.updateCommentFormContainer .commentMeta{grid-area:update-comment-meta}.updateCommentFormContainer .commentScore{grid-area:update-comment-score}.updateCommentFormContainer .commentAction{grid-area:update-comment-action}.updateCommentFormContainer .commentSubmitButton{grid-area:update-submit-button;justify-self:end;width:104px;height:48px}dialog{border:0;border-radius:8px;width:min(380px,100% - 32px);margin:auto;padding:24px 28px}dialog::backdrop{background:#0009}dialog>div{background:var(--white)}.dialogTitle{margin-bottom:20px;font-size:20px}.dialogText{margin-bottom:18px;font-size:16px;line-height:1.5}.dialogButtonGroup{gap:12px;display:flex}@media (width>=770px){main{max-width:765px}ul>li:not(:first-child){margin-top:20px}.commentCard{grid-template:"score meta action""score content content"/auto 1fr auto;gap:14px 24px;padding:32px 24px}.commentCard>.commentCard{margin-top:22px}.replyList{margin-top:20px;margin-left:42px}.replyListItem .commentCard,.replyListItem .commentFormContainer,.replyListItem .updateCommentFormContainer{margin-left:42px}.commentScore{flex-direction:column;align-self:start;width:40px;height:100px}.commentScore>button>svg{height:12px}.commentFormContainer,.updateCommentFormContainer{margin-top:20px;padding:24px}.commentFormContainer>form{grid-template-rows:repeat(2,auto);grid-template-columns:auto 1fr auto;grid-template-areas:"icon textarea submit-button"".textarea."}.updateCommentFormContainer>form{grid-template-rows:repeat(3,auto);grid-template-columns:auto 1fr auto;grid-template-areas:"update-comment-score update-comment-meta update-comment-action""update-comment-score update-textarea update-textarea"". .update-submit-button";row-gap:16px}.commentFormContainer .userIconContainer{width:40px;height:40px}.commentFormContainer textarea,.updateCommentFormContainer textarea{padding:16px 24px}.updateCommentFormContainer .commentSubmitButton{justify-self:end}dialog{width:400px;padding:32px}.dialogTitle{margin-bottom:32px;font-size:24px}.dialogText{margin-bottom:20px}.dialogButtonGroup{gap:16px}}