:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --paper: #111317; --ink: #f3f4f6; --muted: #a1a6b1; --sun: #f0bd6c; --line: #ffffff1c; --focus-ring: #a4c9f0; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); }
button, input { font: inherit; }
h1, h2, p { margin-top: 0; }
.login-shell { flex: 1; width: min(1200px, calc(100% - 64px)); margin: 0 auto; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 60px; }
.welcome-panel { position: relative; padding: 64px 0; overflow: hidden; }
.brand-mark { width: 36px; display: grid; gap: 3px; margin-bottom: 52px; }
.brand-mark i { height: 8px; margin: 0 auto; border-radius: 8px 8px 2px 2px; background: var(--sun); }
.brand-mark i:nth-child(1) { width: 12px; }.brand-mark i:nth-child(2) { width: 22px; }.brand-mark i:nth-child(3) { width: 32px; }
.eyebrow { margin: 0 0 18px; color: var(--muted); font-size: .75rem; font-weight: 620; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin-bottom: 24px; font-size: clamp(2.7rem, 5.5vw, 4.75rem); font-weight: 620; letter-spacing: -.055em; line-height: 1.07; }
h1 span { display: block; } h1 span:last-child { color: var(--sun); }
.intro { max-width: 36ch; margin-bottom: 32px; color: var(--muted); font-size: 1rem; line-height: 1.7; }
.library-labels { display: flex; flex-wrap: wrap; gap: 0 18px; color: #c4c8d1; font-size: .75rem; line-height: 2; }
.library-labels span + span::before { content: "·"; margin-right: 18px; color: var(--sun); }
.family-art { display: none; }
.form-panel { padding: 32px 0; }
.form-card { width: min(100%, 460px); margin-left: auto; padding: 40px; border: 1px solid var(--line); border-radius: 20px; background: #1a1d24; }
.form-card .eyebrow { color: var(--sun); }
h2 { margin-bottom: 12px; font-size: 2rem; font-weight: 620; letter-spacing: -.04em; }
.form-copy { margin-bottom: 30px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
form { display: grid; gap: 10px; }
label { margin-top: 7px; font-size: .8125rem; font-weight: 580; }
input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid #ffffff26; border-radius: 9px; color: var(--ink); background: #12151b; font-size: 1rem; outline: none; }
input:focus { border-color: var(--focus-ring); box-shadow: 0 0 0 3px #a4c9f01a; }
.password-row { position: relative; }.password-row input { padding-right: 74px; }
.show-password { position: absolute; right: 8px; top: 4px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 6px; color: #c4c8d1; background: transparent; font-size: .75rem; cursor: pointer; }
.show-password:hover { background: #ffffff0c; }
.message { min-height: 22px; margin: 4px 0 0; color: #f2a19b; font-size: .8125rem; line-height: 1.5; }
.submit-button { min-height: 52px; margin-top: 2px; border: 0; border-radius: 9px; color: #17191e; background: var(--sun); font-weight: 650; cursor: pointer; transition: background 150ms ease; }
.submit-button:hover { background: #f5ce8f; }
.submit-button:focus-visible, .show-password:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.submit-button:disabled { cursor: wait; opacity: .7; }
.submit-button[aria-busy="true"]::before { width: 15px; height: 15px; display: inline-block; margin-right: 9px; border: 2px solid #17191e44; border-top-color: #17191e; border-radius: 50%; content: ""; vertical-align: -2px; animation: login-spin 720ms linear infinite; }
@keyframes login-spin { to { transform: rotate(360deg); } }
.help-note { margin: 24px 0 0; color: #c4c8d1; font-size: .8125rem; line-height: 1.5; text-align: center; }
.refresh-login { min-height: 44px; display: flex; align-items: center; justify-content: center; margin-top: 4px; color: #c4c8d1; font-size: .8125rem; line-height: 1.5; text-align: center; text-underline-offset: 3px; }
.refresh-login:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.privacy-note { margin: 12px 0 0; color: var(--muted); font-size: .75rem; line-height: 1.5; text-align: center; }.privacy-note span { margin-right: 5px; color: #86b89a; }
.login-footer { width: min(1200px, calc(100% - 64px)); margin: 0 auto; min-height: 62px; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0 max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .login-shell { gap: 32px; grid-template-columns: 1fr 1fr; }.form-card { padding: 28px; } }
@media (max-width: 680px) { .login-shell { width: min(460px, calc(100% - 36px)); display: block; }.welcome-panel { padding: 30px 0 0; }.brand-mark { margin-bottom: 24px; }.welcome-panel > .eyebrow { font-size: .6875rem; margin-bottom: 16px; }h1 { font-size: 2.4rem; margin-bottom: 18px; }h1 span { display: inline; }h1 span::after { content: " "; }.intro, .library-labels { display: none; }.form-panel { padding: 12px 0 28px; }.form-card { padding: 26px 22px; }h2 { font-size: 1.7rem; }.form-copy { margin-bottom: 22px; }.form-card .eyebrow { display: none; }.login-footer { width: calc(100% - 36px); min-height: 52px; font-size: .6875rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }.submit-button[aria-busy="true"]::before { animation: none; } }

/* Keep editing and dismissal clear of notches, enlarged text and keyboards. */
.login-shell, .login-footer {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
.welcome-panel { padding-top: max(30px, env(safe-area-inset-top)); }
.password-row input { padding-right: calc(3em + 8px); }
.show-password { top: 50%; transform: translateY(-50%); min-width: 44px; }
input { scroll-margin-block: 24px; }
@media (max-width: 1000px) and (pointer: coarse) and (max-height: 500px) {
  .login-shell { width: min(520px, calc(100% - 36px)); display: block; }
  .welcome-panel { padding-bottom: 0; }
  .welcome-panel .brand-mark { margin-bottom: 20px; }
  .welcome-panel h1 { font-size: 2rem; margin-bottom: 18px; }
  .welcome-panel h1 span { display: inline; }
  .welcome-panel h1 span::after { content: " "; }
  .welcome-panel > .eyebrow, .intro, .library-labels { display: none; }
  .form-panel { padding-top: 0; }
  .form-card { margin-inline: auto; }
}
@media (hover: none) { .submit-button:active { background: #f5ce8f; } }