.afm {
    --afm-land: #0c4a63;
    --afm-land-stroke: rgba(255,255,255,.05);
    --afm-accent: #F5B61C;
    --afm-cool: #8fe0f2;
    --afm-cool-arc: #74cfe8;
    --afm-dom: #ffd873;
    --afm-label: rgba(255,255,255,.82);
    --afm-label-code: #b8ecfb;
    --afm-star-stroke: #fff3d2;
    --afm-dot-stroke: rgba(3,40,54,.55);
    --afm-plane: #ffffff;
    --afm-font: 'Oswald', sans-serif;
    --afm-k: 1;
    width: 100%;
    line-height: 0;
}

.afm-svg { width: 100%; height: auto; display: block; overflow: hidden; }

.afm-land { fill: var(--afm-land); stroke: var(--afm-land-stroke); stroke-width: calc(.4px * var(--afm-k)); }

.afm-arc { fill: none; stroke-linecap: round; stroke-dasharray: calc(5px * var(--afm-k)) calc(6px * var(--afm-k)); animation: afmDash 2.6s linear infinite; }
.afm-arc-in  { stroke: var(--afm-cool-arc); stroke-width: calc(1px * var(--afm-k));    opacity: .5;  }
.afm-arc-dom { stroke: var(--afm-dom);      stroke-width: calc(1px * var(--afm-k));    opacity: .55; stroke-dasharray: calc(2px * var(--afm-k)) calc(3px * var(--afm-k)); }
.afm-arc-out { stroke: var(--afm-accent);   stroke-width: calc(1.15px * var(--afm-k)); opacity: .62; }
@keyframes afmDash { to { stroke-dashoffset: calc(-22px * var(--afm-k)); } }

.afm-dot { stroke: var(--afm-dot-stroke); stroke-width: calc(.5px * var(--afm-k)); }
.afm-dot-city  { fill: var(--afm-cool); }
.afm-dot-world { fill: var(--afm-accent); }

.afm-label { font-family: var(--afm-font); font-size: calc(10px * var(--afm-k)); letter-spacing: calc(.3px * var(--afm-k)); fill: var(--afm-label); }
.afm-label-code { fill: var(--afm-label-code); font-weight: 500; }
.afm-label-hub  { fill: var(--afm-accent); font-weight: 600; font-size: calc(11px * var(--afm-k)); }

.afm-star  { fill: var(--afm-accent); stroke: var(--afm-star-stroke); stroke-width: calc(.4px * var(--afm-k)); }
.afm-pulse { fill: none; stroke: var(--afm-accent); stroke-width: calc(1px * var(--afm-k)); }

.afm-sea {
    font-family: var(--afm-font);
    font-size: calc(9px * var(--afm-k));
    letter-spacing: calc(1.4px * var(--afm-k));
    text-transform: uppercase;
    fill: var(--afm-label);
    opacity: .45;
}

.afm-plane { offset-rotate: auto; animation-name: afmFly; animation-timing-function: linear; animation-iteration-count: infinite; }
.afm-plane-ico { fill: var(--afm-plane); }
@keyframes afmFly {
    0%   { offset-distance: 0%;   opacity: 0; }
    9%   { opacity: 1; }
    91%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

@media (max-width: 640px) {
    .afm-label:not(.afm-label-hub) { display: none; }
    .afm-sea { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .afm-arc { animation: none; }
    .afm-plane { display: none; }
}