@property --pkA{syntax:'<angle>';inherits:false;initial-value:0deg}
.pk{display:flex;align-items:center;gap:16px;width:100%;max-width:640px;margin:18px 0 0;padding:14px 18px 14px 14px;border-radius:22px;
  text-decoration:none;color:#F2F2EF;background:linear-gradient(170deg,#232633,#161923 58%,#0E1015);
  border:1px solid rgba(255,255,255,.09);position:relative;isolation:isolate;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.12),0 22px 40px -20px rgba(0,0,0,.9),0 0 60px -22px rgba(255,150,70,.6);
  transition:transform .16s cubic-bezier(.3,.8,.4,1),box-shadow .16s}
.pk::before{content:'';position:absolute;inset:-2px;border-radius:24px;padding:1.5px;z-index:-1;
  background:conic-gradient(from var(--pkA),#4C86F0,#9A5BB0,#E8412E,#FF7A2A,#FFC24A,#FF7A2A,#E8412E,#9A5BB0,#4C86F0);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);mask-composite:exclude;animation:pkSpin 5.5s linear infinite;opacity:.85}
@keyframes pkSpin{to{--pkA:360deg}}
.pk:hover{transform:translateY(-3px);box-shadow:inset 0 1.5px 0 rgba(255,255,255,.16),0 30px 50px -20px rgba(0,0,0,.9),0 0 90px -14px rgba(255,160,80,.8)}
.pk:active{transform:translateY(2px) scale(.985)}
.pk .key{position:relative;width:58px;height:58px;flex:none;border-radius:17px;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(170deg,#2A2E3C,#171A24);border:1px solid rgba(255,255,255,.1);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.15),0 0 34px -8px rgba(255,150,70,.7);animation:pkPulse 2.8s ease-in-out infinite}
.pk .key::before{content:'';position:absolute;inset:0;border-radius:inherit;border:1.5px solid rgba(255,206,150,.55);animation:pkRing 2.6s ease-out infinite}
.pk .key::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(112deg,transparent 36%,rgba(255,255,255,.9) 47%,rgba(255,255,255,.2) 53%,transparent 64%);
  background-size:260% 100%;animation:pkSheen 4.2s ease-in-out infinite}
.pk .key svg{width:36%;height:36%;margin-left:8%;filter:drop-shadow(0 0 10px rgba(255,140,60,.85))}
@keyframes pkPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes pkRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.7);opacity:0}}
@keyframes pkSheen{0%,58%{background-position:150% 0}100%{background-position:-70% 0}}
.pk .txt{display:grid;gap:3px;flex:1;text-align:left}
.pk .mark{font:700 22px/1 Onest,sans-serif;letter-spacing:-.04em;
  background:linear-gradient(90deg,#4C86F0,#9A5BB0,#E8412E,#FF7A2A,#FFC24A,#FF7A2A,#E8412E,#9A5BB0,#4C86F0);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:pkFlow 7s linear infinite}
@keyframes pkFlow{to{background-position:300% 0}}
.pk .t1{font:600 15px/1.25 Onest,sans-serif}
.pk .t2{font:400 12.5px/1.25 Onest,sans-serif;color:#A2A4AC}
.pk .go{font:600 14px Onest,sans-serif;color:#FFB31A;white-space:nowrap}
.pk-niz{padding-top:8px;padding-bottom:8px}
.pk-niz .pk{max-width:none}
@media (max-width:560px){.pk{padding:12px 14px 12px 12px;gap:12px}.pk .go{display:none}.pk .mark{font-size:20px}}
.pk-dive{position:fixed;inset:0;z-index:9999;pointer-events:none;background:#0B0C0F;opacity:0;transition:opacity .42s ease}
.pk-dive.on{opacity:1}
@media (prefers-reduced-motion:reduce){.pk::before,.pk .key,.pk .key::before,.pk .key::after,.pk .mark{animation:none}}