.mascot-guide{--mascot-wander:0px;position:fixed;z-index:35;left:auto;right:max(19px,env(safe-area-inset-right,0px));bottom:25px;width:100px;transform:translateX(calc(var(--mascot-wander)*-1));transition:transform .8s cubic-bezier(.22,.7,.2,1);color:var(--ink)}
.mascot-trigger{position:relative;display:block;width:100px;height:119px;padding:0;background:transparent;border-radius:48% 48% 22% 22%;isolation:isolate}
.mascot-trigger::after{content:"";position:absolute;bottom:1px;left:11%;width:78%;height:8px;border-radius:50%;background:#39270f24;filter:blur(2px);z-index:-1;transform:scaleX(.85)}
.mascot-body{display:block;position:absolute;inset:0 3px 12px;transform-origin:50% 94%;animation:mascot-idle 9s ease-in-out infinite}
.mascot-portrait{display:block;width:94px;height:100px;overflow:hidden;filter:url(#mascot-ink-cutout) drop-shadow(1px 3px 1px #57331525)}
.mascot-portrait img{width:271.187%;max-width:none;height:auto;user-select:none;-webkit-user-drag:none}
.mascot-trigger:focus-visible{outline-offset:2px}
.mascot-guide:not(.is-greeting):hover .mascot-body,.mascot-guide:not(.is-greeting):focus-within .mascot-body{animation-play-state:paused}
.mascot-hint{position:absolute;right:85px;bottom:60px;width:91px;padding:6px 10px;background:var(--paper-light);border:1px solid var(--line);border-radius:13px 4px 0 13px;font:400 19px/1.3 var(--display);box-shadow:2px 3px 10px #39270f0d;pointer-events:none;white-space:nowrap}
.mascot-hint small{display:block;font:400 9px/1.4 var(--body);letter-spacing:.03em;color:var(--muted)}
.mascot-note{position:absolute;bottom:133px;right:0;width:285px;padding:20px 22px 13px;background:var(--paper-light) url('assets/paper-texture.jpg');border:1px solid var(--line);box-shadow:4px 8px 0 #352b1710,0 10px 28px #271a1121;animation:mascot-note-in .2s ease-out}
.mascot-note::after{content:"";position:absolute;bottom:-8px;right:37px;width:14px;height:14px;transform:rotate(45deg);background:var(--paper-light);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.mascot-note-heading{display:flex;align-items:center;gap:8px;margin-bottom:17px;padding-right:24px;font-size:8px;letter-spacing:.12em;color:var(--muted)}
.mascot-note-heading>span{display:grid;place-items:center;width:24px;height:26px;border:1px solid var(--red);outline:1px solid var(--red);outline-offset:-3px;color:var(--red);font:400 19px var(--display)}
.mascot-message-cn{font:400 29px/1.3 var(--display);white-space:pre-line}
.mascot-message-en{font-size:11px;line-height:1.7;color:var(--muted);margin-top:9px}
.mascot-link{display:flex;align-items:center;gap:7px;color:var(--red);font-size:10px;min-height:44px;margin-top:8px}
.mascot-link b{font-weight:600;font-size:12px}.mascot-link svg{width:16px;height:16px;margin-left:auto}
.mascot-dismiss{position:absolute;top:5px;right:5px;display:grid;place-items:center;width:44px;height:44px;background:transparent;color:var(--muted)}
.mascot-dismiss svg{width:16px;height:16px}.mascot-dismiss:hover{color:var(--red)}
.mascot-swish{position:absolute;left:1px;top:36px;width:96px;height:42px;border:2px solid transparent;border-bottom-color:var(--gold);border-radius:50%;transform:rotate(-17deg);opacity:0;pointer-events:none}
.mascot-swish::after{content:"";position:absolute;inset:6px -3px -5px 12px;border-bottom:1px solid var(--red);border-radius:50%}
.mascot-guide.is-greeting .mascot-body{animation:mascot-greeting .8s cubic-bezier(.3,.2,.3,1) both;animation-play-state:running}
.mascot-guide.is-greeting .mascot-swish{animation:mascot-swish .8s ease-out both}
.mascot-guide.is-travelling:not(.is-greeting) .mascot-body{animation:mascot-travel .34s ease-in-out infinite alternate}
.mascot-guide.is-resting .mascot-body{animation-play-state:paused}
@keyframes mascot-idle{0%,64%,88%,100%{transform:translateY(0) rotate(0)}70%{transform:translateY(-7px) rotate(-3deg)}76%{transform:translateY(0) rotate(2deg)}82%{transform:translateY(-3px) rotate(-1deg)}}
@keyframes mascot-travel{from{transform:translateY(0) rotate(-4deg)}to{transform:translateY(-7px) rotate(4deg)}}
@keyframes mascot-greeting{0%,100%{transform:translateY(0) rotate(0)}18%{transform:translateY(3px) rotate(-10deg) scaleY(.96)}45%{transform:translateY(-25px) rotate(9deg)}72%{transform:translateY(0) rotate(-4deg)}86%{transform:translateY(-5px) rotate(2deg)}}
@keyframes mascot-swish{0%,100%{opacity:0;transform:rotate(-30deg) scale(.6)}40%{opacity:.9;transform:rotate(5deg) scale(1.15)}75%{opacity:.25;transform:rotate(25deg) scale(1.25)}}
@keyframes mascot-note-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.mascot-guide{right:max(11px,env(safe-area-inset-right,0px));bottom:16px;width:72px;transition:transform .7s ease,bottom .2s ease}.mascot-trigger{width:72px;height:88px}.mascot-body{inset:0 2px 10px}.mascot-portrait{width:68px;height:73px}.mascot-hint{right:62px;bottom:44px;font-size:16px;width:83px;padding:5px 8px}.mascot-hint small{font-size:8px}.mascot-note{bottom:101px;width:250px;padding:17px 19px 10px}.mascot-note-heading{margin-bottom:13px}.mascot-message-cn{font-size:27px}.mascot-swish{left:0;top:25px;width:72px;height:34px}body.has-order .mascot-guide{bottom:calc(80px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:reduce){.mascot-guide{transform:none;transition:none}.mascot-body,.mascot-swish,.mascot-note{animation:none!important}}