/* Circles brand layer: an open orbit that stays legible at favicon size. */
.logo-img{width:29px;height:29px;display:block;filter:drop-shadow(0 5px 13px #746df64f);transition:transform .25s ease,filter .25s ease}
.brand{letter-spacing:-.035em}
.brand-spark{animation:brandSpark 3.5s ease-in-out infinite}
.brand i{font-size:0;overflow:hidden;position:relative;transition:transform .25s ease}
.brand i:after{content:"";display:block;width:100%;height:100%;background:url('/logo.svg?v=2') center/contain no-repeat}
.brand:hover .logo-img,.brand:hover i{transform:rotate(8deg) scale(1.04)}
.brand:hover .logo-img{filter:drop-shadow(0 7px 16px #746df673)}
.mascot{object-fit:contain}
.mode-tabs small{font-size:10px;color:var(--faint);margin-left:4px}
@keyframes brandSpark{0%,100%{transform:rotate(0) scale(1);opacity:.65}50%{transform:rotate(16deg) scale(1.2);opacity:1}}