.rb-host{position:relative}
.nav-a.rb-link{gap:6px}
.rb-slot{display:inline-block;flex:none;width:32px;height:32px;margin-block:-4px}
.rb-txt{display:inline-flex;white-space:nowrap;transform-origin:100% 50%}
.rb-ch{display:inline-block;transform-origin:50% 80%}
.rb-ch.gone{opacity:0}

.rb{position:absolute;left:0;top:0;z-index:5;width:32px;height:32px;pointer-events:none;will-change:transform;--ex:0px;--ey:0px}
.rb-body{position:absolute;inset:0;transform-origin:50% 92%}
.rb-flip{display:block;width:100%;height:100%;transition:transform .18s var(--e)}
.rb.is-left .rb-flip{transform:scaleX(-1)}
.rb-svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 4px rgba(110,77,235,.38))}
.rb-shd{position:absolute;left:50%;bottom:-3px;width:18px;height:4px;margin-left:-9px;border-radius:50%;background:rgba(110,77,235,.28);filter:blur(1.4px);transition:transform .3s,opacity .3s}

.rb-head{fill:#6E4DEB;transition:fill .35s}
.rb-scr{fill:#16132b}
.rb-shine{stroke:#fff;stroke-width:1.5;stroke-linecap:round;opacity:.45}
.rb-stalk{stroke:#5A3AD6;stroke-width:1.7;stroke-linecap:round;transition:stroke .35s}
.rb-ball{fill:var(--brand,#C6F432);filter:drop-shadow(0 0 2px rgba(198,244,50,.9));animation:rbBall 1.8s ease-in-out infinite}
.rb-arm rect{fill:#5A3AD6;transition:fill .35s}
.rb[data-face="happy"] .rb-head,.rb[data-face="laugh"] .rb-head{fill:#7C5CFF}
.rb[data-face="grr"] .rb-head{fill:#E5484D}
.rb[data-face="grr"] .rb-arm rect,.rb[data-face="grr"] .rb-stalk{fill:#C53036;stroke:#C53036}
.rb[data-face="sleep"] .rb-head{fill:#4F3BA8}
.rb-arm-l{transform-origin:2.5px 16px}
.rb-arm-r{transform-origin:29.5px 16px}

.rb .f,.rb-mini .f{opacity:0;transition:opacity .1s}
.rb[data-face="eyes"] .f-eyes,.rb[data-face="happy"] .f-happy,.rb[data-face="tongue"] .f-tongue,.rb[data-face="chomp"] .f-chomp,
.rb[data-face="laugh"] .f-laugh,.rb[data-face="wow"] .f-wow,.rb[data-face="sleep"] .f-sleep,.rb[data-face="grr"] .f-grr,
.rb-mini .f-eyes{opacity:1}
.rb .ln,.rb-mini .ln{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rb .fl,.rb .ey,.rb-eye{fill:#fff}
.rb .tg{fill:#ff7a9a}
.rb .mh{fill:#000;stroke:#fff;stroke-width:1.2}
.rb .th{stroke:#fff;stroke-width:1.1;stroke-linecap:round}
.rb .ring{fill:none;stroke:#fff;stroke-width:1.3}
.rb-look{transform:translate(var(--ex),var(--ey));transition:transform .3s cubic-bezier(.22,1,.36,1)}
.rb-eye{transform-box:fill-box;transform-origin:50% 50%;animation:rbBlink 4s steps(1) infinite}
.rb-mouth{transform-box:fill-box;transform-origin:50% 0}
.rb.is-chomp .rb-mouth{animation:rbChomp .17s ease-in-out infinite alternate}
.rb-blush ellipse{fill:#ff7a9a;opacity:0;transition:opacity .3s}
.rb.is-blush .rb-blush ellipse{opacity:.8}

.rb.is-idle .rb-body{animation:rbFloat 2.6s ease-in-out infinite}
.rb.is-walk .rb-body{animation:rbWalk .28s ease-in-out infinite}
.rb.is-laugh .rb-body{animation:rbShake .11s linear infinite}
.rb.is-kick .rb-body{animation:rbKick .32s ease-out}
.rb.is-nod .rb-body{animation:rbNod 1.8s ease-in-out infinite}
.rb.is-wave .rb-arm-r{animation:rbWave .42s ease-in-out infinite}
.rb.is-push .rb-arm-l,.rb.is-push .rb-arm-r{transform:rotate(-70deg)}
.rb.is-left.is-push .rb-arm-l,.rb.is-left.is-push .rb-arm-r{transform:rotate(-70deg)}

.rb-say{position:absolute;left:24px;bottom:24px;padding:3px 7px;border-radius:8px 8px 8px 2px;background:var(--ink,#0c0c0c);color:var(--on-ink,#fff);font:700 10px/1.25 var(--font);letter-spacing:.01em;white-space:nowrap;transform:scale(0);transform-origin:0 100%;transition:transform .26s var(--spring)}
.rb-say.on{transform:scale(1)}
.rb.is-left .rb-say{left:auto;right:24px;border-radius:8px 8px 2px 8px;transform-origin:100% 100%}
.rb-zz{position:absolute;left:23px;top:-6px;font:700 10px/1 var(--mono);color:var(--ink,#0c0c0c);opacity:0}
.rb.is-sleep .rb-zz{animation:rbZz 1.6s ease-out infinite}
.rb-crumb{position:absolute;left:0;top:0;z-index:4;width:3px;height:3px;border-radius:1px;pointer-events:none}

.rb-mini{position:relative;display:inline-block;flex:none;width:22px;height:22px;vertical-align:middle;--ex:0px;--ey:0px}
.rb-mini .rb-svg{filter:none}
.drawer-b > a.sum-l{display:flex;align-items:center;gap:10px}

@keyframes rbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes rbWalk{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-2.5px) rotate(6deg)}}
@keyframes rbShake{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg) translateY(-1px)}}
@keyframes rbKick{40%{transform:rotate(-16deg)}70%{transform:rotate(18deg) translateX(2px)}100%{transform:none}}
@keyframes rbNod{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg) translateY(1px)}}
@keyframes rbWave{0%,100%{transform:rotate(-140deg)}50%{transform:rotate(-175deg)}}
@keyframes rbChomp{from{transform:scaleY(.22)}to{transform:scaleY(1.05)}}
@keyframes rbBlink{0%,93%{transform:scaleY(1)}94%,97%{transform:scaleY(.12)}98%,100%{transform:scaleY(1)}}
@keyframes rbBall{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes rbZz{0%{opacity:0;transform:translate(0,4px) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(9px,-11px) scale(1.15)}}

@media (prefers-reduced-motion:reduce){
  .rb-body,.rb-eye,.rb-ball,.rb-arm-r,.rb-mouth{animation:none!important}
}