:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: #111514; color: #f4f6f3; }
.card { width: min(440px, calc(100% - 32px)); padding: 40px 36px; border: 1px solid #34423c; border-radius: 18px; background: #1c2420; box-shadow: 0 22px 65px #0005; }
.eyebrow { margin: 0 0 28px; color: #9caf9f; font-size: 11px; font-weight: 700; letter-spacing: .13em; }
h1 { margin: 0 0 12px; font-size: 28px; letter-spacing: .02em; }
.lead { margin: 0 0 30px; color: #c6d1c8; line-height: 1.7; }
#google-button { min-height: 44px; }
.note { margin: 32px 0 0; color: #98a99c; font-size: 12px; line-height: 1.7; }
#error { margin: 24px 0 0; color: #ffb8a9; font-size: 13px; }
button { margin-top: 20px; padding: 11px 19px; border: 1px solid #657d68; border-radius: 9px; background: #28382e; color: #f4f6f3; font: inherit; cursor: pointer; }
button:hover { background: #355041; }
button[hidden] { display: none; }
a { color: #b8d7b8; }
@media (max-width: 500px) { .card { padding: 32px 24px; } }