:root { font-family: system-ui, sans-serif; color: #182a2a; background: #f4f6f5; color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; padding: 7vh 1rem; }
main { max-width: 30rem; margin: auto; padding: 2rem; background: white; border: 1px solid #d9e2df; border-radius: 1rem; }
.brand { font-weight: 800; letter-spacing: .2em; text-decoration: none; }
h1 { font-size: 1.7rem; }
p { line-height: 1.6; }
label { display: block; margin: 1rem 0; font-weight: 600; }
input { display: block; width: 100%; padding: .8rem; margin-top: .4rem; border: 1px solid #879e95; border-radius: .4rem; font: inherit; }
button { cursor: pointer; width: 100%; padding: .8rem; margin: .5rem 0; border: 1px solid #245a4d; border-radius: .4rem; background: #245a4d; color: white; font: inherit; font-weight: 600; }
button.secondary { background: white; color: #245a4d; }
button:disabled { opacity: .65; cursor: wait; }
a { color: #245a4d; }
:focus-visible { outline: 3px solid #b17819; outline-offset: 3px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; background: #f4f6f5; }
#status { overflow-wrap: anywhere; }