.mascot{filter:drop-shadow(0 0 18px var(--accent)) drop-shadow(0 0 48px color-mix(in srgb, var(--accent) 45%, transparent));display:block;overflow:visible}.mascot .head{fill:#0b1220;stroke:var(--accent);stroke-width:2.5px}.mascot .head-shine{fill:url(#mascotShine);opacity:.35}.mascot .eye{fill:var(--accent);transform-box:fill-box;transform-origin:50%}.mascot .brow,.mascot .mouth{stroke:var(--accent);stroke-width:3px;fill:none;stroke-linecap:round;transform-box:fill-box;transform-origin:50%}.mascot .accessory{stroke:var(--accent);fill:none;stroke-width:2.5px;stroke-linecap:round;opacity:.9}.mascot .body{fill:#0b1220;stroke:var(--accent);stroke-width:2px;opacity:.8}.mascot{animation:4s ease-in-out infinite mascot-float}.mascot .eye{animation:5s ease-in-out infinite mascot-blink}.mascot[data-state=listening] .eye{animation:2.6s ease-in-out infinite mascot-blink;transform:scaleY(1.15)}.mascot[data-state=listening]{animation:2.4s ease-in-out infinite mascot-float}.mascot[data-state=speaking] .mouth{animation:.28s ease-in-out infinite alternate mascot-talk}.mascot[data-state=speaking] .eye{animation:none}.mascot[data-state=thinking] .eye{animation:none;transform:scaleY(.45)}.mascot[data-state=thinking] .brow{transform:translateY(-3px)rotate(-6deg)}.mascot[data-state=thinking]{animation:1.8s ease-in-out infinite mascot-tilt}@keyframes mascot-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes mascot-tilt{0%,to{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}@keyframes mascot-blink{0%,92%,to{transform:scaleY(1)}95%{transform:scaleY(.08)}}@keyframes mascot-talk{0%{transform:scaleY(.6)}to{transform:scaleY(1.6)}}