:root { color-scheme: light dark; --canvas: #faf9f6; --surface: #fff; --text: #252521; --secondary: #77766f; --border: #e3e2dc; --hover: #f3f2ed; --error: #b43e31; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
main { min-height: 100svh; display: grid; place-items: center; padding: 36px 24px; }
.sign-in { width: 100%; max-width: 360px; text-align: center; }
.app-icon { display: inline-block; width: 96px; height: 96px; margin-bottom: 12px; animation: enter .65s ease-out both; }
.app-icon img { width: 100%; height: 100%; object-fit: contain; }
.content { animation: enter .65s .15s ease-out both; }
h1 { margin: 0 0 12px; font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.65px; }
.subtitle { max-width: 320px; margin: 0 auto 28px; color: var(--secondary); font-size: 13px; line-height: 1.6; }
.answer { min-height: 212px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.methods { display: grid; gap: 10px; }
button, .button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); font: 500 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
button:hover, .button:hover { background: var(--hover); }
button:active, .button:active { transform: scale(.985); }
button:disabled { cursor: wait; opacity: .6; }
.button-label { display: grid; grid-template-columns: 18px 155px; align-items: center; gap: 12px; text-align: left; }
.button-label img, .button-label svg { width: 16px; height: 18px; object-fit: contain; }
.policy { margin: 4px 0 0; color: var(--secondary); font-size: 11px; line-height: 1.7; }
a { color: inherit; text-underline-offset: 3px; }
.policy a { color: var(--text); }
.status, .error { font-size: 13px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.status { color: var(--secondary); }
.error { color: var(--error); }
.text-button { border-color: transparent; background: transparent; color: var(--secondary); font-size: 12px; }
form { display: grid; gap: 10px; text-align: left; }
label { font-size: 12px; color: var(--secondary); }
input { width: 100%; min-height: 44px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); padding: 12px; font: inherit; font-size: 14px; }
:focus-visible { outline: 2px solid #74864a; outline-offset: 4px; }
[hidden] { display: none !important; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-color-scheme: dark) { :root { --canvas: #1c1c1a; --surface: #272725; --text: #eeeeea; --secondary: #a5a59d; --border: #3c3c37; --hover: #30302c; --error: #ff9e90; } .github-mark { filter: invert(1); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }