/* copied from the extension (panel.css) so the website map looks and moves the same */
:root{--map:#F3F4F6;--water:#D6E5FF}
/* map */

.map .grid{stroke: var(--line); stroke-width: 1; opacity: .7;}
.map .cty{fill: none; stroke: var(--sec); stroke-width: 1; opacity: .25;}
.map .home-cty{fill: none; stroke: var(--sec); stroke-width: 1.2; stroke-dasharray: 6 3 1.5 3; opacity: .6;}
.map .ring{fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 4 4; opacity: .55;}
.map .ring.r0{fill: var(--blue); fill-opacity: .07; stroke-dasharray: none; stroke-width: 1.6; opacity: .9;}
.map .myring{fill: var(--blue); fill-opacity: .08; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 6 5;}
.map .rlbl rect{fill: var(--surface); stroke: var(--line);}
.map .rlbl text{font: 400 11px var(--mono); fill: var(--text);}
.map .pin .bg{fill: var(--surface); stroke: var(--line);}
.map .pin.near .bg{fill: var(--blue); stroke: var(--surface); stroke-width: 2.5;}
.map .pin .ic{color: var(--blue-text);}
.map .pin.near .ic{color: #fff;}
.map .pin{cursor: pointer;}
.map .pin:hover .bg{stroke: var(--blue);}
.map .far{fill: var(--sec); opacity: .45;}
.map .x circle{fill: #E5484D;}
.map .bob circle, .map .bob path{fill: #0866FF;}
.map .ripple{animation: ripple .45s ease-out both; transform-origin: center; transform-box: fill-box;}
.map .ripple.d1{animation-delay: .12s;}
.map .ripple.d2{animation-delay: .24s;}
.map .town circle{fill: var(--sec);}
.map .town text{font: 500 11px var(--sans); fill: var(--sec); paint-order: stroke; stroke: var(--map); stroke-width: 3px; stroke-linejoin: round;}
.map .town.here text{fill: var(--text); font-weight: 600;}
.map[data-drag]{cursor: grab; touch-action: none;}
.map[data-drag]:active{cursor: grabbing;}
.map .pulse, .map .homepulse{fill: none; stroke: var(--blue); stroke-width: 2; opacity: 0;}
.map .crawl{animation: crawl 9s linear infinite, ripple .45s ease-out both;}
.map .ring.d2.crawl{animation-duration: 14s, .45s; animation-direction: reverse, normal;}
.map .myring.crawl{animation: crawl 6s linear infinite;}
.map .pulse{animation: pinslow 7s ease-out 1.5s infinite; transform-origin: center; transform-box: fill-box;}
.map .homepulse{animation: none; transform-origin: center; transform-box: fill-box;}
.map .bob{animation: sway 3.2s ease-in-out infinite alternate; transform-origin: 50% 0%; transform-box: fill-box;}
.map:not([data-drag]){cursor: grab; touch-action: none;}
.map.grabbing{cursor: grabbing;}
.map .ring.d2.crawl{animation-duration: 14s, .45s; animation-direction: normal;}
.map .ring.d1.crawl{animation-duration: 11s, .45s;}
.mapwrap, .tbl, .strip{margin-left: -12px; margin-right: -12px;}
.stack i, .stk i, .sb, .polc .pb, .wfr, .map .far{transition: filter .15s, opacity .15s, background .15s;}
/* map: a sweep grows from the house; rings and pins appear as it reaches them */
  .map .sweep{fill: var(--blue); opacity: 0; pointer-events: none; transform-box: fill-box; transform-origin: center;}
/* already seen this screen for this home: everything is in place */
  .seen .sb i, .seen .stk i, .seen .polc .pb, .seen .wfb i, .seen .stack i, .seen .mwbar i, .seen .draw, .seen .fadein,
  .seen .map .pin, .seen .map .far, .seen .map .rlbl, .seen .ripple:not(.crawl), .seen .cald i{animation: none;}
/* The map sweep is invisible unless it is animating (it used to show as a black disc when motion was off). */
.map .sweep{fill: var(--blue); opacity: 0; pointer-events: none;}
.mapwrap.hero svg{max-height: 300px;}
@keyframes ripple { from { opacity: 0; transform: scale(.6); } to { opacity: .55; transform: scale(1); } }
@keyframes crawl { to { stroke-dashoffset: -64; } }
@keyframes pin { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } }
@keyframes pinslow { 0% { opacity: .7; transform: scale(1); } 22% { opacity: 0; transform: scale(2); } 100% { opacity: 0; transform: scale(2); } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
@keyframes pop { 40% { transform: scale(1.25); } }
@keyframes sweep { 0% { transform: scale(0); opacity: .16; } 85% { opacity: .08; } 100% { transform: scale(1); opacity: 0; } }
@keyframes drop { from { transform: translateY(-60px); opacity: 0; } }
@keyframes popin { from { opacity: 0; transform: scale(.3); } }