/* logo KOPI = copilote */
.cp{--s:250px;width:var(--s);flex:none;color:var(--ink);transition:width 1s cubic-bezier(.2,.8,.2,1),color 1.2s}
.cp svg{width:100%;display:block;overflow:visible}
.cp .lt{fill:none;stroke:currentColor;stroke-width:60;stroke-linecap:round;stroke-linejoin:round}
.cp .pt{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4s ease-in-out infinite alternate}
.cp .ro{transform-box:fill-box;transform-origin:center;animation:breathe 4s ease-in-out infinite}
.cp .ey{fill:none;stroke:currentColor;stroke-width:14;stroke-linecap:round;transform-box:fill-box;transform-origin:center;animation:blink 5s infinite;transition:transform .15s}
.cp .op{fill:currentColor;display:none;transform-box:fill-box;transform-origin:center}
.cp.think .op,.cp.talk .op{display:block;animation:mouth .3s ease-in-out infinite alternate}
.cp.think .op{animation-duration:.8s}.cp.think .pt{animation-duration:.6s}
.cp.lg{--s:260px}.cp.sm{--s:88px}.cp.xs{--s:70px}
@keyframes sway{from{rotate:-4deg}to{rotate:4deg}}@keyframes breathe{50%{scale:1.05}}
@keyframes blink{0%,94%,100%{scale:1}97%{scale:1 .1}}@keyframes mouth{to{scale:1.3 .55}}