:root { color-scheme: light dark; --tekst: #1d1d1f; --zacht: #5f6368; --achter: #fafaf8; --accent: #1f5f99; }
@media (prefers-color-scheme: dark) { :root { --tekst: #ececec; --zacht: #a0a4a8; --achter: #17181a; --accent: #7fb3e6; } }
body { margin: 0; background: var(--achter); color: var(--tekst); font: 17px/1.55 system-ui, sans-serif; }
main { max-width: 34rem; margin: 0 auto; padding: 3rem 1rem; }
.merk { color: var(--zacht); font-size: .9rem; margin: 0 0 .25rem; }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 1.25rem; }
code { overflow-wrap: anywhere; font-size: .95rem; }
button { font: inherit; padding: .7rem 1.2rem; border: 0; border-radius: .5rem; background: var(--accent); color: #fff; cursor: pointer; }
@media (prefers-color-scheme: dark) { button { color: #0d1b2a; } }
button:disabled { opacity: .6; cursor: wait; }
.melding { min-height: 1.5em; }
.klein { color: var(--zacht); font-size: .9rem; }