*{box-sizing:border-box}body{margin:0;background:#f9f8f2;color:#242e27;font:16px/1.65 system-ui}header,main,footer{max-width:1040px;margin:auto;padding:20px clamp(16px,4vw,40px)}header,footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid #b6beb4}footer{border-top:1px solid #b6beb4;border-bottom:none;margin-top:28px}nav{display:flex;gap:18px;flex-wrap:wrap}a{color:#23513a;text-underline-offset:.2em}h1{font-size:clamp(1.65rem,4vw,2.4rem);line-height:1.25}h2{font-size:1.15rem}p{max-width:68ch}.desk{display:grid;grid-template-columns:minmax(0,295px) minmax(0,1fr);gap:32px;margin:26px 0;background:#edf0e7;padding:clamp(14px,3vw,28px)}fieldset{padding:0;border:0;margin:0 0 20px}legend{font-weight:650}.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}label{display:block}input,select{display:block;width:100%;min-width:0;padding:10px;border:1px solid #6c786c;background:white;color:inherit;font:inherit;border-radius:3px}button{margin:18px 0 0;padding:10px 16px;border:0;border-radius:3px;background:#294b38;color:#fff;font:inherit}svg{display:block;width:100%;height:auto}#result{font-size:1.35rem;font-weight:650}.key,#offset{font-size:.92rem}a:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid #8d421f;outline-offset:3px}@media(max-width:690px){.desk{grid-template-columns:1fr;gap:12px}}