.passkey-page {
    position: relative;
    display: grid;
    min-height: 100vh;
    min-height: 100svh;
    padding: 42px clamp(24px, 5vw, 72px);
    overflow: hidden;
}

.passkey-logo {
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    z-index: 10;
    align-self: start;
    justify-self: start;
}

.passkey-login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.passkey-login-button {
    position: relative;
    display: grid;
    width: clamp(230px, 27vw, 330px);
    aspect-ratio: 1.15;
    place-items: center;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    cursor: pointer;
    isolation: isolate;
}

.passkey-login-button:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 14px;
    border-radius: 48% 52% 57% 43% / 52% 42% 58% 48%;
}

.passkey-login-label {
    position: relative;
    z-index: 2;
    font-size: 1.2rem;
    font-weight: 650;
    letter-spacing: -0.03em;
    transition: transform 180ms ease;
}

.passkey-login-button:hover .passkey-login-label {
    transform: scale(1.05);
}

.passkey-blob,
.passkey-blob-circle {
    position: absolute;
    inset: 0;
}

.passkey-blob {
    z-index: -1;
    filter: blur(32px) saturate(1.8);
    transform: translateZ(0);
}

.passkey-blob-circle {
    border-radius: 50%;
    will-change: transform;
}

.passkey-blob-circle--one {
    inset: 8% 29% 31% 4%;
    background: #FFD7D7;
    animation: blob-one 8s ease-in-out infinite alternate;
}

.passkey-blob-circle--two {
    inset: 31% 5% 4% 31%;
    background: #FF8284;
    animation: blob-two 9s ease-in-out -2s infinite alternate;
}

.passkey-blob-circle--three {
    inset: 5% 4% 35% 39%;
    background: #FF9CA1;
    animation: blob-three 7s ease-in-out -4s infinite alternate;
}

@keyframes blob-one {
    to { transform: translate(12%, 16%) scale(1.08, 0.92); }
}

@keyframes blob-two {
    to { transform: translate(-16%, -9%) scale(0.9, 1.12); }
}

@keyframes blob-three {
    to { transform: translate(-9%, 17%) scale(1.13, 0.9); }
}

.passkey-register {
    position: relative;
    z-index: 5;
    display: grid;
    align-self: end;
    justify-self: center;
    width: min(420px, 100%);
    gap: 10px;
    padding: 16px;
    border: 1px solid rgb(255 0 123 / 20%);
    border-radius: 18px;
    color: #f4f4f4;
    background: rgb(56 56 56 / 75%);
    backdrop-filter: blur(12px);
}

.passkey-register h2 {
    font-size: 1rem;
    color: var(--primary-color);
}

.passkey-register input,
.passkey-register button {
    min-height: 42px;
    padding: 9px 13px;
    border: 0;
    border-radius: 10px;
    color: white;
    font: inherit;
}

.passkey-register input {
    background: var(--input-background-color);
}

.passkey-register button {
    font-weight: 600;
    background: var(--primary-color);
    cursor: pointer;
}

.passkey-status {
    position: fixed;
    z-index: 20;
    right: 24px;
    bottom: 20px;
    left: 24px;
    width: fit-content;
    max-width: min(440px, calc(100vw - 48px));
    min-height: 22px;
    margin: 0 auto;
    padding: 12px 18px;
    border: 1px solid var(--primary-color);
    border-radius: 14px;
    color: white;
    background: rgb(43 43 43 / 88%);
    box-shadow: 0 10px 30px rgb(255 0 123 / 12%);
    text-align: center;
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 280ms ease, transform 280ms ease;
    pointer-events: none;
}

.passkey-status.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.passkey-register + .passkey-status {
    bottom: 190px;
}

@media (max-width: 520px) {
    .passkey-page {
        padding: 28px 22px;
    }

    .passkey-login-button {
        width: min(70vw, 270px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .passkey-blob-circle {
        animation: none;
    }

    .passkey-login-label {
        transition: none;
    }

    .passkey-status {
        transition: none;
    }

}