/* Вело-гид — «велодорожка»: асфальт, сигнальный оранжевый, зелёные указатели веломаршрутов, табло велокомпьютера */
:root{--asph:#17191c;--asph2:#24272c;--chalk:#f4f1e9;--paper:#fbfaf6;--ink:#1c1e21;--mute:#5d6168;--line:#d9d4c7;
--orange:#ff5b22;--orange2:#ffa21a;--lane:#1d9b6c;--lane2:#127a52;--sky:#2b7fd4;--berry:#d8325a;--sun:#f2c230;
--lcd:#c9d4a3;--lcdink:#1f2b12;--card:#ffffff;--shadow:0 1px 0 rgba(0,0,0,.04),0 8px 24px -14px rgba(23,25,28,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--chalk:#121417;--paper:#191c20;--ink:#ecebe6;--mute:#a3a7ad;--line:#33373d;--card:#1f2227;--shadow:0 10px 28px -16px #000}}
:root[data-theme="dark"]{--chalk:#121417;--paper:#191c20;--ink:#ecebe6;--mute:#a3a7ad;--line:#33373d;--card:#1f2227}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--chalk);color:var(--ink);font:300 17px/1.65 Geologica,system-ui,sans-serif}
a{color:inherit;text-decoration-color:var(--orange);text-underline-offset:3px;text-decoration-thickness:2px}a:hover{color:var(--orange)}
h1,h2,h3,.brand b,.num,.km,.odo,.btn,.pt,.big{font-family:Tektur,Geologica,sans-serif}
h1{font-weight:800;font-size:clamp(30px,5vw,50px);line-height:1.07;margin:.15em 0 .35em;letter-spacing:-.01em}
h2{font-weight:800;font-size:clamp(22px,3vw,28px);line-height:1.2;margin:0 0 .6em}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
/* шапка */
.mast{background:var(--asph);color:#f1efe8;position:sticky;top:0;z-index:20}
.mrow{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:flex;gap:10px;align-items:center;text-decoration:none;color:#fff}
.brand b{font-weight:800;font-size:22px;letter-spacing:.06em}.brand b i{color:var(--orange);font-style:normal}
.brand small{display:block;font-size:11px;color:#a9adb3;letter-spacing:.04em;margin-top:-3px}
.logo-w{width:34px;height:34px;fill:none;stroke:var(--orange);stroke-width:2.6}.logo-w .spk{stroke:#d8d4ca;stroke-width:.8;transform-origin:16px 16px;animation:spin 3s linear infinite}
.logo-w .hub{fill:var(--lane);stroke:none}.brand:hover .spk{animation-duration:.6s}
@keyframes spin{to{transform:rotate(360deg)}}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:6px;font-size:14px;font-weight:400;text-decoration:none;color:#dcd9d1}
.nav a:hover,.nav a[aria-current]{background:var(--asph2);color:#fff}.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--orange)}
.mk{width:15px;height:15px;flex:none;stroke-width:2.2;stroke-linejoin:round}
.m-circle{fill:var(--lane);stroke:var(--lane)}.m-square{fill:var(--sky);stroke:var(--sky)}.m-tri{fill:var(--orange);stroke:var(--orange)}
.m-diamond{fill:var(--sun);stroke:var(--sun)}.m-flag{fill:none;stroke:currentColor}.m-heart{fill:var(--berry);stroke:var(--berry)}.m-hex{fill:none;stroke:var(--orange2)}
.mk.big{width:56px;height:56px}
.lane{height:8px;background:var(--asph2) repeating-linear-gradient(90deg,#f1efe8 0 34px,transparent 34px 60px) center/auto 2px no-repeat}
.burger{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}.burger i{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:.2s}
@media(max-width:1120px){.burger{display:block}.nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--asph);flex-direction:column;padding:8px 16px 16px}
 .nav-open .nav{display:flex}.nav a{font-size:16px;padding:12px 10px}}
/* герой */
.hero{background:radial-gradient(1200px 400px at 75% 100%,#2b3036,transparent),var(--asph);color:#f1efe8;padding:38px 0 0;overflow:hidden}
.hrow{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:end}
.hero h1 span{color:var(--orange);display:block}.hero .lead{color:#c8c5bd}
.kick{font-family:Tektur,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--orange);margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.odo{display:inline-block;background:#0d0f11;border:1px solid #33373d;border-radius:6px;padding:6px 12px;font-size:14px;color:#a9adb3}
.odo span{color:var(--lcd);font-size:18px;letter-spacing:.12em}
.cta{margin:22px 0 34px;display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--orange);color:#17191c;font-weight:800;text-decoration:none;font-size:15px}
.btn:hover{background:var(--orange2);color:#17191c}.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px #50555c}.btn.ghost:hover{box-shadow:inset 0 0 0 2px var(--orange);color:#fff}
.hart{margin-bottom:-6px}
/* велосипед */
.bike{width:100%;height:auto;display:block}
.bike .hills path{fill:#22262b}.bike .road{stroke:#2e3238;stroke-width:22}
.bike .dash{stroke:#f1efe8;stroke-width:2.4;stroke-dasharray:26 22;animation:road .8s linear infinite}
@keyframes road{to{stroke-dashoffset:48}}
.bike .tyre{fill:none;stroke:#0b0c0e;stroke-width:9}.bike .rim{fill:none;stroke:#9aa0a7;stroke-width:3}
.bike .spokes line{stroke:#c9ccd0;stroke-width:1}.bike .hubc{fill:var(--orange)}
.bike .frame path{fill:none;stroke:url(#fr);stroke-width:9;stroke-linejoin:round;stroke-linecap:round}
.bike .saddle{fill:#0b0c0e}.bike .post,.bike .bar{stroke:#0b0c0e;stroke-width:5;fill:none;stroke-linecap:round}
.bike .chain{stroke:#c9ccd0;stroke-width:2.4;stroke-dasharray:3 3;animation:chain .25s linear infinite}
@keyframes chain{to{stroke-dashoffset:-6}}
.bike .ring,.bike .cog{fill:none;stroke:#c9ccd0;stroke-width:3;stroke-dasharray:2 2}.bike .rotor{fill:none;stroke:#c9ccd0;stroke-width:3}
.bike .crank line{stroke:#0b0c0e;stroke-width:6;stroke-linecap:round}.bike .crank rect{fill:var(--lane)}
.bike-l{background:var(--asph);border-radius:12px}
.bike-l .labels circle{fill:var(--lcd)}.bike-l .labels text{fill:#f1efe8;font:600 13px Geologica,sans-serif;paint-order:stroke;stroke:#17191c;stroke-width:4px}
.bike-l .labels a:hover text{fill:var(--orange)}
@media (prefers-reduced-motion:reduce){.bike animateTransform{display:none}.bike .dash,.bike .chain,.logo-w .spk{animation:none}}
.schema{margin:0 0 28px}.schema figcaption{font-size:13.5px;color:var(--mute);margin-top:6px}
/* разделы на главной */
.secs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:34px 0}
.sec{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;padding:20px;background:var(--card);border-radius:14px;text-decoration:none;box-shadow:var(--shadow);border:1px solid var(--line);transition:transform .15s}
.sec .mk{grid-row:span 3}.sec b{font-family:Tektur,sans-serif;font-size:20px;line-height:1.2}.sec small{color:var(--mute);font-size:14.5px;line-height:1.45}
.sec .cnt{font-size:12.5px;color:var(--orange);font-weight:600;letter-spacing:.04em}.sec:hover{transform:translateY(-3px);color:inherit;border-color:var(--orange)}
/* карточки-указатели */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.sign-card{position:relative;display:flex;flex-direction:column;gap:10px;min-height:150px;padding:16px 18px 18px;border-radius:10px;background:var(--lane);color:#fff;text-decoration:none;
 box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),inset 0 0 0 5px var(--lane2),var(--shadow);transition:transform .15s}
.sign-card:hover{color:#fff;transform:translateY(-3px) rotate(-.4deg)}
.sign-card b{font-family:Tektur,sans-serif;font-weight:500;font-size:18px;line-height:1.25;padding-right:26px}
.sc-top{display:flex;align-items:center;gap:7px;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}.sc-top em{font-style:normal;opacity:.9}
.sc-top .mk{background:#fff;border-radius:4px;padding:2px;width:19px;height:19px}
.sign-card .km{margin-left:auto;background:#fff;color:var(--lane2);border-radius:4px;padding:1px 7px;font-size:12px;letter-spacing:0}
.sc-arrow{position:absolute;right:16px;bottom:12px;font-size:24px;font-weight:800}
.sign-card.s-remont{background:#e24c18}.sign-card.s-remont{box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),inset 0 0 0 5px #b13a10,var(--shadow)}
.sign-card.s-ustrojstvo{background:#2a6cb5;box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),inset 0 0 0 5px #1d4f86,var(--shadow)}
.sign-card.s-instrumenty{background:var(--asph);box-shadow:inset 0 0 0 3px var(--orange2),var(--shadow)}
.sign-card.s-zdorove{background:#b8294b;box-shadow:inset 0 0 0 3px rgba(255,255,255,.9),inset 0 0 0 5px #8a1d38,var(--shadow)}
.sign-card.s-instrumenty .km,.sign-card.s-remont .km,.sign-card.s-ustrojstvo .km,.sign-card.s-zdorove .km{color:var(--asph)}
.more,.tools-strip{margin:40px 0}
/* крошки */
.crumbs{font-size:13.5px;color:var(--mute);padding:18px 0 4px}.crumbs a{text-decoration:none}.crumbs span{color:var(--orange);margin:0 2px}
/* статья */
.art{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,4vw,44px);margin:12px 0 28px;box-shadow:var(--shadow)}
.ah{max-width:820px}.ah .kick{color:var(--mute)}.ah .km{color:var(--orange);margin-left:6px}
.lead{font-size:clamp(17px,2vw,20px);line-height:1.55;color:var(--mute);font-weight:300}
.art .lead{color:var(--ink);opacity:.85}
.cols{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;margin-top:22px}
.toc{position:sticky;top:90px;align-self:start;font-size:14.5px;border-left:3px dashed var(--line);padding-left:16px}
.toc b{font-family:Tektur,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--orange)}
.toc ol{list-style:none;padding:0;margin:8px 0 0;counter-reset:t}.toc li{counter-increment:t;margin:7px 0;position:relative}
.toc li::before{content:"";position:absolute;left:-23px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:3px solid var(--lane)}
.toc a{text-decoration:none}
.body{max-width:760px}.body.solo{margin-top:10px}
.ch{margin:0 0 32px}.ch h2{display:flex;flex-direction:column;gap:2px}
.num{font-size:13px;font-weight:500;color:var(--orange);letter-spacing:.14em;text-transform:uppercase}
.step{position:relative;padding-left:22px;border-left:4px solid var(--line)}.step::before{content:"";position:absolute;left:-12px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px var(--paper)}
.body p{margin:0 0 1em}.body ul{margin:0 0 1.1em;padding:0;list-style:none}
.body li{position:relative;padding-left:26px;margin:.4em 0}.body li::before{content:"";position:absolute;left:3px;top:.62em;width:12px;height:4px;background:var(--lane);border-radius:2px;box-shadow:16px 0 0 -1px transparent}
.body a{font-weight:400}
.sign{display:flex;gap:14px;align-items:flex-start;background:#fff4d6;color:#3b2f0c;border-radius:10px;padding:14px 16px;border:2px solid var(--sun)}
.sign b{flex:none;width:30px;height:27px;display:grid;place-items:end center;background:var(--sun);clip-path:polygon(50% 0,100% 100%,0 100%);font:800 16px Tektur,sans-serif;padding-bottom:1px}
.qa details{border-top:1px solid var(--line);padding:12px 0}.qa summary{cursor:pointer;font-weight:600;list-style:none;display:flex;gap:10px}
.qa summary::before{content:"+";font:800 20px/1 Tektur,sans-serif;color:var(--orange);width:16px}.qa details[open] summary::before{content:"−"}
.qa p{margin:.6em 0 0 26px;color:var(--mute)}
@media(max-width:860px){.cols{grid-template-columns:1fr;gap:10px}.toc{position:static;margin-bottom:12px}.hrow{grid-template-columns:1fr}.hart{margin:0 -16px -6px}}
/* хаб */
.hub-h{display:flex;gap:20px;align-items:center;margin:14px 0 24px}.hub-h h1{margin:0}.hub-h .lead{margin:.3em 0 0}
.route{list-style:none;margin:0 0 30px;padding:0 0 0 30px;position:relative}
.route::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:4px;background:repeating-linear-gradient(var(--lane) 0 14px,transparent 14px 22px)}
.route li{margin:0 0 12px}.route a{position:relative;display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-radius:12px;text-decoration:none;box-shadow:var(--shadow)}
.route a:hover{border-color:var(--orange);color:inherit}
.route .pt{position:absolute;left:-36px;top:14px;width:28px;height:28px;border-radius:50%;background:var(--asph);color:#fff;font-size:11.5px;display:grid;place-items:center;box-shadow:0 0 0 3px var(--chalk)}
.route b{font-family:Tektur,sans-serif;font-weight:500;font-size:18.5px}.route small{grid-column:1;color:var(--mute);font-size:14.5px;line-height:1.45}
.route .km{grid-row:1/3;grid-column:2;align-self:center;font-size:13px;color:var(--orange);white-space:nowrap}
/* калькуляторы — табло велокомпьютера */
.lcd{background:var(--asph);color:#e8e6df;border-radius:18px;padding:20px;margin:6px 0 30px;display:grid;grid-template-columns:1fr minmax(240px,.9fr);gap:18px;box-shadow:inset 0 0 0 2px #2f3339,var(--shadow)}
.lcd-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;align-content:start}
.lcd label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:#a9adb3}
.lcd input,.lcd select{font:400 16px Geologica,sans-serif;background:#0d0f11;color:#fff;border:1px solid #3b4047;border-radius:8px;padding:9px 10px;width:100%}
.lcd input:focus,.lcd select:focus{outline:2px solid var(--orange);border-color:transparent}
.lcd .chk{flex-direction:row;align-items:center;gap:8px;font-size:15px;color:#e8e6df}.lcd .chk input{width:20px;height:20px;accent-color:var(--orange)}
.lcd-out{background:linear-gradient(160deg,#d3ddae,var(--lcd));color:var(--lcdink);border-radius:10px;padding:16px 18px;display:flex;flex-direction:column;justify-content:center;box-shadow:inset 0 2px 8px rgba(0,0,0,.25);min-height:110px}
.lcd-out .big{font-size:clamp(26px,4vw,38px);font-weight:800;line-height:1.1;letter-spacing:.02em}.lcd-out .sub{font-size:13.5px;margin-top:6px;opacity:.85}
.cad-tab{grid-column:1/-1;overflow-x:auto}.cad-tab table{border-collapse:collapse;font-size:14px;width:100%;min-width:300px}
.cad-tab th,.cad-tab td{padding:5px 8px;text-align:right;border-bottom:1px solid #2f3339}.cad-tab th{color:#a9adb3;font-weight:400}.cad-tab tr.on td{color:var(--orange2);font-weight:600}
@media(max-width:700px){.lcd{grid-template-columns:1fr}}
/* подвал */
.foot{background:var(--asph);color:#bfc2c7;margin-top:50px;padding-bottom:30px;font-size:14.5px}
.chain{height:14px;background:radial-gradient(circle at 7px 7px,#3a3f46 0 3px,transparent 3.5px) 0 0/14px 14px,linear-gradient(transparent 3px,#4a5059 3px 11px,transparent 11px);opacity:.9}
.fcols{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:20px;padding:30px 0 10px}
.fcols h3{display:flex;gap:7px;align-items:center;font-size:15px;margin:0 0 8px;color:#fff}.fcols h3 a{text-decoration:none}
.fcols a{display:block;text-decoration:none;padding:3px 0;color:#bfc2c7}.fcols a:hover{color:var(--orange)}
.fine{font-size:13px;color:#8d9197;border-top:1px solid #2f3339;padding-top:16px;margin:12px 0 0}.fine a{color:#d0d2d6}