:root { color-scheme: light; font-family: "Yu Gothic UI", Meiryo, sans-serif; color: #172b3a; background: #f1f6f9; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; min-height: 100dvh; display: grid; place-items: center; font-size: 16px; line-height: 1.8; }
.card { width: min(100%, 460px); background: white; padding: 32px; border: 1px solid #d9e3eb; border-radius: 16px; box-shadow: 0 12px 36px #1733490d; overflow-wrap: anywhere; }
.brand { font-weight: 600; color: #1f617a; margin-top: 0; }
h1 { font-size: 25px; line-height: 1.5; margin: 16px 0; }
a { color: #155b76; }
.button, button { display: block; width: 100%; border: 0; border-radius: 9px; background: #1f617a; color: white; font: inherit; font-weight: 600; text-align: center; padding: 13px 16px; text-decoration: none; cursor: pointer; margin-top: 24px; }
.secondary { color: #243d4d; background: #e8f0f4; }
.help { font-size: 15px; color: #46576b; margin: 20px 0 0; }
.notice { color: #8b281d; background: #fff1ed; padding: 12px; border: 1px solid #e9b9ae; border-radius: 8px; }
a:focus-visible, button:focus-visible { outline: 3px solid #e09b1b; outline-offset: 4px; }
@media(max-width: 480px) { body { padding: 16px; } .card { padding: 24px; } }