:root {
  color-scheme: light;
  --ink: #17211d;
  --muted: #66716b;
  --paper: #f6f4ec;
  --card: #fffef9;
  --line: #dddacf;
  --purple: #0667d8;
  --route: #ff4500;
}

* { box-sizing: border-box; }
.svg-symbols { height: 0; position: absolute; width: 0; }

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at top right, #eadcf1 0, transparent 34rem),
    var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

main { padding: 24px 0 72px; }
.panel { background: color-mix(in srgb, var(--card) 94%, transparent); border-block: 1px solid var(--line); box-shadow: 0 18px 50px rgb(36 31 21 / 8%); overflow: hidden; }
form { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(220px, 300px) repeat(2, minmax(220px, 1fr)); margin: 0 auto; max-width: 1180px; padding: 22px 24px; }
label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.select-control { position: relative; }
.select-control::after { border: solid var(--ink); border-width: 0 2px 2px 0; content: ""; height: 7px; pointer-events: none; position: absolute; right: 17px; top: 17px; transform: rotate(45deg); width: 7px; }
select { appearance: none; background: white; border: 1px solid #cbc8bd; border-radius: 10px; color: var(--ink); font: inherit; height: 48px; padding: 0 44px 0 14px; width: 100%; }
select:focus-visible, input:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
input[type="range"] { appearance: none; background: transparent; cursor: pointer; display: block; height: 20px; margin: 0; touch-action: none; width: 100%; }
input[type="range"]::-webkit-slider-runnable-track { background: #b9c2bd; border-radius: 3px; height: 6px; }
input[type="range"]::-webkit-slider-thumb { appearance: none; background: var(--purple); border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px var(--purple); height: 20px; margin-top: -7px; width: 20px; }
input[type="range"]::-moz-range-track { background: #b9c2bd; border-radius: 3px; height: 6px; }
input[type="range"]::-moz-range-progress { background: var(--purple); border-radius: 3px; height: 6px; }
input[type="range"]::-moz-range-thumb { background: var(--purple); border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px var(--purple); height: 20px; width: 20px; }
.range-scale { color: var(--muted); margin-top: 2px; padding-inline: 10px; }
.range-ticks { display: flex; justify-content: space-between; }
.range-ticks i { border-left: 1px solid #969f9a; height: 5px; }
.range-tick-labels { font-size: 11px; font-weight: 600; height: 13px; margin-top: 2px; position: relative; }
.range-tick-labels span { position: absolute; transform: translateX(-50%); }
.range-tick-labels span:nth-child(1) { left: 0; }
.range-tick-labels span:nth-child(2) { left: 50%; }
.range-tick-labels span:nth-child(3) { left: 100%; }
.range-tick-labels-four span:nth-child(2) { left: 33.333%; }
.range-tick-labels-four span:nth-child(3) { left: 66.667%; }
.range-tick-labels-four span:nth-child(4) { left: 100%; }
.range-tick-labels-five span:nth-child(2) { left: 25%; }
.range-tick-labels-five span:nth-child(3) { left: 50%; }
.range-tick-labels-five span:nth-child(4) { left: 75%; }
.range-tick-labels-five span:nth-child(5) { left: 100%; }
.message { background: #fff1ef; border-top: 1px solid #efc3bd; color: #952c1f; margin: 0; padding: 16px 22px; }
.result-head { align-items: center; border-top: 1px solid var(--line); display: flex; gap: 28px; justify-content: space-between; margin: 0 auto; max-width: 1180px; padding: 10px 24px; }
.stat { display: inline-flex; flex-direction: column; margin-right: 30px; }
.stat strong { font-size: 24px; letter-spacing: -.035em; }
.stat span { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; }
#map-shell { background: #d7eef5; position: relative; }
#map { height: min(80vh, 900px); min-height: 440px; width: 100%; }
.map-legend { align-items: center; background: rgb(255 255 255 / 92%); border: 1px solid rgb(0 0 0 / 16%); border-radius: 6px; bottom: 12px; display: flex; flex-wrap: wrap; font-size: 12px; font-weight: 650; gap: 14px; left: 12px; padding: 8px 10px; position: absolute; z-index: 500; }
.map-legend span { align-items: center; display: inline-flex; gap: 6px; }
.legend-route { border-bottom: 4px solid var(--route); display: inline-block; width: 25px; }
.legend-visit { align-items: center; background: var(--route); border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 1px var(--route); color: white; display: inline-flex; font-size: 10px; font-style: normal; font-weight: 800; height: 22px; justify-content: center; width: 22px; }
.legend-start { color: #c93535; height: 30px; width: 30px; }
.control-label { background: var(--route); border: 2px solid white; border-radius: 20px; box-shadow: 0 0 0 1px var(--route); color: white; font-size: 12px; font-weight: 700; height: 26px !important; line-height: 22px; margin-left: -13px !important; margin-top: -13px !important; text-align: center; width: 26px !important; }
.control-label.start { background: transparent; border: 0; box-shadow: none; color: #c93535; height: 44px !important; line-height: normal; margin-left: -22px !important; margin-top: -22px !important; width: 44px !important; }
.control-label.start svg { display: block; height: 44px; width: 44px; }
.leaflet-popup-content { font-family: inherit; }

@media (max-width: 760px) {
  main { padding: 16px 0 48px; }
  form { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  form > div:first-child { grid-column: 1 / -1; }
  .result-head { align-items: start; flex-direction: column; gap: 14px; }
  #map { height: 70vh; min-height: 360px; }
  .map-legend { gap: 9px; }
}

@media (max-width: 480px) {
  form { grid-template-columns: 1fr; }
  form > div:first-child { grid-column: auto; }
}