.pk-hero{position:relative;min-height:780px;display:flex;flex-direction:column;background:#0D0D0D;color:#ffffff;overflow:hidden;isolation:isolate;cursor:crosshair}
#pk-field{position:absolute;left:-10%;top:-10%;width:120%;height:120%;z-index:-2;filter:blur(70px) saturate(1.1);opacity:.78;pointer-events:none}
.pk-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pk-hero a,.pk-hero button{cursor:pointer}
.pk-swap{display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .5s,filter .5s}
.pk-swap.out{transform:translateY(-35%);opacity:0;filter:blur(8px)}
.pk-swap.in{transform:translateY(35%);opacity:0;filter:blur(8px)}
.pk-mag{transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s;will-change:transform}
.pk-mag:focus-visible{outline:2px solid #D2D914;outline-offset:3px}
.pk-dot{animation:pk-ping 2s infinite}
@keyframes pk-ping{0%{box-shadow:0 0 0 0 rgba(210,217,20,.55)}80%,100%{box-shadow:0 0 0 10px rgba(210,217,20,0)}}
.pk-swatch{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.35);padding:0;transition:transform .2s}
.pk-swatch:hover,.pk-swatch:focus-visible{transform:scale(1.25);outline:none}
.pk-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px #0D0D0D,0 0 0 3px #ffffff}
/* Wavi's ink is near-black, so a thin white sticker outline keeps her readable on the dark hero */
.pk-wavi{display:block;filter:drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 6px 14px rgba(0,0,0,.35))}
@media (max-width:640px){.pk-hint{margin-left:0 !important}}
@media (prefers-reduced-motion:reduce){.pk-dot{animation:none}.pk-swap,.pk-mag{transition:none}}