/* DevBot V4 — lightweight viewport explorer; no external animation libraries. */
.dev-mascot{--look-x:0px;--look-y:0px;--flip:1;position:fixed;left:0;top:0;z-index:9;width:104px;pointer-events:none;will-change:transform;filter:drop-shadow(0 10px 16px rgba(0,0,0,.54))}
.dev-mascot[hidden]{display:none!important}
.mascot-hit{display:block;position:relative;width:100%;height:auto;padding:0;border:0;background:transparent;color:inherit;cursor:grab;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;outline-offset:4px;transform:scaleX(var(--flip));transform-origin:center center}
.mascot-hit:active{cursor:grabbing}
.mascot-hit:focus-visible{outline:2px solid #85efef;border-radius:16px}
.mascot-svg{display:block;width:100%;overflow:visible;pointer-events:none}
.mascot-head{transform-origin:125px 115px}
.mascot-pupil{transform:translate(var(--look-x),var(--look-y));transition:transform .14s}
.mascot-eye{transform-origin:center;animation:devbot-blink 6.5s infinite}
.mascot-main{transform-origin:125px 235px;animation:devbot-breathe 2.8s ease-in-out infinite}
.mascot-orbit{transform-origin:125px 155px;animation:devbot-orbit 20s linear infinite}
.mascot-led{animation:devbot-led 2.7s infinite}
.mascot-leg{transform-origin:center 268px}
.dev-mascot.is-walking .mascot-leg-left{animation:devbot-leg .31s ease-in-out infinite alternate}
.dev-mascot.is-walking .mascot-leg-right{animation:devbot-leg .31s ease-in-out infinite alternate-reverse}
.dev-mascot.is-walking .mascot-main{animation:devbot-step .31s ease-in-out infinite alternate}
.dev-mascot.is-dancing .mascot-main{animation:devbot-dance .36s ease-in-out infinite alternate}
.dev-mascot.is-jumping .mascot-main{animation:devbot-step .28s ease-in-out infinite alternate}
.dev-mascot[data-scrolling="true"] .mascot-orbit{animation-duration:2.5s}
.mascot-shadow{position:absolute;width:48%;height:6px;border-radius:50%;background:#0b325677;filter:blur(5px);left:26%;bottom:-2px;pointer-events:none}
.mascot-speech{position:absolute;left:50%;bottom:calc(100% - 3px);transform:translate(-50%,7px);min-width:132px;max-width:196px;padding:10px 12px;text-align:center;background:rgba(9,20,38,.95);border:1px solid #41799a;border-radius:13px 13px 13px 3px;box-shadow:0 8px 28px #0008;color:#b6f5ff;font:600 10px/1.5 'JetBrains Mono',ui-monospace,monospace;opacity:0;transition:opacity .22s,transform .22s;pointer-events:none}
.dev-mascot.is-talking .mascot-speech{opacity:1;transform:translate(-50%,0)}
.mascot-controls{position:fixed;left:clamp(10px,2.4vw,26px);bottom:clamp(12px,2vw,22px);z-index:10;display:flex;align-items:center;flex-wrap:wrap;gap:5px;max-width:calc(100vw - 20px);padding:7px 8px;border:1px solid #335273;border-radius:14px;background:#0b1421ed;box-shadow:0 10px 40px #0008;backdrop-filter:blur(14px)}
.mascot-control-label{font:700 10px 'JetBrains Mono',monospace;letter-spacing:.08em;color:#9bd1eb;margin:0 7px 0 3px;white-space:nowrap}
.mascot-led-text{color:#6beac2}
.mascot-controls button{border:1px solid transparent;background:transparent;border-radius:8px;color:#a3b5c9;cursor:pointer;padding:8px 9px;font:600 10px 'JetBrains Mono',monospace;transition:background .2s,border-color .2s,color .2s}
.mascot-controls button:hover{background:#1a2e43;color:#fff}
.mascot-controls button[aria-pressed="true"]{background:#153e4d;color:#b7fff5;border-color:#327b8c}
.mascot-controls button:focus-visible{outline:2px solid #86fff3;outline-offset:1px}
.mascot-burst{position:fixed;z-index:8;width:10px;height:10px;border:2px solid #80e4f9;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:devbot-burst .58s ease-out forwards}
@keyframes devbot-burst{to{opacity:0;width:80px;height:80px}}
@keyframes devbot-leg{to{transform:rotate(16deg) translateY(-5px)}}
@keyframes devbot-step{to{transform:translateY(-4px) rotate(1deg)}}
@keyframes devbot-dance{to{transform:rotate(9deg) translateY(-6px)}}
@keyframes devbot-breathe{50%{transform:translateY(-3px)}}
@keyframes devbot-orbit{to{transform:rotate(360deg)}}
@keyframes devbot-led{50%{opacity:.3}}
@keyframes devbot-blink{0%,43%,45%,88%,90%,100%{scale:1 1}44%,89%{scale:1 .10}}
@media(max-width:780px){.mascot-controls{left:8px;bottom:8px;padding:5px;gap:2px}.mascot-control-label{display:none}.mascot-controls button{padding:7px 7px;font-size:9px}.mascot-speech{min-width:120px;max-width:145px;font-size:9px}}
@media(max-width:420px){.mascot-controls{max-width:calc(100vw - 16px)}.mascot-controls button{font-size:9px}}
@media(prefers-reduced-motion:reduce){.mascot-eye,.mascot-orbit,.mascot-leg,.mascot-main,.mascot-led{animation:none!important}.mascot-burst{display:none}.dev-mascot{will-change:auto}}
