.category-switch:before{content:'';position:absolute;z-index:-1;inset:3px auto 3px 3px;width:calc((100% - 6px - (var(--category-count,2) - 1)*4px)/var(--category-count,2));transform:translateX(calc(var(--category-index,0)*(100% + 4px)));border:1px solid var(--line);border-radius:5px;background:var(--panel);box-shadow:0 1px 3px var(--shadow);transition:transform .24s cubic-bezier(.16,1,.3,1)}
.button,.icon-button,.nav-item,.category-button,.filter-button,.suggestion,.reaction-group button,.comment-like,.favorite-button,.share-button,.search-field,.form-input,.comment-composer,.upload-field{transition:background-color .16s,color .16s,border-color .16s,box-shadow .16s}
.suggestion:not(.selected):hover{background:var(--hover)}
.search-field:focus-within,.comment-composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.1)}
.upload-field:hover{background:var(--hover);border-color:var(--accent)}
.button:active:not(:disabled),.icon-button:active{translate:0 1px}
.attachment-button>img{transition:transform .3s}
@media(hover:hover){.attachment-button:hover>img{transform:scale(1.015)}}
.topbar{transition:margin-top .24s cubic-bezier(.16,1,.3,1)}
.topbar-hidden .topbar{margin-top:calc(-1 * var(--topbar-height))}
.stat strong,.reaction-group strong,.net-score strong{display:inline-block}
.dialog,.image-dialog{opacity:0;transform:translateY(8px) scale(.99);transition:opacity .16s,transform .2s,display .2s allow-discrete,overlay .2s allow-discrete}
.dialog[open],.image-dialog[open]{opacity:1;transform:translateY(0) scale(1)}
dialog::backdrop{opacity:0;transition:opacity .2s,display .2s allow-discrete,overlay .2s allow-discrete}
dialog[open]::backdrop{opacity:1}
@starting-style{.dialog[open],.image-dialog[open]{opacity:0;transform:translateY(8px) scale(.99)}dialog[open]::backdrop{opacity:0}}
.toast{transition:opacity .2s,transform .2s}
.vote-energy{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden;color:#24bd79}
.vote-energy.negative{color:#ef5967}
.vote-energy-particle{position:absolute;left:0;top:0;opacity:0;background:currentColor;border-radius:1px;box-shadow:0 0 8px currentColor;offset-rotate:auto}
.vote-energy-particle:after{content:'';position:absolute;right:50%;top:calc(50% - 1px);width:22px;height:2px;background:linear-gradient(90deg,transparent,currentColor)}
.vote-energy-ring{position:absolute;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;box-shadow:0 0 16px currentColor,inset 0 0 10px currentColor;opacity:0}
.vote-energy-charge{position:absolute;border:1px solid currentColor;border-radius:var(--radius-sm);background:linear-gradient(0deg,currentColor,transparent);box-shadow:0 0 20px currentColor;opacity:0}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}