/* Mate brand layer: animated isotype in the header and loading states. */
:root{--mate-green:#1B4430;--mate-cream:#F3EBD8}
.sp-logo.mate-logo{display:block;width:96px;height:96px;border-radius:22px;box-shadow:0 18px 48px -12px rgba(27,68,48,.7),0 0 0 .5px rgba(255,255,255,.12)}
.splash .sp-logo.mate-logo{animation:none}
.mark.mate-mark{display:grid!important;width:24px;height:30px;background:none;border:0;margin-right:2px}
.mark.mate-mark img{width:24px;height:30px;display:block}
.splash .sp-dots{display:none}
html.desk .mark.mate-mark img{filter:none}
@media (prefers-color-scheme:light){html.desk .mark.mate-mark img{content:url(/mate-typing-green.svg)}}
.mate-load{width:22px;height:27px;flex:none}
.chat-loading{flex-direction:column;gap:10px}
.chat-loading .mate-load{width:40px;height:49px}
.login-logo{border-radius:16px}