:root { color-scheme: light; font: 16px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #17201c; background: #edf3ef; }
* { box-sizing: border-box; }
body { min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: 32px; background: radial-gradient(circle at 50% -20%, #fff 0, #edf3ef 58%); }
.login-card { width: min(100%, 448px); padding: 48px; border: 1px solid #cfddd4; border-radius: 14px; background: #fff; box-shadow: 0 24px 70px rgb(32 88 73 / 12%); }
.brand-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 11px; background: #205849; color: white; font-size: 25px; font-weight: 800; letter-spacing: -.05em; box-shadow: 0 5px 12px rgb(32 88 73 / 20%); }
.site-name { margin: 26px 0 0; color: #205849; font-size: 12px; letter-spacing: .14em; font-weight: 800; }
h1 { font-size: 30px; line-height: 1.15; margin: 14px 0 10px; letter-spacing: -.035em; }
p { color: #64716b; }
.login-message { margin: 0; }
.sign-in { display: block; width: 100%; margin: 30px 0 20px; padding: 13px 18px; border: 0; background: #205849; color: white; border-radius: 7px; text-align: center; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background 120ms ease, transform 120ms ease; }
.sign-in:hover { background: #194a39; transform: translateY(-1px); }
.sign-in:focus-visible { outline: 3px solid rgb(32 88 73 / 30%); outline-offset: 3px; }
.login-note { margin-bottom: 0; font-size: 13px; }