:root { color-scheme: light; font-family: system-ui, sans-serif; color: #172c26; background: #f6f4ee; }
body { margin: 0; }
main { max-width: 48rem; margin: auto; padding: 2rem 1.25rem; }
p, li { line-height: 1.8; }
section { border-top: 1px solid #ccc; padding-block: 1.5rem; }
a { color: #17624d; overflow-wrap: anywhere; }
button, input { font: inherit; padding: .65rem; border: 1px solid #687b73; border-radius: .4rem; background: white; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #c96541; outline-offset: 3px; }
label { display: block; margin-bottom: .6rem; }
.quantity { display: inline-flex; gap: .75rem; align-items: center; }
.quantity input { width: 5rem; text-align: center; }
.quantity__button.disabled { cursor: not-allowed; opacity: .5; }
[data-result="pass"] { color: #155d44; }
[data-result="fail"] { color: #a12828; }