* { box-sizing: border-box; }
:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #253a32; background: #f5f6f2; font-synthesis: none; line-height: 1.5; }
body { margin: 0; background: radial-gradient(ellipse at 50% 8%, #e6eee2aa, transparent 58%); min-height: 100vh; }
[hidden] { display: none !important; }
button, input { font: inherit; }
a { color: inherit; text-underline-offset: 3px; }
.page { max-width: 640px; padding: 38px 24px 28px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 7px; width: fit-content; margin: 0 auto 43px; font-size: 24px; font-weight: 750; letter-spacing: -1px; }
.brand-icon { width: 31px; height: 31px; color: #245b47; }
.brand-dot { color: #8aa96b; }
.intro { text-align: center; margin-bottom: 29px; }
.eyebrow { color: #63846d; font-size: 10px; letter-spacing: 2px; font-weight: 750; margin: 0 0 15px; }
h1 { font-size: clamp(32px, 6vw, 43px); line-height: 1.15; letter-spacing: -1.8px; font-weight: 650; margin: 0 0 17px; }
h1 span { color: #6a8174; }
.description { font-size: 14px; color: #68766d; max-width: 340px; margin: 0 auto; }
.calculator { background: #fff; padding: 29px; border-radius: 19px; border: 1px solid #e3e8e0; box-shadow: 0 8px 35px #20372807, 0 2px 4px #20372803; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 25px; }
h2 { font-size: 18px; font-weight: 650; letter-spacing: -.4px; margin: 0; }
.transport { display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; border-radius: 6px; background: #eff3ed; color: #546b5b; font-size: 11px; white-space: nowrap; }
.transport svg { width: 17px; height: 17px; }
.address-fields { position: relative; display: grid; gap: 19px; }
.address-fields::before { content: ""; position: absolute; left: 5px; top: 29px; bottom: 43px; border-left: 2px dotted #c7d4c9; }
.field-row { display: flex; align-items: flex-start; gap: 15px; }
.point { flex: 0 0 12px; width: 12px; height: 12px; margin-top: 29px; z-index: 1; }
.origin-point { background: #fff; border: 3px solid #91aa86; border-radius: 50%; }
.destination-point { border-radius: 3px; background: #2e634d; }
.field { flex: 1; min-width: 0; }
label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 7px; color: #46584e; }
input, gmp-place-autocomplete { display: block; width: 100%; min-height: 49px; border-radius: 8px; border: 1px solid #dce3db; background: #fcfdfb; color: #253a32; font-size: 14px; color-scheme: light; }
input { padding: 12px 14px; }
input::placeholder { color: #8a958c; }
input:disabled { opacity: .7; }
gmp-place-autocomplete::part(input) { font-family: inherit; font-size: 14px; color: #253a32; }
input:focus-visible, gmp-place-autocomplete:focus-within { outline: 2px solid #8aa96b; outline-offset: 3px; }
.field-help { font-size: 11px; color: #788378; margin: 13px 0 22px 27px; }
.calculate { border: none; width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 18px; min-height: 51px; border-radius: 8px; background: #245b47; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.calculate:hover:enabled { background: #184835; }
.calculate:disabled { cursor: default; background: #6d8275; }
.calculate:focus-visible, a:focus-visible { outline: 3px solid #96af79; outline-offset: 4px; }
.calculate svg { width: 19px; height: 19px; }
.spinner { width: 17px; height: 17px; border: 2px solid #ffffff60; border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
.loading { padding-top: 16px; }
.loading p { margin: 0 0 9px; text-align: center; font-size: 12px; color: #607566; }
progress { display: block; width: 100%; height: 5px; border: none; border-radius: 9px; accent-color: #668b64; overflow: hidden; }
progress::-webkit-progress-bar { background: #eaf0e7; }
progress::-webkit-progress-value { background: #668b64; }
.notice, .error { padding: 12px 14px; margin: 15px 0 0; border-radius: 8px; font-size: 12px; line-height: 1.6; }
.notice { color: #736330; background: #faf5e7; }
.error { color: #9a3939; background: #fbefed; border: 1px solid #f1d7d2; }
.result { border-top: 1px solid #eaf0e7; margin-top: 23px; padding-top: 23px; }
.empty-result { display: flex; gap: 12px; align-items: center; justify-content: center; padding: 2px 0; }
.result-mark { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; background: #f2f5ef; font-size: 20px; color: #8b9d86; flex-shrink: 0; }
.empty-result p { margin: 0; font-size: 12px; color: #63705f; }
.empty-result p span { color: #87917f; font-size: 11px; }
#result-content { text-align: center; }
.result-label { font-size: 10px; font-weight: 700; letter-spacing: 1.7px; color: #6d826d; margin: 0 0 4px; }
.distance { font-size: 46px; line-height: 1.2; font-weight: 650; letter-spacing: -2px; margin: 0 0 5px; color: #245b47; }
.unit { font-size: 23px; letter-spacing: -1px; font-weight: 450; }
.duration { font-size: 14px; margin: 6px 0 13px; color: #536a59; }
.route-summary { font-size: 12px; color: #718070; overflow-wrap: anywhere; margin: 0; }
.estimate { font-size: 10px; color: #7f897b; margin: 12px 0; }
.route-warnings { font-size: 12px; color: #736330; }
.maps-link { display: inline-block; font-size: 12px; color: #35674e; }
.google-attribution { padding: 14px 10px 5px; }
.google-attribution img { display: block; height: 18px; width: auto; margin: 0 auto; }
footer { font-size: 10px; color: #7c897a; text-align: center; margin-top: 23px; line-height: 1.9; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 420px) { .page { padding: 25px 16px; } .brand { margin-bottom: 30px; } .calculator { padding: 22px 18px; } .field-row { gap: 10px; } .field-help { margin-left: 22px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }