:root{font-family:'Trebuchet MS','Segoe UI',sans-serif;color:#252d3c;background:#f7f8fb;color-scheme:light}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-underline-offset:5px}header,main,footer{width:min(1040px,calc(100% - 48px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:30px 0;border-bottom:1px solid #d5dbe4}.brand{text-decoration:none;font-weight:700;font-size:25px}.brand>span{display:inline-grid;place-items:center;background:#ffd265;width:42px;height:42px;border-radius:12px;margin-right:9px;font-size:30px}.brand small{font-size:12px;font-weight:400;color:#596778;margin-left:9px}nav{display:flex;gap:22px;font-size:14px}nav a{text-decoration:none}.intro{padding:70px 0 45px;max-width:780px}.label{color:#655022;font-size:14px}h1{font-size:clamp(38px,5vw,62px);line-height:1.13;letter-spacing:-2px;margin:22px 0}p{font-size:17px;line-height:1.8;color:#526073}.intro>p:last-child{max-width:60ch}.workspace{display:grid;grid-template-columns:90px 1fr;border:1px solid #cbd3df;border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 20px 65px #273e5410}.ruler{background:repeating-linear-gradient(to bottom,transparent 0,transparent 23px,#ad7d1a 23px,#ad7d1a 24px) left/17px 100% no-repeat #ffdb87;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:25px 0;font-size:12px;color:#60470f}.converter{padding:36px 50px}.form-heading{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:30px}.form-heading h2{font-size:23px;letter-spacing:-.5px;margin:0}.form-heading span{font-size:12px;color:#655022;background:#fff2cc;padding:8px 12px;border-radius:20px}label{display:block;font-size:14px;margin-bottom:10px;color:#394658}input,select{display:block;width:100%;border:1px solid #a3b0c2;border-radius:8px;background:#fff;color:#263447;padding:14px;font:inherit;margin-top:10px}input{font-size:29px;letter-spacing:-1px}.units{display:grid;grid-template-columns:1fr 44px 1fr;gap:18px;align-items:center;margin-top:24px}.units label{margin:0}button{font:700 15px 'Trebuchet MS',sans-serif;cursor:pointer;border:1px solid #c3cbd8}#swap{margin-top:28px;width:44px;height:44px;border-radius:50%;background:#f4f6f9;color:#374355;font-size:24px}.convert{width:100%;border:0;border-radius:8px;padding:17px;background:#243e63;color:white;margin-top:28px}.convert:hover{background:#355988}.convert:disabled{opacity:.6}.answer{border-top:1px solid #dbe1e9;margin-top:30px;padding-top:25px}.answer>span{font-size:12px;color:#596778}.answer strong{display:block;margin-top:10px;font-size:32px;letter-spacing:-1px;overflow-wrap:anywhere}.answer p{font-size:14px;margin:10px 0 0}.story{padding:65px 0;display:grid;grid-template-columns:1fr 1fr;gap:70px}.story h2{font-size:32px;line-height:1.25;letter-spacing:-1px}.story p{font-size:16px;margin-top:0}.story a{font-size:14px;color:#294b78}footer{border-top:1px solid #d5dbe4;display:flex;justify-content:space-between;gap:20px;padding:25px 0 35px;font-size:12px;color:#526073}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #2863c5;outline-offset:4px}@media(max-width:650px){header,main,footer{width:calc(100% - 32px)}header{align-items:flex-start;flex-direction:column;gap:22px}.intro{padding-top:35px}h1{font-size:40px}.workspace{grid-template-columns:30px 1fr}.ruler{font-size:10px;background-size:7px 100%}.converter{padding:25px 18px}.form-heading{align-items:flex-start;flex-direction:column}.form-heading h2{font-size:21px}.units{gap:8px;grid-template-columns:1fr 32px 1fr}select{font-size:13px;padding:12px 6px}#swap{width:32px;height:32px;font-size:20px}.answer strong{font-size:27px}.story{grid-template-columns:1fr;gap:10px;padding:30px 0}footer{flex-wrap:wrap}.brand small{display:inline-block}}