:root{
 --hub-dark:#0a2540;
 --hub-theme:#38bdf8;
 --hub-success:#58cc02;
 --hub-success-light:#dcfce7;
}
@keyframes hubplus-blink{0%,96%,98%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes hubplus-talk{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(.7)}}
@keyframes hubplus-happy{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.hubmais-front{
 background-color:var(--hub-theme);
 border-radius:50%;
 position:relative;
 overflow:hidden;
 border:5px solid #fff;
 flex-shrink:0;
 box-shadow:0 6px 15px rgba(0,0,0,.15);
 z-index:2;
 transition:background .3s,border-color .3s;
 width:100px;
 height:100px;
}
.hubmais-eye{
 background:#fff;
 border-radius:50%;
 position:absolute;
 display:flex;
 justify-content:center;
 align-items:center;
 animation:hubplus-blink 4s infinite;
 border:2px solid rgba(0,0,0,.15);
 box-shadow:inset 0 2px 4px rgba(0,0,0,.1);
 top:15px;
 width:24px;
 height:24px;
}
.hubmais-eye.left{left:15px}
.hubmais-eye.right{right:15px}
.hubmais-eye::after{
 content:'';
 width:45%;
 height:45%;
 background:#0f172a;
 border-radius:50%;
 transition:all .2s;
}
.hubmais-beak{
 background:#f59e0b;
 border-radius:50%;
 position:absolute;
 left:50%;
 transform:translateX(-50%);
 transition:all .2s;
 border:2px solid #d97706;
 box-shadow:inset 0 -2px 4px rgba(0,0,0,.2);
 z-index:3;
 transform-origin:top center;
 top:35px;
 width:28px;
 height:32px;
}
.hubmais-shirt{
 position:absolute;
 bottom:0;
 left:0;
 width:100%;
 background:var(--hub-dark);
 color:#a3e635;
 text-align:center;
 font-weight:900;
 letter-spacing:1px;
 z-index:4;
 border-top:2px solid rgba(255,255,255,.2);
 font-size:12px;
 height:25px;
 line-height:22px;
}
.hubmais-talking .hubmais-beak{animation:hubplus-talk .3s infinite}
.hubmais-happy{
 animation:hubplus-happy .5s ease-out;
 background-color:var(--hub-success);
 border-color:var(--hub-success-light);
}
.hubmais-happy .hubmais-eye::after{
 content:'⭐';
 font-size:14px;
 background:none;
 display:flex;
 justify-content:center;
 align-items:center;
}
.hubmais-happy .hubmais-beak{
 height:16px!important;
 border-radius:0 0 50% 50%;
}
.hubmais-sad{
 background-color:#94a3b8;
 border-color:#cbd5e1;
}
.hubmais-sad .hubmais-beak{
 height:12px!important;
 border-radius:50% 50% 0 0;
 transform:translateX(-50%) translateY(5px);
}
@media(prefers-reduced-motion:reduce){
 .hubmais-front,.hubmais-eye{animation:none!important}
}