.mascot-stage{position:relative;isolation:isolate;width:100%;height:435px;overflow:hidden;background:#fffaf2;border:2px solid #554861;border-radius:48% 48% 24px 24px;box-shadow:7px 8px 0 #c5aee3;color:#554861}
.mascot-heading{position:absolute;top:37px;left:0;width:100%;text-align:center;margin:0;font:italic 21px Georgia,serif;z-index:1;pointer-events:none}
.mascot-stage:before{content:"";position:absolute;left:7%;right:7%;bottom:57px;height:61px;background:#d4f1da;border-radius:50%;opacity:.75}
.mascot-track{position:absolute;inset:70px 12px 28px}
.mascot-link{position:absolute;left:0;bottom:0;display:block;width:65%;line-height:0;border-radius:45%;animation:gloop-roam 18s ease-in-out infinite;text-decoration:none;touch-action:manipulation}
.mascot-link svg{width:100%;height:auto;overflow:visible}
.mascot-link .character{transform-box:view-box;transform-origin:50% 82%;animation:gloop-cute 12s ease-in-out infinite}
.mascot-link .eye{transform-box:fill-box;transform-origin:center;animation:gloop-blink 6s infinite}
.mascot-link .gloop-shadow{transform-box:fill-box;transform-origin:center;animation:gloop-shadow 12s ease-in-out infinite}
.mascot-link:focus-visible{outline:3px dashed #7052b5;outline-offset:-14px}
.mascot-note{position:absolute;bottom:13px;left:12px;right:12px;text-align:center;font-size:12px;font-weight:bold;margin:0;pointer-events:none}
.mascot-spark{position:absolute;pointer-events:none;font-size:32px;color:#b395d1;animation:gloop-sparkle 4s ease-in-out infinite}.mascot-spark.one{left:12%;top:28%;color:#ccad48}.mascot-spark.two{right:10%;top:24%;animation-delay:1s}.mascot-spark.three{right:19%;bottom:21%;font-size:24px;color:#d18ba5;animation-delay:2s}
.mascot-pause{position:absolute;bottom:44px;right:16px;z-index:2;background:#fffaf2e6;color:#554861;border:1px solid #bfaacb;border-radius:8px;padding:7px 9px;font:11px "Trebuchet MS",Arial,sans-serif;cursor:pointer}.mascot-pause:focus-visible{outline:3px solid #7052b5;outline-offset:3px}
.mascot-stage:hover .mascot-link,.mascot-link:focus-visible{animation-play-state:paused}
.mascot-stage[data-paused=true] *,.mascot-sleeping *{animation-play-state:paused!important}
.mascot-ribbon{margin-bottom:8px}.mascot-ribbon .mascot-stage{height:110px;border:0;border-radius:20px;background:#eee5ff;box-shadow:none}
.mascot-ribbon .mascot-heading{top:17px;left:20px;width:auto;font-size:16px}.mascot-ribbon .mascot-note{left:20px;right:auto;bottom:22px;font-size:11px;text-align:left}.mascot-ribbon .mascot-pause{bottom:14px;right:12px}
.mascot-ribbon .mascot-track{inset:0 17% 0 39%}.mascot-ribbon .mascot-link{width:130px;max-width:65%;bottom:-5px;animation-name:gloop-small-roam}.mascot-ribbon .mascot-stage:before{left:37%;right:12%;bottom:13px;height:18px}.mascot-ribbon .mascot-spark{font-size:16px}.mascot-ribbon .mascot-spark.one{left:40%;top:20%}.mascot-ribbon .mascot-spark.two{right:20%;top:25%}.mascot-ribbon .mascot-spark.three{display:none}
@keyframes gloop-roam{0%,100%{transform:translateX(0)}25%{transform:translateX(53.846%)}45%{transform:translateX(53.846%)}70%{transform:translateX(8%)}85%{transform:translateX(8%)}}
@keyframes gloop-small-roam{0%,100%{left:0}25%,45%{left:35%}70%,85%{left:5%}}
@keyframes gloop-cute{0%,100%{transform:translateY(0) rotate(0)}6%{transform:translateY(-9px) rotate(-5deg)}12%{transform:translateY(0) rotate(5deg)}18%{transform:translateY(-8px) rotate(-4deg)}24%,30%{transform:translateY(0) rotate(0)}34%{transform:scale(1.08,.92)}40%{transform:translateY(-22px) scale(.96,1.06)}46%{transform:scale(1.05,.95)}52%{transform:rotate(-10deg)}57%{transform:rotate(10deg)}62%{transform:rotate(-9deg)}67%{transform:rotate(8deg)}72%,80%{transform:translateY(0) rotate(0)}86%{transform:translateY(-10px) rotate(-4deg)}92%{transform:translateY(0) rotate(4deg)}}
@keyframes gloop-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes gloop-shadow{0%,30%,46%,72%,100%{transform:scaleX(1)}40%{transform:scaleX(.75)}}
@keyframes gloop-sparkle{0%,100%{opacity:.45;transform:scale(.8) rotate(-10deg)}50%{opacity:1;transform:scale(1.12) rotate(12deg)}}
@media(max-width:800px){.hero-inner>.mascot-stage{grid-row:1;height:285px;max-width:450px;margin:0 auto 22px;border-radius:28px}.hero-inner{padding-top:24px}.hero-inner>.mascot-stage .mascot-track{inset:20px 12px 30px}.hero-inner>.mascot-stage .mascot-link{width:65%;animation-name:gloop-mobile-roam}.hero-inner>.mascot-stage .mascot-heading{top:19px;font-size:17px}.hero-inner>.mascot-stage .mascot-pause{top:auto;bottom:34px;right:12px}.hero-inner>.mascot-stage:before{bottom:40px}.hero-inner>.mascot-stage .mascot-note{font-size:11px}.mascot-ribbon .mascot-track{inset:0 12% 0 48%}.mascot-ribbon .mascot-pause{top:auto;bottom:9px;font-size:10px;padding:5px}.mascot-ribbon .mascot-heading{left:13px;font-size:14px}.mascot-ribbon .mascot-note{left:13px;max-width:135px;font-size:10px;bottom:23px}.mascot-ribbon .mascot-stage:before{left:44%;right:5%}.mascot-ribbon .mascot-spark.one{left:47%}}
@keyframes gloop-mobile-roam{0%,100%{transform:translateX(0)}25%,45%{transform:translateX(53.846%)}70%,85%{transform:translateX(8%)}}
@media(prefers-reduced-motion:reduce){.mascot-stage *{animation:none!important}.mascot-link{left:15%}.mascot-ribbon .mascot-link{left:10%}.mascot-pause{display:none}}

.mascot-ribbon-home .mascot-stage{height:155px}.mascot-ribbon-home .mascot-link{width:155px;bottom:0}.mascot-ribbon-home .mascot-heading{top:31px;font-size:20px}.mascot-ribbon-home .mascot-note{bottom:35px;font-size:12px}
@media(max-width:800px){.mascot-ribbon-home .mascot-heading{left:13px;top:25px;font-size:15px}.mascot-ribbon-home .mascot-note{left:13px;bottom:30px;font-size:11px}.mascot-ribbon-home .mascot-link{max-width:95%;width:145px}.mascot-ribbon-home .mascot-track{inset:0 3% 0 48%}}
