.sitemap-main { --map-line: #8bacc9; color: #f4f5fa; background: var(--palette-primary, #081b33); padding: 52px 0 48px; }
.sitemap-intro { max-width: 980px; padding: 0 24px; margin: 0 auto 30px; text-align: center; }
.sitemap-intro .eyebrow { font-size: .875rem; }
.sitemap-intro h1 { color: #fff; font-size: clamp(3rem, 6.5vw, 5.5rem); font-weight: 300; letter-spacing: -.035em; line-height: 1.1; }
.sitemap-intro > p:not(.eyebrow) { color: #c6cce0; font-size: 1rem; margin: 18px 0; }
.map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; color: #d8ddef; font-size: .875rem; }
.map-legend span { display: inline-flex; align-items: center; gap: 10px; }
.map-legend i { display: block; width: 34px; border-top: 2px solid var(--map-line); }
.map-legend .legend-route { border-top: 2px dashed #73e4f0; }
.map-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.map-selection { max-width: 1050px; margin: 0 auto 20px; padding: 18px 24px; border: 1px solid #3b5c7c; border-radius: 8px; background: var(--palette-dark, #040f21); }
.map-selection[hidden] { display: none; }
.map-selection-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.map-overline { color: #aeb9d3; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; }
.map-selection h2 { color: #fff; font-size: 1.375rem; margin-top: 3px; }
.map-selection-heading > a { padding: 10px 14px; color: #73e4f0; font-size: .9375rem; font-weight: 650; border: 1px solid #566581; border-radius: 5px; }
.map-selection > p { margin: 12px 0 10px; font-size: .9375rem; color: #d3d9e9; }
.map-destinations { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.map-destinations a { display: block; padding: 9px 12px; border-radius: 5px; color: #e8fcff; background: #35465c; font-size: .875rem; line-height: 1.5; }
.map-destinations a strong { display: block; }
.map-destinations a span { display: block; color: #ccdbe8; font-size: .8125rem; }
.map-destinations a:hover, .map-selection-heading > a:hover { background: #415872; }
.map-scroll-hint { color: #c6cce0; margin: 20px 24px 8px; text-align: center; font-size: .875rem; }
.map-scroll { width: calc(100% - 32px); max-width: 1160px; margin: 0 auto; overflow-x: auto; scrollbar-color: #8493b6 var(--palette-primary, #081b33); scrollbar-width: auto; border-radius: 6px; }
.map-board { position: relative; min-width: 890px; padding: 18px 34px 28px; }
.map-tree, .map-branches, .map-children { list-style: none; padding: 0; margin: 0; }
.map-root { position: relative; width: 166px; margin: 0 auto; padding-bottom: 74px; }
.map-root::after { content: ''; position: absolute; width: 2px; background: var(--map-line); height: 38px; bottom: 36px; left: calc(50% - 1px); }
.map-branches { --branch-gap: 32px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--branch-gap); position: relative; }
.map-branches::before { content: ''; position: absolute; top: -38px; height: 2px; background: var(--map-line); left: calc((100% - 4 * var(--branch-gap)) / 10); right: calc((100% - 4 * var(--branch-gap)) / 10); }
.map-branch { min-width: 0; position: relative; }
.map-branch::before { content: ''; position: absolute; width: 2px; height: 38px; left: calc(50% - 1px); top: -38px; background: var(--map-line); }
.map-card { position: relative; z-index: 2; --tone: #ffae48; color: #19253c; background: #353e5d; border: 1px solid #485370; border-radius: 3px; box-shadow: 0 8px 22px #0c10232b; }
.tone-orange { --tone: #ffa039; }.tone-cyan { --tone: #55c6e1; }.tone-coral { --tone: #ef8298; }.tone-teal { --tone: #53c9c2; }.tone-purple { --tone: #b9a0ee; }.tone-gold { --tone: #f7c363; }.tone-blue { --tone: #80b2ef; }
.map-select, .map-menu-face { width: 100%; margin: 0; display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; }
.map-select { cursor: pointer; }
.map-select:disabled { cursor: default; opacity: 1; }
.map-card-head { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 7px; min-height: 99px; padding: 10px 8px 13px; background: var(--tone); border-radius: 2px 2px 0 0; }
.map-card-title { display: flex; align-items: center; justify-content: center; min-height: 34px; font-size: .875rem; font-weight: 650; line-height: 1.2; }
.map-icon { display: block; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.map-preview { height: 62px; padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; overflow: hidden; }
.map-preview i, .map-preview b { display: block; min-width: 0; }
.map-preview i { height: 21px; background: var(--tone); opacity: .75; }
.map-preview b { height: 12px; background: repeating-linear-gradient(to bottom, #8795b54d 0 2px, transparent 2px 5px); }
.preview-list { grid-template-columns: 14px 1fr; gap: 5px 8px; }
.preview-list i { height: 9px; grid-column: 1; }
.preview-list i:nth-child(1) { grid-row: 1; }.preview-list i:nth-child(2) { grid-row: 2; }.preview-list i:nth-child(3) { grid-row: 3; }
.preview-list b { height: 9px; grid-column: 2; }
.preview-list b:nth-child(4) { grid-row: 1; }.preview-list b:nth-child(5) { grid-row: 2; }.preview-list b:nth-child(6) { grid-row: 3; }
.preview-split { grid-template-columns: 2fr 3fr; }
.preview-split i:first-child { grid-row: 1 / 4; height: 40px; }
.preview-split i:not(:first-child) { display: none; }
.preview-split b { grid-column: 2; height: 9px; }
.preview-form { grid-template-columns: 1fr; gap: 5px; }
.preview-form i { height: 9px; background: #d4ddec; }
.preview-form b { display: none; }
.map-open, .map-menu-label { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 36px; padding: 7px 5px; border-top: 1px solid #4c5876; color: #e9eefb; background: #2c3551; font-size: .875rem; line-height: 1.3; }
.map-menu-label { font-size: .75rem; color: #c9d1e5; }
.map-open:hover { color: #fff; background: #435171; text-decoration: underline; text-underline-offset: 3px; }
.map-card.is-selected { outline: 3px solid #fff; outline-offset: 4px; }
.map-card.is-destination { outline: 2px solid #73e4f0; outline-offset: 3px; }
.map-select:not(:disabled):hover .map-card-head { filter: brightness(1.1); }
.sitemap-main a:focus-visible, .sitemap-main button:focus-visible, .map-scroll:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.map-children { position: relative; margin-top: 34px; }
.map-children::before { content: ''; position: absolute; top: -34px; left: 2px; width: calc(50% - 2px); height: 17px; border-bottom: 2px solid var(--map-line); border-right: 2px solid var(--map-line); }
.map-children > li { position: relative; padding: 0 0 32px 16px; }
.map-children > li::before { content: ''; position: absolute; left: 2px; top: -17px; bottom: 0; width: 2px; background: var(--map-line); }
.map-children > li:last-child::before { bottom: auto; height: 99px; }
.map-children > li::after { content: ''; position: absolute; left: 2px; top: 82px; height: 2px; width: 14px; background: var(--map-line); }
.map-children .map-card-head { min-height: 87px; padding-bottom: 10px; }
.map-children .map-icon { width: 29px; height: 29px; }
.map-children .map-preview { height: 52px; padding: 8px; }
.map-routes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.map-routes path.map-route { fill: none; stroke: #73e4f0; stroke-width: 2; stroke-dasharray: 6 5; stroke-linejoin: round; marker-end: url(#route-arrow); }
.map-shared-note { max-width: 980px; padding: 0 24px; margin: 26px auto 0; color: #c6cce0; font-size: .9375rem; text-align: center; }
@media (min-width: 960px) { .map-scroll-hint { visibility: hidden; height: 0; margin: 0; } }
@media (max-width: 1100px) { .map-selection { margin-left: 24px; margin-right: 24px; } }
@media (max-width: 620px) { .sitemap-main { padding-top: 36px; }.map-selection { padding: 16px; margin-left: 16px; margin-right: 16px; }.map-selection-heading { align-items: flex-start; gap: 12px; }.map-selection-heading > a { white-space: nowrap; }.map-destinations { display: grid; grid-template-columns: 1fr; }.map-scroll { width: calc(100% - 16px); } }