@font-face {
  font-family: 'General Sans';
  src: url('/_auth/assets/general-sans.ttf') format('truetype');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

:root { color-scheme: dark; font-family: 'General Sans', sans-serif; background: #062C15; color: #F6F0E2; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
main { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 64px 24px; }
.login { width: min(100%, 440px); transform: translateY(-16px); }
.wordmark { position: relative; width: min(70%, 220px); aspect-ratio: 1853 / 615; margin: 0 auto 40px; }
.wordmark img, .wordmark canvas { position: absolute; display: block; width: 100%; height: 100%; }
.wordmark canvas { visibility: hidden; }
.wordmark.is-animated img { visibility: hidden; }
.wordmark.is-animated canvas { visibility: visible; }
.password-form { width: min(100%, 320px); margin-inline: auto; }
.password-form input { width: 100%; height: 48px; padding: 12px 16px; border: 1px solid #849784; border-radius: 6px; color: #F6F0E2; background: transparent; font-size: 16px; line-height: 24px; outline-offset: 4px; }
.password-form input::placeholder { color: #C6CDBF; opacity: 1; }
.password-form input:focus-visible { outline: 2px solid #F6F0E2; border-color: #F6F0E2; }
.enter { width: 100%; min-height: 48px; margin-top: 12px; padding: 12px 24px; border: 1px solid #F6F0E2; border-radius: 6px; color: #062C15; background: #F6F0E2; font-size: 16px; font-weight: 500; line-height: 24px; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.enter:hover { background: white; border-color: white; }
button:focus-visible { outline: 2px solid #F6F0E2; outline-offset: 4px; }
.error { min-height: 40px; margin: 16px 0 0; color: #F6F0E2; font-size: 14px; line-height: 20px; text-align: center; }
.motion-toggle { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #849784; border-radius: 50%; color: #F6F0E2; background: transparent; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle svg { width: 18px; height: 18px; }
.motion-toggle .play { display: none; }
.motion-toggle[data-playing='false'] .pause { display: none; }
.motion-toggle[data-playing='false'] .play { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width: 480px) { .login { max-width: 340px; transform: none; } .wordmark { width: min(70%, 192px); margin-bottom: 32px; } }
@media(max-height: 500px) { main { padding-block: 40px; } .login { transform: none; max-width: 300px; } .wordmark { margin-bottom: 24px; } }
@media(prefers-reduced-motion: reduce) { .enter { transition: none; } }