:root { color-scheme: light; font-family: system-ui, sans-serif; color: #39123e; background: #fff9ea; }
body { margin: 0; padding: 2rem 1rem; }
main { max-width: 36rem; margin: auto; background: white; padding: clamp(1rem, 4vw, 2.5rem); border: 2px solid #5c184a; border-radius: 1.5rem; box-shadow: 7px 7px 0 #efcf5b; }
.brand { font-weight: 800; font-size: 1.15rem; }
h1 { line-height: 1.15; } p { line-height: 1.6; }
a { color: #6c245f; text-underline-offset: .2em; }
form { padding: 1rem 0; border-top: 1px solid #eee1e8; }
label { display: block; font-weight: 650; margin: .7rem 0; }
input { display: block; box-sizing: border-box; width: 100%; padding: .8rem; margin-top: .35rem; border: 1px solid #92738c; border-radius: .5rem; font: inherit; }
button { background: #5c184a; color: white; padding: .85rem 1rem; border: 0; border-radius: .65rem; font: inherit; font-weight: 700; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #d29213; outline-offset: 3px; }
.pair-code { font-size: 2.5rem; font-weight: 800; letter-spacing: .15em; }
[role=status] { background: #fff3ba; padding: 1rem; border-radius: .5rem; }

/* Reuse the original quest-board landing design without changing access checks. */
body.access-landing { padding: 0; color: var(--ink); }
.access-landing main.login-screen { max-width: none; margin: 0; border: 0; box-shadow: none; }
.access-landing .login-paper { padding: 2rem; min-width: 0; }
.access-landing h2 { margin: 0; font-size: 1.65rem; line-height: 1.15; font-weight: 900; }
.access-landing .brand-sticker { align-self: flex-start; }
.access-landing .section-kicker { justify-self: start; }
.access-landing .login-form { border: 0; max-width: none; }
.access-landing .avatar-login-card { border: 2px solid var(--ink); padding: 1rem; }
.access-landing .avatar-login-card h2 { font-size: 1.25rem; overflow-wrap: anywhere; }
.access-landing .avatar-login-card label { width: 100%; margin: 0; }
.access-landing .avatar-login-card input { text-align: center; font-size: 1.5rem; letter-spacing: .45em; padding: .6rem; border: 2px solid var(--ink); background: white; }
.access-landing .avatar-login-card button { font-size: .8rem; }
.access-landing .parent-entry { margin-top: 1.5rem; font-weight: 800; }
.access-landing .login-submit-button { border: 2px solid var(--ink); }
.access-landing .login-paper a.login-submit-button { display: block; box-sizing: border-box; text-align: center; text-decoration: none; color: white; }
.access-landing .login-submit-button--child { background: var(--pink); }
.access-landing .avatar-roster .avatar { width: 128px; height: 128px; min-width: 0; }
.access-landing .avatar-login-card .pin-field { width: 100%; margin: 0; }
.access-landing .avatar-login-card .pin-digit-input { padding: 0; margin: 0; letter-spacing: normal; font-size: 1.2rem; }

/* Ordinary links keep the child/parent switch usable without JavaScript. */
.access-landing .family-login-tabs { display: flex; gap: 8px; margin-block: 20px; }
.access-landing .family-login-tabs a { flex: 1; padding: 12px; border: 2px solid var(--ink); color: var(--ink); background: var(--paper); text-align: center; font-weight: 800; text-decoration: none; }
.access-landing .family-login-tabs a[aria-current="page"] { background: var(--yellow); color: #201936; box-shadow: var(--shadow-sm); }

.access-landing .login-paper input { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.access-landing .login-paper a { color: var(--purple); }
.access-landing .settings-notice { color: var(--ink); background: var(--cream-deep); }
.access-landing .avatar-login-card .login-error { order: 1; grid-column: 1 / -1; margin: 0; color: var(--ink); }