#map .map-wrap { display: grid; gap: 20px; }
#map .map-top { display: grid; gap: 12px; }
#map .map-modes { justify-self: start; }
#map .map-phases { display: flex; }
#map .map-phases > .btn { flex: 1 1 auto; min-width: 0; justify-content: center; text-align: center; margin: -1px 0 0 -1px; border-top: 1px solid var(--ink-2); border-left: 1px solid var(--ink-2); }
#map .map-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px 44px; }
#map .map-main { flex: 999 1 640px; min-width: 0; display: grid; align-content: start; }
#map .map-aside { flex: 1 1 336px; min-width: 0; display: grid; gap: 32px; align-content: start; }
#map .map-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 14px; min-height: 38px; }
#map .map-views[hidden] { display: none; }
#map .map-fog { margin: 0; min-height: 1.45em; flex: 1 1 280px; min-width: 0; }
#map .map-figure { gap: 14px; }
#map .map-plate { aspect-ratio: 3 / 2; touch-action: manipulation; }
#map .map-stage { position: absolute; inset: 0; }
#map .map-lines { pointer-events: none; }
#map .map-layer-pts, #map .map-layer-pins, #map .map-layer-labels { position: absolute; inset: 0; pointer-events: none; }
#map .map-pin { left: 0; top: 0; }
#map .map-pin .dot { pointer-events: auto; }
#map .map-mk { display: block; width: 24px; height: 24px; }
#map .map-mk svg { display: block; overflow: visible; }
#map .map-label { left: 0; top: 0; }
#map .map-label[data-pin] { pointer-events: auto; cursor: pointer; }
#map .map-label-l { text-align: right; }
#map .map-label-c { text-align: center; }
#map .map-label-place { font-weight: 400; color: var(--ink-2); }
#map .map-label-op { font-weight: 600; }
#map .map-pt { position: absolute; left: 0; top: 0; width: 0; height: 0; }
#map .map-pt-mk { position: absolute; display: block; box-sizing: border-box; pointer-events: auto; }
#map .map-pt-place .map-pt-mk { left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 1px var(--paper); }
#map .map-pt-line .map-pt-mk { left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
#map .map-pt-pos .map-pt-mk { left: -4.5px; top: -4.5px; width: 9px; height: 9px; background: var(--paper); border: 2px solid var(--ink); }
#map .map-pt-op .map-pt-mk { left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; box-shadow: 0 0 0 1px var(--paper), inset 0 0 0 1px var(--paper); }
#map .map-pt-op-allies { color: var(--allies); }
#map .map-pt-op-axis { color: var(--axis); }
#map .map-legend-pt { position: relative; display: inline-block; flex: none; width: 16px; height: 16px; }
#map .map-legend-pt .map-pt-mk { pointer-events: none; transform: translate(8px, 8px); }
#map .map-route { fill: none; stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
#map .map-route-plan { fill: none; stroke-width: 1.3; stroke-dasharray: 1 4; stroke-linecap: round; opacity: .8; }
#map .map-pulse { fill: none; stroke-width: 2; pointer-events: visibleStroke; }
#map .map-fl, #map .map-lm { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
#map .map-fl { stroke-width: 2.4; }
#map .map-lm { stroke-width: 2; stroke-dasharray: 7 3; }
#map .map-fl.is-on, #map .map-lm.is-on { opacity: 1; pointer-events: visibleStroke; }
#map .ln-allies { stroke: var(--allies); }
#map .ln-axis { stroke: var(--axis); }
#map .ln-ink { stroke: var(--ink); }
#map .ln-ink2 { stroke: var(--ink-2); }
#map .mk-allies, #map .mk-axis { stroke: var(--paper); stroke-width: 1.5; stroke-linejoin: round; }
#map .mk-allies { fill: var(--allies); }
#map .mk-axis { fill: var(--axis); }
#map .mk-allies-o, #map .mk-axis-o { fill: var(--sea); stroke-width: 1.5; stroke-linejoin: round; }
#map .mk-allies-o { stroke: var(--allies); }
#map .mk-axis-o { stroke: var(--axis); }
#map .mk-in { fill: none; stroke: var(--paper); stroke-width: 1.2; }
#map .mk-ink { fill: var(--ink-2); stroke: var(--paper); stroke-width: 1.5; }
#map .map-pin.is-last .map-mk { opacity: .5; }
#map .map-legend-unit { position: relative; display: inline-block; flex: none; width: 22px; height: 24px; }
#map .map-legend-unit .map-mk { width: 22px; height: 24px; }
#map .mk-in-f { fill: var(--paper); }
#map .mk-staff { fill: none; stroke-width: 1.8; stroke-linecap: square; }
#map .mk-halo { fill: none; stroke: var(--paper); stroke-width: 4; }
#map .mk-tgt { fill: none; stroke-width: 1.8; }
#map .mk-rep { fill: var(--paper); stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 2.5 1.6; }
#map .mk-off { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#map .mk-off-ink { stroke: var(--ink); }
#map .mk-off-allies { stroke: var(--allies); }
#map .mk-off-axis { stroke: var(--axis); }
#map .lg-route { fill: none; stroke-width: 2; stroke-dasharray: 6 4; }
#map .lg-fl { fill: none; stroke: var(--ink); stroke-width: 2.4; }
#map .lg-lm { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 7 3; }
#map .lg-pulse { fill: none; stroke: var(--ink-2); stroke-width: 2; }
#map .lg-arrow { fill: none; stroke-width: 1.6; }
#map .map-controls { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 22px; }
#map .map-play { justify-content: center; min-width: 6em; }
#map .map-play svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
#map .map-play[data-state="playing"] svg { stroke-width: 1.8; }
#map .map-speed { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
#map .map-speed-k { font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .1em; line-height: 1.5; color: var(--muted); }
#map .map-scrub { flex: 1 1 280px; min-width: 0; display: grid; padding-top: 8px; }
#map .map-slider { position: relative; z-index: 1; }
#map .map-ticks { margin: -6px 4.5px 0; }
#map .map-ticks .tick { margin-left: -1px; }
#map .map-ticks .tick.is-now { height: 12px; }
#map .map-hour { white-space: nowrap; }
#map .map-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; min-height: 24px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
#map .map-legend-i { display: inline-flex; align-items: center; gap: 9px; }
#map .map-legend svg { flex: none; display: block; overflow: visible; }
#map .map-sec { margin-top: 44px; }
#map .map-sec[hidden] { display: none; }
#map .map-sec-list { display: grid; border-bottom: 1px solid var(--hairline); }
#map .map-sec-none { margin: 8px 0 10px; font-size: 16.5px; font-style: italic; line-height: 1.5; color: var(--muted); }
#map .map-row { border-top: 1px solid var(--hairline); }
#map .map-row:first-child { border-top: 0; }
#map .map-row-s { cursor: pointer; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; padding: 9px 0 10px; }
#map .map-row-plus { align-self: center; width: 16px; height: 16px; box-sizing: border-box; border: 1px solid var(--ink-2); background: var(--panel); display: grid; place-items: center; }
#map .map-row-plus svg { display: block; fill: none; stroke: var(--ink-2); stroke-width: 1.3; }
#map .map-row[open] > summary .more-v { display: none; }
#map .map-row-s:hover .map-row-plus { background: var(--wash); }
#map .map-row-s:hover .map-row-n > span:last-child { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#map .map-row-n { display: inline-flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 17px; font-weight: 500; line-height: 1.45; }
#map .map-row-n svg, #map .map-row-n .sw { flex: none; align-self: center; }
#map .map-row-k { display: inline-flex; align-items: baseline; gap: 8px; font-size: 16px; font-style: italic; line-height: 1.45; color: var(--muted); text-align: right; }
#map .map-row-k .sw { align-self: center; }
#map .map-row-b { display: grid; gap: 6px; padding: 0 0 14px 30px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); max-width: 820px; }
#map .map-row-b p { margin: 0; }
#map .map-aside p { margin: 0; }
#map .map-moment { display: grid; gap: 14px; }
#map .map-clock { display: grid; gap: 4px; }
#map .map-phase { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--rule); }
#map .map-phase-sum { font-size: 17px; line-height: 1.5; color: var(--ink-2); }
#map .map-now { display: grid; gap: 6px; padding-top: 12px; border-top: 3px double var(--ink-2); }
#map .map-now-k { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .06em; line-height: 1.5; color: var(--muted); }
#map .map-now-t { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; }
#map .map-now-x { display: grid; gap: 6px; font-size: 17px; line-height: 1.5; }
#map .map-now-none { font-size: 17px; font-style: italic; line-height: 1.5; color: var(--muted); }
#map .map-q { font-style: italic; }
#map .map-q-tr { font-size: 16.5px; color: var(--ink-2); }
#map .map-q-by { font-size: 16px; font-style: italic; color: var(--muted); }
#map .map-msg { margin-top: 4px; padding: 10px 14px 11px; display: grid; gap: 4px; }
#map .map-msg-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .08em; line-height: 1.4; color: var(--muted); }
#map .map-msg-b { font-size: 16.5px; line-height: 1.5; }
#map .map-also { display: grid; justify-items: start; gap: 2px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--hairline); }
#map .map-also-k { font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .06em; line-height: 1.5; color: var(--muted); }
#map .map-also-b { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 17px; line-height: 1.5; text-align: left; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--muted); text-underline-offset: 3px; }
#map .map-also-b:hover { text-decoration-thickness: 2px; text-decoration-color: var(--ink); }
#map .map-card { display: grid; }
#map .map-card[hidden] { display: none; }
#map .map-knew-i, #map .map-front-i { display: grid; gap: 3px; padding: 10px 0 9px; border-bottom: 1px solid var(--hairline); }
#map .map-knew-t { font-size: 17px; font-weight: 600; line-height: 1.4; }
#map .map-knew-k, #map .map-rep-k { font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .06em; line-height: 1.45; color: var(--muted); }
#map .map-knew-x { display: grid; gap: 4px; font-size: 16.5px; line-height: 1.5; }
#map .map-front-d { padding-top: 8px; font-size: 17px; font-weight: 600; line-height: 1.4; }
#map .map-front-c { font-size: 17px; font-weight: 500; line-height: 1.45; }
#map .map-front-w { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
#map .map-card-rows { display: grid; margin-top: 4px; border-bottom: 1px solid var(--hairline); }
#map .map-card-rows .map-row-b { padding-left: 0; }
#map .map-card-rows .map-row-n { font-size: 16.5px; font-weight: 400; }
#map .map-card .details, #map .map-det-wide .details { margin-top: 2px; border-top: 0; }
#map .map-card .details > .more { padding: 6px 0 4px; font-size: 16px; gap: 10px; }
#map .map-card .details > .more .more-box { width: 16px; height: 16px; }
#map .map-card .more-body { display: block; padding: 0 0 6px; }
#map .map-rep-l { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
#map .map-rep-l > li { padding-top: 6px; border-top: 1px solid var(--hairline); }
#map .map-rep-l > li.is-future { color: var(--muted); }
#map .map-rep-c { font-weight: 600; color: var(--ink); }
#map .map-rep-n::before { content: "· "; }
#map .map-de + .map-de::before { content: "; "; }
#map .more-body .map-rep-c { font-variant-caps: normal; letter-spacing: 0; }
#map .map-det-wide { grid-column: 1 / -1; display: grid; gap: 6px; }
#map .map-log-wrap { display: grid; }
#map .map-log-h { margin-bottom: 12px; }
#map .map-log { max-height: 380px; overflow-y: auto; background: var(--panel); border: 1px solid var(--rule); }
#map .map-log-list { display: grid; }
#map .map-log-row { padding: 7px 12px 8px; }
#map .map-log-list > :first-child.map-log-row, #map .map-log-list > :first-child .map-log-row { border-top: 0; }
#map .map-log-k { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 500; font-variant-caps: all-small-caps; letter-spacing: .06em; line-height: 1.35; color: var(--muted); }
#map .map-log-t { font-size: 17px; line-height: 1.4; }
#map .map-log-row.is-future .map-log-t { color: var(--muted); }
#map .map-log-row:focus-visible { outline-offset: -3px; }
#map .map-log-row[aria-pressed="true"]:focus-visible { outline-color: var(--paper); }
#map .map-log-g { padding: 10px 12px 4px; border-top: 1px solid var(--rule); font-size: 16px; font-weight: 600; font-variant-caps: all-small-caps; letter-spacing: .08em; line-height: 1.4; color: var(--ink-2); }
#map .map-log-list > .map-log-g:first-child { border-top: 0; }
#map .map-log-s { display: grid; gap: 1px; cursor: pointer; border-top: 1px solid var(--hairline); }
#map .map-log-s:hover { background: var(--wash); }
#map .map-log-x { display: grid; gap: 4px; padding: 0 12px 10px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }
#map .map-log-x p { margin: 0; }
@media (forced-colors: active) {
  #map .map-pt-mk, #map .map-legend-pt { forced-color-adjust: none; }
}