:root{--bg:#0f172a;--fg:#e2e8f0;--card:#1e293b;--acc:#38bdf9}
@media (prefers-color-scheme: light){:root{--bg:#f1f5f9;--fg:#0f172a;--card:#fff}}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif}
.card{background:var(--card);padding:2rem;border-radius:16px;max-width:420px;width:92%;box-shadow:0 10px 30px #0004;text-align:center}
h1{margin-top:0}
.actions{display:grid;gap:.75rem;margin:1.5rem 0}
.btn{display:block;padding:.8rem 1rem;border-radius:10px;text-decoration:none;font-weight:600;border:0;cursor:pointer;font-size:1rem;width:100%}
.google{background:#fff;color:#111;border:1px solid #cbd5e1}
.github{background:#24292f;color:#fff}
.out{background:var(--acc);color:#0f172a}
.note{font-size:.8rem;opacity:.7}