:root{font-family:system-ui,sans-serif;color:#173d38;background:#f5f7f2;line-height:1.6}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:22px max(5vw,20px);border-bottom:1px solid #dce5dc;background:#fff}.brand{font-size:24px;font-weight:850;text-decoration:none;color:#145c4f}.brand span{font-size:13px;font-weight:500;margin-left:14px}.badge,.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:750}.badge{border:1px solid #cee2d6;border-radius:24px;padding:6px 12px}main{max-width:1180px;margin:auto;padding:36px 24px}.intro{max-width:810px;margin-bottom:34px}h1{font-size:clamp(36px,6vw,62px);line-height:1.07;letter-spacing:-.04em;margin:12px 0 22px}.intro>p:not(.eyebrow){font-size:18px;max-width:660px;color:#52665e}aside{font-size:14px;background:#e7eee0;border-left:3px solid #779552;padding:16px 20px;border-radius:0 12px 12px 0}label{display:block;font-weight:650;font-size:14px}input{margin:8px 0 16px;padding:14px 18px;border:1px solid #acbeb4;border-radius:12px;font:inherit;width:min(100%,560px);background:white}#filters{display:flex;gap:8px;flex-wrap:wrap}button{font:inherit;font-size:14px;padding:9px 18px;border:1px solid #becfc4;border-radius:24px;background:white;color:inherit;cursor:pointer}button[aria-pressed=true]{background:#175c4d;color:white;border-color:#175c4d}input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #bc8522;outline-offset:3px}#count{font-size:13px;color:#5b6f64}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:20px}.card{background:#fff;border:1px solid #dce5dc;border-radius:20px;padding:24px;box-shadow:0 6px 20px #183e3410}.tag{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#657e6f}h2{font-size:24px;line-height:1.2;margin:8px 0 16px}.ingredients{font-size:14px;color:#586d60}.components{padding:0;list-style:none}.components>li{border-top:1px solid #e8eee7;padding:12px 0;font-size:14px}.components small{display:block;color:#627668}.questions{font-size:13px;margin-top:8px;padding-left:20px;color:#52675d}a{color:#146a59;text-underline-offset:3px}.source,.photo{font-size:12px}.photo{border-top:1px solid #e8eee7;padding-top:12px}.photo p{color:#637567}.note{font-size:12px;background:#f2f5ee;padding:10px;border-radius:8px}footer{margin-top:40px;font-size:13px;color:#66796c;max-width:760px}@media(max-width:500px){main{padding:24px 16px}header{padding:16px}.brand span{display:none}.card{padding:20px}.grid{grid-template-columns:1fr}}