:root {
  --paper: #FCFAF7; --card: #FFFFFF; --ink: #201E1A; --body: #45423C; --caption: #6F6A61;
  --line: #D8D3C8; --accent: #0F83BD; --accent-strong: #0C6693; --accent-wash: #E2F0F7;
  --caution-wash: #F6EDDA; --caution: #8A6116; --negative-wash: #F9E8E3; --negative: #B2452F;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1813; --card: #262219; --ink: #F4F1EB; --body: #C9C4B9; --caption: #A6A095;
    --line: #474235; --accent: #0F83BD; --accent-strong: #4FB3E8; --accent-wash: #14303F;
    --caution-wash: #332A18; --caution: #D2A24F; --negative-wash: #3A2620; --negative: #E08D76;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: var(--paper); color: var(--body);
  font: 16px/1.5 'Host Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.card {
  width: 100%; max-width: 440px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; padding: 32px 28px;
}
.brand { margin: 0 0 20px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.brand::after { content: ''; display: inline-block; width: 0.32em; height: 0.32em; margin-left: 2px; background: var(--accent); }
h1 { margin: 0 0 12px; font-size: 22px; line-height: 1.25; color: var(--ink); }
p { margin: 0 0 14px; }
.caption { color: var(--caption); font-size: 14px; }
dl { margin: 18px 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
dt { color: var(--caption); font-size: 14px; }
dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.notice { border-radius: 10px; padding: 12px 14px; margin: 0 0 18px; }
.notice.error { background: var(--negative-wash); color: var(--negative); }
.notice.warning { background: var(--caution-wash); color: var(--caution); }
form { margin: 0; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
button {
  font: inherit; font-weight: 600; border-radius: 10px; padding: 11px 18px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #FFFFFF;
}
/* The design system's button: bright marine in both themes, deeper on hover. */
button:hover { background: #0C6693; border-color: #0C6693; }
button.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
button.secondary:hover { background: transparent; border-color: var(--caption); }
label { display: block; font-size: 14px; color: var(--caption); margin: 18px 0 6px; }
input[type=email] {
  width: 100%; font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
}
.dev { margin-top: 26px; padding-top: 18px; border-top: 1px dashed var(--line); }