@font-face {
  font-family: "Auto Grotesk";
  src: url("../assets/fonts/auto-grotesk-b-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Auto Grotesk";
  src: url("../assets/fonts/auto-grotesk-b-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --paper: #f9f8f5;
  --ink: #15110d;
  --muted: #15110d;
  --error: #b42318;
  --control-radius: 12px;
  font-family: "Auto Grotesk", Arial, sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button, a, input { outline-offset: 4px; }
button:focus-visible, a:focus-visible { outline: 2px solid #a59c8c; }
::selection { background: #ece7d8; color: var(--ink); }
main { flex: 1; display: grid; place-items: center; padding: 88px 24px 48px; }
.auth-shell { width: min(320px, 100%); text-align: center; }
.app-mark { --app-icon-size: 64px; --app-icon-scale: 1.82857143; margin: 0 auto 24px; }
.screen-heading h1 { margin: 0; font-size: 28px; line-height: 34px; font-weight: 500; letter-spacing: -.015em; text-wrap: balance; outline: 0; }
.screen-heading > p { margin: 8px 0 0; font-size: 16px; line-height: 24px; color: var(--muted); text-wrap: balance; }
.auth-actions { display: grid; gap: 10px; margin-top: 28px; }
.button { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; padding: 12px 20px; border: 0; border-radius: var(--control-radius); font-size: 16px; line-height: 24px; font-weight: 500; }
.button-light { color: var(--ink); background: linear-gradient(180deg, #fff 0%, #fff 20%, #f7f7f7 80.648%, #f5f5f5 100%); box-shadow: inset 0 0 0 .5px rgba(21, 17, 13, .16), inset 0 1px 0 #fff; }
.button-light:hover { background: linear-gradient(180deg, #fff 0%, #fff 20%, #fdfdfd 80.648%, #fafafa 100%); }
.button-light:active { background: linear-gradient(0deg, #fff 0%, #fff 20%, #f7f7f7 80.648%, #f5f5f5 100%); }
.provider-icon { display: block; flex: none; width: 16px; height: 16px; object-fit: contain; }
.account-switch { margin: 24px 0 0; color: var(--muted); font-size: 14px; line-height: 22px; }
.text-button { display: inline; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: inherit; line-height: inherit; font-weight: 500; }
.text-button:hover, .page-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-button { position: absolute; top: 28px; left: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 8px; border: 0; border-radius: 8px; color: var(--ink); background: transparent; font-size: 14px; line-height: 20px; }
.back-button:hover { background: rgba(21, 17, 13, .04); }
#email-title { font-size: 26px; line-height: 32px; }
.auth-form { display: grid; gap: 10px; text-align: left; margin-top: 28px; }
.auth-actions .auth-form { margin-top: 0; }
.auth-field { display: grid; gap: 6px; }
.field-error { margin: 0; padding-inline: var(--control-radius); color: var(--error); font-size: 13px; line-height: 18px; }
.auth-divider { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(21, 17, 13, .1); }
.auth-form input { width: 100%; min-width: 0; height: 48px; padding: 0 16px; border: 0; border-radius: var(--control-radius); background: #eeece5; color: var(--ink); font-size: 16px; line-height: 24px; box-shadow: var(--input-error-outline, none); }
.auth-form input::placeholder { color: var(--ink); opacity: 1; }
.auth-form input:focus { outline: 0; background: #fff; }
.auth-form input[aria-invalid="true"] { --input-error-outline: inset 0 0 0 .5px var(--error); }
.auth-form input:is(:autofill, :-webkit-autofill) { background: #fff; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: var(--input-error-outline, inset 0 0 0 0 transparent), inset 0 0 0 1000px #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.loading-avatar { position: relative; display: grid; place-items: center; width: 200px; max-width: 100%; height: 100px; margin: 0 auto 24px; }
#loading-canvas { display: block; width: 200px; max-width: 100%; height: 100px; }
.loading-avatar .loading-fallback { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.loading-avatar[data-renderer="three"] .loading-fallback { display: none; }
.loading-avatar:not([data-renderer="three"]) #loading-canvas { visibility: hidden; }
body[data-view="loading"] .app-mark { display: none; }
.page-footer { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 20px 24px 24px; font-size: 13px; line-height: 20px; color: var(--muted); }
body[data-view="email"] .page-footer, body[data-view="loading"] .page-footer { visibility: hidden; }
@media (max-width: 480px) {
  main { padding: 80px 24px 40px; }
  .back-button { top: 20px; left: 16px; }
  .screen-heading h1 { font-size: 26px; line-height: 32px; }
  #email-title { font-size: 24px; line-height: 30px; }
}
@media (max-height: 500px) and (min-width: 481px) {
  main { padding-block: 56px 24px; }
  .app-mark { margin-bottom: 16px; }
  .auth-actions { margin-top: 20px; }
  .account-switch { margin-top: 16px; }
}