.city-network{padding:64px 0;color:#eaf6ff;background:radial-gradient(ellipse at 70% 35%,#102c41 0,transparent 60%),#06111b;font-family:Arial,sans-serif}
.city-network *{box-sizing:border-box}
.city-network .city-network__heading{max-width:850px;margin:0 0 30px}
.city-network .zone-kicker{color:#83d6ff}
.city-network h2{font-family:inherit;color:#eff8ff;font-size:clamp(30px,4vw,54px);line-height:1.08;margin:12px 0 18px;letter-spacing:-.035em}
.city-network p{color:#b8ccdc;line-height:1.6;margin:0}
.city-network__heading>p:last-child{max-width:680px;font-size:18px}
.city-network__stage{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);border:1px solid #2d4f66;border-radius:24px;overflow:hidden;background:#08131f;box-shadow:0 25px 70px #0005}
.city-network__map{position:relative;min-width:0;align-self:center;isolation:isolate}
.city-network__map picture,.city-network__map img{display:block;width:100%;height:auto}
.city-network__map svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.city-network__dots circle{fill:#7ecfff;stroke:#c6eeff;stroke-width:1;opacity:.65}
.city-network__dots circle.is-active{fill:white;stroke:#57c7ff;stroke-width:5;opacity:1}
.city-network__route{fill:none;stroke:#9cddff;stroke-width:2;filter:drop-shadow(0 0 4px #23adff);stroke-dasharray:1;stroke-dashoffset:0}
.city-network.is-running .city-network__route.is-travelling{animation:cn-route var(--cn-duration,900ms) ease-out both}
.city-network__trails path{fill:none;stroke:#67c7ff;stroke-width:1.5;opacity:.55}
.city-network__labels path{fill:none;stroke:#90c4df;stroke-width:.7;opacity:.5}
.city-network__map .city-network__labels text{font-size:14px;stroke-width:4px}
.city-network__map .city-network__labels .is-active text{fill:#fff;font-weight:bold;stroke-width:5px}
.city-network__speed{display:block;grid-column:1/-1;margin-bottom:18px;padding:12px 14px;border:1px solid #365b73;border-radius:10px;background:#091c2be8;color:#c9eaff}
.city-network__speed>span{display:flex;justify-content:space-between;gap:12px;font-size:12px}
.city-network__speed output{color:#8fddff;font-weight:bold}
.city-network__speed input{display:block;width:100%;height:32px;padding:0;margin:3px 0;accent-color:#82d5ff;cursor:pointer}
.city-network__speed input:focus-visible{outline:2px solid white;outline-offset:3px}
.city-network__speed .city-network__speed-scale{font-size:10px;color:#a8c3d5}
@media(max-width:540px){.city-network__labels>g:not(.is-active){display:none}.city-network__map .city-network__labels text{font-size:25px}.city-network__map .city-network__labels .is-active text{font-size:25px}.city-network__labels .is-active text{text-anchor:middle}.city-network__labels .is-active{transform:translateY(-12px)}}
.city-network__origin{fill:#59c9ff33;stroke:#7fdaff;stroke-width:2}
.city-network__map text{fill:#e9f8ff;font-size:15px;font-family:Arial,sans-serif;paint-order:stroke;stroke:#071624;stroke-width:4px}
.city-network__map-label{position:absolute;top:20px;left:20px;max-width:45%;text-shadow:0 2px 8px #000}
.city-network__map-label>span{display:block;color:#b4d5e9;font-size:11px;line-height:1.4}
.city-network__map-label strong{display:block;font-size:clamp(22px,3vw,38px);font-weight:500;line-height:1.15;margin-top:8px}
.city-network__map-label strong span{display:block;font-size:12px;line-height:1.5;color:#b6dfff}
.city-network button{font:inherit;cursor:pointer}
.city-network__pause{position:absolute;bottom:14px;left:16px;border:1px solid #3b637b;border-radius:8px;padding:10px 12px;min-height:44px;background:#071824e8;color:#c6eaff;font-size:12px!important}
.city-network__map-note{position:absolute;bottom:12px;right:12px;font-size:10px;color:#b3c5d0}
.city-network__preview{padding:26px 24px;background:linear-gradient(135deg,#102434,#07131f);border-left:1px solid #274457;min-width:0;display:flex;flex-direction:column;justify-content:center}
.city-network__eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#8bd8ff;margin-bottom:18px}
.city-network__browser{border:1px solid #5688a5;border-radius:12px;overflow:hidden;background:#0a1b2c;box-shadow:0 12px 32px #0005}
.city-network__bar{display:flex;align-items:center;gap:4px;padding:10px;background:#182e3e;border-bottom:1px solid #33546a}
.city-network__bar i{width:4px;height:4px;border-radius:50%;background:#6d95aa;flex-shrink:0}
.city-network__bar>span{font-size:9px;color:#b2cedd;margin-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.city-network__site{padding:22px 18px;background:radial-gradient(circle at 100% 40%,#124c69,transparent 65%)}
.city-network__site>span:first-child{font-size:9px;letter-spacing:.14em;color:#71cfff}
.city-network .city-network__site h3{font:600 24px/1.15 Arial,sans-serif;color:#f0faff;margin:15px 0;overflow-wrap:anywhere;min-height:82px}
.city-network .city-network__site p{font-size:11px}
.city-network__mock-cta{display:inline-block;padding:10px 14px;background:#85d9ff;color:#072337;border-radius:5px;font-size:11px;font-weight:bold;margin-top:16px}
.city-network__mock-grid{display:flex;gap:6px;margin-top:20px}
.city-network__mock-grid span{flex:1;text-align:center;font-size:9px;border:1px solid #356178;padding:9px 2px;border-radius:4px}
.city-network__stack{display:grid;gap:6px;margin:8px 12px 0}
.city-network__stack span{padding:8px 12px;border:1px solid #294b60;border-radius:6px;color:#8fb2c7;font-size:11px;background:#0d2332}
.city-network .city-network__preview-note{font-size:10px;margin-top:12px;text-align:center;color:#92adbd}
.city-network__benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:28px 0 32px}
.city-network__benefits>div{padding-left:16px;border-left:2px solid #54bded}
.city-network__benefits strong{display:block;color:#e2f4ff;font-size:16px;margin-bottom:8px}
.city-network__benefits p{font-size:13px}
.city-network__chooser{border-top:1px solid #294356;padding-top:24px}
.city-network__chooser-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.city-network .city-network__chooser h3{font:600 18px/1.3 Arial,sans-serif;color:#edf8ff;margin:0}
.city-network__chooser-head>span{font-size:12px;color:#98b6c9}
.city-network__cities{display:flex;flex-wrap:wrap;gap:8px}
.city-network__cities button{border:1px solid #315169;border-radius:8px;background:#0b2030;color:#c1d8e8;min-height:44px;padding:9px 14px;font-size:13px;transition:background .2s,border-color .2s}
.city-network__cities button:hover{background:#19394e;border-color:#6ebdde}
.city-network__cities button[aria-pressed=true]{background:#95ddfc;color:#052239;border-color:#c2edff}
.city-network button:focus-visible,.city-network a:focus-visible{outline:3px solid #fff;outline-offset:4px}
.city-network__footer{display:flex;align-items:center;gap:30px;justify-content:space-between;margin-top:26px}
.city-network__footer p{font-size:11px;max-width:700px;color:#92aebf}
.city-network .city-network__footer a{flex-shrink:0;background:#8cdcff;color:#052336;border:1px solid #a4e6ff;border-radius:9px;padding:14px 20px;font-size:14px;text-decoration:none;font-weight:700}
@keyframes cn-route{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:850px){.city-network__stage{grid-template-columns:1fr}.city-network__preview{border-left:0;border-top:1px solid #274457;display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}.city-network__eyebrow{grid-column:1/-1;margin:0}.city-network__browser{grid-row:2/4}.city-network__stack{margin:0}.city-network__benefits{gap:16px}.city-network__footer{align-items:flex-start;flex-direction:column;gap:16px}.city-network__map-label{top:18px;left:18px}.city-network__map-label strong{font-size:32px}}
@media(max-width:540px){.city-network{padding:36px 0}.city-network__heading>p:last-child{font-size:15px}.city-network__stage{border-radius:16px}.city-network__preview{display:block;padding:18px}.city-network__eyebrow{display:block;margin-bottom:12px}.city-network__site{padding:18px}.city-network .city-network__site h3{font-size:25px;min-height:0}.city-network__stack{margin:8px 12px 0}.city-network__map-label{top:10px;left:12px}.city-network__map-label>span{font-size:9px}.city-network__map-label strong{font-size:23px;margin-top:4px}.city-network__map-label strong span{font-size:10px}.city-network__pause{font-size:10px!important;padding:6px 8px;bottom:5px;left:8px}.city-network__map-note{font-size:8px;right:7px;bottom:8px}.city-network__benefits{grid-template-columns:1fr;gap:16px;margin:22px 0}.city-network__benefits strong{font-size:15px;margin-bottom:4px}.city-network__chooser-head{display:block}.city-network__chooser-head>span{display:block;margin-top:8px;line-height:1.5}.city-network__cities{gap:6px}.city-network__cities button{font-size:12px;padding:8px 10px}.city-network__footer a{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.city-network .city-network__route{animation:none!important}.city-network *{transition:none!important}.city-network__pause{display:none}}
.city-network .city-network__stage{grid-template-columns:minmax(0,1fr)}
.city-network .city-network__map{width:100%;background:#071725}
.city-network .city-network__map .region-map-svg{display:block;position:relative;width:100%;height:auto;inset:auto;overflow:hidden;max-height:780px}
.region-map-land path{fill:url(#cn-land);stroke:#6cbbdd;stroke-width:.7;stroke-opacity:.65;stroke-linejoin:round}
.city-network__map .region-map-compass path,.city-network__map .region-map-scale path{stroke:#a4c7d9;stroke-width:1.5;fill:none}
.city-network__map .region-map-compass text,.city-network__map .region-map-scale text{font-size:12px;stroke:none;fill:#a4c7d9}
.city-network .region-map-toolbar{padding:16px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #294759;background:#0c2131}
.region-map-toolbar label{display:flex;align-items:center;gap:14px;font-size:13px;color:#cce5f3}
.region-map-toolbar select{min-height:44px;max-width:100%;border:1px solid #42718b;border-radius:8px;background:#102d42;color:#e9f8ff;padding:8px 30px 8px 12px;font:inherit}
.region-map-toolbar>span{font-size:12px;color:#92bdd2}
.city-network .region-map-source{padding:12px 22px;font-size:11px;line-height:1.6;color:#9cbdcf;background:#091d2b}
.region-map-source a{color:#a8c6d7;text-decoration:none;text-underline-offset:3px}
.region-map-source a:hover,.region-map-source a:focus-visible{text-decoration:underline;color:#e0f5ff}
.city-network .region-map-source{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;border-top:1px solid #284558;padding:10px 22px;font-size:11px}
.region-map-source__title{font-weight:600;color:#b3cad8}
.region-map-source__credits{white-space:nowrap}
.region-map-source__details{margin-left:auto;max-width:100%}
.region-map-source__details summary{cursor:pointer;color:#a8c6d7;padding:4px 0}
.region-map-source__details[open]{flex-basis:100%;margin-left:0}
.city-network .region-map-source__details p{max-width:700px;margin:6px 0 0;font-size:11px;color:#aac3d2}
.city-network .city-network__map .city-network__labels text{font-size:13.5px;stroke-width:3px}
.city-network .city-network__map .city-network__labels .is-origin text{fill:#9ee6ff;font-weight:bold}
.city-network .city-network__map .city-network__labels>g{transform:none}
.city-network .city-network__map .city-network__labels text{text-anchor:start}
.city-network__dots .is-origin{fill:#bcecff;opacity:1}
.city-network .city-network__pause{left:auto;right:18px;bottom:14px}
@media(max-width:650px){.city-network .region-map-toolbar{padding:12px;align-items:flex-start;flex-direction:column;gap:8px}.region-map-toolbar label{width:100%;display:grid;grid-template-columns:1fr;gap:6px}.city-network .region-map-source{padding:10px 12px;font-size:10px}.city-network .city-network__pause{right:8px;bottom:5px}.city-network .city-network__map .city-network__labels>g:not(.is-active):not(.is-origin){display:none}.city-network .city-network__map .city-network__labels>g.is-origin{display:block}.city-network .city-network__map .city-network__labels text{font-size:18px}.city-network .city-network__map .city-network__labels .is-active text{font-size:18px}}
.city-network .city-network__preview{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr);align-items:center;gap:24px;padding:18px 24px;border-left:0;border-top:1px solid #274457}
.city-network .city-network__browser{grid-column:1;grid-row:1;min-width:0}
.city-network .city-network__speed{grid-column:2;grid-row:1;margin:0}
.city-network .city-network__site{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:18px 24px}
.city-network .city-network__site>span:first-child{flex-shrink:0;font-size:14px;letter-spacing:0;text-transform:none}
.city-network .city-network__site h3{min-height:0;margin:0;font-size:clamp(26px,3vw,40px)}
.city-network .city-network__site h3 br{display:none}
.city-network .city-network__site h3>span:before{content:" "}
@media(max-width:650px){.city-network .city-network__map .city-network__labels>g.is-origin:not(.is-active){display:none}.city-network .city-network__map .city-network__labels .is-active text{font-size:30px}}
@media(max-width:650px){.city-network .city-network__preview{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}.city-network .city-network__speed{grid-column:1;grid-row:2}.city-network .city-network__site{gap:8px;padding:16px}.city-network .city-network__site>span:first-child{font-size:13px;line-height:1.5}.city-network .city-network__site h3{font-size:28px}}
.city-network .city-network__map .city-network__labels>g[data-label-city]{display:block!important;transform:none}
.city-network .city-network__map .city-network__labels>g[data-label-city] text{font-size:11px;text-anchor:start}
/* Rostov selected data: villages only, excluding Песчанокопское. */
.city-network[data-region="rostov-oblast"] .city-network__map .city-network__labels>g:is([data-label-city="23"],[data-label-city="24"],[data-label-city="25"],[data-label-city="35"],[data-label-city="38"]) text{font-size:9px}
.region-map-viewport{position:relative;overflow:hidden;touch-action:none;cursor:default}
.region-map-viewport.is-zoomed{cursor:grab}
.region-map-viewport.is-zoomed:active{cursor:grabbing}
.region-map-viewport:focus-visible{outline:2px solid #9cddff;outline-offset:-3px}
.city-network .region-map-viewport .region-map-svg{width:100%;min-width:0;max-height:none;height:auto;aspect-ratio:1000/780;pointer-events:auto}
.city-network .region-map-scroll-hint{display:block;font-size:11px;padding:6px 12px;text-align:center;color:#a8c6d7}
.region-map-zoom{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px}
.region-map-zoom button{min-width:44px;min-height:44px;border:1px solid #47768e;border-radius:9px;background:#102d42;color:#d8f1ff;font:inherit;font-size:18px;cursor:pointer}
.region-map-zoom button[data-map-zoom="reset"]{padding:0 12px;font-size:12px}
.region-map-zoom button:disabled{opacity:.4;cursor:default}
.region-map-zoom output{min-width:48px;text-align:center;font-size:12px;color:#b4d9ed}
.city-network .region-map-zoom .city-network__pause{position:static;display:block;margin:0;min-width:44px;min-height:44px;padding:0;font-size:18px!important}
.city-network .city-network__preview{grid-template-columns:minmax(0,1fr);gap:0;padding:6px 10px 10px;border-top:0}
.city-network .city-network__site{padding:12px 18px;gap:5px}
.region-map-attribution{position:absolute;right:4px;bottom:3px;padding:2px 5px;background:#071725dd;color:#a8c6d7;font-size:9px;line-height:1.4;touch-action:auto}
.region-map-attribution a{color:inherit;text-decoration:none}
.region-map-attribution a:hover{text-decoration:underline}
.region-map-notes{margin-top:10px;font-size:11px;color:#9cbdcf}
.region-map-notes p{font-size:11px}
@media(prefers-reduced-motion:reduce){.city-network .city-network__pause{display:none}}
.city-network .city-network__labels>g.is-active text{paint-order:stroke;stroke:#071725;stroke-width:7px;stroke-linejoin:round}
.city-network__cities{max-height:260px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#5385a1 #0b2030;padding:4px;scroll-padding:4px}
