#aps .fmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:60px;text-align:left}
#aps .fmt{--acc:#5b3df5;--tint:#efebff;position:relative;overflow:hidden;background:var(--tint);border-radius:30px;padding:30px 30px 32px;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.34,1.56,.64,1)}
#aps .fmt.meta{--acc:#2f6bff;--tint:#e7efff}
#aps .fmt.pin{--acc:#e23a4f;--tint:#ffe7ea;transition-delay:.1s}
#aps .fmt.disp{--acc:#d99a00;--tint:#fff3cf;transition-delay:.2s}
#aps .fmt.other{--acc:#5b3df5;--tint:#efebff;transition-delay:.3s}
#aps .fmt-grid .fmt.rv.in:nth-child(1){transform:rotate(-1.2deg)}
#aps .fmt-grid .fmt.rv.in:nth-child(2){transform:rotate(1deg)}
#aps .fmt-grid .fmt.rv.in:nth-child(3){transform:rotate(.8deg)}
#aps .fmt-grid .fmt.rv.in:nth-child(4){transform:rotate(-1deg)}
#aps .fmt-grid .fmt.rv.in:hover,#aps .fmt-grid .fmt.rv.in:active{transform:rotate(0) translateY(-6px) scale(1.015);transition-delay:0s}
#aps .fmt::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%;right:-70px;top:-90px;background:var(--acc);opacity:.1}
#aps .fmt-head{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
#aps .fmt-dot{width:40px;height:40px;border-radius:50%;background:var(--acc);display:grid;place-items:center;flex-shrink:0;box-shadow:0 8px 18px -6px var(--acc)}
#aps .fmt-dot svg{width:20px;height:20px}
#aps .fmt h3{font-size:26px;letter-spacing:-.03em}
#aps .fmt .fmt-sub{position:relative;z-index:1;font-size:15px;color:var(--text);margin-top:8px}
#aps .shapes{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:18px 20px;margin-top:26px}
#aps .fm{display:flex;flex-direction:column;align-items:center;gap:8px}
#aps .fm .sh{display:block;border-radius:8px;background:var(--acc);box-shadow:0 6px 14px -8px var(--acc);transform-origin:bottom center;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
#aps .fm:nth-child(2n) .sh{opacity:.78}
#aps .fm:nth-child(3n) .sh{opacity:.6}
#aps .fm .sh.dash{background:transparent;border:3px dashed var(--acc);opacity:1;display:grid;place-items:center;color:var(--acc);font-size:26px;font-weight:700;line-height:1}
#aps .fm small{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
#aps .fmt:hover .fm .sh{transform:translateY(-4px) rotate(-3deg)}
#aps .fmt:hover .fm:nth-child(2n) .sh{transform:translateY(-6px) rotate(3deg)}
#aps .fmt.rv.in .fm .sh{animation:apsShape .6s cubic-bezier(.34,1.56,.64,1) both}
#aps .fmt.rv.in .fm:nth-child(2) .sh{animation-delay:.08s}
#aps .fmt.rv.in .fm:nth-child(3) .sh{animation-delay:.16s}
#aps .fmt.rv.in .fm:nth-child(4) .sh{animation-delay:.24s}
#aps .fmt.rv.in .fm:nth-child(5) .sh{animation-delay:.32s}
#aps .fmt.rv.in .fm:nth-child(6) .sh{animation-delay:.4s}
@keyframes apsShape{0%{transform:scale(.4)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
#aps .fmt-note{font-size:15px;color:var(--muted);margin-top:34px}
@media (max-width:820px){#aps .fmt-grid{grid-template-columns:1fr;gap:18px;margin-top:44px}#aps .fmt{padding:26px 22px 28px}#aps .shapes{gap:16px}}
@media (prefers-reduced-motion:reduce){#aps .fmt.rv.in .fm .sh{animation:none}#aps .fmt-grid .fmt.rv.in{transform:none}}