:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, sans-serif;
    color: #17253a;
    background: #eef4f6;
    line-height: 1.55;
}

* { box-sizing: border-box; }

body { margin: 0; }

main {
    width: min(100% - 2rem, 34rem);
    margin: clamp(2rem, 10vh, 7rem) auto 2rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-weight: 750;
    margin-bottom: 1rem;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    color: #fff;
    background: #135856;
    border-radius: .55rem;
}

.card {
    padding: clamp(1.25rem, 5vw, 2.5rem);
    border-radius: 1rem;
    border: 1px solid #d8e4e7;
    background: #fff;
    box-shadow: 0 10px 35px #173b4a0d;
}

h1 {
    margin: 0 0 .65rem;
    font-size: clamp(1.55rem, 5vw, 2.2rem);
    line-height: 1.2;
    letter-spacing: -.035em;
}

p { margin: 0 0 1.35rem; }
label { display: block; font-weight: 650; margin-bottom: .4rem; }

input, button {
    min-height: 2.85rem;
    font: inherit;
    border-radius: .5rem;
}

input {
    width: 100%;
    border: 1px solid #84969d;
    color: inherit;
    background: #f7fafb;
    padding: .55rem .75rem;
    margin-bottom: .9rem;
    font-family: ui-monospace, monospace;
}

button {
    color: #fff;
    background: #135856;
    border: 1px solid #135856;
    padding: .55rem 1rem;
    font-weight: 700;
    cursor: pointer;
}

button:hover:not(:disabled) { background: #0d4746; }
button:disabled { opacity: .7; cursor: wait; }
:focus-visible { outline: 3px solid #0c7670; outline-offset: 3px; }

.secondary {
    display: inline-block;
    margin-top: .75rem;
    color: #135856;
    text-underline-offset: .2em;
}

.note, .footer { color: #455b66; font-size: .9rem; }
.note { margin: .85rem 0 0; }
.footer { margin: 1rem 0 0; }
#status { color: #354f5d; margin: .85rem 0 0; }
#status:empty { margin: 0; }