:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 60rem; padding: 1rem; font: 16px/1.5 system-ui, sans-serif; color: #1b1b1b; background: #f7f7f2; }
header { border-bottom: 2px solid #1b5e20; margin-bottom: 1.5rem; }
h1 { margin: 0; font-size: 1.6rem; }
h1 a { color: #1b5e20; text-decoration: none; }
nav { display: flex; gap: 1rem; flex-wrap: wrap; padding-bottom: .75rem; }
nav a { color: #1b5e20; }
main > h2 { margin-top: 0; }
.cards { display: flex; gap: 1rem; flex-wrap: wrap; }
.cards p { flex: 1 1 10rem; margin: 0; padding: 1rem; background: #fff; border: 1px solid #d7d7cc; }
table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; background: #fff; }
th, td { padding: .4rem .6rem; border-bottom: 1px solid #e2e2d8; text-align: left; vertical-align: top; }
th { background: #eeeee4; }
form { margin-bottom: 1.5rem; }
label { display: block; margin-bottom: .6rem; }
input, select, button { font: inherit; padding: .35rem .5rem; }
button { cursor: pointer; }
td form { display: inline; margin: 0; }
.error { color: #a00000; font-weight: bold; }
.notice { padding: .5rem; background: #e8f5e9; }
.goal .bar { height: .8rem; background: #d7d7cc; }
.goal .bar span { display: block; height: 100%; background: #1b5e20; }
small { color: #555; }
.demo-banner { padding: .5rem .75rem; margin-bottom: 1rem; background: #fff3cd; border: 1px solid #e0c36a; }
.demo-banner a { color: #1b5e20; }
.conversation { margin-bottom: 1.5rem; }