:root { color-scheme: dark; background: #10141a; color: #f2f4f7; font: 16px/1.6 system-ui, sans-serif; }
body { max-width: 660px; padding: 24px; margin: auto; }
a { color: #b9f779; }
main { margin: 40px 0; }
h1 { font-size: 2rem; line-height: 1.15; }
h2 { margin-top: 1.5rem; font-size: 1.2rem; }
p { color: #c3cbd6; }
footer { border-top: 1px solid #3c4654; padding-top: 8px; font-size: .85rem; }

.map-guide { max-width: 900px; }
.map-guide :focus-visible { outline: 2px solid #b9f779; outline-offset: 4px; }
.map-skip { position: absolute; left: -999px; }
.map-skip:focus { left: 24px; top: 12px; background: #10141a; }
.map-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 24px; }
.map-header a { text-decoration: none; }
.map-header a:hover, .map-header a[aria-current] { text-decoration: underline; }
.map-header nav, .map-contents { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.map-brand { color: #f2f4f7; font-weight: 750; }
.map-guide h1 { margin-bottom: 10px; font-size: clamp(2rem, 5vw, 3.2rem); }
.map-lead { max-width: 58ch; font-size: 1.05rem; }
.map-contents { margin: 24px 0; }
.map-section { border-top: 1px solid #3c4654; margin-top: 28px; }
.map-steps { padding-left: 1.5rem; }
.map-steps li + li { margin-top: 6px; }
.map-routes { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
.map-routes th, .map-routes td { padding: 12px 10px; border-bottom: 1px solid #3c4654; vertical-align: top; }
.map-routes th:first-child { width: 26%; overflow-wrap: break-word; }
.map-routes thead { background: #191f28; }
.map-route-exit { display: block; margin-top: 5px; color: #c3cbd6; font-size: .9rem; }
.map-landmarks, .map-sprites { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.map-landmarks div, .map-sprite { background: #191f28; border: 1px solid #3c4654; border-radius: 9px; padding: 10px 12px; }
.map-landmarks dt { font-weight: 700; }
.map-landmarks dd { margin: 2px 0 0; color: #c3cbd6; }
.map-sprites { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.map-sprites legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.map-sprites label { display: flex; align-items: center; gap: 10px; min-height: 32px; font-weight: 700; cursor: pointer; }
.map-sprites input { accent-color: #b9f779; width: 19px; height: 19px; margin: 0; }
.map-sprite p { margin: 6px 0; font-size: .94rem; }
.map-sprite .map-sprite-use { color: #aab7c6; font-size: .86rem; }
.map-sources { font-size: .85rem; }