:root { font: 14px/1.6 var(--brand-ui-font); color: var(--brand-ink); background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
main { width: min(420px, calc(100% - 48px)); margin: 0 auto; padding: 76px 0 40px; }
section { margin-top: 88px; }
.eyebrow { color: #747474; font-size: 10px; letter-spacing: .18em; margin: 0 0 16px; }
h1 { font-size: 26px; line-height: 1.4; font-weight: 400; letter-spacing: -.02em; margin: 0; }
.intro { color: #777; margin: 12px 0 36px; }
label { display: block; font-size: 12px; margin-bottom: 9px; }
input { width: 100%; padding: 13px 14px; font: inherit; border: 1px solid var(--brand-line); border-radius: 6px; background: #fff; }
input:focus { outline: 1px solid var(--brand-focus); outline-offset: 2px; }
button { display: block; width: 100%; margin-top: 18px; padding: 14px; font: inherit; border: 1px solid var(--brand-ink); border-radius: 6px; background: var(--brand-ink); color: #fff; cursor: pointer; }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 4px; }
#login-status { min-height: 44px; margin-top: 16px; font-size: 12px; color: #777; }
#login-status[data-error="true"] { color: #a33043; }
.back { display: inline-block; margin-top: 40px; font-size: 12px; color: #777; }
main:after { content: ""; display: block; height: 3px; margin-top: 40px; background: var(--brand-gradient); }
@media (max-width: 600px) { main { padding-top: 44px; } section { margin-top: 65px; } }