@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
/* Пиксельный декор бренда: трейлы, спарки, уголки, разделители, курсор */
/* Трейл «скорости» из квадратов */
.px-trail{display:inline-flex;flex-direction:column;gap:3px}
.px-row{display:flex;gap:3px}
.px{display:block;width:var(--px,8px);height:var(--px,8px);border-radius:1px}
.px-row .px:nth-child(1){opacity:1}
.px-row .px:nth-child(2){opacity:.88}
.px-row .px:nth-child(3){opacity:.76}
.px-row .px:nth-child(4){opacity:.64}
.px-row .px:nth-child(5){opacity:.52}
.px-row .px:nth-child(6){opacity:.4}
.px-row .px:nth-child(7){opacity:.3}
.px-row .px:nth-child(8){opacity:.22}
.px-row .px:nth-child(9){opacity:.15}
.px-trail.dir-left .px-row{flex-direction:row-reverse}
/* Мягкое мерцание вдоль ряда — только при .px-live */
@keyframes px-sh{0%,100%{opacity:.15}30%{opacity:1}}
.px-live .px-row .px{animation:px-sh 2.4s steps(6) infinite}
.px-live .px-row .px:nth-child(2){animation-delay:.1s}
.px-live .px-row .px:nth-child(3){animation-delay:.2s}
.px-live .px-row .px:nth-child(4){animation-delay:.3s}
.px-live .px-row .px:nth-child(5){animation-delay:.4s}
.px-live .px-row .px:nth-child(6){animation-delay:.5s}
.px-live .px-row .px:nth-child(7){animation-delay:.6s}
.px-live .px-row .px:nth-child(8){animation-delay:.7s}
.px-live .px-row .px:nth-child(9){animation-delay:.8s}
/* Спарк: 4px квадрат + пиксельная звезда на box-shadow */
.px-spark{display:block;width:4px;height:4px;background:currentColor;color:var(--px-c,#7c5cff);
  box-shadow:0 -4px 0 0 currentColor,0 4px 0 0 currentColor,-4px 0 0 0 currentColor,4px 0 0 0 currentColor,
    0 -8px 0 0 currentColor,0 8px 0 0 currentColor,-8px 0 0 0 currentColor,8px 0 0 0 currentColor}
.px-live.px-spark{animation:px-tw 1.6s steps(2) infinite}
@keyframes px-tw{0%,100%{opacity:1}50%{opacity:.35}}
/* Уголки карточки: абсолютны относительно position:relative родителя */
.px-corners{pointer-events:none}
.px-corners>i{position:absolute;width:4px;height:4px;background:currentColor;color:var(--px-c,#7c5cff)}
.px-corners>i:nth-child(1){top:8px;left:8px;box-shadow:4px 0 0 currentColor,0 4px 0 currentColor}
.px-corners>i:nth-child(2){top:8px;right:8px;box-shadow:-4px 0 0 currentColor,0 4px 0 currentColor}
.px-corners>i:nth-child(3){bottom:8px;left:8px;box-shadow:4px 0 0 currentColor,0 -4px 0 currentColor}
.px-corners>i:nth-child(4){bottom:8px;right:8px;box-shadow:-4px 0 0 currentColor,0 -4px 0 currentColor}
/* Пиксельный eyebrow */
.px-eyebrow{position:relative;display:inline-block;font-family:'Press Start 2P',monospace;font-size:11px;
  letter-spacing:.04em;text-transform:none;color:#7c5cff;padding:6px 10px;
  background:rgba(124,92,255,.08);border-radius:4px;border:2px dotted rgba(124,92,255,.45)}
.px-eyebrow::before,.px-eyebrow::after{content:"";position:absolute;width:2px;height:2px;background:#7c5cff}
.px-eyebrow::before{top:-3px;left:-3px;box-shadow:2px 0 0 #7c5cff,0 2px 0 #7c5cff}
.px-eyebrow::after{bottom:-3px;right:-3px;box-shadow:-2px 0 0 #7c5cff,0 -2px 0 #7c5cff}
/* Разделитель из 4px квадратов violet→blue */
.px-divider{height:4px;max-width:240px;margin:24px auto;
  background:linear-gradient(90deg,#7c5cff,#3b82f6);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 8px);
  mask-image:repeating-linear-gradient(90deg,#000 0 4px,transparent 4px 8px)}
/* Жёсткая пиксельная тень для кнопок */
.px-btn-shadow{box-shadow:4px 4px 0 #14141c;transition:transform .12s steps(2),box-shadow .12s steps(2)}
.px-btn-shadow:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #14141c}
.px-btn-shadow:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #14141c}
/* Мигающий пиксельный курсор для заголовков */
.px-cursor::after{content:"";display:inline-block;width:8px;height:14px;margin-left:.15em;
  background:currentColor;vertical-align:-2px;animation:px-blink 1s steps(1) infinite}
@keyframes px-blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .px-live .px-row .px{animation:none}
  .px-live.px-spark{animation:none}
  .px-cursor::after{animation:none}
}
