.brand-title{font-weight:500;letter-spacing:.19em;padding-left:.19em}.brand-core{top:1%}.brand-universe{inset:70px 0 65px}.hero-art.brand-stage{height:620px}.mascot-scene{position:absolute;inset:132px 0 0;display:flex;align-items:center;flex-direction:column}.mascot-bubble{position:relative;padding:11px 18px;border:1px solid #8bc7ff28;border-radius:19px 19px 19px 5px;background:#172c40;color:#d6eaff;font-size:12px;line-height:1.4;text-align:center;max-width:90%;min-height:40px;box-shadow:0 8px 28px #0002;z-index:3}.mascot-button{width:min(100%,390px);padding:0;margin:-5px 0 0;background:none;border:0;border-radius:60px;cursor:pointer;touch-action:manipulation}.mascot-button svg{display:block;width:100%;height:auto;overflow:visible}.mascot-hint{font-size:9px;letter-spacing:.5px;color:#9ab5cf;margin-top:-4px}.bot-character{animation:bot-bob 3.8s ease-in-out infinite;transform-origin:210px 220px}.bot-wave{transform-origin:136px 180px;animation:bot-wave 5s ease-in-out infinite}.bot-wink{transform-box:fill-box;transform-origin:center;animation:bot-blink 5.5s infinite}.sound-waves{animation:bot-sound 3s ease-in-out infinite}.like-float,.chat-float{animation:icon-bob 4s ease-in-out infinite}.chat-float{animation-delay:-2s}.bot-shadow{transform-origin:213px 277px;animation:shadow-bob 3.8s ease-in-out infinite}.mascot-button:hover .bot-wave{animation-duration:1s}.mascot-scene.is-excited .bot-character{animation:bot-dance .55s ease-in-out 3}.mascot-scene.is-excited .sound-waves{animation-duration:.4s}.mascot-scene.is-excited .like-float{animation-duration:.6s}
@keyframes bot-bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes bot-wave{0%,55%,100%{transform:rotate(0)}65%,85%{transform:rotate(16deg)}75%,95%{transform:rotate(-12deg)}}
@keyframes bot-blink{0%,40%,46%,100%{transform:scaleY(1)}43%{transform:scaleY(.13)}}
@keyframes bot-sound{0%,25%,85%,100%{opacity:.15}45%,65%{opacity:1}}
@keyframes icon-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes shadow-bob{0%,100%{transform:scaleX(1);opacity:.13}50%{transform:scaleX(.8);opacity:.07}}
@keyframes bot-dance{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-15px) rotate(6deg)}}
@media(max-width:1050px){.hero-art.brand-stage{height:580px}.brand-core{top:3%}.mascot-scene{top:115px}.mascot-bubble{font-size:11px}.mascot-hint{font-size:8px}}
@media(max-width:700px){.hero-art.brand-stage{height:505px}.brand-universe{inset:48px 0 50px}.brand-core{top:0}.brand-title{font-weight:500}.mascot-scene{top:105px}.mascot-button{width:min(100%,350px)}.mascot-bubble{font-size:11px;padding:10px 14px}.mascot-hint{margin-top:-8px}.brand-stage .art-bottom{bottom:0}}
@media(prefers-reduced-motion:reduce){.brand-stage .mascot-scene *{animation:none!important}}
.camera-sparkles{opacity:.45}.mascot-scene.is-excited .camera-sparkles{opacity:1}.bot-wave{transform-origin:119px 176px}
/* Articulated pocket camera, inspired by the supplied reference. */
.bot-wave{transform-origin:179px 176px}.pocket-gimbal{transform-origin:232px 106px;animation:pocket-look 7s ease-in-out infinite}
@keyframes pocket-look{0%,100%{transform:rotate(-5deg)}35%,65%{transform:rotate(6deg)}}
.mascot-scene.is-excited .pocket-gimbal{animation-duration:1.1s}
@media(prefers-reduced-motion:reduce){.pocket-gimbal{animation:none!important}}
/* Compact blue gimbal silhouette with the face in its camera head. */
.bot-wave{transform-origin:183px 218px}.pocket-gimbal{transform-origin:268px 110px}


/* Articulated vector rocket, centered on the body axis. */
.brand-stage .mascot-scene{align-items:center}
.brand-stage .mascot-button{display:block;flex:0 0 auto;align-self:center;width:min(100%,310px);max-width:310px;height:auto;margin:0 auto;padding:0;background:transparent;mix-blend-mode:normal;border:0;border-radius:35px}
.mascot-button .rocket-live{display:block;width:100%;height:auto;overflow:visible}
.rocket-body{transform-origin:180px 165px;animation:rocket-float 3.5s ease-in-out infinite}
.rocket-arm-wave{transform-origin:248px 165px;animation:rocket-wave 4.8s ease-in-out infinite}
.rocket-arm-left{transform-origin:114px 163px;animation:rocket-arm 3.5s ease-in-out infinite}
.rocket-eyes{transform-origin:180px 159px;animation:rocket-blink 4.6s infinite}
.flame{transform-origin:center 270px;animation:rocket-fire .65s ease-in-out infinite alternate}
.flame-b{animation-delay:-.25s}.flame-c{animation-delay:-.45s}
.rocket-shadow{transform-origin:180px 322px;animation:rocket-shadow 3.5s ease-in-out infinite}
.mascot-scene.is-excited .rocket-body{animation:rocket-bounce .55s ease-in-out 3}
.mascot-scene.is-excited .rocket-arm-wave{animation:rocket-wave .7s ease-in-out infinite}
.mascot-scene.is-excited .flame{animation-duration:.2s}
.brand-stage .mascot-hint{margin-top:4px}
@keyframes rocket-float{0%,100%{transform:translateY(1px) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes rocket-wave{0%,45%,100%{transform:rotate(0)}55%,75%{transform:rotate(-15deg)}65%,85%{transform:rotate(9deg)}}
@keyframes rocket-arm{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
@keyframes rocket-blink{0%,43%,48%,100%{transform:scaleY(1)}45%,46%{transform:scaleY(.08)}}
@keyframes rocket-fire{from{transform:scaleY(.76);opacity:.65}to{transform:scaleY(1.06);opacity:1}}
@keyframes rocket-shadow{0%,100%{transform:scaleX(1);opacity:.15}50%{transform:scaleX(.8);opacity:.08}}
@keyframes rocket-bounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-13px) rotate(3deg)}}
@media(max-width:700px){.brand-stage .mascot-button{width:min(100%,255px);max-width:255px}}
@media(prefers-reduced-motion:reduce){.rocket-live *{animation:none!important}}

/* Proportions and articulation traced from the supplied mascot reference. */
.rocket-body{transform-origin:625px 620px}
.rocket-arm-wave{transform-origin:838px 568px}
.rocket-arm-left{transform-origin:400px 563px}
.rocket-eyes{transform-origin:625px 546px}
.flame{transform-origin:center 884px}
.brand-stage .mascot-button{width:min(100%,265px);max-width:265px}
@media(max-width:700px){.brand-stage .mascot-button{width:min(100%,225px);max-width:225px}}

/* Occasional single-eye wink, like the original mascot. */
.rocket-eyes{animation:none}
.rocket-wink{transform-box:fill-box;transform-origin:center;animation:rocket-wink 6.5s ease-in-out infinite}
@keyframes rocket-wink{0%,69%,79%,100%{transform:scaleY(1)}72%,76%{transform:scaleY(.12)}}
@media(prefers-reduced-motion:reduce){.rocket-wink{animation:none!important}}

/* More breathing room around the mascot, including its animated movement. */
.brand-stage .mascot-button{width:min(100%,225px);max-width:225px;margin:16px auto 0;align-self:center}
.brand-stage .mascot-hint{margin-top:8px}
@media(max-width:700px){.brand-stage .mascot-button{width:min(100%,190px);max-width:190px;margin:16px auto 0}}