:root{
  --bg:#070907;
  --fg:#dfe6e0;          /* body copy: soft near-white, never pure accent */
  --dim:#1fa34a;         /* dimmer green: rules, muted labels */
  --accent:#33ff66;      /* phosphor green: headings, rules, links */
  --muted:#8fa192;
  --rule:rgba(31,163,74,.45);
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--mono);
  font-size:16px;
  line-height:1.75;
  overflow-x:hidden;
  font-variant-ligatures:none;
}
.wrap{
  width:100%;
  /* ~71ch at the 16px body size, but expressed in rem: the ch unit resolves
     against each element's own font-size, which made the smaller-type footer
     measure narrower than the body copy. */
  max-width:43rem;
  margin:0 auto;
  padding:0 20px;
}
.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--accent);color:#000;padding:8px 12px;z-index:10;
}
.skip:focus{left:0}

/* top bar */
.bar{
  border-bottom:1px solid var(--rule);
  background:var(--bg);
  position:sticky;top:0;z-index:5;
}
.barin{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:52px;
}
.brand{
  color:var(--accent);text-decoration:none;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;font-size:13px;
  display:inline-flex;align-items:center;gap:10px;
}
/* App mark. The source PNG carries its own near-black ground and a hairline
   green rounded border, so it is left opaque rather than keyed out -- a
   transparent version would vanish against a dark browser tab strip. */
.mark{
  width:34px;height:34px;
  display:block;flex:0 0 auto;
  max-width:100%;
}
.markfoot{width:40px;height:40px}
.langs a{
  color:var(--muted);text-decoration:none;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(31,163,74,.5);
  padding:5px 10px;display:inline-block;
}
.langs a:hover,.langs a:focus{color:var(--accent);border-color:var(--accent)}

/* headline */
main{padding:44px 20px 8px}
h1{
  font-size:clamp(24px,6vw,34px);
  line-height:1.2;
  margin:0 0 10px;
  color:var(--accent);
  letter-spacing:.01em;
  font-weight:700;
  text-wrap:balance;
}
.updated{
  margin:0 0 26px;
  color:var(--muted);
  font-size:13px;
  letter-spacing:.04em;
}
.lead{
  margin:0 0 26px;
  color:var(--fg);
  font-size:15px;
  line-height:1.8;
}

/* document switcher */
.docnav{
  display:flex;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin:0 0 34px;
}
.docnav a{
  flex:1 1 0;
  min-width:0;
  text-align:center;
  padding:11px 10px;
  color:var(--muted);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-right:1px solid rgba(31,163,74,.3);
  overflow-wrap:break-word;
}
.docnav a:last-child{border-right:0}
.docnav a:hover,.docnav a:focus{color:var(--accent)}
.docnav a.on{color:#050705;background:var(--accent);font-weight:700}
/* The Ukrainian labels are long single words; a three-column row cannot hold
   them on a phone without overflowing, so stack instead. */
@media (max-width:560px){
  .docnav{flex-direction:column}
  .docnav a{
    border-right:0;
    border-bottom:1px solid rgba(31,163,74,.3);
    text-align:left;
    padding:11px 0;
  }
  .docnav a:last-child{border-bottom:0}
  .docnav a.on{padding-left:10px}
}

/* sections */
.sec{margin:0 0 34px}
.sec h2,.grouphead{
  font-size:15px;
  line-height:1.45;
  margin:0 0 12px;
  color:var(--accent);
  font-weight:700;
  letter-spacing:.02em;
  display:flex;
  gap:12px;
  align-items:baseline;
  padding-bottom:10px;
  border-bottom:1px solid rgba(31,163,74,.35);
}
.grouphead{
  margin:40px 0 22px;
  border-bottom-color:var(--rule);
  text-transform:uppercase;
  font-size:12.5px;
  letter-spacing:.08em;
  color:var(--dim);
}
.num{
  color:var(--dim);
  font-weight:500;
  flex:0 0 auto;
  font-size:13px;
}
.sec p{
  margin:0;
  font-size:15px;
  line-height:1.85;
  color:var(--fg);
  overflow-wrap:break-word;
}
.sec p + p{margin-top:14px}
.sec a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.doclinks{display:flex;flex-wrap:wrap;gap:10px 22px}
.closing{
  margin:8px 0 0;
  padding:16px 0 0;
  border-top:1px solid var(--rule);
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
}

/* footer */
.foot{
  border-top:1px solid var(--rule);
  margin-top:40px;
  padding-top:20px;
  padding-bottom:56px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.7;
}
.foot p{margin:0 0 6px}
.footin{display:flex;gap:14px;align-items:flex-start}
.footin>div{min-width:0}
.footnav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 12px}
.footnav a{
  color:var(--muted);text-decoration:none;
  text-transform:uppercase;letter-spacing:.05em;font-size:11.5px;
  border-bottom:1px solid rgba(31,163,74,.35);
  padding-bottom:2px;
}
.footnav a:hover,.footnav a:focus{color:var(--accent);border-bottom-color:var(--accent)}
.footnav a[aria-current]{color:var(--dim)}
.mono-dim{color:var(--dim)}
.route-preview .route-title{margin:0 0 6px}
.route-preview .route-meta{margin:0 0 10px;font-size:13px}
.route-preview .route-desc{margin:0 0 10px}
.route-map{height:340px;border:1px solid var(--rule);margin:10px 0;background:#0b120d}
.pinlegend{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:12px;color:var(--muted);margin:0}
.pinlegend .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:middle}
.pinlegend .dot.start{background:#2ecc71}
.pinlegend .dot.finish{background:#f5a623}
.pinlegend .dot.cp{background:#4a9eff}
.rt-pin{width:16px;height:16px;border-radius:50%;border:2px solid rgba(0,0,0,.45);box-shadow:0 0 2px rgba(0,0,0,.6)}
.rt-pin-start{background:#2ecc71}
.rt-pin-finish{background:#f5a623}
.rt-pin-cp{background:#4a9eff;font-size:10px;line-height:12px;text-align:center;color:#fff;font-weight:bold}

/* index */
.hero{padding:64px 0 0}
.cards{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:30px}
.card{
  display:block;padding:20px 0;text-decoration:none;
  border-bottom:1px solid var(--rule);
}
.card .t{color:var(--accent);font-weight:700;font-size:15px;display:block}
.card .s{color:var(--muted);font-size:12.5px;display:block;margin-top:4px}
.card:hover .s{color:var(--fg)}

@media (max-width:480px){
  body{font-size:15px}
  main{padding-top:32px}
  .sec p{font-size:14.5px}
}