:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  background: #211a28;
  color: #f5f0f5;
  --muted: #b5aab9;
}
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.login-shell { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; min-height: 100svh; }
.brand-panel, .login-panel { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.panel-index { position: absolute; top: 32px; left: 40px; margin: 0; color: #c0b5c8; font-size: .625rem; font-weight: 600; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; }
.panel-index span { margin-right: 12px; opacity: .65; }
.brand-panel { gap: 28px; padding: 116px 48px 150px; background: radial-gradient(ellipse at 50% 44%, #28202f 0, #211a28 42%, #1c1722 100%); }
.brand-logo { display: block; width: clamp(210px,20vw,270px); max-width: 100%; height: auto; }
.brand-caption { margin: 0; color: #c4bacb; font-size: .8125rem; line-height: 1.6; text-align: center; }
.shared-purpose { position: absolute; bottom: 38px; left: 24px; right: 24px; margin: 0; color: #ada2b7; font-size: .6875rem; line-height: 1.9; text-align: center; }
.shared-purpose strong { color: #ddd3e4; font-weight: 400; }
.login-panel { color-scheme: light; padding: 100px 48px 56px; background: #fff; color: #242c37; --focus: #326591; --muted: #5b6877; }
.login-panel .panel-index { color: #5b6c7e; }
.login-content { width: 100%; max-width: 352px; }
.login-header { text-align: center; }
.research-brand { position: relative; width: 280px; max-width: 100%; aspect-ratio: 1.15; overflow: hidden; margin: 0 auto 26px; }
.rabbit-logo { position: absolute; top: 50%; left: 50%; width: 140%; max-width: none; height: auto; transform: translate(-50%,-50%); mix-blend-mode: multiply; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.eyebrow { margin: 0; color: #3f6485; font-size: .625rem; font-weight: 600; letter-spacing: .18em; line-height: 1.6; text-transform: uppercase; }
.intro { margin: 10px 0 0; color: var(--muted); font-size: .8125rem; line-height: 1.65; }
#login-form { margin-top: 32px; }
label { display: block; margin-bottom: 10px; color: #364354; font-size: .75rem; font-weight: 500; line-height: 1.5; }
.password-field { display: flex; min-height: 56px; border: 1px solid #8996a5; border-radius: 10px; background: #fafbfc; transition: border-color 140ms ease; }
.password-field:hover { border-color: #536d87; }
.password-field:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 3px; }
.password-field:has(input[aria-invalid="true"]) { border-color: #b03c36; }
input { flex: 1; min-width: 0; width: 100%; padding: 14px 15px; border: 0; border-radius: 9px; background: transparent; color: #242c37; font-size: 1rem; line-height: 1.5; caret-color: var(--focus); }
input:focus { outline: 0; }
.password-toggle { flex-shrink: 0; min-width: 68px; min-height: 52px; margin: 1px; padding: 12px 15px; border: 0; border-radius: 8px; background: transparent; color: #4b6179; font-size: .75rem; font-weight: 500; line-height: 1.5; cursor: pointer; }
.password-toggle:hover { background: #eaf0f5; color: #213c57; }
button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.password-toggle:focus-visible { outline-offset: -5px; }
.submit-button { display: block; width: 100%; min-height: 54px; margin-top: 16px; padding: 14px 20px; border: 1px solid transparent; border-radius: 10px; background: #283b50; color: #fff; font-size: .875rem; font-weight: 500; line-height: 1.5; cursor: pointer; transition: background-color 140ms ease; }
.submit-button:hover:not(:disabled) { background: #365673; }
.submit-button:active:not(:disabled) { background: #1c2e40; }
.submit-button:disabled { background: #c7d1da; color: #425264; cursor: wait; }
.form-message { min-height: 1.5em; margin: 13px 0 0; color: #4b6179; font-size: .8125rem; line-height: 1.6; overflow-wrap: anywhere; }
.form-message[data-state="error"] { color: #a12e29; }
.research-note { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e3e8ed; color: var(--muted); font-size: .625rem; line-height: 1.7; text-align: center; }
.research-note p { margin: 0; }
.research-note .note-title { margin-bottom: 4px; color: #45566a; font-size: .6875rem; }
@media (min-width: 1800px) { .brand-logo { width: 300px; } .login-content { max-width: 384px; } .research-brand { width: 304px; } }
@media (max-width: 800px) {
  .login-shell { display: block; }
  .brand-panel { padding: 24px; gap: 12px; }
  .brand-panel .panel-index { position: static; font-size: .5625rem; }
  .brand-logo { width: 80px; }
  .brand-caption { font-size: .6875rem; }
  .shared-purpose { position: static; margin-top: 0; font-size: .625rem; }
  .shared-purpose br { display: none; }
  .shared-purpose strong::before { content: " "; }
  .login-panel { padding: 32px 24px; }
  .login-panel .panel-index { position: static; align-self: center; margin-bottom: 24px; font-size: .5625rem; }
  .research-brand { width: 200px; margin-bottom: 20px; }
  #login-form { margin-top: 26px; }
  .research-note { margin-top: 14px; padding-top: 16px; }
}
@media (max-width: 360px) { .brand-panel { padding: 20px; } .login-panel { padding: 28px 20px; } .research-brand { width: 180px; } }
@media (max-height: 760px) and (min-width: 801px) { .brand-panel { padding: 88px 40px 120px; } .brand-logo { width: 210px; } .login-panel { padding-top: 84px; padding-bottom: 36px; } .research-brand { width: 232px; margin-bottom: 18px; } #login-form { margin-top: 26px; } .research-note { margin-top: 12px; padding-top: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media (forced-colors: active) { .password-field, .submit-button { border-color: ButtonText; } .password-field:focus-within, button:focus-visible { outline-color: Highlight; } }