.np{
  --np-surface:var(--k-surface,#101016);
  --np-line:var(--k-line2,rgba(255,255,255,.15));
  --np-soft:var(--k-line,rgba(255,255,255,.08));
  --np-text:var(--k-text,#f5f5f7);
  --np-text2:var(--k-text2,#a1a1aa);
  --np-text3:var(--k-text3,#74747e);
  --np-brand:var(--brand,#7c5cff);
  --np-ok:var(--k-ok-text,#6ee7b7);
  --np-display:var(--f-display,'Space Grotesk','Inter',system-ui,sans-serif);
  --np-body:var(--f-body,'Inter',system-ui,-apple-system,'Segoe UI',sans-serif);
  --np-ease:var(--ease,cubic-bezier(.22,1,.36,1));
  --np-scrim:rgba(4,4,7,.72);
  position:fixed;inset:0;z-index:10030;display:grid;place-items:center;padding:20px;
  background:var(--np-scrim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-family:var(--np-body);font-size:16px;line-height:1.6;letter-spacing:-.006em;text-align:left;color:var(--np-text);
  opacity:0;transition:opacity .45s var(--np-ease);
}
:root[data-theme="light"] .np{
  --np-surface:var(--k-surface,#fff);
  --np-line:var(--k-line2,rgba(10,10,20,.17));
  --np-soft:var(--k-line,rgba(10,10,20,.09));
  --np-text:var(--k-text,#0b0b10);
  --np-text2:var(--k-text2,#4f4f59);
  --np-text3:var(--k-text3,#72727b);
  --np-ok:var(--k-ok-text,#047857);
  --np-scrim:rgba(15,23,42,.5);
}
.np.show{opacity:1}
.np--wait{visibility:hidden}
.np *,.np *::before,.np *::after{box-sizing:border-box}

.np__card{--c:var(--np-brand);position:relative;width:min(440px,calc(100vw - 40px));max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;border-radius:26px;background:var(--np-surface);border:1px solid var(--np-line);box-shadow:0 50px 120px -30px rgba(0,0,0,.95),0 30px 100px -40px color-mix(in srgb,var(--c) 75%,transparent);transform:translateY(26px) scale(.95);transition:transform .7s cubic-bezier(.2,1.25,.3,1)}
.np__card::-webkit-scrollbar{display:none}
.np.show .np__card{transform:none}
:root[data-theme="light"] .np__card{box-shadow:0 44px 100px -40px rgba(20,20,40,.45),0 30px 90px -44px color-mix(in srgb,var(--c) 60%,transparent)}

.np__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#15151b}
:root[data-theme="light"] .np__media{background:#e9e9e4}
.np__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.np__media--empty .np__img{object-fit:contain;padding:12%;opacity:.6}
.np__media::before{content:'';position:absolute;z-index:1;inset:-20% -60%;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.3) 50%,transparent 58%);transform:translateX(-70%);opacity:0}
.np__media::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 32%,transparent 44%,var(--np-surface) 100%)}
.np__badge{position:absolute;z-index:2;top:14px;left:14px;display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:var(--np-brand);color:#fff;font:700 .8rem/1 var(--np-body);letter-spacing:.02em;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--np-brand) 85%,transparent)}
.np__badge i{display:block;width:7px;height:7px;border-radius:50%;background:#fff;animation:np-ping 2.2s var(--np-ease) 1.3s infinite}
.np__x{position:absolute;z-index:3;top:12px;right:12px;display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(6,6,9,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;transition:background-color .3s var(--np-ease),transform .45s var(--np-ease)}
.np__x:hover{background:rgba(6,6,9,.86);transform:rotate(90deg)}
.np__x svg{display:block;width:16px;height:16px}

.np__body{position:relative;margin-top:-30px;padding:0 24px 24px}
.np__kicker{margin:0;font:600 .7rem/1 var(--np-body);letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 58%,#fff)}
:root[data-theme="light"] .np__kicker{color:color-mix(in srgb,var(--c) 55%,#000)}
.np__name{margin:8px 0 0;padding:0;font:700 1.65rem/1.1 var(--np-display);letter-spacing:-.035em;color:var(--np-text);overflow-wrap:anywhere}
.np__meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px 12px;margin:14px 0 0}
.np__price{display:inline-flex;align-items:baseline;gap:8px;font:700 1.3rem/1 var(--np-display);letter-spacing:-.03em;color:var(--np-text)}
.np__now{font-variant-numeric:tabular-nums}
.np__was{font:500 .9rem/1 var(--np-body);letter-spacing:0;color:var(--np-text3);text-decoration:line-through}
.np__off{align-self:center;padding:4px 8px;border-radius:999px;background:#ef4444;color:#fff;font:700 .7rem/1 var(--np-body);letter-spacing:0}
.np__state{font:600 .95rem/1 var(--np-body);letter-spacing:0;color:var(--np-text2)}
.np__state--free,.np__state--library{color:var(--np-ok)}
.np__desc{margin:12px 0 0;font-size:.92rem;line-height:1.6;color:var(--np-text2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.np__btns{display:flex;gap:10px;margin:22px 0 0}
.np__later,.np__go{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;margin:0;padding:0 18px;border-radius:999px;font:600 .92rem/1 var(--np-body);letter-spacing:-.01em;white-space:nowrap;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .3s var(--np-ease),border-color .3s var(--np-ease),color .3s,box-shadow .3s var(--np-ease)}
.np__later{flex:1;border:1px solid var(--np-line);background:color-mix(in srgb,var(--np-text) 4%,transparent);color:var(--np-text)}
.np__later:hover{background:color-mix(in srgb,var(--np-text) 10%,transparent)}
.np__go{flex:1.5;border:1px solid transparent;background:var(--np-brand);color:#fff;box-shadow:0 16px 36px -16px color-mix(in srgb,var(--np-brand) 85%,transparent),inset 0 1px 0 rgba(255,255,255,.22)}
.np__go:hover{background:color-mix(in srgb,var(--np-brand) 86%,#fff);color:#fff}
.np__go svg{display:block;width:15px;height:15px;transition:transform .45s var(--np-ease)}
.np__go:hover svg{transform:translate(2px,-2px)}
.np__more{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 8px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--np-soft);font-size:.84rem;line-height:1.4;color:var(--np-text3)}
.np__more b{font-weight:600;color:var(--np-text2)}
.np__more i{font-style:normal}
.np__more a{color:var(--np-text);font-weight:600;text-decoration:underline;text-decoration-color:var(--np-line);text-underline-offset:3px;transition:text-decoration-color .25s}
.np__more a:hover{color:var(--np-text);text-decoration-color:var(--c)}

.np .rty{position:relative;inset:auto;margin:0;flex:0 0 auto;height:24px;padding:0 9px 0 8px;font-size:.62rem}
:where(.np .rty){display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#3f3f46;color:#e4e4e7;font:700 .62rem/1 var(--np-body);letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
:where(.np .rty svg){width:10px;height:10px;flex-shrink:0;fill:currentColor}
:where(.np .rty--common svg){opacity:.6}
:where(.np .rty--rare){background:linear-gradient(135deg,#2f6fed,#1d4ed8);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
:where(.np .rty--epic){background:linear-gradient(120deg,#7c3aed,#c026d3 58%,#db2777);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
:where(.np .rty--legendary){background:linear-gradient(120deg,#ffe58a,#f6b93b 48%,#f59e0b);color:#3a2400;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 3px 12px -3px rgba(245,158,11,.7)}
:where(:root[data-theme="light"] .np .rty--common){background:#e7e7eb;color:#3f3f46;box-shadow:inset 0 0 0 1px rgba(10,10,20,.12)}

#dxAnnounce :focus-visible{outline:2px solid var(--blue,#4fb8ff);outline-offset:3px;border-radius:999px}
#dxAnnounce .np__card:focus,#dxAnnounce .np__card:focus-visible{outline:none;border-radius:26px}
#dxAnnounce .np__more a:focus-visible{border-radius:6px}

.np.show .np__img{animation:np-settle 1.5s var(--np-ease) both}
.np.show .np__media::before{animation:np-sheen 1.5s var(--np-ease) .55s both}
.np.show .np__badge{animation:np-pop .6s cubic-bezier(.2,1.5,.3,1) .38s both}
.np.show .np__body>*{animation:np-rise .7s var(--np-ease) both}
.np.show .np__body>:nth-child(1){animation-delay:.16s}
.np.show .np__body>:nth-child(2){animation-delay:.22s}
.np.show .np__body>:nth-child(3){animation-delay:.28s}
.np.show .np__body>:nth-child(4){animation-delay:.34s}
.np.show .np__body>:nth-child(5){animation-delay:.4s}
.np.show .np__body>:nth-child(6){animation-delay:.46s}
.np.np--js .np__img,.np.np--js .np__badge,.np.np--js .np__body>*{animation:none}
.np.np--js .np__card{transition:none}
@keyframes np-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes np-pop{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes np-settle{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes np-sheen{0%{transform:translateX(-70%);opacity:0}18%{opacity:1}100%{transform:translateX(70%);opacity:0}}
@keyframes np-ping{0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}70%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}

@media (max-width:640px){
  .np__btns{flex-direction:column-reverse}
  .np__later,.np__go{flex:none;width:100%}
}
@media (max-width:520px){
  .np{padding:14px}
  .np__card{width:min(440px,calc(100vw - 28px));max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px)}
  .np__body{padding:0 20px 20px}
  .np__name{font-size:1.45rem}
}
@media (max-height:620px){
  .np__media{aspect-ratio:21/9}
  .np__desc{-webkit-line-clamp:2}
}
@media (prefers-reduced-motion:reduce){
  .np,.np *,.np *::before,.np *::after{transition:none!important;animation:none!important}
  .np__card{transform:none}
}