/* Sign in and create an account: one form on the page ground, in the exocortex type. */
:root {
  --bg: #ffffff; --bg2: #f5f5f3; --ink: #111111; --muted: #67655f; --bad: #b3261e;
  --f: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f); -webkit-font-smoothing: antialiased; }
h1, p { margin: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.auth { min-height: 100%; display: grid; grid-template-rows: auto 1fr; padding: 22px 24px; }
.wordmark { justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; }
.mark { width: 20px; height: 20px; border-radius: 5px; background: var(--ink); position: relative; }
.mark::after { content: ""; position: absolute; inset: 5px 5px 8px; border-radius: 1.5px; background: var(--bg); }
main { display: grid; place-items: center; padding: 32px 0 12vh; }
.form { width: min(360px, 100%); }
.form h1 { font-weight: 500; font-size: 28px; letter-spacing: -0.035em; line-height: 1.1; margin-bottom: 20px; }
.form label { display: block; font-size: 14px; font-weight: 500; margin: 16px 0 6px; }
.form input { width: 100%; height: 44px; padding: 0 14px; background: var(--bg2); border: 1px solid transparent; border-radius: 10px; font: inherit; color: var(--ink); transition: border-color 150ms ease, background-color 150ms ease; }
.form input:focus { outline: none; border-color: var(--ink); background: #fff; }
.form label .opt { font-weight: 400; color: var(--muted); }
.hint { font-size: 13px; margin-top: 6px; color: var(--muted); }
.submit { margin-top: 24px; width: 100%; height: 44px; background: var(--ink); color: #fff; border: 0; border-radius: 999px; font: 500 15px/1 var(--f); cursor: pointer; transition: background-color 150ms ease, transform 120ms ease; }
.submit:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .submit:hover { background: #333; } }
.submit:disabled { opacity: 0.55; cursor: default; }
.msg { margin-top: 12px; min-height: 21px; font-size: 14px; color: var(--bad); }
.alt { margin-top: 6px; font-size: 14px; color: var(--muted); }
.alt a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }