:root { color-scheme: light; font-family: system-ui, sans-serif; color: #303030; background: #f5f5f3; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem; padding:1rem 2rem; background:white; border-bottom:1px solid #c9c9c9; }
.brand { display:flex; align-items:center; gap:.75rem; margin-right:auto; color:#5b5b5b; font-size:1.5rem; font-weight:700; text-decoration:none; }
main { max-width:60rem; margin:2rem auto; padding:2rem; background:white; border:1px solid #ddd; border-radius:.4rem; }
h1 { font-size:1.75rem; }
a { color:#344d71; }
label { display:block; margin-top:1rem; font-weight:600; }
input { display:block; width:min(100%,30rem); padding:.65rem; border:1px solid #757575; border-radius:.2rem; font:inherit; margin:.4rem 0; }
button, .button { display:inline-block; margin:.75rem 0; padding:.65rem 1rem; background:#5b5b5b; color:white; border:0; border-radius:.2rem; font:inherit; cursor:pointer; }
header form { margin:0; }
:focus-visible { outline:3px solid #285ea8; outline-offset:3px; }
.validation-summary-errors, .field-validation-error { color:#9b2020; }
table { border-collapse:collapse; width:100%; margin:1.5rem 0; }
th, td { padding:.8rem; text-align:left; border-bottom:1px solid #ddd; }
dt { font-weight:600; margin-top:1rem; } dd { margin:.3rem 0; overflow-wrap:anywhere; }
@media(max-width:40rem) { main { margin:1rem; padding:1rem; } header { padding:1rem; } }

select { padding:.6rem; font:inherit; margin:.5rem 0; }
.demo { padding:1rem; border-left:4px solid #856300; background:#fff4cf; font-weight:600; }