* { box-sizing: border-box }
    body { margin: 0; background: #f5f4ef; color: #222821; font: 17px/1.55 system-ui,sans-serif }
    header, main { max-width: 960px; margin: auto; padding: 22px clamp(18px,5vw,64px) }
    header { border-bottom: 1px solid #c0c6ba; color: #425343; font-weight: 650 }
    h1 { max-width: 18ch; font: 600 clamp(40px,6vw,68px)/1.03 Georgia,serif; letter-spacing: -.035em; margin: .3em 0 }
    h2 { font-size: 1.45rem; line-height: 1.2; margin: 1.6em 0 .45em }
    p { max-width: 67ch; margin: .7em 0 }
    a { color: #27583a; text-underline-offset: 4px }
    nav { display:flex; gap:10px 22px; flex-wrap:wrap; margin:18px 0 28px }
    .pair { display:grid; grid-template-columns: 1fr 1fr; gap:16px; margin:16px 0 }
    fieldset { min-width:0; border:1px solid #bdc7b8; padding:12px 18px 18px; border-radius:8px }
    legend { font-weight:700 }
    label { display:block; margin-top:8px; color:#475247 }
    input { width:100%; font:inherit; background:#fff; border:1px solid #828e7f; border-radius:4px; padding:7px 10px; color:inherit }
    output { display:block; border-left:4px solid #4f714f; padding:10px 15px; background:#e4ebdf }
    @media(max-width:550px) { .pair{grid-template-columns:1fr} }