.pgn{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:1.75rem}@media(min-width:1024px){.pgn{gap:.625rem;margin-top:2.25rem}}.pgn__key{background:#fff;border:3px solid var(--line);border-radius:999px;box-shadow:var(--toy-shadow-sm);color:var(--text-primary);display:grid;font-size:.9375rem;font-variant-numeric:tabular-nums;font-weight:900;height:44px;letter-spacing:-.03em;place-items:center;transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;width:44px}.pgn__key:hover{background:var(--teal);box-shadow:var(--toy-shadow);transform:translateY(-3px)}.pgn__key:active{box-shadow:none;transform:translateY(3px)}.pgn__key--active,.pgn__key--active:active,.pgn__key--active:hover{background:var(--toy-red);box-shadow:calc(4px*var(--sx)) 4px 0 var(--shadow-ink);color:#fff;transform:none}.pgn__key--arrow{background:var(--teal)}.pgn__key--arrow:hover{background:var(--teal-bright)}.pgn__arrow{height:1.125rem;width:1.125rem}.pgn__gap{color:var(--text-muted);display:grid;font-size:.625rem;font-weight:900;height:44px;letter-spacing:.06em;place-items:center;width:28px}