/* NLL network map — module styles (v3). Scoped under .nn; theme through the --nn-* tokens. */
.nn {
  --nn-ink: #000; --nn-ash: #2e2e2e; --nn-smoke: #8c8c8c; --nn-mist: #e4e4e2;
  --nn-sans: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  --nn-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  position: relative; margin: 0;
}
.nn-viewport { position: relative; overflow: hidden; }
.nn-pan { width: 100%; will-change: transform; }
.nn-map { display: block; width: 100%; height: auto; overflow: visible; }
.nn-gridline { fill: none; stroke: var(--nn-smoke); stroke-opacity: .28; stroke-width: .6; }
.nn-grat { fill: none; stroke: var(--nn-ash); stroke-dasharray: 1 3; }
.nn-sphere { fill: none; stroke: var(--nn-ash); }
.nn-coast { fill: none; stroke: var(--nn-smoke); stroke-opacity: .5; stroke-width: .75; stroke-linejoin: round; }
.nn-lat { font: 10px var(--nn-mono); fill: var(--nn-smoke); opacity: .6; }
.nn-link { fill: none; stroke: var(--nn-smoke); stroke-opacity: .36; }
.nn-link.nn-dash { stroke-dasharray: 2 4; stroke-opacity: .42; }
.nn-msgs { filter: drop-shadow(0 0 3px rgb(228 228 226 / .7)); }
.nn-msg { fill: none; stroke: var(--nn-mist); stroke-width: 2; stroke-linecap: round; }
.nn-ring { fill: none; stroke: var(--nn-mist); stroke-opacity: .4; }
.nn-tick { fill: none; stroke: var(--nn-mist); stroke-opacity: .35; }
.nn-core { fill: var(--nn-mist); }
.nn-mk, .nn-pulse { transform-box: fill-box; transform-origin: center; }
.nn-pulse { fill: none; stroke: var(--nn-mist); opacity: 0; }
.nn-lbl text { paint-order: stroke; stroke: var(--nn-ink); stroke-width: 4px; stroke-linejoin: round; }
.nn-n { font: 500 12px var(--nn-sans); fill: var(--nn-mist); }
.nn-c { font: 10px var(--nn-mono); fill: var(--nn-smoke); }
/* pause control */
.nn-pause { position: absolute; right: var(--nn-pause-inset, 80px); bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px; border: 0; background: rgb(0 0 0 / .82); color: var(--nn-smoke); font: 500 12px var(--nn-sans); cursor: pointer; }
.nn-pause:hover { color: var(--nn-mist); }
.nn-pause:focus-visible { outline: 1px solid var(--nn-mist); outline-offset: 2px; }
.nn-ico { display: inline-flex; gap: 3px; } .nn-ico i { width: 2px; height: 10px; background: var(--nn-mist); }
.nn-pause[aria-pressed="true"] .nn-ico { gap: 0; }
.nn-pause[aria-pressed="true"] .nn-ico i:first-child { width: 0; height: 0; background: none; border-left: 8px solid var(--nn-mist); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.nn-pause[aria-pressed="true"] .nn-ico i:last-child { display: none; }
/* intro: plays once */
@keyframes nn-fade { from { opacity: 0; } }
@keyframes nn-pop { from { transform: scale(0); opacity: 0; } }
@keyframes nn-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.nn-play .nn-grat, .nn-play .nn-sphere { animation: nn-fade .8s ease-out both; }
.nn-play .nn-land { animation: nn-fade 1.1s .2s ease-out both; }
.nn-play .nn-coast { animation: nn-fade 1s .1s ease-out both; }
.nn-play .nn-lats { animation: nn-fade .6s .6s ease-out both; }
.nn-play .nn-mk { animation: nn-pop .55s var(--d) cubic-bezier(.2, .7, .2, 1) both; }
.nn-play .nn-lbl { animation: nn-fade .45s var(--d) ease-out both; }
.nn-play .nn-link:not(.nn-dash) { stroke-dasharray: 1 1; animation: nn-draw .8s var(--d) ease-in-out both; }
.nn-play .nn-link.nn-dash { animation: nn-fade .8s var(--d) ease-in-out both; }
/* compact (phone) layout: 62% map in a 320px window that pans Americas → Asia → back every 10 s */
.nn-compact .nn-viewport { height: 320px; }
.nn-compact .nn-pan { width: var(--nn-compact-w, 893px); transform: translateX(var(--nn-pan-a, -70px)); }
.nn-compact .nn-map { margin-top: -8px; }
.nn-compact.nn-loop .nn-pan { animation: nn-pan 10s ease-in-out infinite; }
.nn-compact .nn-n { font-size: 17.7px; } .nn-compact .nn-c { display: none; } .nn-compact .nn-lbl text { stroke-width: 6px; } .nn-compact .nn-lat { font-size: 13px; }
.nn-compact .nn-pause { right: 20px; }
@keyframes nn-pan { 0%, 100% { transform: translateX(var(--nn-pan-a, -70px)); } 50% { transform: translateX(var(--nn-pan-b, -436px)); } }
.nn-paused .nn-pan, .nn-compact.nn-loop.nn-paused .nn-pan { animation-play-state: paused; } /* 5 Nov: the loop rule above resets play-state, so Pause needs the same weight to stop the phone pan */
@media (prefers-reduced-motion: reduce) { .nn-loop .nn-pan { animation: none; } }