.dock-mascot{--character:#08d5ee;--ink:#101416;--gaze-x:0px;--gaze-y:0px;position:relative;display:inline-block;width:var(--size,100px);aspect-ratio:1;flex-shrink:0;isolation:isolate;transform-origin:50% 90%;color:var(--character)}
.dock-mascot[data-color="coral"]{--character:#ff6085}.dock-mascot[data-color="orange"]{--character:#ff941f}.dock-mascot[data-color="violet"]{--character:#ad82ff}
.dock-mascot .character-body{position:absolute;inset:5%;border-radius:27%;background:var(--character);transform:rotate(var(--tilt,0deg));transition:transform .38s cubic-bezier(.16,1,.3,1),background .2s;box-shadow:inset 0 4px 8px #ffffff26,inset 0 -6px 9px #00000016}
.dock-mascot .character-face{position:absolute;inset:5%;width:90%;height:90%;overflow:visible;transform:translate(var(--gaze-x),var(--gaze-y));transition:transform .18s ease-out;color:var(--ink)}
.character-eye{transform-box:fill-box;transform-origin:center;fill:currentColor;animation:character-blink 6.8s infinite}
.character-eye.right{animation-delay:.04s}.dock-mascot[data-color="coral"] .character-eye{animation-delay:-2.6s}.dock-mascot[data-color="orange"] .character-eye{animation-delay:-4.4s}.dock-mascot[data-color="violet"] .character-eye{animation-delay:-1.1s}
.character-brow,.character-mouth-surprise,.character-mouth-sleep,.character-eye-happy,.character-eye-closed{display:none}.character-mouth-smile{fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round}.character-mouth-open{display:none;fill:currentColor}.character-brow,.character-eye-happy,.character-eye-closed,.character-mouth-sleep{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round}
.dock-mascot .character-hand{position:absolute;width:23%;height:32%;right:-10%;top:45%;background:var(--character);border:5px solid var(--page-bg,#090b0d);border-radius:45%;transform-origin:40% 90%;transform:rotate(15deg);opacity:0;transition:opacity .2s,transform .25s}
.dock-mascot[data-mood="wave"] .character-hand{opacity:1;animation:character-wave 1.2s ease-in-out 2}.dock-mascot[data-mood="happy"] .character-mouth-smile,.dock-mascot[data-mood="happy"] .character-eye,.dock-mascot[data-mood="sleep"] .character-eye,.dock-mascot[data-mood="sleep"] .character-mouth-smile,.dock-mascot[data-mood="surprise"] .character-mouth-smile{display:none}
.dock-mascot[data-mood="happy"] .character-eye-happy,.dock-mascot[data-mood="happy"] .character-mouth-open,.dock-mascot[data-mood="sleep"] .character-eye-closed,.dock-mascot[data-mood="sleep"] .character-mouth-sleep,.dock-mascot[data-mood="surprise"] .character-mouth-surprise,.dock-mascot[data-mood="thinking"] .character-brow{display:block}
.dock-mascot[data-mood="sleep"] .character-body{transform:rotate(-8deg)}.dock-mascot[data-mood="sleep"] .character-face{transform:translate(0,4%)}
.dock-mascot[data-mood="thinking"] .character-mouth-smile{transform:translateY(4px) scale(.8,1);transform-origin:center}.dock-mascot[data-mood="surprise"] .character-mouth-surprise{fill:currentColor}
.dock-mascot:hover .character-body{transform:rotate(-5deg)}.dock-mascot:hover .character-mouth-smile{transform:translateY(-1px)}
@keyframes character-blink{0%,40%,44%,74%,78%,100%{transform:scaleY(1)}42%,76%{transform:scaleY(.08)}}
@keyframes character-wave{0%,100%{transform:rotate(15deg)}30%{transform:rotate(-25deg)}65%{transform:rotate(30deg)}}
@keyframes character-chat{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.45)}65%{transform:scaleY(.85)}}
[data-offscreen="true"] *,body[data-hidden="true"] *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.dock-mascot *{animation:none!important;transition-duration:.01s!important}.dock-mascot:hover .character-body{transform:none}}