/* Animated WGB mark: a doodle agent lives behind the badge and sneaks out. */
.logo{display:flex;align-items:center;gap:12px;margin-right:auto;text-decoration:none;line-height:1;color:inherit;position:relative}
.lm{position:relative;width:42px;height:42px;flex:none}
.lm .badge{position:absolute;inset:0;z-index:2;width:100%;height:100%;border-radius:13px;box-shadow:0 6px 14px rgba(79,216,196,.25)}
.lm .badge .ring{transform-origin:50% 50%;animation:lmspin 14s linear infinite}
.lm .bot{position:absolute;left:3px;top:3px;width:36px;height:36px;z-index:1;overflow:visible;transition:transform .55s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 90%}
.lm .paws{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:visible}
.lm .paws g{opacity:0;transition:opacity .2s .15s}
.lm[data-peek=top] .bot{transform:translateY(-25px) rotate(-4deg)}
.lm[data-peek=right] .bot{transform:translate(30px,-12px) rotate(24deg)}
.lm[data-peek=left] .bot{transform:translate(-30px,-12px) rotate(-24deg)}
.lm[data-peek=top] .p-top,.lm[data-peek=right] .p-right,.lm[data-peek=left] .p-left{opacity:1}
.lm .eyes{transition:transform .35s ease;transform-box:fill-box}
.lm .face>g{display:none}.lm[data-face=happy] .f-happy,.lm[data-face=wink] .f-wink,.lm[data-face=wow] .f-wow,.lm[data-face=silly] .f-silly,.lm[data-face=sus] .f-sus,.lm[data-face=love] .f-love{display:inline}
.lm .lid{transform-origin:50% 45%;transform-box:fill-box}.lm.blink .lid{animation:lmblink .18s}
.lm .ant{transform-origin:20px 9px;animation:lmant 1.8s ease-in-out infinite}
.lm .think{position:absolute;left:30px;top:calc(100% + 10px);z-index:4;white-space:nowrap;font:600 .78rem/1.2 var(--b,system-ui);color:#06201c;background:#eaf4f4;padding:7px 11px;border-radius:14px;box-shadow:0 10px 24px -8px #000;opacity:0;transform:translateY(-4px) scale(.9);transform-origin:0 0;transition:opacity .25s,transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none}
.lm .think:before,.lm .think:after{content:"";position:absolute;background:#eaf4f4;border-radius:50%}
.lm .think:before{width:8px;height:8px;left:4px;top:-8px}.lm .think:after{width:5px;height:5px;left:-2px;top:-15px}
.lm.thinking .think{opacity:1;transform:none}
.logo .wm{display:flex;flex-direction:column;gap:3px;position:relative;z-index:0}
.logo .wm b{font:800 1.32rem var(--d,system-ui);letter-spacing:-.01em;background:linear-gradient(90deg,#eaf4f4 30%,#6ff0d8 50%,#eaf4f4 70%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:lmshine 6s ease-in-out infinite}
.logo .wm small{font:600 .6rem var(--b,system-ui);letter-spacing:.22em;text-transform:uppercase;color:var(--ac,#4fd8c4)}
@keyframes lmspin{to{transform:rotate(360deg)}}
@keyframes lmblink{50%{transform:scaleY(.1)}}
@keyframes lmant{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes lmshine{0%,60%{background-position:100% 0}100%{background-position:-50% 0}}
@media(max-width:700px){.lm{width:36px;height:36px}.lm .bot{width:30px;height:30px}.logo .wm b{font-size:1.1rem}.logo .wm small{font-size:.52rem;letter-spacing:.14em}.lm .think{font-size:.72rem}
 .lm[data-peek=top] .bot{transform:translateY(-21px) rotate(-4deg)}.lm[data-peek=right] .bot{transform:translate(25px,-10px) rotate(24deg)}}
@media(max-width:400px){.logo{gap:8px}.lm{width:32px;height:32px}.lm .bot{width:26px;height:26px;left:3px;top:3px}.logo .wm small{display:none}
 .lm[data-peek=top] .bot{transform:translateY(-19px) rotate(-4deg)}.lm[data-peek=right] .bot{transform:translate(22px,-9px) rotate(24deg)}}
@media(prefers-reduced-motion:reduce){.lm .bot{transition:none}.logo .wm b{animation:none;color:#eaf4f4}}
