@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

:root{font-family:"DM Sans",sans-serif;color:#1f342d;background:#f5f2e9;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ee8f66;outline-offset:3px}
.app-shell{min-height:100vh}
.site-header{height:82px;display:flex;align-items:center;gap:22px;padding:0 38px;background:#f5f2e9;border-bottom:1px solid #dcded3}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:#193b32;font-family:Outfit,sans-serif;font-size:27px;font-weight:800;letter-spacing:-1.6px}
.brand-mark{width:37px;height:37px;color:#f26b43;display:inline-flex}
.brand-mark svg{width:100%}
.brand-dot{color:#f26b43}
.header-note{color:#768078;font-size:13px;margin-left:11px}
.prototype-tag{margin-left:auto;color:#5e6e62;border:1px solid #d1d9cf;background:#edf2e7;padding:8px 12px;border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.main-grid{display:grid;grid-template-columns:minmax(390px,490px) minmax(0,1fr);min-height:calc(100vh - 82px)}
.planner{padding:36px 48px 24px;overflow-y:auto;background:#f5f2e9;z-index:2;box-shadow:8px 0 28px rgba(25,51,40,.04)}
.eyebrow{display:flex;align-items:center;gap:10px;color:#667c68;font-weight:800;font-size:10px;letter-spacing:.18em}
.eyebrow-line{height:1px;width:25px;background:#e57953}
h1{font-family:Outfit,sans-serif;font-size:clamp(39px,3.35vw,55px);line-height:1.04;letter-spacing:-.055em;margin:17px 0 14px;font-weight:700}
h1 em{font-style:normal;color:#f0714b}
.intro{font-size:14px;line-height:1.6;color:#6e7b72;margin:0 0 26px;max-width:340px}
.form-section{margin:0 0 20px;padding:0;border:0;min-width:0}
.section-heading{display:flex;align-items:center;gap:11px;font-family:Outfit,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.025em;margin:0 0 11px;padding:0}
.step{font-family:"DM Sans",sans-serif;display:inline-grid;place-items:center;width:24px;height:24px;border:1px solid #d3d8ce;color:#7c8b7b;border-radius:50%;font-size:10px;font-weight:700;letter-spacing:0;flex:none}
.start-box,.distance-box{height:48px;border:1px solid #d7dcd1;background:#fffefa;border-radius:12px;display:flex;align-items:center;padding:0 13px;gap:10px;transition:border-color .2s,box-shadow .2s}
.start-box:focus-within,.distance-box:focus-within{border-color:#6b9f7a;box-shadow:0 0 0 3px #cfe2d2}
.start-pin{width:14px;height:14px;flex:none;border:4px solid #f17550;border-radius:50%;box-shadow:0 0 0 3px #fbe6dc}
.start-box input,.distance-box input{border:0;outline:0;min-width:0;width:100%;background:transparent;color:#254539;font-size:13px;font-weight:600}
.start-box input::placeholder,.distance-box input::placeholder{color:#98a39a;font-weight:400}
.icon-button{border:0;background:#eef3ec;color:#356249;border-radius:8px;width:32px;height:32px;display:grid;place-items:center;flex:none}
.icon-button:hover{background:#dceadd}
.icon-button svg{width:17px;height:17px}
.field-hint{font-size:11px;color:#8a968c;margin:6px 2px 0}
.distance-box{width:100%;max-width:192px}
.distance-box input{font-family:Outfit,sans-serif;font-size:20px}
.distance-box span{font-family:Outfit,sans-serif;font-weight:700;color:#839185}
.direction-wrap{display:flex;align-items:center;gap:28px}
.compass{width:138px;height:138px;flex:none;position:relative;border:1px solid #d9dfd3;border-radius:50%;background:radial-gradient(circle at center,#fffefa 0 31%,transparent 32%),conic-gradient(from 0deg,#f7f9f3,#eff4eb,#f7f9f3);box-shadow:inset 0 0 0 8px #f5f2e9}
.compass-choice{position:absolute;z-index:1;border:0;background:transparent;color:#89988c;font-size:10px;font-weight:700;width:27px;height:27px;display:grid;place-items:center;border-radius:50%;padding:0}
.compass-choice:hover{color:#285b43;background:#e8eee4}
.compass-choice.selected{color:#fff;background:#ef714c;box-shadow:0 2px 8px rgba(223,93,54,.25)}
.compass-choice[data-bearing="0"]{top:3px;left:55px}
.compass-choice[data-bearing="45"]{top:16px;right:18px}
.compass-choice[data-bearing="90"]{top:55px;right:3px}
.compass-choice[data-bearing="135"]{bottom:16px;right:18px}
.compass-choice[data-bearing="180"]{bottom:3px;left:55px}
.compass-choice[data-bearing="225"]{bottom:16px;left:18px}
.compass-choice[data-bearing="270"]{top:55px;left:3px}
.compass-choice[data-bearing="315"]{top:16px;left:18px}
.compass-center{position:absolute;inset:0;display:grid;place-items:center;color:#9cad98;font-size:32px;pointer-events:none}
.direction-copy{display:flex;flex-direction:column;gap:6px;max-width:155px}
.direction-copy strong{font-family:Outfit,sans-serif;font-size:18px}
.direction-copy span{font-size:12px;color:#8b978d;line-height:1.45}
.elevation-section{margin-top:4px}
.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;background:#e9eee4;border-radius:11px}
.segmented button{border:0;background:transparent;border-radius:8px;height:35px;color:#687a6e;font-size:12px;font-weight:700}
.segmented button:hover{color:#254c38}
.segmented button.selected{color:#2c6547;background:#fffefa;box-shadow:0 2px 7px rgba(31,55,39,.09)}
.primary-button{display:flex;align-items:center;justify-content:space-between;width:100%;height:52px;border:0;border-radius:11px;background:#214e38;color:white;padding:0 19px;font-family:Outfit,sans-serif;font-size:16px;font-weight:700;box-shadow:0 7px 16px rgba(36,79,58,.16)}
.primary-button:hover:not(:disabled){background:#163f2e;transform:translateY(-1px)}
.primary-button:disabled{opacity:.65;cursor:wait}
.primary-button span:last-child{font-size:22px;font-weight:400}
.form-status{min-height:18px;margin:8px 0 0;font-size:12px;color:#356249;line-height:1.4}
.form-status.error{color:#b94833}
.planner-footer{border-top:1px solid #e1e3d9;padding-top:14px;margin:12px 0 0;font-size:11px;color:#97a398}
.planner-footer span{color:#eb875d;margin-left:3px}
.map-panel{position:relative;min-height:620px;background:#e5ebdc}
#map{position:absolute;inset:0;z-index:0}
.leaflet-container{font-family:"DM Sans",sans-serif;background:#e8ece2}
.leaflet-control-zoom{border:0!important;box-shadow:0 4px 18px rgba(28,50,39,.15)!important}
.leaflet-control-zoom a{color:#28513b!important;border:0!important}
.leaflet-control-attribution{font-size:10px!important}
.map-instruction{position:absolute;top:24px;left:24px;z-index:500;display:flex;align-items:center;gap:9px;background:#fffefa;padding:12px 15px;border-radius:10px;box-shadow:0 7px 25px rgba(27,53,40,.13);color:#31523f;font-size:12px;font-weight:700;pointer-events:none;max-width:calc(100% - 48px)}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#ed7951;box-shadow:0 0 0 4px #fce9df;flex:none}
.map-attribution-note{display:none}
.map-marker{width:19px;height:19px;background:#ef714c;border:4px solid #fff;border-radius:50%;box-shadow:0 2px 10px rgba(0,0,0,.22)}
.current-marker{width:16px;height:16px;background:#3e7db8;border:3px solid white;border-radius:50%;box-shadow:0 0 0 6px #3e7db844}
.result-panel{position:absolute;z-index:500;right:24px;bottom:38px;width:min(385px,calc(100% - 48px));background:#fffefa;border-radius:18px;padding:23px 24px 20px;box-shadow:0 12px 44px rgba(28,53,41,.22)}
.result-panel[hidden]{display:none}
.result-top{display:flex;align-items:center;justify-content:space-between}
.result-kicker{font-size:10px;letter-spacing:.16em;color:#7b9a82;font-weight:800}
.close-button{border:0;background:transparent;font-size:25px;line-height:1;color:#9daaa0;padding:0 2px}
.close-button:hover{color:#214e38}
.result-panel h2{font-family:Outfit,sans-serif;font-size:23px;letter-spacing:-.04em;margin:12px 0 19px}
.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.result-stats div{display:flex;flex-direction:column;gap:5px;border-right:1px solid #e6e9e0}
.result-stats div:last-child{border:0}
.result-stats span{font-size:10px;color:#8e9a8e}
.result-stats strong{font-family:Outfit,sans-serif;font-size:21px;color:#234c38}
.profile-wrap{margin:19px 0 0;border-top:1px solid #e9ece5;padding-top:13px}
.profile-label{display:flex;justify-content:space-between;color:#7f8f80;font-size:10px;font-weight:700}
#elevation-profile{display:block;width:100%;height:70px;margin-top:6px}
.result-actions{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:18px}
.secondary-button{border:1px solid #d3dfd3;background:#eff4ed;color:#28573d;border-radius:8px;padding:10px 11px;font-size:11px;font-weight:700}
.secondary-button:hover{background:#e1ecdf}
.secondary-button span{margin-left:7px;font-size:16px}
.text-button{border:0;background:transparent;color:#6b8d6f;font-size:11px;font-weight:700;padding:10px 0}
.text-button:hover{text-decoration:underline}
@media(max-width:900px){.main-grid{grid-template-columns:minmax(340px,43%) 1fr}.planner{padding:31px 30px}.direction-wrap{gap:12px}.direction-copy{max-width:110px}}
@media(max-width:700px){.site-header{height:68px;padding:0 18px}.brand{font-size:23px}.brand-mark{width:31px;height:31px}.header-note{display:none}.prototype-tag{font-size:9px;padding:7px 9px}.main-grid{display:flex;flex-direction:column}.planner{padding:27px 20px 20px;overflow:visible}.planner h1{font-size:42px}.intro{margin-bottom:22px}.map-panel{min-height:520px;height:70vh}.map-instruction{top:15px;left:15px;max-width:calc(100% - 30px)}.result-panel{right:12px;left:12px;bottom:28px;width:auto;padding:19px}.direction-copy{max-width:170px}.compass{width:130px;height:130px}.compass-choice[data-bearing="0"],.compass-choice[data-bearing="180"]{left:51px}.compass-choice[data-bearing="90"],.compass-choice[data-bearing="270"]{top:51px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.map-instruction[hidden]{display:none}