.page.mp-page { padding: 0; animation: none; }
.mp { position: relative; height: 100vh; min-height: 520px; overflow: hidden; outline: none; user-select: none; -webkit-user-select: none;
  cursor: grab; touch-action: none; contain: strict;
  background:
    radial-gradient(1200px 800px at 46% 50%, var(--map-ground-2, var(--paper)), transparent 72%),
    repeating-linear-gradient(0deg, transparent 0 47px, color-mix(in srgb, var(--rule) 30%, transparent) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, color-mix(in srgb, var(--rule) 30%, transparent) 47px 48px),
    var(--map-ground, var(--paper-2)); }
.mp.is-dragging { cursor: grabbing; }
.mp-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: visible; transform-origin: 0 0; will-change: transform; }
.mp-svg text { font-family: var(--f-ui); }
.mp [tabindex]:focus { outline: none; }
.mp [tabindex]:focus-visible .mp-sign__board, .mp [tabindex]:focus-visible .mp-p__plate, .mp [tabindex]:focus-visible .mp-dot__c,
.mp .mp-hubsign:focus-visible .mp-sign__board { stroke: var(--focus, var(--link)); stroke-width: 3; }

.mp-ground__far { fill: var(--map-ground-2, var(--paper)); opacity: .55; }
.mp-ground__ring { fill: none; stroke: var(--map-road); stroke-width: 3; stroke-dasharray: 2 18; stroke-linecap: round; opacity: .8; }
.mp-ground__ring--2 { stroke-dasharray: 1 26; opacity: .5; }

.mp-hatch__bg { fill: var(--map-plate); }
.mp-hatch__ln { stroke: var(--sc); stroke-width: 2.2; }

.mp-road { fill: none; stroke: var(--map-road); stroke-linecap: round; opacity: .8; }
.mp-road:hover { opacity: 1; stroke: color-mix(in srgb, var(--map-road) 70%, var(--ink-3)); }
.has-pivot .mp-road, .has-lens .mp-road { opacity: .35; }

.mp-hub { cursor: pointer; }
.mp-hub__shadow { fill: rgb(var(--shade-rgb, 93, 95, 160)); opacity: .1; }
.mp-hub__lawn { stroke: var(--ink); stroke-opacity: .12; stroke-width: 2; }
.mp-hub__lit { fill: var(--lawn-lit); opacity: .45; }
.mp-lawn0 { stop-color: color-mix(in srgb, var(--lawn-lit) 80%, #fff); }
.mp-lawn1 { stop-color: var(--lawn-lit); }
.mp-lawn2 { stop-color: var(--lawn); }
.mp-hub.is-sel .mp-hub__lawn { stroke: var(--ink); stroke-opacity: .7; stroke-width: 5; }
.mp-hubsign { cursor: pointer; }
.mp-hubsign__name { font: 600 21px/1 var(--f-display); fill: var(--ink); }
.mp-hubsign__sub { font: 600 10.5px/1 var(--f-num); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-3); }
.mp-hubsign:hover .mp-sign__board { stroke: var(--ink-3); }

.mp-d__shadow { fill: rgb(var(--shade-rgb, 93, 95, 160)); opacity: .08; }
.mp-d__plate { fill: color-mix(in srgb, var(--ac) 6%, var(--map-plate)); stroke: var(--ac); stroke-opacity: .42; stroke-width: 2.6; cursor: pointer; }
.mp-d:hover .mp-d__plate { fill: color-mix(in srgb, var(--ac) 10%, var(--map-plate)); }
.mp-d.is-sel .mp-d__plate { stroke-opacity: .9; stroke-width: 5; }

.mp-sign { cursor: pointer; }
.mp-sign__board { fill: var(--card); stroke: var(--rule); stroke-width: 1; }
.mp-sign__shadow { fill: rgb(var(--shade-rgb, 93, 95, 160)); opacity: .16; }   .mp-sign:hover .mp-sign__board { stroke: var(--ac); stroke-width: 1.6; }
.mp-sign.is-sel .mp-sign__board { stroke: var(--ac); stroke-width: 2.4; }
.mp-sign__name { font: 600 16px/1 var(--f-head); fill: var(--ink); }
.mp-sign__meta { font: 600 11px/1 var(--f-num); letter-spacing: .04em; fill: var(--ink-3); }
.mp-sign__flag { font: 700 11px/1 var(--f-num); fill: var(--ink-2); }
.mp-sign__flags .mk { pointer-events: none; }
.has-lens .mp-sign:not([data-lit]) { opacity: .55; }
.mp-med__bg { fill: var(--card); }
.mp-med__tint { opacity: .16; }
.mp-med__rim { fill: none; stroke-width: 3; }
.mp-med__ring { fill: none; stroke: var(--sc); }

.mp-p__plate { fill: var(--map-plate); stroke: var(--ink); stroke-opacity: .12; stroke-width: 1.6; cursor: pointer; }
.mp-p__seg { fill: none; stroke: var(--sc); stroke-width: 9; pointer-events: none; opacity: .78; }
.mp-p__seg[data-status="shipped"] { opacity: .55; }
.is-z2 .mp-p__seg { stroke-width: 5; }
.mp-p:hover > .mp-p__plate { stroke: var(--ac, var(--ink-3)); stroke-opacity: .85; stroke-width: 2.6; }
.mp-p.is-sel > .mp-p__plate { stroke: var(--ink); stroke-opacity: .8; stroke-width: 4; }
.mp-p__name { display: none; font-family: var(--f-head); font-weight: 600; fill: var(--ink); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--map-halo, var(--map-plate)); stroke-width: 5px; stroke-linejoin: round; }
.mp-p__title { display: none; font: 600 6.5px/1 var(--f-ui); fill: var(--ink-2); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--map-halo, var(--map-plate)); stroke-width: 2px; letter-spacing: .02em; }
.is-z1 .mp-p__name { display: block; }
.is-z1 .mp-dot { opacity: .55; }
.is-z2 .mp-p__title { display: block; }
.mp-p--root .mp-p__name { display: block; font-size: 10px; }

.mp-dot { cursor: pointer; }
.mp-dot__c { fill: var(--sc); stroke: var(--map-plate); stroke-width: 1.4; }
.mp-dot[data-status="planned"] .mp-dot__c { fill: var(--map-plate); stroke: var(--sc); stroke-width: 2.4; stroke-dasharray: 3.4 2.2; }
.mp-dot[data-status="idea"] .mp-dot__c { fill: var(--map-plate); stroke: var(--sc); stroke-width: 2.6; stroke-dasharray: .01 3.2; stroke-linecap: round; }
.mp-dot[data-status="blocked"] .mp-dot__c, .mp-dot[data-status="parked"] .mp-dot__c { stroke: var(--sc); stroke-width: 1.8; }
.mp-dot[data-status="parked"] .mp-dot__c { stroke-dasharray: 2.6 1.6; }
.mp-dot__kids { fill: none; stroke: var(--sc); stroke-width: 1.2; opacity: .5; }
.mp-dot:hover .mp-dot__c { stroke: var(--ink); stroke-width: 2.4; }
.mp-dot.is-sel .mp-dot__c { stroke: var(--ink); stroke-width: 3.4; }
.mp-dot__lbl { display: none; font: 600 4.3px/1 var(--f-ui); fill: var(--ink); text-anchor: middle; pointer-events: none;
  paint-order: stroke; stroke: var(--map-halo, var(--map-plate)); stroke-width: 1.6px; stroke-linejoin: round; }
.is-z2 .mp-dot__lbl { display: block; }
.is-z2 .mp-dot { opacity: 1; }

.has-lens .mp-dot:not([data-lit]) { opacity: .14; }
.has-lens .mp-p:not([data-lit]) > .mp-p__plate { opacity: .45; }
.has-lens .mp-p:not([data-lit]) > .mp-p__donut { opacity: .15; }
.has-lens .mp-p:not([data-lit]) > .mp-p__name { opacity: .45; }
.has-lens .mp-d:not([data-lit]) > .mp-d__plate { fill: var(--map-plate); stroke-opacity: .2; }
.has-lens .mp-dot[data-lit] .mp-dot__c { stroke: var(--ink); stroke-width: 2; }

.mp-mark { cursor: pointer; }
.mp-mark__halo { fill: var(--card); stroke: var(--rule); stroke-width: 1; opacity: .95; }
.mp-mark__n { font: 700 11px/1 var(--f-num); fill: var(--ink); paint-order: stroke; stroke: var(--card); stroke-width: 3px; }

.has-pivot .mp-dot, .has-pivot .mp-p__plate { opacity: .5; }
.mp-arc { fill: none; stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linecap: round; pointer-events: none; }
.mp-arc--link { stroke: var(--ink-2); }
.mp-arc--back { stroke: var(--link); }
.mp-arc--tag { stroke: var(--s-idea); stroke-dasharray: 6 6; stroke-width: 1.8; opacity: .85; }
.mp-arc__end { fill: color-mix(in srgb, var(--card) 25%, transparent); stroke-width: 2.6; vector-effect: non-scaling-stroke; pointer-events: none; }
.mp-arc__end.mp-arc--link { stroke: var(--ink-2); }
.mp-arc__end.mp-arc--back { stroke: var(--link); }
.mp-arc__end.mp-arc--tag { stroke: var(--s-idea); }
.mp-arc__centre { fill: color-mix(in srgb, var(--ink) 8%, transparent); stroke: var(--ink); stroke-width: 4; vector-effect: non-scaling-stroke; pointer-events: none; }

.mp-top { position: absolute; left: 0; top: 0; right: 410px; display: flex; flex-direction: column; gap: 9px; pointer-events: none; z-index: 2;
  padding: 18px 22px 26px; background: linear-gradient(180deg, var(--map-ground) 0, color-mix(in srgb, var(--map-ground) 88%, transparent) 64%, transparent 100%); }
.mp-head { display: flex; align-items: baseline; gap: 4px 16px; flex-wrap: wrap; }
.mp-kicker { width: 100%; font: 600 11px/1 var(--f-num); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.mp-h1 { margin: 0; font: 600 30px/1.05 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.mp-hint { font: italic 14px/1.3 var(--f-text); color: var(--ink-3); }
.mp-lenses { display: flex; flex-wrap: wrap; gap: 5px; pointer-events: auto; }
.mp-lens { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 8px; border-radius: 99px; border: 1px solid var(--rule);
  background: var(--card); font: 600 12px/1 var(--f-ui); color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow); }
.mp-lens b { font: 700 12px/1 var(--f-num); color: var(--ink); }
.mp-lens:hover { border-color: var(--ink-3); color: var(--ink); }
.mp-lens.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-ink, var(--card)); }
.mp-lens.is-on b { color: var(--yellow); }
.mp-lens.is-on .mk { color: var(--on-ink, var(--card)) !important; }
.mp-lens:focus-visible, .mp-btn:focus-visible, .mp-door:focus-visible, .mp-zoom button:focus-visible, .mp-fold:focus-visible { outline: 2px solid var(--focus, var(--link)); outline-offset: 2px; }

.mp-panel { position: absolute; right: 16px; top: 16px; bottom: 16px; width: 372px; overflow-y: auto; z-index: 3; cursor: auto; user-select: text; -webkit-user-select: text;
  background: var(--card); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-lift); scrollbar-width: thin;
  transition: transform .26s cubic-bezier(.2, .7, .2, 1), opacity .26s; }
.mp-panel__in { padding: 18px 20px 22px; }
.mp-crumbs { font: 12.5px/1.4 var(--f-ui); color: var(--ink-3); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 2px 6px; }
.mp-crumbs a { color: var(--ink-2); text-decoration: none; }
.mp-crumbs a:hover { text-decoration: underline; color: var(--link); }
.crumbbar ~ .mp-page .mp-panel .mp-crumbs { display: none; }
.mp-panel__head { display: flex; gap: 12px; align-items: center; }
.mp-panel__med { flex: none; width: 64px; height: 64px; }
.mp-panel__k { font: 600 10.5px/1 var(--f-num); letter-spacing: .18em; text-transform: uppercase; color: var(--ac, var(--ink-3)); margin-bottom: 4px; }
.mp-panel__title { font: 600 25px/1.1 var(--f-head); margin: 0 0 6px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mp-count { font: 700 14px/1 var(--f-num); padding: 3px 8px; border-radius: 99px; background: var(--paper-2); color: var(--ink-2); }
.mp-panel__state { margin: 12px 0 0; font: italic 14.5px/1.5 var(--f-text); color: var(--ink-2); }
.mp-panel__sum { margin: 10px 0 0; font: 15px/1.55 var(--f-text); color: var(--ink-2); }
.mp-panel__roll { margin: 14px 0 0; }
.mp-flags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 12px 0 0; font: 13px/1.3 var(--f-ui); color: var(--ink-2); }
.mp-asks { font: italic 13px/1.3 var(--f-text); color: var(--ink-3); }
.mp-panel__btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 4px; }
.mp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 99px; border: 1px solid var(--rule); background: var(--card);
  font: 600 13px/1 var(--f-ui); color: var(--ink); text-decoration: none; cursor: pointer; }
.mp-btn:hover { border-color: var(--ink-3); }
.mp-btn--go { background: var(--ink); border-color: var(--ink); color: var(--on-ink, var(--card)); }
.mp-btn--go:hover { background: var(--ink-2); }
.mp-btn.is-on { border-color: var(--s-in-flight); background: color-mix(in srgb, var(--s-in-flight) 14%, var(--card)); }
.mp-grp { margin-top: 18px; }
.mp-grp__h { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font: 600 10.5px/1.2 var(--f-num); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.mp-grp__h i { width: 9px; height: 9px; border-radius: 3px; background: var(--ac); }
.mp-chips { display: flex; flex-direction: column; gap: 2px; }
.mp-chip { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 8px;
  text-decoration: none; color: var(--ink); font: 13.5px/1.3 var(--f-ui); }
.mp-chip:hover { background: var(--paper-2); }
.mp-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-chip em { font: 600 10.5px/1 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-style: normal; }
.mp-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.mp-num { padding: 9px 10px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--rule-2); }
.mp-num b { display: block; font: 600 19px/1.1 var(--f-num); color: var(--ink); }
.mp-num b small { font: 600 11px var(--f-num); color: var(--ink-3); margin-left: 3px; }
.mp-num span { display: block; margin-top: 3px; font: 12px/1.35 var(--f-ui); color: var(--ink-2); }
.mp-recs { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.mp-rec { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font: 13.5px/1.45 var(--f-text); color: var(--ink-2); }
.mp-rec > span { display: grid; gap: 3px; }
.mp-rec__t { color: var(--ink); }
.mp-rec__why { font: 600 11px/1.3 var(--f-num); letter-spacing: .06em; text-transform: uppercase; color: var(--s-blocked); }
.mp-rec__on { font: 12px/1.4 var(--f-ui); color: var(--ink-3); }
.mp-rec__on a { color: var(--ink-2); }
.mp-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mp-log li { display: grid; grid-template-columns: 52px 1fr; gap: 8px; font: 13px/1.4 var(--f-ui); }
.mp-log span { font: 600 11px/1.5 var(--f-num); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.mp-log a { color: var(--ink); text-decoration: none; }
.mp-log a:hover { color: var(--link); text-decoration: underline; }
.mp-more { display: inline-block; margin-top: 12px; font: 600 13px/1.3 var(--f-ui); color: var(--link); text-decoration: none; }
.mp-more:hover { text-decoration: underline; }
.mp-quiet { font: 13px/1.45 var(--f-ui); color: var(--ink-3); }
.mp-quiet a { color: var(--link); }
.mp-empty { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--good-bg, var(--paper-2)); font: 14px/1.5 var(--f-text); color: var(--ink-2); }
.mp-sub { margin: 20px 0 4px; padding-top: 12px; border-top: 1px dashed var(--rule); }
.mp-pivot { margin-top: 16px; padding-top: 12px; border-top: 1.5px solid var(--rule); }
.mp-pivot__h { font: 600 10.5px/1 var(--f-num); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.mp-tags { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font: 12px/1.3 var(--f-mono); color: var(--s-idea); }
.mp-doors { margin-top: 18px; display: grid; gap: 8px; }
.mp-door { display: grid; grid-template-columns: 22px 40px 1fr; gap: 0 8px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--rule);
  background: var(--card); cursor: pointer; color: var(--ink); font: inherit; }
.mp-door:hover { border-color: var(--s-blocked); }
.mp-door > .mk { grid-row: 1 / span 2; color: var(--s-decision, var(--s-blocked)); }
.mp-door b { grid-row: 1 / span 2; font: 600 28px/1 var(--f-num); color: var(--ink); text-align: center; }
.mp-door span { font: 600 14px/1.3 var(--f-ui); color: var(--ink); }
.mp-door em { grid-column: 3; font: 12.5px/1.4 var(--f-ui); color: var(--ink-3); font-style: normal; }

.mp-card { position: absolute; left: 0; top: 0; z-index: 5; width: max-content; max-width: 320px; padding: 11px 13px 12px; border-radius: 12px; pointer-events: none;
  background: var(--card); border: 1px solid var(--rule); box-shadow: var(--shadow-lift); color: var(--ink); will-change: transform; }
.mp-card[hidden] { display: none; }
.mp-card__k { font: 600 10px/1 var(--f-num); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.mp-card__t { display: flex; align-items: center; gap: 7px; font: 600 15.5px/1.25 var(--f-head); }
.mp-card__s { margin: 6px 0 0; font: 13.5px/1.45 var(--f-text); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mp-card__in { margin-top: 7px; font: 12.5px/1.4 var(--f-ui); color: var(--ink-2); }
.mp-card__in b { color: var(--ink); font-weight: 600; }
.mp-card__d { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 7px; font: 12.5px/1.3 var(--f-ui); color: var(--ink-2); }

.mp-zoom { position: absolute; right: 412px; bottom: 18px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.mp-zoom button { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--rule); background: var(--card);
  font: 600 18px/1 var(--f-num); color: var(--ink-2); cursor: pointer; box-shadow: var(--shadow); }
.mp-zoom button:hover { color: var(--ink); border-color: var(--ink-3); }
.mp-legend { position: absolute; left: 14px; bottom: 12px; max-width: calc(100% - 480px); display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; z-index: 2;
  font: 12px/1.2 var(--f-ui); color: var(--ink-2); pointer-events: none; padding: 7px 12px; border-radius: 12px; background: color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid var(--rule); box-shadow: var(--shadow); }
.mp-legend .mk-legend { display: contents; }
.mp-legend .mk, .mp-legend .mk * { animation: none !important; }   
.mp-fold { position: absolute; right: 388px; top: 30px; z-index: 4; width: 26px; height: 44px; border-radius: 10px 0 0 10px; border: 1px solid var(--rule);
  border-right: 0; background: var(--card); color: var(--ink-2); font: 600 18px/1 var(--f-num); cursor: pointer; box-shadow: var(--shadow); }
.mp-fold:hover { color: var(--ink); }
.mp.is-folded .mp-panel { transform: translateX(calc(100% + 24px)); opacity: 0; pointer-events: none; visibility: hidden; }
.mp.is-folded .mp-fold { right: 0; }
.mp.is-folded .mp-fold span { display: inline-block; transform: rotate(180deg); }
.mp.is-folded .mp-zoom { right: 18px; }
.mp.is-folded .mp-top { right: 44px; }
.mp.is-folded .mp-legend { max-width: calc(100% - 90px); }

@media (max-width: 900px) {
  .mp-top { right: 0; }
  .mp-panel { left: 12px; right: 12px; top: auto; width: auto; height: 46%; }
  .mp-fold, .mp-legend { display: none; }
  .mp-zoom { right: 18px; bottom: calc(46% + 28px); }
}

.mp-static { display: block; width: 100%; height: auto; font-family: var(--f-ui); }
.mp-static .mp-dlink { cursor: pointer; }
.mp-static .mp-dlink:hover .mp-d__plate { fill: color-mix(in srgb, var(--ac) 12%, var(--map-plate)); }
.mp-static .mp-dlink:hover .mp-sign__board { stroke: var(--ac); }
.mp-dz__ground { fill: var(--map-ground); }
.mp-dz .mp-p__name { display: block; }
.mp-dz.is-small .mp-p__seg { stroke-width: 12; }
.mp-dz.has-focus .mp-p:not([data-focus]) { opacity: .45; }
.mp-dz.has-focus .mp-dot:not([data-focus]) { opacity: .35; }
.mp-dz.has-focus .mp-p[data-focus="me"] > .mp-p__plate { stroke: var(--ink); stroke-opacity: .9; stroke-width: 6; }
.mp-dz__here { fill: none; stroke: var(--ink); stroke-width: 5; vector-effect: non-scaling-stroke; }
.mp-dz.is-small .mp-dz__here { stroke-width: 3; }

.rail .minimap { flex-shrink: 0; }
.mm { display: block; width: 100%; height: auto; max-height: 132px; }
.mm__hub { fill: var(--lawn-lit); opacity: .6; }
.mm__hub.is-here { opacity: 1; stroke: var(--ink); stroke-width: 30; }
.mm__d { fill: color-mix(in srgb, var(--ac) 26%, var(--map-plate)); stroke: var(--ac); stroke-opacity: .55; stroke-width: 18; }
.mm__d.is-here { fill: color-mix(in srgb, var(--ac) 55%, var(--map-plate)); stroke: var(--ink); stroke-opacity: 1; stroke-width: 34; }
.mm__pin path { fill: var(--s-blocked); stroke: var(--card); stroke-width: 18; }
.mm__pin circle { fill: var(--card); }

@media (prefers-reduced-motion: reduce) { .mp-svg { will-change: auto; } .mp-panel { transition: none; } }
body.still .mp-panel { transition: none; }