.login-shell {
  min-height: 100dvh;
  padding: 24px;
  background: #f0f2ed;
}
.login-page {
  --login-blue: #1041ef;
  --login-ink: #202532;
  --login-muted: #555d66;
  --login-serif: "Songti SC", STSong, "Noto Serif CJK SC", SimSun, serif;
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  min-height: calc(100dvh - 48px);
  margin-inline: auto;
  padding: 34px clamp(32px, 4vw, 64px) 22px;
  border: 1px solid #e1e5dc;
  border-radius: 18px;
  background: #fcfcf9;
  box-shadow: 0 8px 32px rgb(36 47 29 / .035);
  color: var(--login-ink);
}
.login-header { display: flex; align-items: center; }
.login-logo { display: inline-flex; border-radius: 4px; }
.login-page :is(a, button):focus-visible { outline: 2px solid var(--login-blue); outline-offset: 3px; }
.login-content {
  flex: 1;
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  margin-block: 36px 30px;
}
.login-brand, .login-entry { min-width: 0; }
.login-eyebrow { margin-bottom: 18px; color: var(--login-muted); font-size: 13px; letter-spacing: .04em; }
.login-headline {
  font-family: var(--login-serif);
  font-size: clamp(44px, 4.3vw, 62px);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -.05em;
}
.login-headline span { color: var(--login-blue); }
.login-description { margin-top: 22px; color: var(--login-muted); font-size: 14px; line-height: 1.85; }
.login-art { width: min(100%, 580px); margin-top: 12px; pointer-events: none; }
.login-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.login-art-cover { transform-origin: 310px 170px; animation: login-cover-arrive 1.1s cubic-bezier(.22, .7, .2, 1) both; }
.login-art-paper-enter { transform-origin: 310px 150px; animation: login-paper-arrive 1.15s .12s cubic-bezier(.22, .7, .2, 1) both; }
.login-art-paper-float { transform-origin: 310px 150px; animation: login-paper-settle 2.8s 1.25s ease-in-out both; }
.login-art-imprint { transform-origin: 173px 202px; animation: login-imprint-arrive .8s .65s cubic-bezier(.22, .7, .2, 1) both; }
.login-art-seal-ring { stroke-dasharray: 1; animation: login-ring-draw .9s .95s ease-out both; }

.login-entry { display: flex; justify-content: center; padding-bottom: 8px; }
.login-form-wrap { width: 100%; max-width: 352px; }
.login-form-heading { margin-bottom: 30px; }
.login-form-heading h1 { font-family: var(--login-serif); font-size: 32px; line-height: 1.5; font-weight: 500; letter-spacing: -.035em; }
.login-form-heading p { margin-top: 8px; color: var(--login-muted); font-size: 14px; }
.login-field + .login-field { margin-top: 22px; }
.login-field > label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 500; }
.login-form .input {
  height: 48px;
  padding-inline: 14px;
  border-color: #d9dfd4;
  border-radius: 7px;
  background: #fffffd;
  box-shadow: 0 1px 2px rgb(36 47 29 / .025);
  transition: border-color 150ms, box-shadow 150ms;
}
.login-form .input::placeholder { color: var(--login-muted); font-size: 14px; }
.login-form .input:focus { outline: 2px solid rgb(16 65 239 / .13); outline-offset: 2px; border-color: var(--login-blue); }
.login-form .input.input-error { border-color: var(--color-error); }
.login-password { position: relative; }
.login-password .input { padding-right: 54px; }
.login-password-toggle.btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 10px;
  border-radius: 4px;
  color: var(--login-muted);
}
.login-password-toggle.btn:hover { background: #eff2eb; color: var(--login-ink); }
.login-password-toggle.btn:focus-visible { outline-offset: 1px; }
.login-submit.btn {
  justify-content: space-between;
  height: 48px;
  min-height: 48px;
  margin-top: 28px;
  padding-inline: 18px;
  border: 1px solid var(--login-blue);
  border-radius: 7px;
  background: var(--login-blue);
  color: #fff;
  box-shadow: 0 2px 3px rgb(16 65 239 / .1);
  transition: background-color 150ms, box-shadow 150ms;
}
.login-submit.btn:hover { background: #123bd1; border-color: #123bd1; box-shadow: 0 3px 7px rgb(16 65 239 / .15); }
.login-help { margin-top: 26px; padding-top: 21px; border-top: 1px solid #e6e9df; color: var(--login-muted); font-size: 14px; line-height: 1.9; }
.login-help p + p { margin-top: 2px; }
.login-form .alert { font-size: 14px; line-height: 1.7; }
.login-footer { padding-top: 20px; border-top: 1px solid #e6e9df; color: var(--login-muted); font-size: 13px; }
.login-capabilities { gap: 8px 0; }
.login-capabilities li + li::before { content: "·"; padding-inline: 12px; }
.login-stage { line-height: 1.8; }

@keyframes login-cover-arrive {
  from { opacity: 0; transform: translate(-18px, 18px) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}
@keyframes login-paper-arrive {
  from { opacity: 0; transform: translate(12px, -16px) rotate(1.5deg); }
  to { opacity: 1; transform: none; }
}
@keyframes login-paper-settle {
  0%, 100% { transform: none; }
  38% { transform: translateY(-4px) rotate(-.3deg); }
  72% { transform: translateY(1px) rotate(.12deg); }
}
@keyframes login-imprint-arrive {
  from { opacity: 0; transform: translateY(-10px) scale(1.08); }
  to { opacity: 1; transform: none; }
}
@keyframes login-ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

@media (hover: hover) { .login-form .input:hover:not(:focus) { border-color: #aebaa3; } }
@media (min-width: 1024px) and (max-height: 800px) {
  .login-content { margin-block: 24px 20px; }
  .login-headline { font-size: 50px; }
  .login-art { max-width: 460px; margin-top: 4px; }
  .login-description { margin-top: 16px; }
}
@media (max-width: 1023px) {
  .login-shell { padding: 16px; }
  .login-page { min-height: calc(100dvh - 32px); padding: 30px 32px 24px; }
  .login-content { flex: none; gap: 38px; margin-block: 40px 32px; }
  .login-story, .login-form-wrap { width: 100%; max-width: 400px; margin-inline: auto; }
  .login-eyebrow { margin-bottom: 14px; }
  .login-headline { font-size: 40px; white-space: nowrap; }
  .login-headline br, .login-description br { display: none; }
  .login-description { margin-top: 14px; font-size: 14px; }
  .login-art, .login-capabilities { display: none; }
  .login-art [class] { animation: none; }
  .login-entry { padding: 0; }
  .login-footer { width: 100%; max-width: 400px; margin: auto auto 0; border: 0; }
}
@media (max-width: 639px) {
  .login-shell { padding: 0; background: #fcfcf9; }
  .login-page { min-height: 100dvh; padding: 24px; border: 0; border-radius: 0; box-shadow: none; }
  .login-content { gap: 34px; margin-block: 30px 0; }
  .login-eyebrow { margin-bottom: 12px; font-size: 12px; }
  .login-headline { font-size: 32px; }
  .login-description { margin-top: 12px; }
  .login-form-heading { margin-bottom: 24px; }
  .login-form-heading h1 { font-size: 28px; }
  .login-form .input { font-size: 16px; }
  .login-help { font-size: 13px; }
  .login-footer { padding-top: 32px; font-size: 12px; }
}
@media (max-width: 359px) {
  .login-page { padding: 22px; }
  .login-headline { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-art-cover, .login-art-paper-enter, .login-art-paper-float, .login-art-imprint, .login-art-seal-ring { animation: none; }
  .login-form .input, .login-submit.btn { transition: none; }
}