:root { color-scheme: light; font-family: system-ui, sans-serif; background: #f5f5f0; color: #20231f; }
body { margin: 0; }
main { width: min(100% - 2rem, 58rem); margin: 0 auto; padding: 1rem 0 3rem; }
header, section { background: #fff; border: 1px solid #d9ddd4; border-radius: .75rem; padding: 1rem; margin: 1rem 0; }
h1, h2 { margin-top: 0; }
label { display: block; margin: .75rem 0 .25rem; font-weight: 600; }
input, select, textarea, button { box-sizing: border-box; width: 100%; min-height: 2.75rem; border: 1px solid #aab2a5; border-radius: .5rem; padding: .55rem .7rem; font: inherit; }
textarea { min-height: 5rem; resize: vertical; }
button { background: #1f5e48; color: #fff; cursor: pointer; margin-top: .75rem; }
button.secondary { background: #fff; color: #1f5e48; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f2f4ef; padding: .75rem; border-radius: .5rem; }
.hint { color: #59645b; }
@media (min-width: 42rem) { main { padding-top: 2rem; } section.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }