:root {
  --kg-page: #f3f4f7; --kg-card: #ffffff; --kg-text: #1c2433; --kg-text-2: #535d6e;
  --kg-rule: #c7ccd6; --kg-line: #1c2433; --kg-action: #6c1a5a; --kg-on-action: #ffffff;
  --kg-status-bad: #b42318;
  --kg-font: "IBM Plex Sans", Arial, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --kg-page: #10151f; --kg-card: #171e2b; --kg-text: #e6e8ee; --kg-text-2: #a3acbc;
    --kg-rule: #2a3446; --kg-line: #5e6a80; --kg-action: #da8bd0; --kg-on-action: #1c1222;
    --kg-status-bad: #ff8a7e;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--kg-page); color: var(--kg-text); font: 16px/1.5 var(--kg-font); }
main.card { max-width: 32rem; margin: 4rem auto; padding: 2rem; background: var(--kg-card);
  border: 1px solid var(--kg-rule); }
@media (max-width: 36rem) { main.card { margin: 1rem; padding: 1.25rem; } }
.brand { margin: 0 0 1rem; font-weight: 600; letter-spacing: .02em; color: var(--kg-text-2); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
p { margin: 0 0 1rem; }
label { display: block; margin: 0 0 .25rem; font-weight: 500; }
input[type=text], input[type=email], select { width: 100%; padding: .5rem .625rem; margin: 0 0 1rem;
  font: inherit; color: inherit; background: var(--kg-card); border: 1px solid var(--kg-line); }
fieldset { border: 1px solid var(--kg-rule); margin: 0 0 1rem; padding: 1rem; }
legend { padding: 0 .25rem; font-weight: 600; }
.check { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1rem; font-weight: 400; }
button { padding: .625rem 1rem; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--kg-on-action); background: var(--kg-action); border: 1px solid var(--kg-action); }
.muted { color: var(--kg-text-2); font-size: .875rem; }
.error { color: var(--kg-status-bad); }
a { color: var(--kg-action); }