:root{--ink:#17201b;--muted:#68716b;--paper:#f3f0e7;--card:#fffdfa;--line:#d8d4c9;--green:#274e3a;--lime:#c9e76c;--orange:#e66d3b;--red:#9f3f35;--amber:#f2b84b}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 Inter,system-ui,sans-serif}main{max-width:1160px;margin:auto;padding:0 28px 70px}header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}a{color:inherit}.brand{text-decoration:none;font-weight:850}.brand span{color:var(--muted);font-weight:500}button{font:inherit;cursor:pointer}header button{border:0;border-bottom:1px solid var(--ink);background:none;padding:2px}.intro{max-width:920px;padding:60px 0 42px}.eyebrow{margin:0 0 8px;color:var(--green);font-size:11px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}h1{margin:0 0 22px;font:700 clamp(45px,7vw,78px)/.98 Georgia,serif;letter-spacing:-.045em}h1 em{color:var(--orange);font-weight:500}.intro>p:last-child{max-width:790px;color:var(--muted);font-size:18px}.workspace{display:grid;grid-template-columns:1.1fr .9fr;border:1px solid var(--line);background:var(--card)}form,.result{padding:clamp(26px,4vw,48px)}form{display:grid;gap:17px}.form-heading{padding-bottom:18px;border-bottom:1px solid var(--line)}h2{margin:0;font:700 31px Georgia,serif}label{display:block;color:var(--muted);font-size:11px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.optional{color:var(--orange);font-size:9px}input,select{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);font:600 15px inherit}small{display:block;margin-top:5px;font-weight:500;letter-spacing:0;text-transform:none}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.optional-group{padding:15px;border:1px dashed var(--line);background:#f8f6ef}.input-pair{display:grid;grid-template-columns:1fr 120px}.input-pair input{border-radius:4px 0 0 4px}.input-pair select{border-left:0;border-radius:0 4px 4px 0}.primary{border:0;border-radius:4px;background:var(--green);color:white;padding:13px 16px;font-weight:850}.primary:disabled{opacity:.6;cursor:wait}.status{min-height:24px;margin:0;color:var(--red);font-size:13px}.result{background:var(--green);color:white}.result .eyebrow{color:var(--lime)}.result h2{font-size:clamp(32px,5vw,55px)}#result-summary{color:#d7e2db}.distance{display:flex;align-items:end;gap:10px;margin:34px 0}.distance strong{font:700 clamp(48px,7vw,76px)/.8 Georgia,serif;color:var(--lime)}.distance span{color:#bdd0c2}.result dl{margin:0}.result dl div{padding:13px 0;border-top:1px solid #ffffff25}.result dt{color:#bdd0c2;font-size:11px;text-transform:uppercase;letter-spacing:.09em}.result dd{margin:4px 0 0}.straight-line{margin-top:25px;color:#bdd0c2;font-size:12px}.result.outside .distance strong{color:var(--amber)}.result.excluded .distance strong{color:#ff9d7d}.explain{display:grid;grid-template-columns:repeat(3,1fr);margin-top:32px;border-top:1px solid var(--line);border-left:1px solid var(--line)}.explain article{padding:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.explain span{color:var(--orange);font-weight:900}.explain h3{margin:12px 0 7px;font:700 21px Georgia,serif}.explain p{margin:0;color:var(--muted);font-size:14px}details{margin-top:32px;border:1px solid var(--line);background:var(--card)}summary{padding:18px 20px;cursor:pointer;font-weight:850}pre{margin:0;padding:22px;overflow:auto;background:#202722;color:#d9eccf;font-size:12px}footer{display:flex;justify-content:space-between;gap:24px;padding:35px 0;color:var(--muted);font-size:12px}footer p{margin:0}footer>a{color:var(--ink);font-weight:850}@media(max-width:780px){main{padding:0 14px 45px}.brand span{display:none}.intro{padding:42px 0 30px}.workspace,.explain{grid-template-columns:1fr}.field-grid{grid-template-columns:1fr}.result{min-height:560px}footer{display:grid}header button{max-width:150px;text-align:right}}

:root{--muted:#626b65;--orange-text:#b54820}.brand{display:inline-flex;align-items:center;min-height:44px}header button{min-height:44px;padding:10px 0}h1 em,.optional,.explain span{color:var(--orange-text)}