* { box-sizing: border-box; }
:root { color-scheme: light; --ink:#262626; --muted:#737373; --line:#dbdbdb; --blue:#0095f6; }
html, body { margin:0; min-height:100%; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color:var(--ink); background:#fafafa; }
.education-banner { display:flex; gap:12px; align-items:flex-start; padding:16px max(18px, calc((100vw - 900px)/2)); background:#fff4d6; border-bottom:1px solid #edcf80; color:#543b00; }
.banner-icon { font-size:25px; line-height:1; }
.education-banner strong { font-size:12px; letter-spacing:.09em; }
.education-banner p { margin:5px 0 0; font-size:14px; line-height:1.45; }
.page-shell { width:min(100% - 32px, 380px); margin:42px auto 24px; }
.login-card, .reveal-card { background:#fff; border:1px solid var(--line); padding:28px 30px; }
.login-card { text-align:center; }
.brand-mark { width:44px; height:44px; margin:0 auto 12px; border:3px solid #b33cb4; border-radius:13px; position:relative; }
.camera-ring { position:absolute; width:17px; height:17px; border:3px solid #e05b68; border-radius:50%; left:11px; top:11px; }
.camera-dot { position:absolute; width:5px; height:5px; background:#f2a03d; border-radius:50%; top:6px; right:6px; }
h1 { font-size:27px; font-weight:650; letter-spacing:-.7px; margin:0; }
.subheading { font-size:13px; font-weight:650; color:var(--muted); margin:17px -10px 24px; }
form { display:grid; gap:9px; text-align:left; }
input { width:100%; border:1px solid var(--line); border-radius:4px; background:#fafafa; padding:12px 10px; font-size:13px; outline-color:#a8d5fa; }
.field-note { margin:1px 0 3px; font-size:11px; color:var(--muted); line-height:1.4; }
button { border:0; border-radius:8px; background:var(--blue); color:white; font-weight:650; padding:10px 14px; font-size:14px; cursor:pointer; }
button:hover { filter:brightness(.96); }
button:focus-visible { outline:3px solid #85caff; outline-offset:2px; }
.or-divider { display:flex; align-items:center; gap:13px; margin:22px 0 16px; color:#737373; font-size:11px; }
.or-divider span { height:1px; background:#dbdbdb; flex:1; }
.safe-note { margin:0; color:#5b5b5b; font-size:12px; line-height:1.5; }
.reveal-card { margin-top:18px; border-radius:8px; }
.reveal-card h2 { font-size:20px; line-height:1.25; margin:10px 0; }
.reveal-card p, .reveal-card li { font-size:13px; line-height:1.55; }
.reveal-card h3 { font-size:14px; margin:20px 0 6px; }
.reveal-card ul { padding-left:20px; }
.reveal-icon { font-size:30px; }
.secondary-button { background:#efefef; color:#262626; width:100%; margin-top:8px; }
.footer-note { color:#8a8a8a; text-align:center; font-size:11px; line-height:1.5; margin:20px 8px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
[hidden] { display:none !important; }
@media (max-width:480px) { .education-banner { padding:14px 16px; } .page-shell { margin-top:24px; } .login-card, .reveal-card { padding:24px 20px; } }