html{font-size:100%}*{box-sizing:border-box}body{margin:0;background:#f8f9f4;color:#173e31;font-family:Arial,Helvetica,sans-serif}main{max-width:84rem;margin:auto;padding:clamp(1rem,3vw,3rem)}h1{font-size:2rem;font-weight:500}p{margin:0 0 1.2em}.intro{max-width:45rem;line-height:1.6}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}.sample{max-inline-size:36rem;inline-size:100%;border-top:1px solid #6b8a68;padding-top:1rem;font-size:1.125rem;line-height:1.65}.sample h2{font:600 .95rem Arial,Helvetica,sans-serif;margin:0 0 1rem}.sans{font-family:Arial,Helvetica,sans-serif}.serif{font-family:Georgia,"Times New Roman",serif}label{display:block;margin-bottom:.4rem}input{font:inherit;color:inherit;max-width:100%;width:100%;padding:.6rem;border:1px solid #6b8a68;background:#fff;border-radius:3px}input:focus{outline:3px solid #173e31;outline-offset:2px}.codes{overflow-wrap:anywhere}.note{font: .9rem/1.5 Arial,Helvetica,sans-serif;margin-top:1rem}.figures{font-variant-numeric:tabular-nums}@media(max-width:54rem){.grid{grid-template-columns:1fr}}