:root { color-scheme: light dark; font-family: system-ui, sans-serif; background: #f7f5f1; color: #20211f; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
main { width: min(100%, 400px); padding: 32px 24px; background: #fff; border: 1px solid #d9d6cf; border-radius: 12px; }
.brand { font-family: Georgia, serif; font-size: 20px; }
h1 { margin: 32px 0 8px; font-size: 28px; line-height: 1.2; }
p { margin: 0 0 24px; line-height: 1.5; }
.notice { padding: 12px; border: 1px solid #9c3838; border-radius: 6px; color: #7d2020; }
form { display: grid; gap: 10px; }
label { font-weight: 600; }
input { width: 100%; min-height: 44px; padding: 10px 12px; margin-bottom: 10px; border: 1px solid #636861; border-radius: 6px; background: #fff; color: #20211f; font: inherit; font-size: 16px; }
button { min-height: 44px; margin-top: 8px; padding: 10px 16px; border: 0; border-radius: 6px; background: #263e35; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
input:focus-visible, button:focus-visible { outline: 3px solid #ab7132; outline-offset: 2px; }
@media (prefers-color-scheme: dark) { :root { background: #191c1a; color: #f2f1ec; } main { background: #252a27; border-color: #515b54; } input { background: #191c1a; color: #f2f1ec; border-color: #a5afa7; } button { background: #c7e4d1; color: #13241a; } .notice { color: #ffbbbb; border-color: #ffbbbb; } }