/* Purposeful motion: the mascot responds to actions, never loops while browsing. */
.grab{position:relative;min-height:62px;flex:none;align-items:flex-start;padding-top:8px}
.grab::before{z-index:1;background:var(--muted);width:36px}
.grab .gesture-friend{position:absolute;width:66px;height:66px;top:0;left:calc(50% - 33px);object-fit:contain;pointer-events:none;transform-origin:50% 85%;transition:transform .25s cubic-bezier(.2,.9,.3,1.25)}
.sheet.dragging .gesture-friend{transition:none;transform:translateY(calc(var(--gesture-pull,0) * 8px)) scaleX(calc(1 + var(--gesture-pull,0) * .09)) scaleY(calc(1 - var(--gesture-pull,0) * .12))}
.sroot.open .gesture-friend{animation:friend-arrive .38s cubic-bezier(.2,.9,.3,1.15)}
.studio-note{display:flex;align-items:center;gap:14px;padding:14px 18px;margin:8px 0 20px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(120deg,rgba(182,255,59,.07),transparent),var(--surface)}
.studio-note img{width:76px;height:76px;object-fit:contain;flex:none}
.studio-note b{display:block;font-size:16px;line-height:1.3;margin-bottom:4px}
.studio-note p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.hold-friend{position:fixed;width:64px;height:64px;pointer-events:none;z-index:100;object-fit:contain;opacity:0;transform:translateY(12px) scale(.7);transition:opacity .16s,transform .22s cubic-bezier(.2,.9,.3,1.3)}
.hold-friend.show{opacity:1;transform:translateY(0) scale(1)}
.nav button,.ib,.btn,.vp,.board{transition:transform .16s cubic-bezier(.2,.8,.2,1),background-color .18s,box-shadow .18s,color .18s}
.search:focus-within{background:var(--surface);box-shadow:0 0 0 2px var(--accent),0 0 0 6px rgba(182,255,59,.08)}
@media(hover:hover) and (pointer:fine){.btn:not(:disabled):hover,.ib:hover,.board:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.16)}.btn.primary:hover{background:#c7ff70}.studio-mark:hover{transform:rotate(-8deg) scale(1.07)}.studio-mark{transition:transform .22s}}
.nav button.nav-pop svg{animation:nav-nod .28s ease-out}
.savebtn.saved-pop{animation:save-pop .32s ease-out}
@keyframes friend-arrive{from{transform:translateY(12px) scale(.88);opacity:0}to{transform:none;opacity:1}}
@keyframes nav-nod{50%{transform:translateY(-3px) scale(1.12)}}
@keyframes save-pop{50%{transform:scale(1.2)}}
@media(min-width:760px){.grab{min-height:4px}.gesture-friend{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hold-friend{display:none}.sheet.dragging .gesture-friend{transform:none}.btn:hover,.ib:hover,.board:hover,.studio-mark:hover{transform:none}}

/* Mascot performance v2: no hanging character or extra handle height. */
.grab{min-height:20px;padding-top:8px}
.gesture-friend,.hold-friend{display:none}
.studio-note img,.studio-friend,.studio-success,.studio-mark{transform-origin:50% 82%;will-change:auto}
.cxstate .studio-friend{animation:none}
@media(min-width:760px){.grab{min-height:4px}}