.pf .pfx-logo { margin: 0; width: min(100%, 30rem); justify-self: center; display: grid; }
.pf .pfx-logo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf .lg-ground { fill: var(--line); }

.pf .lg-sol { fill: var(--head); font: 800 68px/1 "PF Jakarta", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .01em; }
.pf .lg-t { fill: var(--primary); transform-box: view-box; transform-origin: 0 0; transform: rotate(0deg); }
.pf .lg-bot { transform-box: view-box; transform-origin: 0 0; transform: translate(272px, 300px) rotate(0deg); }
.pf .lg-hop, .pf .lg-eyes, .pf .lg-arm, .pf .lg-look, .pf .lg-face, .pf .lg-gaze { transform-box: view-box; transform-origin: 0 0; }
.pf .lg-arm { transform: rotate(-75deg); }
.pf .lg-sh-b { transform-box: view-box; transform-origin: 0 0; transform: translate(22px, -56px); }
.pf .lg-arm-b { transform: rotate(-105deg); }
.pf .lg-arm line { stroke: var(--head); stroke-width: 9; stroke-linecap: round; }
.pf .lg-arm circle { fill: #e8ebfa; stroke: var(--head); stroke-width: 3; }
.pf .lg-arm-b line { stroke: #4b4794; }
.pf .lg-body { fill: #c7cdf6; stroke: var(--head); stroke-width: 4; }
.pf .lg-chest, .pf .lg-tip, .pf .lg-ear { fill: #14b8a6; stroke: var(--head); stroke-width: 3; }
.pf .lg-stalk { stroke: var(--head); stroke-width: 5; stroke-linecap: round; }
.pf .lg-leg { fill: var(--head); }
.pf .lg-head { fill: #e8ebfa; stroke: var(--head); stroke-width: 4.5; }
.pf .lg-eye { fill: var(--head); }
.pf .lg-glint { fill: #fff; transform-box: view-box; transform-origin: 0 0; }
.pf .lg-mouth { fill: #fff; stroke: var(--head); stroke-width: 3; }
.pf .lg-grille { fill: none; stroke: var(--head); stroke-width: 2.5; }

.pf .pfx-logo.is-anim .lg-t { animation: pfx-lg-t 12s infinite; }
.pf .pfx-logo.is-anim .lg-bot { animation: pfx-lg-bot 12s infinite; }
.pf .pfx-logo.is-anim .lg-arm { animation: pfx-lg-arm 12s infinite; }
.pf .pfx-logo.is-anim .lg-arm-b { animation-name: pfx-lg-arm-b; }
.pf .pfx-logo.is-anim .lg-sh-b { animation: pfx-lg-sh-b 12s infinite; }
.pf .pfx-logo.is-anim .lg-hop { animation: pfx-lg-hop 12s infinite; }
.pf .pfx-logo.is-anim .lg-eyes { animation: pfx-lg-eyes 12s infinite; }
.pf .pfx-logo.is-anim .lg-look { animation: pfx-lg-look 12s infinite; }
.pf .pfx-logo.is-anim .lg-face { animation: pfx-lg-face 12s infinite; }
.pf .pfx-logo.is-anim .lg-gaze { animation: pfx-lg-gaze 12s infinite; }
.pf .pfx-logo.is-anim .lg-glint { animation: pfx-lg-pupils 12s infinite; }
@keyframes pfx-lg-t {
  0%, 22% { transform: rotate(14deg); animation-timing-function: ease-in-out; }
  44% { transform: rotate(0deg); animation-timing-function: ease-out; }
  47% { transform: rotate(-1.2deg); animation-timing-function: ease-in-out; }
  51%, 88% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
  100% { transform: rotate(14deg); }
}
@keyframes pfx-lg-bot {
  0%, 4% { transform: translate(300px, 300px) rotate(0deg); animation-timing-function: ease-in-out; }
  15% { transform: translate(262px, 300px) rotate(-1deg); animation-timing-function: ease-out; }
  19%, 22% { transform: translate(259.9px, 300px) rotate(-3deg); animation-timing-function: ease-in-out; }
  44%, 50% { transform: translate(246.8px, 300px) rotate(-3deg); animation-timing-function: ease-in-out; }
  58%, 88% { transform: translate(272px, 300px) rotate(0deg); animation-timing-function: ease-in-out; }
  100% { transform: translate(300px, 300px) rotate(0deg); }
}
@keyframes pfx-lg-arm {
  0%, 9% { transform: rotate(-75deg); animation-timing-function: ease-in-out; }
  17%, 50% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
  57%, 100% { transform: rotate(-75deg); }
}

@keyframes pfx-lg-arm-b {
  0%, 9% { transform: rotate(-75deg); animation-timing-function: ease-in-out; }
  17%, 50% { transform: rotate(0deg); animation-timing-function: ease-in-out; }
  53.5% { transform: rotate(-90deg); animation-timing-function: ease-in-out; }
  57%, 88% { transform: rotate(-105deg); animation-timing-function: ease-in-out; }
  91% { transform: rotate(-90deg); animation-timing-function: ease-in-out; }
  94%, 100% { transform: rotate(-75deg); }
}
@keyframes pfx-lg-sh-b {
  0%, 50% { transform: translate(-20px, -50px); animation-timing-function: ease-in-out; }
  53.5% { transform: translate(0px, -64px); animation-timing-function: ease-in-out; }
  57%, 88% { transform: translate(22px, -56px); animation-timing-function: ease-in-out; }
  91% { transform: translate(0px, -64px); animation-timing-function: ease-in-out; }
  94%, 100% { transform: translate(-20px, -50px); }
}
@keyframes pfx-lg-hop {
  0%, 4%, 9.5%, 15%, 58%, 64%, 68%, 100% { transform: translateY(0); }
  6.75%, 12.25% { transform: translateY(-4px); }
  61% { transform: translateY(-12px); }
  66% { transform: translateY(-3px); }
}
@keyframes pfx-lg-eyes {
  0%, 20%, 46%, 58%, 70%, 100% { transform: scaleY(1); }
  24%, 42% { transform: scaleY(.8); }
  61%, 66% { transform: scaleY(.3); }
}
@keyframes pfx-lg-look {
  0%, 46%, 94%, 100% { transform: translate(0px, -64px) rotate(-16deg) translate(0px, 64px); animation-timing-function: ease-in-out; }
  53%, 88% { transform: translate(0px, -64px) rotate(0deg) translate(0px, 64px); animation-timing-function: ease-in-out; }
}
@keyframes pfx-lg-face {
  0%, 46%, 94%, 100% { transform: translate(-8px, -7px); animation-timing-function: ease-in-out; }
  53%, 88% { transform: translate(0px, 0px); animation-timing-function: ease-in-out; }
}
@keyframes pfx-lg-gaze {
  0%, 46%, 94%, 100% { transform: translate(-3px, -111px); animation-timing-function: ease-in-out; }
  53%, 88% { transform: translate(0px, -108px); animation-timing-function: ease-in-out; }
}

@keyframes pfx-lg-pupils {
  0%, 46%, 94%, 100% { transform: translate(0px, 0px); animation-timing-function: ease-in-out; }
  53%, 88% { transform: translate(5px, 4px); animation-timing-function: ease-in-out; }
}
@media (prefers-reduced-motion: reduce) { .pf .pfx-logo .lg-t, .pf .pfx-logo .lg-bot, .pf .pfx-logo .lg-arm, .pf .pfx-logo .lg-sh-b,
  .pf .pfx-logo .lg-hop, .pf .pfx-logo .lg-eyes, .pf .pfx-logo .lg-look, .pf .pfx-logo .lg-face,
  .pf .pfx-logo .lg-gaze, .pf .pfx-logo.is-anim .lg-glint { animation: none; } }


.pf .pfx-logo.is-anim { cursor: pointer; border-radius: 1rem; }
.pf .pfx-logo.is-anim:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }


.pf .pf-brand-mark { display: inline-flex; align-items: center; gap: .55rem; }
.pf .pf-brand-mark .pfx-logo-svg { width: 2.3rem; height: 2.3rem; flex: none; }