:root{
  --board:#0B1114; --board-2:#151D20; --board-3:#202B2F;
  --plate:#EDF1F2; --ink:#101A23; --paper:rgba(245,242,233,.92);
  --rule:rgba(16,26,35,.14); --route:#FF5C35; --brand:#78E6D0; --sign:#4B6BFF;
  --m-land:#E7EDEF; --m-green:#D6E3D3; --m-water:#C0D5E1; --m-bld:#DAE2E6;
  --m-case:#B7C5CE; --m-fill:#FFFFFF; --m-svc:#E2E9EC; --m-label:#5C6C79;
  --m-halo:#EDF1F2;
  --f-display:"Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
  --pad:clamp(12px,1.8vw,22px);
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow-x:hidden}
body{
  background:var(--board); color:var(--paper);
  font-family:var(--f-body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.shell{width:100%;margin:0;padding:var(--pad)}

/* ---------- main grid ---------- */
.work{display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,372px);gap:var(--pad);align-items:start}
@media (max-width:1080px){
  .work{grid-template-columns:minmax(0,1fr)}
  .rail-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
}
@media (max-width:720px){
  .rail-col{grid-template-columns:1fr}
}

/* ---------- map plate ---------- */
.plateframe{position:relative;background:var(--plate);border-radius:16px;overflow:hidden}
.plateframe::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--rule);
}
#plate{display:block;width:100%;height:auto}

.land{fill:var(--m-land)}
.green{fill:var(--m-green)}
.water{fill:var(--m-water)}
.bld{fill:var(--m-bld)}
.rail{fill:none;stroke:var(--m-case);stroke-width:3;stroke-dasharray:10 8}
.case path,.fill path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.case{stroke:var(--m-case)}
.fill{stroke:var(--m-fill)}
.case.mw path{stroke-width:21}   .fill.mw path{stroke-width:15}
.case.mwl path{stroke-width:14}  .fill.mwl path{stroke-width:9}
.case.pri path{stroke-width:17}  .fill.pri path{stroke-width:11.5}
.case.pril path{stroke-width:11} .fill.pril path{stroke-width:7}
.case.sec path{stroke-width:13.5}.fill.sec path{stroke-width:9}
.case.secl path{stroke-width:10} .fill.secl path{stroke-width:6}
.case.ter path{stroke-width:11.5}.fill.ter path{stroke-width:7.5}
.case.terl path{stroke-width:8}  .fill.terl path{stroke-width:5}
.case.res path{stroke-width:9}   .fill.res path{stroke-width:5.5}
.fill.svc path{stroke:var(--m-svc);stroke-width:2.6}
.destbld{fill:var(--brand);opacity:.9}

.roadlabel text{
  font-family:var(--f-display);font-size:15px;font-weight:600;letter-spacing:.18em;
  fill:var(--m-label);
  paint-order:stroke;stroke:var(--m-halo);stroke-width:5;stroke-linejoin:round;
}
.roadlabel text.major{font-size:18px;letter-spacing:.26em}

/* route + markers (injected).  --sym scales every symbol on the plate so the
   map stays readable when the plate itself is small. */
#plate{--sym:1}
.rt-halo{fill:none;stroke:var(--m-halo);stroke-linecap:round;stroke-linejoin:round;opacity:.85;
  stroke-width:calc(20px * var(--sym))}
.rt-line{fill:none;stroke:var(--route);stroke-linecap:round;stroke-linejoin:round;
  stroke-width:calc(11px * var(--sym))}
.rt-ghost{fill:none;stroke:var(--route);stroke-linecap:round;stroke-linejoin:round;opacity:.16;
  stroke-width:calc(11px * var(--sym))}
.rt-node{fill:var(--m-halo);stroke:var(--route);stroke-width:calc(5px * var(--sym))}
.rt-node.on{fill:var(--route)}
.veh{fill:var(--route);stroke:var(--m-halo);stroke-linejoin:round;stroke-width:calc(2.5px * var(--sym))}

.pin-dest circle{fill:var(--ink)}
.pin-dest rect{fill:var(--brand)}
.chip{font-family:var(--f-display);font-weight:600;letter-spacing:.13em}
.chip rect{fill:var(--ink)}
.chip text{fill:#fff;font-size:calc(19px * var(--sym))}
.chip.brand rect{fill:var(--brand)}
.chip.brand text{fill:#06222a}
.chip.sign rect{fill:var(--sign)}
.chip.mark rect{fill:none;stroke:var(--m-label);stroke-width:calc(2px * var(--sym))}
.chip.mark text{fill:var(--m-label);font-size:calc(16px * var(--sym))}

/* chart furniture */
.furn{font-family:var(--f-display);letter-spacing:.16em;fill:var(--m-label)}
.furn line,.furn path{stroke:var(--m-label);fill:none}

/* On a phone the plate is too small to carry street names; keep the route,
   the landmarks and the door legible instead. */
@media (max-width:760px){
  #plate{--sym:2.2}
  .roadlabel,.furn{display:none}
}

/* ---------- rail ---------- */
.rail-col{display:flex;flex-direction:column;gap:var(--pad)}
.panel{background:var(--board-2);border:1px solid rgba(255,255,255,.09);border-radius:14px;overflow:hidden}
.panel > h2{
  font-family:var(--f-display);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0;padding:16px 18px 12px;
}
.picker{display:flex;flex-direction:column;padding:0 10px 10px;gap:4px}
.opt{
  display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:12px;
  width:100%;text-align:left;padding:13px 12px;cursor:pointer;
  background:transparent;border:0;border-radius:9px;color:#fff;font:inherit;
}
.opt:hover{background:rgba(255,255,255,.06)}
.opt:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.opt[aria-selected="true"]{background:var(--board-3)}
.opt .glyph{width:26px;height:26px}
.opt .glyph path{fill:none;stroke:rgba(255,255,255,.5);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.opt[aria-selected="true"] .glyph path{stroke:var(--route)}
.opt .name{font-family:var(--f-display);font-size:16.5px;letter-spacing:.05em;line-height:1.2}
.opt .via{display:block;font-family:var(--f-body);font-size:12.5px;letter-spacing:0;color:rgba(255,255,255,.5);margin-top:2px}
.opt .num{font-family:var(--f-mono);font-size:12.5px;color:rgba(255,255,255,.55);text-align:right;white-space:nowrap}
.opt[aria-selected="true"] .num{color:var(--route)}

.legbar{
  display:flex;align-items:center;gap:14px;
  padding:12px 18px;border-top:1px solid rgba(255,255,255,.09);
}
.legbar .scrub{flex:1;height:3px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.legbar .scrub i{
  display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;
  background:var(--route)
}
.legbar .scrub i.is-playing{animation:route-guide-progress 2.6s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes route-guide-progress{to{transform:scaleX(1)}}
.replay{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.22);border-radius:8px;
  color:#fff;font-family:var(--f-display);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;
  padding:6px 11px;
}
.replay:hover{border-color:var(--route);color:var(--route)}
.replay svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}

/* steps */
.steps{list-style:none;margin:0;padding:6px 18px 18px;counter-reset:s}
.steps li{
  display:grid;grid-template-columns:30px 1fr;gap:14px;
  padding:11px 0;border-top:1px solid rgba(255,255,255,.08);
}
.steps li:first-child{border-top:0}
.steps .marker{
  grid-row:span 2;align-self:start;margin-top:1px;
  width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;
  font-family:var(--f-mono);font-size:12px;color:rgba(255,255,255,.6);
  transition:background .18s,border-color .18s,color .18s;
}
.steps li.on .marker{background:var(--route);border-color:var(--route);color:#fff}
.steps .what{font-family:var(--f-display);font-size:15.5px;letter-spacing:.04em;color:#fff}
.steps li.on .what{color:var(--route)}
.steps .how{grid-column:2;font-size:13.5px;color:rgba(255,255,255,.62);margin-top:2px}
.steps .run{font-family:var(--f-mono);font-size:12px;color:rgba(255,255,255,.4)}

/* under-map strip */
.mapcol{display:flex;flex-direction:column;min-width:0}
.underbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.note{margin:0;flex:1 1 300px;font-size:13.5px;color:rgba(255,255,255,.5)}
.note b{color:rgba(255,255,255,.82);font-weight:600}

/* links */
.jump{display:flex;flex-wrap:wrap;gap:8px}
.jump a{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 15px;text-decoration:none;border-radius:2px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:#fff;font-family:var(--f-display);font-size:14.5px;letter-spacing:.06em;
}
.jump a:hover{border-color:var(--brand);background:rgba(23,196,216,.1)}
.jump a svg{width:15px;height:15px;flex:none;stroke:var(--brand);fill:none;stroke-width:2}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

.roadlabel .label-mkad{font-size:19px;letter-spacing:.26em}
.roadlabel .label-novo{font-size:18px;letter-spacing:.20em}
.roadlabel .label-zhukov{font-size:17px;letter-spacing:.18em}
.roadlabel .label-proshlyakova{font-size:16px;letter-spacing:.15em}
.roadlabel .label-local{font-size:14px;letter-spacing:.13em}
.roadlabel .label-service{font-size:13px;letter-spacing:.12em}
.route-source{
  margin:12px 4px 0;color:rgba(255,255,255,.34);
  font-size:10px;line-height:1.4;text-align:right;
}
@media (max-width:720px){
  .shell{padding:10px}
  .panel > h2{padding:15px 15px 10px}
  .picker{padding:0 7px 8px}
  .opt{padding:12px 9px}
  .steps{padding:5px 15px 16px}
  .route-source{text-align:left}
}