:root {
  --id-bg: #fbfaf7; --id-fg: #1f2328; --id-muted: #57606a; --id-accent: #2f6fa8; --id-on-accent: #ffffff; --id-border: #d0d7de;
  --id-space: 1rem; --id-radius: 0.5rem; --id-font: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --id-bg: #161b22; --id-fg: #e6edf3; --id-muted: #9da7b3; --id-accent: #6ea8dc; --id-on-accent: #0d1117; --id-border: #30363d; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--id-bg); color: var(--id-fg); font: 1rem/1.5 var(--id-font); }
header.site, main { max-width: 36rem; margin: 0 auto; padding: 0 var(--id-space); }
header.site .brand { font-weight: 700; }
header.site a { color: inherit; text-decoration: none; }
a { color: var(--id-accent); }
section { border-top: 1px solid var(--id-border); margin-top: calc(var(--id-space) * 1.5); }
label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
input { width: 100%; padding: 0.5rem; font: inherit; color: inherit; background: transparent;
  border: 1px solid var(--id-border); border-radius: var(--id-radius); }
button { font: inherit; padding: 0.5rem 1rem; border-radius: var(--id-radius); border: 0;
  background: var(--id-accent); color: var(--id-on-accent); cursor: pointer; }
:focus-visible { outline: 3px solid var(--id-accent); outline-offset: 2px; }
.help, .optional { color: var(--id-muted); font-weight: 400; }
.status:empty { display: none; }
.status, .notice { padding: 0.5rem; border-left: 4px solid var(--id-accent); }