.pp {
    --pp-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.pp-dots {
    display: flex;
    gap: 14px;
    height: var(--pp-size);
}

.pp-dot {
    width: var(--pp-size);
    height: var(--pp-size);
    border-radius: 50%;
    border: 2px solid var(--color-hairline);
    background: transparent;
    transition: background 0.15s, border-color 0.15s, transform 0.15s var(--ease);
}
.pp-dot.is-next { border-color: var(--color-mist-gray); }
.pp-dot.is-filled { background: var(--color-signal-blue); border-color: var(--color-signal-blue); }
.pp-dot.is-pop { animation: pp-pop 0.22s var(--ease); }

.pp-dots.is-shake { animation: pp-shake 0.38s; }
.pp-dots.is-complete .pp-dot { animation: pp-pop 0.28s var(--ease); }

.pp-keys {
    display: grid;
    grid-template-columns: repeat(3, 72px);
    gap: 12px;
}

.pp-key {
    height: 56px;
    border: 0;
    border-radius: var(--radius-buttons);
    background: var(--color-pebble);
    color: var(--color-ink-navy);
    font: inherit;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, transform 0.12s var(--ease);
    user-select: none;
    touch-action: manipulation;
}
.pp-key:hover { background: var(--color-pebble-hover); }
.pp-key:active, .pp-key.is-pressed { background: var(--color-signal-blue); color: #fff; transform: scale(0.96); }
.pp-key:focus-visible { outline: 2px solid var(--color-signal-blue); outline-offset: 2px; }
.pp-key--ghost { visibility: hidden; }
.pp-key svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.pp.is-disabled .pp-key { opacity: 0.5; pointer-events: none; }

@keyframes pp-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes pp-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
    .pp-dot, .pp-key { transition: none; }
    .pp-dot.is-pop, .pp-dots.is-shake, .pp-dots.is-complete .pp-dot { animation: none; }
}