:root { color-scheme: light; --fg: #111; --muted: #555; --brand: #f5821f; --link: #a64d00; --err: #b00020; --line: #d6d6d6; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--fg); background: #fff; }
main { max-width: 28rem; margin: 3rem auto; padding: 2rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.logo { display: block; margin: 0 auto 1.5rem; }
h1 { font-size: 1.5rem; margin-top: 0; } h2 { font-size: 1.1rem; margin-top: 2rem; }
label { display: block; margin: 0 0 1rem; }
input:not([type=checkbox]) { display: block; width: 100%; padding: .55rem; margin-top: .25rem; font: inherit; border: 1px solid var(--line); border-radius: 6px; color: inherit; }
label.check { display: flex; gap: .5rem; align-items: baseline; }
button, .button { display: inline-block; font: inherit; padding: .55rem 1rem; border-radius: 6px; border: 1px solid var(--brand); background: var(--brand); color: #111; cursor: pointer; margin: 0 .5rem .5rem 0; text-decoration: none; }
button.secondary, .button.secondary, .alt button { background: #fff; color: var(--fg); border-color: var(--line); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }
.alt { margin: 1.5rem 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.alt form { margin: 0; }
.error { color: var(--err); } .notice { color: var(--link); } .warning { color: var(--muted); font-size: .9rem; }
a { color: var(--link); }
code { font-size: 1.05rem; word-break: break-all; }
ul.codes { columns: 2; list-style: none; padding: 0; }
@media (max-width: 30rem) { main { margin: 0; border: 0; border-radius: 0; } }