.syto-mascot-layer{position:fixed;inset:0;z-index:9997;pointer-events:none;overflow:hidden;contain:layout style paint}
.syto-mascot{--m-size:116px;position:absolute;left:0;top:0;width:var(--m-size);height:calc(var(--m-size)*1.22);pointer-events:auto;touch-action:none;user-select:none;will-change:transform;cursor:grab;filter:drop-shadow(0 16px 28px rgba(38,31,64,.2));transition:filter .25s ease}
.syto-mascot:active{cursor:grabbing}.syto-mascot:focus-visible{outline:3px solid var(--focus,#8068ff);outline-offset:5px;border-radius:48%}
.syto-mascot__body{position:absolute;inset:10% 10% 6%;border-radius:49% 49% 45% 45%/43% 43% 58% 58%;background:linear-gradient(150deg,#fff 0%,#fbf7ff 52%,#eee8ff 100%);border:1px solid rgba(72,51,126,.2);box-shadow:inset 0 -13px 25px rgba(96,67,180,.1),0 10px 28px rgba(36,27,68,.17);transform-origin:50% 88%;animation:sytoBreath 3s ease-in-out infinite;transition:transform .28s cubic-bezier(.2,.8,.2,1),border-radius .28s}
.syto-mascot.is-spawning .syto-mascot__body{animation:sytoSpawn .8s cubic-bezier(.2,.8,.2,1),sytoBreath 3s .8s ease-in-out infinite}
.syto-mascot__body:before,.syto-mascot__body:after{content:"";position:absolute;top:-7%;width:25%;height:24%;background:linear-gradient(145deg,#665cff,#ff4f87);border-radius:70% 30% 60% 40%;z-index:-1}.syto-mascot__body:before{left:9%;transform:rotate(-22deg)}.syto-mascot__body:after{right:9%;transform:rotate(22deg) scaleX(-1)}
.syto-mascot__face{position:absolute;left:18%;right:18%;top:27%;height:31%;transform:translate(var(--look-x,0),var(--look-y,0));transition:transform .14s ease}.syto-mascot__eye{position:absolute;top:12%;width:13%;height:18%;border-radius:50%;background:#211b32;transform-origin:center;animation:sytoBlink 4.7s infinite}.syto-mascot__eye.e1{left:17%}.syto-mascot__eye.e2{right:17%}.syto-mascot__eye:after{content:"";position:absolute;width:30%;height:30%;border-radius:50%;background:#fff;left:18%;top:15%}
.syto-mascot__brow{position:absolute;top:0;width:17%;height:2px;background:#554b69;border-radius:9px;transition:transform .2s}.syto-mascot__brow.b1{left:15%;transform:rotate(-5deg)}.syto-mascot__brow.b2{right:15%;transform:rotate(5deg)}.syto-mascot__mouth{position:absolute;left:41%;top:62%;width:19%;height:10%;border-bottom:2px solid #f43f75;border-radius:0 0 100% 100%;transition:.2s}.syto-mascot__cheek{position:absolute;top:51%;width:14%;height:8%;border-radius:50%;background:rgba(255,73,122,.2)}.syto-mascot__cheek.c1{left:2%}.syto-mascot__cheek.c2{right:2%}
.syto-mascot__arm{position:absolute;top:43%;width:18%;height:33%;border-radius:999px;background:#f7f1ff;border:1px solid rgba(75,52,130,.16);transform-origin:50% 10%;z-index:-1;transition:transform .25s ease}.syto-mascot__arm.a1{left:-5%;transform:rotate(18deg)}.syto-mascot__arm.a2{right:-5%;transform:rotate(-18deg)}.syto-mascot__foot{position:absolute;bottom:-3%;width:31%;height:12%;border-radius:80% 80% 45% 45%;background:linear-gradient(90deg,#544cff,#755af2);transform-origin:center;transition:transform .2s}.syto-mascot__foot.f1{left:13%}.syto-mascot__foot.f2{right:13%}
.syto-mascot__spark{position:absolute;right:-1%;top:9%;width:17%;aspect-ratio:1;background:linear-gradient(135deg,#326bff,#ff477e);clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);animation:sytoSpark 2.8s linear infinite}.syto-mascot__shadow{position:absolute;left:23%;right:23%;bottom:0;height:10%;background:rgba(34,25,65,.24);filter:blur(7px);border-radius:50%;transition:.2s}
.syto-mascot__speech{position:absolute;right:74%;bottom:70%;min-width:132px;max-width:238px;padding:10px 13px;border:1px solid var(--line,#d8dbe5);border-radius:16px 16px 4px 16px;background:var(--surface,#fff);box-shadow:0 14px 36px rgba(24,18,45,.18);font:600 12px/1.35 system-ui,sans-serif;color:var(--ink,#211b32);opacity:0;transform:translateY(8px) scale(.96);transition:.2s;pointer-events:none}.syto-mascot__speech.is-visible{opacity:1;transform:none}
.syto-mascot__zzz{position:absolute;left:68%;top:-8%;display:flex;gap:2px;align-items:flex-end;color:#6b54ee;opacity:0;font:800 12px/1 system-ui}.syto-mascot__zzz i{font-style:normal;animation:sytoZzz 1.8s ease-in-out infinite}.syto-mascot__zzz i:nth-child(2){animation-delay:.22s;font-size:10px}.syto-mascot__zzz i:nth-child(3){animation-delay:.42s;font-size:8px}
.syto-mascot__season{position:absolute;inset:-22%;pointer-events:none}.syto-mascot__season i{position:absolute;left:calc(var(--i)*12% + 4%);top:18%;width:6px;height:6px;border-radius:50%;background:#ff477e;box-shadow:0 0 10px #7058ff;animation:sytoSeason 2.2s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.23s)}
.syto-mascot[data-state="sleep"] .syto-mascot__eye,.syto-mascot[data-state="lie"] .syto-mascot__eye{height:2px;border-radius:9px;top:18%;animation:none}.syto-mascot[data-state="sleep"] .syto-mascot__zzz,.syto-mascot[data-state="lie"] .syto-mascot__zzz{opacity:1}.syto-mascot[data-state="sit"] .syto-mascot__body{transform:scaleY(.84) translateY(12%);border-radius:49%}.syto-mascot[data-state="sit"] .syto-mascot__foot{transform:translateY(-6px) scaleX(1.08)}.syto-mascot[data-state="lie"] .syto-mascot__body{transform:rotate(82deg) scale(.9);animation:none}.syto-mascot[data-state="lie"] .syto-mascot__shadow{transform:scaleX(1.45)}
.syto-mascot[data-state="drag"] .syto-mascot__mouth,.syto-mascot[data-mood="surprised"] .syto-mascot__mouth{width:13%;height:14%;left:44%;border:2px solid #f43f75;border-radius:50%}.syto-mascot[data-mood="curious"] .b1{transform:rotate(9deg) translateY(-1px)}.syto-mascot[data-mood="curious"] .b2{transform:rotate(-9deg) translateY(-1px)}.syto-mascot[data-state="celebrate"] .a1{transform:rotate(-128deg)}.syto-mascot[data-state="celebrate"] .a2{transform:rotate(128deg)}
.syto-mascot.is-wave .a2{animation:sytoWave .58s ease-in-out 3}.syto-mascot.is-stretch .a1{transform:rotate(-88deg)}.syto-mascot.is-stretch .a2{transform:rotate(88deg)}.syto-mascot.is-scratch .a2{animation:sytoScratch .34s ease-in-out 4}.syto-mascot.is-yawn .syto-mascot__mouth{height:18%;width:16%;left:42%;border:2px solid #f43f75;border-radius:50%}.syto-mascot.is-looking .syto-mascot__body{animation:sytoLook 1.2s ease-in-out}.syto-mascot.is-walking .f1{animation:sytoFoot .28s ease-in-out infinite alternate}.syto-mascot.is-walking .f2{animation:sytoFoot .28s .14s ease-in-out infinite alternate}.syto-mascot.is-walking .a1{animation:sytoArmWalk .28s ease-in-out infinite alternate}.syto-mascot.is-walking .a2{animation:sytoArmWalk .28s .14s ease-in-out infinite alternate-reverse}.syto-mascot.is-walking .syto-mascot__body{animation:sytoWalkBob .28s ease-in-out infinite alternate}.syto-mascot.is-jump .syto-mascot__body{animation:sytoJumpBody .65s ease-out}.syto-mascot.is-landing .syto-mascot__body{transform:scaleY(.89) scaleX(1.07)}.syto-mascot.is-rush .syto-mascot__body{transform:rotate(-8deg) scaleX(1.05)}.syto-mascot.is-dance .syto-mascot__body{animation:sytoDance .48s ease-in-out infinite}.syto-mascot.is-dance .a1,.syto-mascot.is-dance .a2{animation:sytoDanceArms .48s ease-in-out infinite alternate}
.syto-mascot-confetti{position:fixed;inset:0;pointer-events:none;z-index:9996;overflow:hidden}.syto-mascot-confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;background:hsl(var(--h),80%,62%);left:var(--x);animation:sytoConfetti var(--d) linear forwards;transform:rotate(var(--r))}
@keyframes sytoSpawn{0%{transform:translateX(40px) scale(.72);opacity:0}65%{transform:translateX(-5px) scale(1.05);opacity:1}100%{transform:none;opacity:1}}@keyframes sytoBreath{50%{transform:translateY(-2px) scaleY(1.018)}}@keyframes sytoBlink{0%,43%,46%,100%{transform:scaleY(1)}44%,45%{transform:scaleY(.07)}}@keyframes sytoSpark{to{transform:rotate(360deg)}}@keyframes sytoWave{50%{transform:rotate(155deg)}}@keyframes sytoScratch{50%{transform:rotate(145deg) translateY(-9px)}}@keyframes sytoLook{25%{transform:rotate(-4deg)}65%{transform:rotate(4deg)}}@keyframes sytoFoot{to{transform:translateY(-5px) rotate(6deg)}}@keyframes sytoArmWalk{to{transform:rotate(33deg)}}@keyframes sytoWalkBob{to{transform:translateY(-3px) rotate(1deg)}}@keyframes sytoJumpBody{35%{transform:scaleY(1.06) scaleX(.96)}70%{transform:scaleY(.95) scaleX(1.04)}}@keyframes sytoDance{25%{transform:rotate(-6deg) translateY(-4px)}75%{transform:rotate(6deg) translateY(-4px)}}@keyframes sytoDanceArms{to{transform:rotate(130deg)}}@keyframes sytoZzz{50%{transform:translate(6px,-8px);opacity:.35}}@keyframes sytoSeason{to{transform:translateY(12px) scale(.6);opacity:.35}}@keyframes sytoConfetti{to{transform:translate3d(calc(var(--dx)*1px),105vh,0) rotate(760deg)}}
@media(max-width:700px){.syto-mascot{--m-size:84px}.syto-mascot__speech{max-width:190px;min-width:115px;font-size:11px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.syto-mascot__body,.syto-mascot__eye,.syto-mascot__spark,.syto-mascot__zzz i,.syto-mascot__season i,.syto-mascot__arm,.syto-mascot__foot{animation:none!important;transition:none!important}}