:root { color-scheme: light; font-family: Inter, system-ui, sans-serif; background: #f4f7fb; color: #14213d; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; }
.access-shell { width: min(92vw, 520px); }
.brand { display: inline-flex; gap: .75rem; align-items: center; color: inherit; text-decoration: none; margin-bottom: 1.5rem; }
.brand span:last-child { display: grid; }
.brand small { color: #5c677d; }
.brand-mark { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 50%; background: #1d4ed8; color: white; font-weight: 800; }
.access-card { background: white; border-radius: 1.25rem; padding: 2rem; box-shadow: 0 1rem 3rem rgba(20,33,61,.12); }
.access-card[hidden] { display: none; }
.access-card form, .access-card label { display: grid; gap: .6rem; }
.access-card form { gap: 1.1rem; margin-top: 1.5rem; }
.access-card input { font: inherit; padding: .85rem 1rem; border: 1px solid #b9c2d0; border-radius: .65rem; }
.button { font: inherit; border: 0; border-radius: .65rem; padding: .9rem 1.2rem; cursor: pointer; }
.button.primary { background: #1d4ed8; color: white; font-weight: 700; }
.access-message { background: #fff1f2; color: #9f1239; padding: 1rem; border-radius: .65rem; }
.eyebrow { color: #1d4ed8; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; }