*{box-sizing:border-box}body{margin:0;background:#fff;color:#285651;font:16px Arial,sans-serif}.connection-layout{min-height:100dvh;display:grid;place-items:center;padding:32px}.connection-card{width:min(100%,1120px);display:grid;grid-template-columns:45% 55%;border:1px solid #e3e3e3;border-radius:30px;background:white;padding:14px;min-height:680px}.connection-visual{position:relative;overflow:hidden;border-radius:17px;background:#ff7900;aspect-ratio:614/1197}.connection-visual img{position:absolute;width:288.6%;max-width:none;height:auto;left:-27.52%;top:-9.44%}.connection-form-area{display:flex;align-items:center;justify-content:center;padding:42px 56px}.connection-form{width:100%;max-width:440px}.connection-form h1{font-size:36px;text-align:center;line-height:1.2;margin:0 0 38px;font-weight:700}.login-field{margin:0 0 30px;border:1px solid #e4e4e4;border-radius:16px;padding:8px 16px 13px;min-width:0}.login-field legend{font-size:20px;color:#929793;padding:0 3px}.login-field input{display:block;border:0;width:100%;font:20px Arial,sans-serif;padding:4px 0;color:#285651;min-height:34px;outline-offset:8px;background:transparent}.login-field input::placeholder{color:#929793;font-style:italic}.password-field{padding:12px 16px;margin-top:30px}.password-field input::placeholder{font-style:normal}.connection-submit{width:100%;border:0;border-radius:16px;background:#ff7900;color:white;font:bold 26px Arial,sans-serif;padding:14px 18px;margin-top:38px;cursor:pointer}.connection-submit:hover{background:#ec6f00}.connection-submit:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #285651;outline-offset:4px}.password-help{margin:14px 0 28px;text-align:center;color:#929793;font-size:17px}.password-help summary{cursor:pointer;text-decoration:underline;list-style:none}.password-help p{font-size:14px;line-height:1.6;text-align:left;color:#626c65}.remember-me{display:flex;align-items:center;gap:12px;color:#929793;font-size:19px}.remember-me input{width:23px;height:23px;accent-color:#ff7900}.errorlist{list-style:none;background:#fff0ed;color:#9c3224;border:1px solid #edc9c1;border-radius:10px;padding:12px 15px;font-size:14px;line-height:1.5}.login-field:focus-within{border-color:#ff7900}@media(max-width:900px){.connection-layout{padding:20px}.connection-card{min-height:570px}.connection-form-area{padding:24px}.connection-form h1{font-size:28px}.login-field legend,.login-field input{font-size:17px}.connection-submit{font-size:21px;margin-top:18px}.remember-me{font-size:16px}}@media(max-width:600px){.connection-layout{padding:16px}.connection-card{display:block;min-height:0;padding:12px;border-radius:22px}.connection-visual{display:none}.connection-form-area{padding:32px 16px}.connection-form h1{font-size:30px;margin-bottom:30px}.login-field{margin-bottom:22px}.connection-submit{margin-top:16px}.password-help{font-size:15px}}

/* Compact login; keep the source artwork ratio without enlarging the whole screen. */
@media(min-width:601px){
 .connection-layout{padding:24px}
 .connection-card{width:min(100%,820px);min-height:0;padding:10px;border-radius:24px}
 .connection-form-area{padding:28px 36px}
 .connection-form h1{font-size:28px;margin-bottom:28px}
 .login-field{margin-bottom:22px;border-radius:12px;padding:6px 12px 8px}
 .login-field legend{font-size:16px}
 .login-field input{font-size:16px;min-height:28px}
 .password-field{padding:10px 12px;margin-top:22px}
 .connection-submit{font-size:20px;padding:11px 14px;margin-top:25px;border-radius:12px}
 .password-help{font-size:14px;margin:12px 0 22px}
 .remember-me{font-size:15px;gap:9px}
 .remember-me input{width:19px;height:19px}
}
@media(min-width:601px) and (max-height:760px){
 .connection-card{width:min(100%,720px)}
 .connection-form-area{padding:22px 28px}
 .connection-layout{padding:16px}
}