#regional-exploration { width:min(470px, calc(100vw - 24px)); max-height:min(72dvh, 560px) }
#regional-exploration .rx-head { display:flex; align-items:center; justify-content:space-between; gap:8px }
#regional-exploration .rx-head strong { font:600 15px/1.2 Fraunces, Georgia, serif; letter-spacing:.2px }
#regional-exploration .rx-toggle { min-height:36px; padding:4px 10px; font-size:12px }
#regional-exploration[data-collapsed=true] .rx-body { display:none }
#regional-exploration[data-collapsed=true] { padding:6px 10px }
.rx-map { margin:8px 0 0; padding:0 }
.rx-map[hidden] { display:none }
.rx-facts { display:flex; flex-wrap:wrap; gap:4px 14px; margin:0 0 6px; font:600 13px/1.3 "DM Sans", system-ui, sans-serif }
.rx-facts span { color:#9fd8cc; font-weight:500 }
.rx-svg { display:block; width:100%; height:auto; border:1px solid #2dd4bf66; border-radius:8px; background:#0d2a3a }
.rx-svg .sea { fill:#0d2a3a }
.rx-svg .land { fill:#2a4a3c; stroke:#6fa58c; stroke-width:.6 }
.rx-svg .grid { stroke:#ffffff22; stroke-width:.6; fill:none }
.rx-svg .gridlbl { fill:#9fd8cc; font:9px "DM Sans", system-ui, sans-serif }
.rx-svg .route { fill:none; stroke:#f5c46b; stroke-width:2.4; stroke-linecap:round }
.rx-svg .route.draw { stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:rx-draw 1.6s ease-out forwards }
.rx-svg .site { fill:#effffc; stroke:#081622; stroke-width:1.2 }
.rx-svg .site.end { fill:#f5c46b }
.rx-svg .site.other { fill:#9fd8cc; opacity:.7 }
.rx-svg .lbl { fill:#effffc; font:600 10px "DM Sans", system-ui, sans-serif; paint-order:stroke; stroke:#081622; stroke-width:3px }
.rx-svg .north { fill:#effffc; font:700 10px system-ui }
.rx-svg .scale { stroke:#effffc; stroke-width:1.5 }
.rx-svg .warn { fill:#f5c46b; font:600 10px system-ui }
.rx-note { margin:5px 0 0!important; font-size:11px; color:#bde7dc }
.rx-note strong { color:#f5c46b }
.rx-water-toggle { display:flex; align-items:center; gap:7px; min-height:36px; font-size:12px; cursor:pointer }
.rx-water-toggle input { width:18px; height:18px; accent-color:#2dd4bf }
.rx-water-legend { display:flex; flex-wrap:wrap; gap:5px 12px; font-size:11px!important }
.rx-water-legend[hidden] { display:none }
.rx-water-legend span::before { content:""; display:inline-block; width:15px; height:7px; margin-right:5px; vertical-align:middle }
.rx-water-legend .river-key::before { height:2px; background:#8cddff }
.rx-water-legend .lake-key::before { background:#347399; border:1px dashed #b0e5ff }
.rx-water-legend .saline-key::before { background:#566c91; border:1px dashed #e7c9ff }
.rx-water-legend .sea-key::before { background:#0d2a3a; border:1px solid #97becd }
.rx-svg .water-river { fill:none; stroke:#8cddff; stroke-width:1.15 }
.rx-svg .water-lake { fill:#347399; stroke:#b0e5ff; stroke-width:.7; stroke-dasharray:2 1; fill-rule:evenodd }
.rx-svg .water-lake.saline { fill:#566c91; stroke:#e7c9ff }
.rx-svg .water-label { fill:#b9ecff; font:9px system-ui,sans-serif; paint-order:stroke; stroke:#081622; stroke-width:2.5 }
.rx-water-notice { color:#e6d9b9!important; font-size:11px!important; line-height:1.4 }
.rx-water-context { margin:7px 0; font-size:12px; line-height:1.4 }
.rx-water-context summary { cursor:pointer; min-height:32px; color:#c4f4ee; font-weight:600 }
.rx-water-context p { font-size:12px!important }
.rx-water-context a { color:#a0e8ff; text-decoration:underline }
@keyframes rx-draw { to { stroke-dashoffset:0 } }
@media (prefers-reduced-motion: reduce) { .rx-svg .route.draw { animation:none; stroke-dashoffset:0 } }