:root{--psn-axle-brand:#0000FE;--psn-axle-brand-2:#4d4dff;--psn-axle-brand-soft:#0000fe12;--psn-axle-brand-line:#0000fe29;--psn-axle-ink:#0b1020;--psn-axle-muted:#69738c;--psn-axle-line:#e9ecf4;--psn-axle-raduis:24px;--psn-axle-shadow-xs:0 6px 16px -14px #0b102080;--psn-axle-shadow-sm:0 14px 30px -22px #0b10208c;--psn-axle-shadow-lg:0 46px 84px -42px #0000fe80 0 24px 48px -30px #0b102059}
.marg-bott-axle{margin-bottom:30px}
[hidden]{display:none!important}
body{color:var(--psn-axle-ink);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
.wrap{text-align:center;padding:0 30px 0 25px;margin-inline:auto;max-width:max(1100px,90%)}
.site-head{position:sticky;top:0;z-index:60;background:#ffffffd1;backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid var(--psn-axle-line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:inherit}
.brand-mark{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--psn-axle-brand-2),var(--psn-axle-brand));box-shadow:0 14px 26px -14px var(--psn-axle-brand)}
.brand-text{display:flex;flex-direction:column;line-height:1.35}
.brand-name{font-weight:800;font-size:1rem;letter-spacing:-.2px}
.brand-sub{font-size:.72rem;color:var(--psn-axle-muted);font-weight:400}
.head-meta{font-size:.75rem;color:var(--psn-axle-muted);border:1px solid var(--psn-axle-line);border-radius:999px;padding:.4rem .9rem;background:#fff;box-shadow:var(--psn-axle-shadow-xs);white-space:nowrap}
.hero-axle{position:relative;padding:4.5rem 0 2.6rem;overflow:hidden}
.hero-axle::before{content:"";position:absolute;inset:-40% -10% auto -10%;height:600px;pointer-events:none;background:radial-gradient(48% 55% at 78% 28%,#0000fe1a,transparent 70%),radial-gradient(38% 45% at 12% 8%,#0000fe0f,transparent 72%)}
.hero-axle .wrap{position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;color:var(--psn-axle-brand);background:var(--psn-axle-brand-soft);border:1px solid var(--psn-axle-brand-line);border-radius:999px;padding:.35rem .9rem}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--psn-axle-brand);display:block}
.hero-axle h1{margin:1.1rem 0 .7rem;font-size:clamp(2rem,5vw,3.1rem);font-weight:800;line-height:1.25;letter-spacing:-1px}
.hero-axle h1 span{color:var(--psn-axle-brand)}
.hero-axle p{margin:auto;max-width:900px;color:var(--psn-axle-muted);font-size:clamp(.95rem,2vw,1.05rem);font-weight:300}
.filters{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2.1rem;justify-content:center}
.chip{font:inherit;font-size:.88rem;font-weight:500;color:var(--psn-axle-muted);background:#fff;cursor:pointer;border:1px solid var(--psn-axle-line);border-radius:999px;padding:.55rem 1.15rem;box-shadow:var(--psn-axle-shadow-xs);transition:color .25s,border-color .25s,background .25s,box-shadow .25s,transform .25s}
.chip:hover{color:var(--psn-axle-ink);border-color:var(--psn-axle-brand-line);transform:translateY(-1px)}
.chip.is-active{color:#fff;border-color:var(--psn-axle-brand);background:linear-gradient(145deg,var(--psn-axle-brand-2),var(--psn-axle-brand));box-shadow:0 18px 30px -18px var(--psn-axle-brand)}
.group{padding:3rem 0 .4rem;scroll-margin-top:100px}
.group-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.7rem}
.group-index{flex:none;font-size:.95rem;font-weight:800;color:var(--psn-axle-brand);background:var(--psn-axle-brand-soft);border:1px solid var(--psn-axle-brand-line);border-radius:14px;padding:.3rem .75rem;line-height:1.6}
.group-titles h2{margin:0;font-size:1.3rem;font-weight:700;letter-spacing:-.4px}
.group-titles p{margin:0;font-size:.8rem;color:var(--psn-axle-muted);font-weight:300}
.group-line{flex:1;height:1px;border-radius:2px;background:linear-gradient(to left,var(--psn-axle-line),transparent)}
.grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));max-width:none}
.card{position:relative;border-radius:var(--psn-axle-raduis);background:#fff;border:1px solid var(--psn-axle-line);box-shadow:var(--psn-axle-shadow-sm);overflow:hidden;isolation:isolate;transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,border-color .5s;animation:rise .8s cubic-bezier(.2,.7,.3,1) backwards}
.card:hover{transform:translateY(-9px);border-color:#0000fe24;box-shadow:var(--psn-axle-shadow-lg)}
.grid .card:nth-child(1){animation-delay:.04s}
.grid .card:nth-child(2){animation-delay:.1s}
.grid .card:nth-child(3){animation-delay:.16s}
.grid .card:nth-child(4){animation-delay:.22s}
.grid .card:nth-child(5){animation-delay:.28s}
@keyframes rise {
from{opacity:0;transform:translateY(22px)}
to{opacity:1;transform:none}
}
.media{background:radial-gradient(70% 62% at 50% 34%,#fff 0%,#f7f9fd 58%,#eef2f9 100%)}
.media::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(45% 42% at 50% 40%,#0000fe1a,transparent 72%)}
.media::after{content:"";position:absolute;inset:auto 0 0 0;height:74%;z-index:1;pointer-events:none;background:linear-gradient(to top,#fff 10%,#ffff0 40%,#fff8c 66%,#fff0 100%)}
.art{filter:drop-shadow(0 18px 22px #0b102024);transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .7s}
img.art{width:100%;height:auto}
.card:hover .art{transform:scale(1.07) rotate(-1.6deg);filter:drop-shadow(0 26px 30px #0000fe33)}
.rank{position:absolute;top:.9rem;inset-inline-end:.9rem;z-index:3;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:.8rem;font-weight:700;color:#fff;background:linear-gradient(145deg,var(--psn-axle-brand-2),var(--psn-axle-brand));box-shadow:0 14px 24px -12px var(--psn-axle-brand)}
.overlay{position:relative;z-index:2;padding:1rem 1.2rem 1.25rem}
.ov-title{margin:0;font-size:1.02rem;font-weight:700;line-height:1.55;letter-spacing:-.3px;text-shadow:0 1px 0 #ffffffe6}
.codes{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.ov-code{direction:ltr;unicode-bidi:isolate;display:inline-flex;align-items:center;font-size:.76rem;font-weight:600;letter-spacing:.3px;color:var(--psn-axle-brand);background:var(--psn-axle-brand-soft);border:1px solid var(--psn-axle-brand-line);border-radius:999px;padding:.22rem .72rem;transition:background .3s,color .3s,box-shadow .3s}
.card:hover .ov-code{background:var(--psn-axle-brand);color:#fff;border-color:var(--psn-axle-brand);box-shadow:0 12px 22px -14px var(--psn-axle-brand)}
.ov-code.none{color:var(--psn-axle-muted);background:#f5f6fa;border-color:var(--psn-axle-line);font-style:italic;font-weight:500}
.card:hover .ov-code.none{background:#eef0f6;color:var(--psn-axle-muted);box-shadow:none}
.site-foot{margin-top:4.5rem;padding:2.4rem 0 3rem;border-top:1px solid var(--psn-axle-line);text-align:center;color:var(--psn-axle-muted);font-size:.82rem}
.site-foot strong{color:var(--psn-axle-ink);font-weight:700}
.site-foot .dot{margin:0 .55rem;color:var(--psn-axle-brand-line)}
@media (max-width:720px) {
.wrap{width:min(1180px,100% - 1.6rem)}
.hero-axle{padding:3.2rem 0 1.8rem}
.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1.1rem}
.group{padding:2.2rem 0 .2rem}
.group-titles h2{font-size:1.12rem}
.head-meta{display:none}
}
@media (max-width:520px) {
.grid{grid-template-columns:1fr}
.ov-title{font-size:.98rem}
}
@media (prefers-reduced-motion:reduce) {
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
header{border:none}
@media(max-width:767px) {
.bc-section{padding-left:5px;padding-right:10px}
}
@media(min-width:768px) {
.bc-section{padding-left:25px;padding-right:30px}
}