:root {
    color-scheme: dark;
    --bg: #121418;
    --text: #eef0f5;
    --soft: #7e899c;
    --line: rgba(126, 137, 156, .18);
    --glass: rgba(255, 255, 255, .034);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(circle at 50% 28%, rgba(93, 121, 168, .06), transparent 33rem),
        var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

.account-shell {
    width: min(100%, 800px);
    min-height: 100vh;
    margin: 0 auto;
    padding: max(12px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
}

.account-topbar {
    display: grid;
    min-height: 58px;
    grid-template-columns: 126px 1fr 126px;
    align-items: center;
}

.account-topbar p {
    margin: 0;
    color: rgba(238, 240, 245, .92);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-align: center;
    text-transform: uppercase;
}

.back-button {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: rgba(238, 240, 245, .92);
    border: 1px solid rgba(126, 137, 156, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .035);
    font-size: 34px;
    line-height: 1;
    text-decoration: none;
}

.account-stage {
    display: flex;
    width: min(100%, 460px);
    margin: 30px auto 0;
    flex-direction: column;
    align-items: center;
}

.auth-choice {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
}

.axolotl-mark {
    width: 106px;
    height: 76px;
    margin-bottom: 22px;
    overflow: visible;
    fill: none;
    stroke: rgba(205, 217, 238, .88);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.axolotl-mark circle { fill: rgba(205, 217, 238, .88); stroke: none; }
.axolotl-mark path:nth-of-type(3) { stroke-width: 2.25; }
.axolotl-mark .axolotl-mouth { stroke-width: 1.85; }

@media (prefers-reduced-motion: no-preference) {
    .axolotl-mark {
        animation: axolotl-arrive 520ms cubic-bezier(.22, 1, .36, 1) both;
    }
    @keyframes axolotl-arrive {
        from { opacity: 0; transform: translateY(4px); }
        to { opacity: 1; transform: translateY(0); }
    }
}

h1 {
    margin: 0;
    font-size: clamp(34px, 7vw, 40px);
    font-weight: 600;
    letter-spacing: -1.3px;
    line-height: 1.12;
    text-align: center;
}

.subtitle {
    max-width: 340px;
    margin: 12px 0 0;
    color: var(--soft);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}

.provider-stack { display: grid; width: 100%; gap: 12px; margin-top: 34px; }
.provider {
    display: grid;
    min-height: 54px;
    padding: 0 17px;
    grid-template-columns: 24px 1fr 24px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 15px;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
    transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}
.provider:active { opacity: .76; transform: scale(.988); }
.provider:disabled { opacity: .42; cursor: default; }
.provider-light { color: #16191e; background: #f4f5f7; border-color: rgba(255, 255, 255, .9); }
.provider-dark { color: var(--text); background: var(--glass); border-color: rgba(180, 194, 218, .2); }
.provider-mark { width: 24px; text-align: center; }

.or-row { display: flex; align-items: center; gap: 14px; }
.or-row span { height: 1px; flex: 1; background: var(--line); }
.or-row small { color: rgba(126, 137, 156, .66); font-size: 11px; }

.email-row input {
    width: 100%;
    min-height: 54px;
    padding: 0 18px;
    color: var(--text);
    border: 1px solid rgba(180, 194, 218, .25);
    border-radius: 15px;
    outline: none;
    background: rgba(255, 255, 255, .028);
    font-size: 16px;
    text-align: center;
}
.email-row input:focus { border-color: rgba(180, 202, 236, .55); }

.consent-note {
    max-width: 360px;
    margin: 14px 0 0;
    color: rgba(126, 137, 156, .72);
    font-size: 10.5px;
    line-height: 1.55;
    text-align: center;
}
.consent-note a {
    color: rgba(183, 198, 222, .88);
    text-decoration: none;
}
.consent-note a:hover,
.consent-note a:focus-visible { color: var(--text); }

.account-message {
    min-height: 18px;
    max-width: 350px;
    margin: 18px 0 0;
    color: rgba(181, 203, 235, .9);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}
.account-message.is-error { color: rgba(232, 177, 177, .9); }
#accountMessage { margin: 18px auto 0; }

.email-sent {
    display: flex;
    width: 100%;
    margin-top: 38px;
    flex-direction: column;
    align-items: center;
    outline: none;
}
.mail-mark {
    display: grid;
    width: 88px;
    height: 88px;
    margin-bottom: 28px;
    place-items: center;
    border: 1px solid rgba(173, 194, 229, .28);
    border-radius: 50%;
    background: radial-gradient(circle at 45% 35%, rgba(115, 148, 203, .2), rgba(93, 121, 168, .08));
    box-shadow: 0 22px 70px rgba(34, 49, 73, .24);
}
.mail-mark svg {
    width: 50px;
    height: 50px;
    overflow: visible;
    fill: none;
    stroke: rgba(220, 229, 244, .94);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}
.mail-mark circle {
    fill: #171b22;
    stroke: rgba(151, 188, 164, .92);
}
.mail-mark .mail-check {
    stroke: rgba(178, 221, 196, .98);
    stroke-width: 1.9;
}
.email-sent-copy {
    margin: 16px 0 0;
    color: var(--soft);
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
}
.email-sent-address {
    max-width: 100%;
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: rgba(238, 240, 245, .96);
    font-size: 15px;
    font-weight: 650;
    text-align: center;
}
.open-inbox {
    display: grid;
    width: 100%;
    min-height: 54px;
    margin-top: 32px;
    place-items: center;
    color: #16191e;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 15px;
    background: #f4f5f7;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    transition: opacity 140ms ease, transform 140ms ease;
}
.open-inbox:hover { opacity: .94; }
.open-inbox:active { opacity: .78; transform: scale(.988); }
.email-sent-actions {
    display: flex;
    min-height: 42px;
    margin-top: 14px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(126, 137, 156, .45);
}
.email-sent-actions button {
    padding: 9px 3px;
    color: rgba(183, 198, 222, .9);
    border: 0;
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.email-sent-actions button:hover:not(:disabled),
.email-sent-actions button:focus-visible { color: var(--text); }
.email-sent-actions button:disabled {
    color: rgba(126, 137, 156, .55);
    cursor: default;
}
.email-expiry {
    margin: 8px 0 0;
    color: rgba(126, 137, 156, .58);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
    .email-sent:not([hidden]) .mail-mark,
    .email-sent:not([hidden]) h1,
    .email-sent:not([hidden]) .email-sent-copy,
    .email-sent:not([hidden]) .email-sent-address,
    .email-sent:not([hidden]) .open-inbox,
    .email-sent:not([hidden]) .email-sent-actions,
    .email-sent:not([hidden]) .email-expiry {
        animation: email-sent-arrive 460ms cubic-bezier(.22, 1, .36, 1) both;
    }
    .email-sent:not([hidden]) h1 { animation-delay: 35ms; }
    .email-sent:not([hidden]) .email-sent-copy,
    .email-sent:not([hidden]) .email-sent-address { animation-delay: 65ms; }
    .email-sent:not([hidden]) .open-inbox { animation-delay: 95ms; }
    .email-sent:not([hidden]) .email-sent-actions,
    .email-sent:not([hidden]) .email-expiry { animation-delay: 120ms; }
    @keyframes email-sent-arrive {
        from { opacity: 0; transform: translateY(7px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
.guest-note {
    max-width: 360px;
    margin: 18px 0 0;
    color: rgba(126, 137, 156, .66);
    font-size: 11px;
    line-height: 1.55;
    text-align: center;
}

.signed-in { margin-top: 72px; }
.saved-mark {
    display: grid;
    width: 72px;
    height: 72px;
    margin-bottom: 28px;
    place-items: center;
    color: rgba(220, 229, 244, .96);
    border: 1px solid rgba(173, 194, 229, .42);
    border-radius: 50%;
    background: rgba(93, 121, 168, .17);
    font-size: 28px;
}
.identity-card {
    display: flex;
    width: 100%;
    min-height: 76px;
    margin-top: 36px;
    padding: 16px 18px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--glass);
}
.identity-card div { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.identity-card strong { font-size: 15px; font-weight: 600; }
.identity-card small { color: var(--soft); font-size: 12px; }
.identity-card > span {
    flex-shrink: 0;
    margin-left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(126, 171, 147, .95);
    box-shadow: 0 0 10px rgba(126, 171, 147, .55);
}
.continue-link {
    display: grid;
    width: 100%;
    min-height: 54px;
    margin-top: 20px;
    place-items: center;
    color: #16191e;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 15px;
    background: #f4f5f7;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    transition: opacity 140ms ease, transform 140ms ease;
}
.continue-link:hover { opacity: .94; }
.continue-link:active { opacity: .78; transform: scale(.988); }
.sign-out {
    width: 100%;
    min-height: 50px;
    margin-top: 24px;
    color: var(--soft);
    border: 1px solid var(--line);
    border-radius: 14px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.delete-account {
    margin-top: 24px;
    padding: 10px 16px;
    color: var(--soft);
    border: 0;
    background: transparent;
    font-size: 13px;
    min-height: 44px;
    cursor: pointer;
}
.delete-account.is-armed { color: rgba(226, 158, 158, .88); }

.signed-in.is-completing .saved-mark {
    animation: saved-arrive 440ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes saved-arrive {
    from { opacity: 0; transform: scale(.88); }
    to { opacity: 1; transform: scale(1); }
}

footer {
    display: flex;
    margin-top: 34px;
    justify-content: center;
    gap: 9px;
    color: var(--soft);
    font-size: 12px;
}
footer a { color: inherit; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
footer > span { align-self: center; }
footer a:hover { color: var(--soft); }

[hidden] { display: none !important; }

@media (max-width: 540px) {
    .account-shell { padding-inline: 18px; }
    .account-topbar { grid-template-columns: 64px 1fr 64px; }
    .account-stage { margin-top: 22px; }
}