.brand{width:245px;animation:brand-arrive .85s cubic-bezier(.2,.8,.2,1) both;transform-origin:center}
.brand-logo{position:relative;display:block;aspect-ratio:2/1;transform-origin:center}
@media(max-width:700px){.brand{width:220px}}
.brand:hover .brand-logo,.brand:focus-visible .brand-logo{animation:brand-nod .7s cubic-bezier(.2,.8,.2,1)}
.brand-logo img{position:absolute;inset:0;width:100%;height:100%}
.wordmark-base{clip-path:polygon(0 57%,14% 50%,24% 46%,26% 44%,35% 42%,36% 40%,64% 41%,65% 43%,74% 46%,76% 48%,88% 53%,100% 59%,100% 100%,0 100%)}
.brand-star{position:absolute;inset:0;display:block;animation:star-arrive .65s cubic-bezier(.16,1.35,.38,1) both}
.star-left{clip-path:polygon(22% 14%,40% 14%,40% 43%,32% 44%,28% 47%,25% 49%,22% 49%);transform-origin:31% 32%;animation-delay:.42s}
.star-centre{clip-path:polygon(38% 0,62% 0,62% 43%,51% 43%,44% 46%,38% 46%);transform-origin:50% 25%;animation-delay:.2s}
.star-right{clip-path:polygon(60% 16%,78% 16%,78% 48%,73% 48%,68% 44%,60% 43%);transform-origin:69% 32%;animation-delay:.64s}
.brand img{filter:brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(354%) hue-rotate(347deg) brightness(99%) contrast(89%)}
.artwork{position:relative;padding-bottom:36px}
.mascot-entry{width:100%;max-width:535px;animation:mascot-arrive 1.1s cubic-bezier(.18,.8,.25,1) .12s both}
.mascot-follow{transform:translate(var(--look-x,0px),var(--look-y,0px));transition:transform .65s cubic-bezier(.2,.8,.2,1);will-change:transform}
.mascot-button{position:relative;display:block;width:100%;aspect-ratio:1/1.12;padding:0;border:0;border-radius:0;background:none;color:var(--paper);cursor:pointer;touch-action:manipulation}
.mascot-hop{display:block;width:79%;height:100%;transform-origin:50% 95%}
.artwork .rabbit-art{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;filter:brightness(0) saturate(100%) invert(93%) sepia(11%) saturate(354%) hue-rotate(347deg) brightness(99%) contrast(89%);transform-origin:50% 95%;animation:rabbit-breathe 5.6s ease-in-out 1.25s infinite}
.question-mark{position:absolute;right:1%;top:29%;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:clamp(8rem,17vw,15.5rem);line-height:1;transform-origin:50% 85%;animation:question-curiosity 6.3s ease-in-out 1.2s infinite;pointer-events:none}
.mascot-hop.is-hopping{animation:rabbit-hop .75s cubic-bezier(.2,.7,.3,1)}
.mascot-button.is-curious .question-mark{animation:question-hello .8s cubic-bezier(.2,.8,.25,1)}
.is-celebrating .mascot-hop{animation:rabbit-celebrate 1.3s cubic-bezier(.2,.7,.3,1)}
.is-celebrating .question-mark{animation:question-hello 1.3s cubic-bezier(.2,.8,.25,1)}
.join:focus-visible{outline-offset:4px}
.motion-control{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:8px 10px;background:none;border:0;border-bottom:1px solid #58594f;border-radius:0;font-family:'Courier New',monospace;font-size:.75rem;color:var(--muted);letter-spacing:.035em;white-space:nowrap;line-height:1.4}
.motion-control:hover{color:var(--paper);border-color:var(--paper)}
.signup{animation:copy-arrive .8s cubic-bezier(.2,.8,.2,1) .3s both}
.motion-paused .rabbit-art,.motion-paused .question-mark,.motion-paused .brand-star{animation-play-state:paused}
.motion-paused .mascot-follow{transform:none}
.motion-paused .mascot-hop.is-hopping,.motion-paused .mascot-button.is-curious .question-mark{animation:none}
@keyframes brand-arrive{from{opacity:0;transform:translateY(-10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes brand-nod{0%,100%{transform:rotate(0)}25%{transform:rotate(-2deg)}65%{transform:rotate(1deg)}}
@keyframes star-arrive{from{opacity:0;transform:translateY(7px) scale(.55) rotate(-12deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes mascot-arrive{from{opacity:0;transform:translateY(22px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes copy-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes rabbit-breathe{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-9px) rotate(.6deg)}}
@keyframes question-curiosity{0%,35%,100%{transform:translateY(0) rotate(-4deg)}55%{transform:translateY(-8px) rotate(6deg)}75%{transform:translateY(-3px) rotate(2deg)}}
@keyframes rabbit-hop{0%,100%{transform:translateY(0) scale(1)}16%{transform:translateY(4px) scale(1.025,.96)}43%{transform:translateY(-30px) rotate(-3deg) scale(.98,1.025)}70%{transform:translateY(0) scale(1.02,.975)}86%{transform:translateY(-4px) scale(1)}}
@keyframes question-hello{0%,100%{transform:rotate(-4deg)}25%{transform:translateY(-14px) rotate(14deg)}55%{transform:translateY(-5px) rotate(-10deg)}80%{transform:rotate(4deg)}}
@keyframes rabbit-celebrate{0%,100%{transform:translateY(0) scale(1)}12%{transform:translateY(4px) scale(1.035,.94)}30%{transform:translateY(-34px) rotate(-5deg) scale(.98,1.03)}46%{transform:translateY(0) scale(1.035,.96)}65%{transform:translateY(-18px) rotate(4deg)}80%{transform:translateY(0) scale(1.02,.98)}}
@media(max-width:700px){.artwork{height:176px;padding-bottom:27px}.mascot-entry{width:165px;max-width:100%}.mascot-button{height:147px;aspect-ratio:auto}.mascot-hop{width:76%}.question-mark{font-size:5.5rem;top:25%;right:1%}.motion-control{font-size:.75rem;bottom:0;padding:4px 8px}.artwork .rabbit-art{max-width:none}h1{font-size:clamp(2.6rem,10.4vw,4.2rem);margin-bottom:16px}}
@media(prefers-reduced-motion:reduce){.brand,.brand-logo,.brand-star,.mascot-entry,.signup,.rabbit-art,.question-mark,.mascot-hop{animation:none!important;opacity:1}.mascot-follow{transform:none!important;transition:none;will-change:auto}.motion-control{display:none}}