:root { color-scheme: light dark; font: 100%/1.55 system-ui, sans-serif; }
body { margin: 0; padding: 2rem 1rem; background: #f1f4f7; color: #172b3a; }
main { max-width: 32rem; margin: 3vh auto; padding: 2rem; background: #fff; border: 1px solid #cdd8df; border-radius: .75rem; }
.brand { color: #345d78; font-weight: 700; letter-spacing: .04em; }
h1 { font-size: 1.75rem; line-height: 1.2; }
label { display: block; margin: 1.25rem 0; font-weight: 600; }
input, select, button { box-sizing: border-box; width: 100%; padding: .8rem; border: 1px solid #8095a3; border-radius: .3rem; font: inherit; }
input, select { display: block; margin-top: .4rem; background: #fff; color: #172b3a; }
button { background: #174c68; color: white; cursor: pointer; font-weight: 700; }
a { color: #174c68; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid #d38a19; outline-offset: 3px; }
.hint { font-size: .9rem; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; border: 1px solid #cdd8df; }
@media (prefers-color-scheme: dark) {
  body { background: #101c25; color: #e6eef3; }
  main, input, select { background: #172b3a; color: #e6eef3; }
  a, .brand { color: #9dcde8; }
}