html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: #f7f8f9;
}

.remote-status {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    box-sizing: border-box;
    background: #f7f8f9;
    color: #101828;
    font-family: Heebo, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.remote-status[hidden],
.remote-status-banner[hidden],
.remote-status__action[hidden] {
    display: none;
}

.remote-status__page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.remote-status__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 32px 48px;
    color: rgb(0 0 0 / 45%);
    font-size: 14px;
    line-height: 1;
}

.remote-status__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.remote-status__brand-main {
    color: #101828;
    font-size: 34px;
    line-height: 1;
    font-weight: 850;
}

.remote-status__brand-ai {
    background: linear-gradient(90deg, #aa55ff 0%, #14b8a6 58%, #88e100 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.remote-status__brand-rule {
    width: 1px;
    height: 26px;
    background: rgb(0 0 0 / 12%);
}

.remote-status__brand-mode,
.remote-status__session {
    color: rgb(0 0 0 / 45%);
    font-size: 14px;
    font-weight: 500;
}

.remote-status__session:empty {
    display: none;
}

.remote-status__shell {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 48px 24px;
    text-align: center;
}

.remote-status__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.remote-status h1 {
    max-width: 16em;
    margin: 0;
    color: #101828;
    font-size: 56px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
    text-wrap: balance;
}

.remote-status p {
    max-width: 720px;
    margin: 0;
    color: rgb(0 0 0 / 55%);
    font-family: "Open Sans", Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.55;
}

.remote-status__action {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #205fff, #aa55ff 35%, #14b8a6 70%, #88e100);
    color: #fff;
    font: inherit;
    font-size: 20px;
    font-weight: 800;
    padding: 16px 40px;
    cursor: pointer;
}

.remote-status__action:hover {
    filter: brightness(.92);
}

.remote-status__action:active {
    transform: scale(.98);
}

.remote-status__steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.remote-status__steps li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: rgb(0 0 0 / 35%);
    font-size: 15px;
    font-weight: 700;
}

.remote-status__steps li::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgb(0 0 0 / 15%);
}

.remote-status__steps li.is-active,
.remote-status__steps li.is-done {
    color: #101828;
}

.remote-status__steps li.is-active::before {
    background: #205fff;
    animation: remote-status-pulse 1.8s cubic-bezier(.22, 1, .36, 1) infinite;
}

.remote-status__steps li.is-done::before {
    background: #14b8a6;
    animation: none;
}

.remote-status__footer {
    display: flex;
    justify-content: center;
    padding: 28px 48px;
}

.remote-status__footer span {
    color: rgb(0 0 0 / 35%);
    font-family: "Open Sans", Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

.remote-status-banner {
    position: fixed;
    top: 14px;
    left: 50%;
    z-index: 2147482999;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(620px, calc(100vw - 32px));
    padding: 10px 12px 10px 14px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #101828;
    color: #fff;
    font-family: "Open Sans", Inter, ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    box-shadow: 0 16px 40px rgb(16 24 40 / 22%);
}

.remote-status-banner button {
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #101828;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
}

@keyframes remote-status-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: .2;
    }
}

@media (max-width: 680px) {
    .remote-status__header {
        align-items: flex-start;
        gap: 16px;
        padding: 22px 16px;
    }

    .remote-status__brand {
        gap: 12px;
    }

    .remote-status__brand-main {
        font-size: 28px;
    }

    .remote-status__shell {
        gap: 28px;
        padding: 36px 18px;
    }

    .remote-status h1 {
        font-size: 38px;
    }

    .remote-status p {
        font-size: 16px;
    }

    .remote-status__steps {
        align-items: flex-start;
        gap: 18px;
    }
}