:root { color-scheme: light dark; --ink: #1b2a33; --paper: #f6f4ef; --accent: #1f5f7a; }
@media (prefers-color-scheme: dark) { :root { --ink: #e8e6e1; --paper: #142028; --accent: #7fc3de; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--paper); color: var(--ink);
       font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { width: min(26rem, 100% - 2rem); }
h1 { font-size: 1.6rem; letter-spacing: 0.02em; margin: 0 0 1.5rem; }
label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
input { width: 100%; padding: 0.7rem 0.8rem; font: inherit; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; }
button { margin-top: 0.8rem; padding: 0.65rem 1.2rem; font: inherit; font-weight: 600; border: 0; border-radius: 6px; background: var(--accent); color: var(--paper); cursor: pointer; }
a { color: var(--accent); }
#invalid { color: #b3261e; }
.note { margin-top: 2rem; font-size: 0.9rem; opacity: 0.8; }