:root { color-scheme: light; font-family: Calibri, "Segoe UI", Arial, sans-serif; color: #16344c; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; }
button, input { font: inherit; }
a { color: inherit; }
.welcome-wrap { position: relative; min-height: 100svh; }
.welcome-brand { position: absolute; z-index: 1; top: clamp(24px, 4vh, 48px); left: 68%; }
.welcome-brand a { text-decoration: none; font-size: 29px; font-weight: 700; letter-spacing: -.9px; }
.welcome-brand a > span:first-child { color: #2d5eb4; }
.welcome-brand-dot { color: #d18b36; }
.welcome-grid { min-height: 100svh; display: grid; grid-template-columns: 68% 32%; align-items: center; }
.welcome-login { position: relative; z-index: 1; grid-column: 2; min-width: 0; width: 100%; max-width: 540px; padding: 100px clamp(28px, 4vw, 80px) 64px 0; }
.welcome-login h1 { font-size: clamp(28px, 2.5vw, 40px); font-weight: 400; letter-spacing: -.9px; line-height: 1.15; margin: 0 0 34px; }
.welcome-login h1 span { color: #2d5eb4; font-weight: 700; }
.welcome-login form { display: grid; gap: 22px; }
.welcome-field { position: relative; display: grid; gap: 8px; }
.welcome-field label { font-size: 15px; font-weight: 700; }
.welcome-field input { display: block; width: 100%; min-width: 0; height: 48px; padding: 11px 44px 11px 13px; color: #16344c; background: #fff; border: 1px solid #b6c6d7; border-radius: 5px; font-size: 17px; text-align: left; }
.welcome-field small { max-width: 36em; font-size: 13px; line-height: 1.5; color: #546b80; }
.welcome-submit { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 12px 17px; border: 1px solid #2d5eb4; border-radius: 5px; color: #fff; background: #2d5eb4; font-size: 16px; font-weight: 700; cursor: pointer; }
.welcome-submit:hover { background: #244b8f; border-color: #244b8f; }
.welcome-submit span { font-size: 23px; font-weight: 400; line-height: 1; }
:is(a, input, button):focus-visible { outline: 3px solid #81a8df; outline-offset: 3px; }
.welcome-field input[aria-invalid="true"] { border-color: #a33b43; }
.welcome-notice { margin: 0 0 20px; padding: 12px 14px; border-left: 3px solid #398254; background: #e9f3ed; font-size: 14px; line-height: 1.45; }
.welcome-error { border-left-color: #a33b43; background: #fbe9e9; }
.welcome-scene { position: absolute; inset: 0 25% 0 0; margin: 0; overflow: hidden; }
.welcome-scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.welcome-scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, transparent 87%, #fff 100%); }
.welcome-skip { position: fixed; top: 8px; left: 8px; z-index: 2; transform: translateY(-150%); padding: 10px 15px; background: white; border: 1px solid #2d5eb4; }
.welcome-skip:focus { transform: none; }
@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
    .welcome-brand { position: static; padding: 24px 24px 0; max-width: 528px; margin: 0 auto; }
    .welcome-grid { display: flex; flex-direction: column; min-height: 0; }
    .welcome-login { max-width: 528px; padding: 34px 24px 28px; }
    .welcome-login h1 { font-size: 34px; margin-bottom: 26px; }
    .welcome-scene { position: relative; inset: auto; width: 100%; max-height: 72svh; aspect-ratio: 4 / 3; }
    .welcome-scene img { object-fit: cover; }
    .welcome-scene::after { background: linear-gradient(to bottom, #fff, transparent 12%); }
}
@media (max-width: 380px) { .welcome-brand { padding-inline: 18px; } .welcome-login { padding-inline: 18px; } .welcome-login h1 { font-size: 30px; } }
@media print { .welcome-login form, .welcome-skip { display: none; } }
