html:has(.cosmic-login-page) {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #230b3e;
}

body.cosmic-login-page {
    min-width: 320px;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    background: #230b3e;
    color: #fff;
}

body.cosmic-login-page .auth-shell {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 100svh;
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    place-items: center;
    padding: 4.5rem 1.5rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(138, 65, 207, .54), transparent 27%),
        radial-gradient(circle at 88% 78%, rgba(117, 43, 181, .48), transparent 31%),
        radial-gradient(circle at 52% 55%, #57237d 0%, #33114f 55%, #230b3e 100%);
}

body.cosmic-login-page .auth-brand {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    min-height: 0;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: none;
    pointer-events: none;
}

body.cosmic-login-page .auth-brand::before,
body.cosmic-login-page .auth-brand::after,
body.cosmic-login-page .auth-back {
    display: none;
}

body.cosmic-login-page .login-sweets {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

body.cosmic-login-page .login-sweets::before {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .38) .7px, transparent .7px);
    background-size: 64px 64px;
    opacity: .19;
    content: "";
}

body.cosmic-login-page .login-sweet {
    position: absolute;
    display: block;
    width: clamp(8rem, 13vw, 13rem);
    height: auto;
    object-fit: contain;
    opacity: .86;
    filter: drop-shadow(0 24px 28px rgba(14, 3, 31, .26));
    will-change: transform;
}

body.cosmic-login-page .login-sweet-one {
    top: 9%;
    left: 9%;
    width: clamp(9rem, 15vw, 15rem);
    animation: sweet-drift-a 11s ease-in-out infinite;
}

body.cosmic-login-page .login-sweet-two {
    top: 14%;
    right: 10%;
    width: clamp(7rem, 10vw, 10rem);
    animation: sweet-drift-b 13s ease-in-out infinite;
}

body.cosmic-login-page .login-sweet-three {
    right: 7%;
    bottom: 7%;
    width: clamp(9rem, 14vw, 14rem);
    animation: sweet-drift-c 15s ease-in-out infinite;
}

body.cosmic-login-page .login-sweet-four {
    bottom: 12%;
    left: 13%;
    width: clamp(7rem, 10vw, 10rem);
    animation: sweet-drift-b 12s ease-in-out -4s infinite reverse;
}

body.cosmic-login-page .login-orb {
    position: absolute;
    display: block;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .38), rgba(197, 131, 250, .12) 32%, rgba(255, 255, 255, .02) 66%);
    box-shadow: inset -10px -13px 26px rgba(27, 5, 58, .24), 0 18px 45px rgba(22, 5, 44, .14);
    animation: orb-drift 16s ease-in-out infinite alternate;
}

body.cosmic-login-page .login-orb-one {
    top: 34%;
    left: 3%;
    width: 5.5rem;
    aspect-ratio: 1;
}

body.cosmic-login-page .login-orb-two {
    right: 18%;
    bottom: 22%;
    width: 3rem;
    aspect-ratio: 1;
    animation-delay: -7s;
}

body.cosmic-login-page .auth-panel {
    position: relative;
    z-index: 1;
    display: block;
    width: min(100%, 29rem);
    min-height: 0;
    height: auto;
    padding: 0;
    overflow: visible;
    background: transparent;
}

body.cosmic-login-page .auth-panel::before,
body.cosmic-login-page .auth-panel::after {
    display: none;
}

body.cosmic-login-page .auth-card {
    position: relative;
    width: 100%;
    max-width: none;
    padding: clamp(1.65rem, 3.5vw, 2.4rem);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 1.75rem;
    background: linear-gradient(145deg, rgba(255, 255, 255, .23), rgba(255, 255, 255, .11) 60%, rgba(255, 255, 255, .17));
    box-shadow: 0 28px 75px rgba(18, 3, 38, .34), inset 0 1px 0 rgba(255, 255, 255, .45);
    color: #fff;
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
}

body.cosmic-login-page .glass-logo-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 1.5rem;
    border-radius: .75rem;
}

body.cosmic-login-page .glass-logo-link:focus-visible {
    outline: 3px solid #f5d9ff;
    outline-offset: 4px;
}

body.cosmic-login-page .auth-wordmark {
    display: block;
    width: 9rem;
    max-width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
}

body.cosmic-login-page .auth-heading h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 3vw, 2.3rem);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.04em;
    text-align: center;
    text-shadow: 0 2px 15px rgba(25, 6, 51, .15);
}

body.cosmic-login-page .auth-form {
    gap: 1.1rem;
    margin-top: 1.6rem;
}

body.cosmic-login-page .field {
    gap: .48rem;
}

body.cosmic-login-page .field label,
body.cosmic-login-page .label-row {
    color: #fff;
    font-size: .84rem;
    font-weight: 600;
}

body.cosmic-login-page .label-row {
    align-items: baseline;
    flex-wrap: wrap;
}

body.cosmic-login-page .label-row a,
body.cosmic-login-page .auth-foot a {
    color: #ffebc4;
    font-weight: 650;
    text-decoration: none;
    text-underline-offset: 3px;
}

body.cosmic-login-page .label-row a:hover,
body.cosmic-login-page .auth-foot a:hover {
    text-decoration: underline;
}

body.cosmic-login-page input:not([type="checkbox"]) {
    width: 100%;
    min-height: 3.25rem;
    padding: .75rem 3.15rem;
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .9);
    box-shadow: inset 0 1px 2px rgba(41, 20, 65, .07);
    color: #28133f;
    font-size: 1rem;
}

body.cosmic-login-page input:not([type="checkbox"]):focus {
    border-color: #fff;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(235, 197, 255, .34);
}

body.cosmic-login-page .field-icon {
    left: 1rem;
    stroke: #66427f;
}

body.cosmic-login-page .password-toggle {
    right: .6rem;
    color: #66427f;
}

body.cosmic-login-page .check {
    align-items: center;
    gap: .65rem;
    margin: .05rem 0 0;
    color: rgba(255, 255, 255, .94);
    font-size: .82rem;
}

body.cosmic-login-page .check input {
    width: 1.1rem;
    height: 1.1rem;
    min-height: 1.1rem;
    flex-basis: 1.1rem;
    margin: 0;
    accent-color: #f4d89b;
}

body.cosmic-login-page .submit-button {
    display: block;
    width: 100%;
    min-height: 3.35rem;
    margin: .2rem 0 0;
    padding: .75rem 1rem;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: .85rem;
    background: #fff;
    box-shadow: 0 8px 24px rgba(25, 6, 48, .13);
    color: #512171;
    font-size: .98rem;
    font-weight: 700;
}

body.cosmic-login-page .submit-button:hover {
    background: #f4e7ff;
    color: #40125f;
}

body.cosmic-login-page .auth-foot {
    margin: 1.55rem 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: .82rem;
    text-align: center;
}

body.cosmic-login-page .validation-message.is-error {
    color: #ffe7ed;
}

body.cosmic-login-page .validation-message.is-success {
    color: #e6ffdc;
}

body.cosmic-login-page .auth-close {
    position: absolute;
    z-index: 3;
    top: 1.5rem;
    right: 1.5rem;
    display: grid;
    width: 2.7rem;
    height: 2.7rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    box-shadow: none;
    color: #fff;
    backdrop-filter: blur(12px);
}

body.cosmic-login-page .auth-close:hover {
    background: rgba(255, 255, 255, .25);
    box-shadow: none;
}

body.cosmic-login-page .auth-close svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
}

@keyframes sweet-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-14deg); }
    50% { transform: translate3d(18px, -25px, 0) rotate(-2deg); }
}

@keyframes sweet-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg); }
    50% { transform: translate3d(-18px, 24px, 0) rotate(20deg); }
}

@keyframes sweet-drift-c {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(25deg); }
    50% { transform: translate3d(-22px, -20px, 0) rotate(7deg); }
}

@keyframes orb-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(18px, -28px, 0); }
}

@media (max-width: 760px) {
    body.cosmic-login-page .auth-shell {
        padding: 4.75rem 1.25rem 2.5rem;
    }

    body.cosmic-login-page .auth-panel {
        width: min(100%, 27rem);
    }

    body.cosmic-login-page .login-sweet-one {
        top: 2%;
        left: -3.5rem;
        width: 11rem;
    }

    body.cosmic-login-page .login-sweet-two {
        top: 3%;
        right: -2.5rem;
        width: 8rem;
    }

    body.cosmic-login-page .login-sweet-three {
        right: -3rem;
        bottom: 0;
        width: 10rem;
    }

    body.cosmic-login-page .login-sweet-four {
        bottom: 2%;
        left: -2rem;
        width: 7rem;
    }

    body.cosmic-login-page .login-orb-one,
    body.cosmic-login-page .login-orb-two {
        display: none;
    }
}

@media (max-width: 480px) {
    body.cosmic-login-page .auth-shell {
        padding: 5rem 1rem 2.5rem;
    }

    body.cosmic-login-page .auth-card {
        padding: 1.5rem 1.25rem;
        border-radius: 1.4rem;
    }

    body.cosmic-login-page .auth-wordmark {
        width: 8rem;
    }

    body.cosmic-login-page .auth-heading h1 {
        font-size: 1.9rem;
    }

    body.cosmic-login-page .auth-form {
        gap: 1rem;
        margin-top: 1.3rem;
    }

    body.cosmic-login-page .auth-close {
        top: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.cosmic-login-page .login-sweet,
    body.cosmic-login-page .login-orb {
        animation: none;
        will-change: auto;
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.cosmic-login-page .auth-card {
        background: #603a7e;
    }
}

/* Shared sweet field and glass treatment for sign-up and recovery. */
body.cosmic-login-page .login-sweet {
    animation: none;
}

body.cosmic-login-page .login-sweet-five {
    top: 46%;
    left: 4%;
    width: clamp(8rem, 12vw, 12rem);
}

body.cosmic-login-page .login-sweet-six {
    top: 43%;
    right: 4%;
    width: clamp(8rem, 11vw, 11rem);
}

body.cosmic-login-page .auth-heading h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.9rem, 3vw, 2.3rem);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.04em;
    text-align: center;
}

body.cosmic-login-page .auth-heading > p:last-child {
    margin: .85rem 0 0;
    color: rgba(255, 255, 255, .9);
    font-size: .85rem;
    line-height: 1.5;
    text-align: center;
}

body.cosmic-login-page .auth-heading > p:last-child strong {
    color: #ffebc4;
}

body.cosmic-login-page .field-help,
body.cosmic-login-page .optional {
    color: rgba(255, 255, 255, .84);
}

body.cosmic-login-page .button-arrow {
    display: none;
}

body.cosmic-login-page.recovery-auth-page .recovery-secondary-actions {
    margin-top: 1.3rem;
    color: rgba(255, 255, 255, .84);
}

body.cosmic-login-page.recovery-auth-page .recovery-secondary-actions button,
body.cosmic-login-page.recovery-auth-page .recovery-secondary-actions a {
    color: #ffebc4;
}

body.cosmic-login-page input.recovery-otp-input {
    padding-inline: 1rem;
    text-align: center;
}

body.cosmic-login-page.register-auth-page {
    overflow-y: auto;
}

body.cosmic-login-page.register-auth-page .auth-panel {
    width: min(100%, 39rem);
    min-height: 0;
    padding: 0;
}

body.cosmic-login-page.register-auth-page .auth-card.auth-card-wide {
    width: 100%;
    max-height: none;
    padding: clamp(1.65rem, 3vw, 2.3rem);
}

body.cosmic-login-page.register-auth-page .auth-form {
    gap: .9rem;
    margin-top: 1.35rem;
}

body.cosmic-login-page.register-auth-page .auth-form-grid {
    gap: .85rem;
}

body.cosmic-login-page.register-auth-page .field {
    gap: .35rem;
}

body.cosmic-login-page.register-auth-page input:not([type="checkbox"]) {
    min-height: 3rem;
    padding: .65rem .9rem;
    font-size: .9rem;
}

body.cosmic-login-page.register-auth-page .password-wrap input:not([type="checkbox"]) {
    padding-right: 4.1rem;
}

body.cosmic-login-page.register-auth-page .password-toggle {
    top: .35rem;
    right: .35rem;
    bottom: .35rem;
    width: auto;
    height: auto;
    padding-inline: .7rem;
    transform: none;
}

body.cosmic-login-page.register-auth-page .contact-help {
    margin: -.35rem 0 0;
    font-size: .72rem;
}

body.cosmic-login-page.register-auth-page .check {
    line-height: 1.4;
}

body.cosmic-login-page.register-auth-page .auth-foot {
    margin-top: 1.2rem;
}

body.cosmic-login-page.register-auth-page .password-rules-dropdown {
    color: #39254d;
}

body.cosmic-login-page.register-auth-page .signup-progress,
body.cosmic-login-page.register-auth-page [data-signup-next],
body.cosmic-login-page.register-auth-page [data-signup-back] {
    display: none;
}

@media (max-width: 760px) {
    body.cosmic-login-page .login-sweet-five {
        top: 48%;
        left: -3.5rem;
        width: 9rem;
    }

    body.cosmic-login-page .login-sweet-six {
        top: 45%;
        right: -3rem;
        width: 8rem;
    }

    body.cosmic-login-page.register-auth-page .auth-panel {
        width: min(100%, 35rem);
    }
}

@media (max-width: 560px) {
    body.cosmic-login-page .login-sweet-one {
        left: -2rem;
    }

    body.cosmic-login-page .login-sweet-two {
        right: -1.5rem;
    }

    body.cosmic-login-page .login-sweet-three,
    body.cosmic-login-page .login-sweet-four {
        display: none;
    }

    body.cosmic-login-page .login-sweet-five {
        top: auto;
        bottom: 3%;
        left: -1.5rem;
        width: 9rem;
    }

    body.cosmic-login-page .login-sweet-six {
        top: auto;
        right: -1.5rem;
        bottom: 4%;
        width: 8rem;
    }

    body.cosmic-login-page.register-auth-page .auth-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    body.cosmic-login-page.register-auth-page .auth-card.auth-card-wide {
        padding: 1.5rem 1.25rem;
    }

    body.cosmic-login-page.register-auth-page .password-rules-dropdown {
        color: #39254d;
    }
}

/* Varied, softer sweets keep the glass card as the visual focus. */
body.cosmic-login-page .login-sweet {
    opacity: var(--sweet-opacity, .48);
    filter: saturate(.8) drop-shadow(0 14px 20px rgba(14, 3, 31, .18));
}

body.cosmic-login-page .login-sweet[hidden] {
    display: none !important;
}

body.cosmic-login-page .login-sweet-one {
    width: clamp(6rem, 8vw, 9rem);
    --sweet-opacity: .56;
}

body.cosmic-login-page .login-sweet-two {
    width: clamp(3.5rem, 5vw, 5.5rem);
    --sweet-opacity: .38;
}

body.cosmic-login-page .login-sweet-three {
    width: clamp(4.5rem, 6vw, 6.5rem);
    --sweet-opacity: .48;
}

body.cosmic-login-page .login-sweet-four {
    width: clamp(2.75rem, 3.5vw, 4rem);
    --sweet-opacity: .34;
}

body.cosmic-login-page .login-sweet-five {
    width: clamp(5rem, 6.5vw, 7rem);
    --sweet-opacity: .5;
}

body.cosmic-login-page .login-sweet-six {
    width: clamp(3.5rem, 5vw, 5.5rem);
    --sweet-opacity: .42;
}

@media (max-width: 999px) {
    body.cosmic-login-page .login-sweet-three,
    body.cosmic-login-page .login-sweet-four {
        display: none;
    }

    body.cosmic-login-page .login-sweet-one {
        top: 2%;
        left: 3%;
        width: 6.5rem;
    }

    body.cosmic-login-page .login-sweet-two {
        top: 2%;
        right: 18%;
        width: 4.25rem;
    }

    body.cosmic-login-page .login-sweet-five {
        top: auto;
        bottom: 2%;
        left: 4%;
        width: 5.5rem;
    }

    body.cosmic-login-page .login-sweet-six {
        top: auto;
        right: 5%;
        bottom: 3%;
        width: 4rem;
    }
}

@media (max-width: 560px) {
    body.cosmic-login-page .login-sweet-one {
        top: 1%;
        left: 2%;
        width: 5rem;
    }

    body.cosmic-login-page .login-sweet-two {
        top: 1%;
        right: 22%;
        width: 3.25rem;
    }

    body.cosmic-login-page .login-sweet-five {
        bottom: 2%;
        left: 2%;
        width: 4rem;
    }

    body.cosmic-login-page .login-sweet-six {
        right: 3%;
        bottom: 2%;
        width: 3.25rem;
    }

    body.cosmic-login-page.register-auth-page .login-sweet-one,
    body.cosmic-login-page.register-auth-page .login-sweet-two {
        display: none;
    }

    body.cosmic-login-page.register-auth-page .login-sweet-five {
        top: .75rem;
        bottom: auto;
    }

    body.cosmic-login-page.register-auth-page .login-sweet-six {
        top: .75rem;
        right: 22%;
        bottom: auto;
    }
}

/* Account creation uses short steps to keep the page within the viewport. */
html:has(body.register-auth-page.has-signup-steps),
body.cosmic-login-page.register-auth-page.has-signup-steps {
    height: 100%;
    overflow: hidden;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .auth-shell {
    min-height: 100svh;
    height: 100svh;
    padding: .75rem 1rem;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .auth-panel {
    width: min(100%, 32rem);
}

body.cosmic-login-page.register-auth-page.has-signup-steps .auth-card.auth-card-wide {
    padding: clamp(1.15rem, 2.5vh, 1.75rem);
}

body.cosmic-login-page.register-auth-page.has-signup-steps .glass-logo-link {
    margin-bottom: .85rem;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .auth-wordmark {
    width: 7.75rem;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .auth-heading h1 {
    font-size: clamp(1.55rem, 3vh, 1.9rem);
}

body.cosmic-login-page.register-auth-page.has-signup-steps .auth-form {
    gap: .7rem;
    margin-top: 1rem;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .signup-progress {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem;
    height: .25rem;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .signup-progress span {
    border-radius: 1rem;
    background: rgba(255, 255, 255, .32);
}

body.cosmic-login-page.register-auth-page.has-signup-steps .signup-progress span:first-child,
body.cosmic-login-page.register-auth-page.has-signup-steps[data-signup-step="2"] .signup-progress span:last-child {
    background: #fff;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .signup-step {
    display: grid;
    gap: .65rem;
    min-width: 0;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .signup-step[hidden] {
    display: none;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .auth-form-grid {
    gap: .65rem;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .field {
    align-content: start;
    gap: .2rem;
    padding-bottom: .75rem;
}

body.cosmic-login-page.register-auth-page.has-signup-steps input:not([type="checkbox"]) {
    min-height: 2.75rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .signup-actions {
    display: grid;
    grid-template-columns: minmax(0, .45fr) minmax(0, 1fr);
    gap: .55rem;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .submit-button,
body.cosmic-login-page.register-auth-page.has-signup-steps .signup-back {
    min-height: 2.85rem;
    margin: 0;
    padding: .5rem .75rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
}

body.cosmic-login-page.register-auth-page.has-signup-steps [data-signup-next],
body.cosmic-login-page.register-auth-page.has-signup-steps [data-signup-back] {
    display: block;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .signup-back {
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: .85rem;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    cursor: pointer;
}

body.cosmic-login-page.register-auth-page.has-signup-steps .signup-back:hover {
    background: rgba(255, 255, 255, .2);
}

body.cosmic-login-page.register-auth-page.has-signup-steps .auth-foot {
    margin-top: .85rem;
}

@media (max-width: 560px) {
    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-panel {
        width: min(100%, 25rem);
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-card.auth-card-wide {
        padding: 1.2rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps input:not([type="checkbox"]) {
        font-size: 1rem;
    }
}

@media (max-height: 640px) {
    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-shell {
        padding: .35rem .65rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-card.auth-card-wide {
        padding: .85rem 1rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .glass-logo-link {
        margin-bottom: .45rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-wordmark {
        width: 6.25rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-form {
        gap: .5rem;
        margin-top: .65rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .signup-step {
        gap: .4rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .field {
        padding-bottom: .6rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-foot {
        margin-top: .55rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-close {
        top: .4rem;
        right: .4rem;
        width: 2rem;
        height: 2rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps[data-signup-step="2"] .auth-close {
        top: 1.65rem;
        right: .8rem;
    }
}

@media (max-width: 560px) and (max-height: 540px) {
    body.cosmic-login-page.register-auth-page.has-signup-steps .glass-logo-link {
        display: none;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-card.auth-card-wide {
        padding: .65rem .9rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-heading h1 {
        font-size: 1.45rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-form {
        gap: .35rem;
        margin-top: .45rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .signup-step {
        gap: .35rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-form-grid {
        gap: .4rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .field {
        padding-bottom: .5rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-foot {
        margin-top: .35rem;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps[data-signup-step="2"] .auth-close {
        top: .6rem;
    }
}

@media (min-width: 561px) and (max-height: 400px) {
    body.cosmic-login-page.register-auth-page.has-signup-steps .glass-logo-link,
    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-foot {
        display: none;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .auth-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .password-rules-dropdown {
        position: static;
        display: none;
        margin-top: .2rem;
        opacity: 1;
        transform: none;
        visibility: visible;
    }

    body.cosmic-login-page.register-auth-page.has-signup-steps .field:focus-within .password-rules-dropdown {
        display: block;
    }
}