* { box-sizing: border-box; }
:root {
  font-family: Geist, system-ui, sans-serif;
  color: #102a25;
  background: #f2f5f3;
}
body { margin: 0; }
main { max-width: 52rem; margin: 7vh auto; padding: 0 1.25rem 2rem; }
h1 { margin: 0 0 1rem; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.055em; }
h2 { margin: 0 0 .75rem; font-size: 1.25rem; }
p { max-width: 56ch; line-height: 1.6; overflow-wrap: anywhere; }
section { margin-top: 1rem; background: #fff; padding: 1rem; border: 1px solid #d0ddd7; border-radius: .75rem; }
label { display: block; font-weight: 600; margin: .75rem 0 .3rem; }
input, select, textarea { display: block; font: inherit; width: 100%; min-height: 2.75rem; padding: .55rem .75rem; border: 1px solid #829b91; border-radius: .45rem; background: #fff; color: inherit; }
textarea, pre { font: .9rem ui-monospace, monospace; }
button { margin-top: .65rem; padding: .7rem 1.05rem; min-height: 2.75rem; color: #fff; background: #19584a; border: 0; border-radius: .45rem; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #0c4437; }
button:disabled { opacity: .6; cursor: wait; }
:focus-visible { outline: 2px solid #087d67; outline-offset: 3px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #ebf2ee; padding: .75rem; border-radius: .4rem; }
details { border-top: 1px solid #d0ddd7; margin-top: .65rem; padding-top: .65rem; }
summary { cursor: pointer; font-weight: 600; }