:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; font: 1rem/1.6 system-ui, sans-serif; color: #202d3a; background: #f4f6f8; }
main { max-width: 48rem; margin: 2rem auto; padding: clamp(1rem, 4vw, 2rem); border: 1px solid #526375; border-radius: .5rem; background: #fff; overflow-wrap: anywhere; }
h1 { font-size: 1.5rem; line-height: 1.3; }
a { color: #064b86; text-decoration: underline; }
button { max-width: 100%; white-space: normal; font: inherit; padding: .7rem 1.2rem; border: 2px solid #064b86; border-radius: .3rem; color: #fff; background: #064b86; cursor: pointer; }
button:disabled { opacity: .7; cursor: wait; }
:focus-visible { outline: 3px solid #9c4100; outline-offset: 4px; }
.skip { position: absolute; left: 1rem; top: -10rem; background: #fff; padding: .5rem; }
.skip:focus { top: .5rem; }
.error { border-left: 4px solid #9b2424; padding: .5rem 1rem; }
altcha-widget { display: block; max-width: 100%; --altcha-max-width: 100%; }
@media (prefers-color-scheme: dark) {
 body { color: #f1f4f8; background: #111a24; }
 main { background: #1d2936; border-color: #bcc9d8; }
 a { color: #9bcaff; }
 :focus-visible { outline-color: #ffca72; }
 .skip { background: #1d2936; }
 altcha-widget { --altcha-color-base: #1d2936; --altcha-color-text: #f1f4f8; --altcha-color-border: #bcc9d8; }
}