@font-face { font-family:"Atkinson Hyperlegible"; src:url("/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:"Atkinson Hyperlegible"; src:url("/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-style:normal; font-weight:700; font-display:swap; }
:root { color-scheme: light; --cream:#f4f1ea; --paper:#fffdf8; --ink:#1c2526; --muted:#56615f; --teal:#244c50; --teal-light:#77aaa8; --line:#dedbd2; --font-readable:"Atkinson Hyperlegible",Verdana,Tahoma,Arial,sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--cream); color: var(--ink); font-family:var(--font-readable); font-size:16px; line-height:1.55; letter-spacing:.012em; font-synthesis:none; -webkit-font-smoothing:auto; text-rendering:optimizeLegibility; }
.login-shell { width: min(930px, 100%); min-height: 570px; display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--paper); box-shadow: 0 28px 80px rgba(32,42,43,.13); }
.login-card { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px,7vw,78px); }
.brand-mark { position: relative; width: 44px; height: 44px; margin-bottom: 34px; border-radius: 13px; background: var(--teal); transform: rotate(-4deg); }
.brand-mark::before,.brand-mark::after,.brand-mark span { content:""; position:absolute; left:11px; right:11px; height:2px; border-radius:9px; background:white; }
.brand-mark::before { top:13px; }.brand-mark span { top:20px; right:16px; }.brand-mark::after { top:27px; right:21px; }
.eyebrow { color: #65716f; font-size: 11px; font-weight: 700; letter-spacing:.065em; text-transform:uppercase; }
h1 { margin: 9px 0 17px; font-family:var(--font-readable); font-size: clamp(40px,6vw,59px); font-weight:700; line-height:1.08; letter-spacing:.005em; }
h1 em { color: var(--teal); font-style:normal; }
p { max-width: 420px; margin: 0 0 29px; color: var(--muted); font-size: 14px; line-height:1.65; }
.google-button { min-height: 50px; display:flex; align-items:center; justify-content:center; gap:11px; padding:0 20px; border:1px solid var(--line); border-radius:13px; background:white; color:var(--ink); box-shadow:0 7px 22px rgba(32,42,43,.07); font-size:13px; font-weight:750; text-decoration:none; transition:.18s ease; }
.google-button[hidden] { display:none; }
.google-button:hover { transform:translateY(-1px); border-color:#b9c5c3; box-shadow:0 10px 28px rgba(32,42,43,.11); }
.local-button { width:100%;min-height:42px;margin-top:10px;border:1px dashed #a9bbb8;border-radius:11px;background:#eef5f3;color:var(--teal);font:inherit;font-size:11px;font-weight:800;cursor:pointer; }
.local-button:hover { background:#e3efec; }
#localLogin span { display:block;margin-top:7px;color:#687472;font-size:10.5px;line-height:1.5;text-align:center; }
.privacy-note { margin-top:16px; color:#687472; font-size:10.5px; line-height:1.55; text-align:center; }
.error-message { margin: -11px 0 16px; padding: 10px 12px; border:1px solid #edc6be; border-radius:10px; background:#fae9e5; color:#9d4535; font-size:11px; }
.login-aside { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:48px; background:var(--teal); color:white; }
.orbit { position:absolute; border:1px solid rgba(255,255,255,.12); border-radius:50%; }.orbit-one { width:390px;height:390px;top:-190px;right:-185px;box-shadow:0 0 0 65px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.015); }.orbit-two { width:170px;height:170px;left:-90px;bottom:80px; }
.aside-copy,.mini-board { position:relative; z-index:1; }.aside-copy span,.aside-copy strong { display:block; }.aside-copy span { color:#b8d1cf;font-size:12px;letter-spacing:.05em;text-transform:uppercase; }.aside-copy strong { max-width:320px;margin-top:6px;font-family:var(--font-readable);font-size:31px;font-weight:700;line-height:1.16;letter-spacing:.005em; }
.mini-board { display:grid; gap:8px; margin-top:31px; }.mini-board div { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:12px 13px;border:1px solid rgba(255,255,255,.11);border-radius:11px;background:rgba(255,255,255,.075);backdrop-filter:blur(8px);font-size:12px; }.mini-board i { width:7px;height:7px;border-radius:50%; }.mini-board i.amber{background:#e6b66f}.mini-board i.blue{background:#8ab7c9}.mini-board i.green{background:#9bc89e}.mini-board b{font-family:var(--font-readable);font-size:16px;font-weight:700}
@media(max-width:720px){body{padding:14px}.login-shell{min-height:calc(100vh - 28px);grid-template-columns:1fr}.login-aside{display:none}.login-card{padding:38px 28px}.brand-mark{margin-bottom:48px}h1{font-size:46px}}