/* A spatial system illustration, using the same studio theme tokens. */
.ecosystem-map { --map-accent: #8e9bff; --map-body: #303541; --map-edge: #20242f; --map-screen: #11151d; --map-tile: #1d2431; --map-stroke: #657085; --map-screen-ink: #b9c3df; position: relative; border: 1px solid var(--rule); border-radius: 24px; overflow: hidden; background: color-mix(in srgb, var(--background) 88%, transparent); }
:root[data-theme="light"] .ecosystem-map { --map-accent: #2637c7; --map-body: #dce0ea; --map-edge: #bfc6d5; --map-stroke: #8590a4; }
.map-heading, .map-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 16px 24px; font: 10px/1.5 'Geist Mono', monospace; color: var(--muted); }
.map-heading { justify-content: space-between; border-bottom: 1px solid var(--rule); }
.map-heading > span:last-child { display: flex; align-items: center; gap: 10px; }
.map-heading i { height: 3px; width: 3px; border-radius: 50%; background: currentColor; }
.map-scene { position: relative; display: grid; grid-template-columns: 1fr 1.35fr 1fr; grid-template-rows: auto auto; column-gap: 6%; padding: 32px 30px 24px; min-height: 440px; align-items: center; background-image: radial-gradient(var(--rule) .6px, transparent .6px); background-size: 24px 24px; }
.map-local-zone { position: absolute; top: 18px; bottom: 18px; left: 18px; width: 65%; border: 1px solid var(--rule); border-radius: 19px; pointer-events: none; }
.map-local-zone > span { position: absolute; top: -7px; left: 22px; padding: 0 10px; background: var(--background); font: 10px/1.5 'Geist Mono', monospace; color: var(--muted); }
.ecosystem-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 6px; border-radius: 14px; text-align: center; }
.map-aq { grid-column: 1; grid-row: 1; }
.map-satellites { grid-column: 1; grid-row: 2; margin-top: 0; }
.map-hub { grid-column: 2; grid-row: 1 / 3; }
.map-link { grid-column: 3; grid-row: 1 / 3; }
.map-node-eyebrow { font: 10px/1.5 'Geist Mono', monospace; color: var(--muted); text-transform: uppercase; }
.instrument-visual { display: block; width: 100%; max-width: 155px; margin: 8px 0 4px; transform: translateY(0); transition: transform 350ms cubic-bezier(.22,1,.36,1); filter: drop-shadow(0 14px 12px #0002); }
.instrument-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.map-hub .instrument-visual { max-width: 260px; margin-top: 16px; }
.map-aq .instrument-visual { transform: rotate(-5deg); }
.map-link .instrument-visual { transform: rotate(4deg); max-width: 190px; }
.map-satellites .instrument-visual { max-width: 85px; margin-block: 6px; filter: none; }
.ecosystem-node strong { font-size: 23px; font-weight: 400; line-height: 1.1; letter-spacing: -.04em; }
.map-hub strong { font-size: 30px; }
.map-node-role { margin-top: 8px; max-width: 20em; font-size: 12px; line-height: 1.5; color: var(--muted); }
.map-node-status { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; font: normal 9px/1.5 'Geist Mono', monospace; color: var(--muted); }
.map-node-status::before { content: ''; width: 4px; height: 4px; border: 1px solid currentColor; border-radius: 50%; }
.map-aq .map-node-status::before { background: currentColor; }
.map-node-arrow { position: absolute; top: 6px; right: 4px; color: var(--map-accent); font-size: 21px; opacity: 0; transition: opacity 220ms; }
.instrument-body { fill: var(--map-body); stroke: var(--map-stroke); stroke-width: 1; }
.instrument-edge { fill: var(--map-edge); stroke: var(--map-stroke); stroke-width: .7; }
.instrument-screen { fill: var(--map-screen); stroke: #485365; stroke-width: .8; }
.screen-tile { fill: var(--map-tile); stroke: #3e4960; stroke-width: .7; }
.screen-label { fill: var(--map-screen-ink); font: 8px 'Geist Mono', monospace; }
.browser-label { fill: var(--foreground); font: 8px 'Geist Mono', monospace; }
.instrument-accent-fill { fill: var(--map-accent); }
.screen-reading { stroke: #a1adff; stroke-width: 5; stroke-linecap: round; }
.screen-rule { stroke: #8492ae; stroke-width: 2; stroke-linecap: round; }
.screen-divider { stroke: #465066; stroke-width: 1.2; }
.screen-gauge-base { stroke: #38435a; stroke-width: 4; }
.screen-gauge { stroke: #a1adff; stroke-width: 4; stroke-linecap: round; }
.instrument-vents { stroke: var(--map-stroke); stroke-width: 3; }
.instrument-outline { stroke: var(--map-stroke); stroke-width: 1.2; }
.instrument-dot { fill: var(--map-stroke); }
.globe-outline { stroke: #8e9bff; stroke-width: 1.2; }
.globe-grid { stroke: #596580; stroke-width: .8; }
.globe-route { stroke: #a1adff; stroke-width: 1.3; stroke-dasharray: 3 3; }
/* Twin enclosure visualization from Aura AQ's homepage ecosystem instruments. */
.map-satellite-stack { position: relative; display: block; width: 100%; aspect-ratio: 87 / 82; }
.map-satellite-stack > i { position: absolute; top: 4%; left: 9%; width: 44%; height: 79%; border: 1px solid var(--map-stroke); border-radius: 12px; background: linear-gradient(100deg, var(--map-body), var(--map-edge)); box-shadow: 0 5px 0 var(--map-edge), 0 10px 20px #0003; }
.map-satellite-stack > i:nth-child(2) { left: 46%; top: 17%; transform: rotate(8deg); }
.map-satellite-stack > i::before { content: ''; position: absolute; inset: 23% 24% 30%; background: repeating-linear-gradient(to bottom, var(--map-screen) 0 2px, transparent 2px 6px); }
.map-satellite-stack > i::after { content: ''; position: absolute; bottom: 12%; left: 43%; width: 4px; height: 4px; border-radius: 50%; background: var(--map-accent); }
.map-routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-route, .map-packet { fill: none; vector-effect: non-scaling-stroke; }
.map-route { stroke: var(--map-stroke); stroke-width: 1; opacity: .65; transition: stroke 250ms, opacity 250ms; }
.map-route--planned { stroke-dasharray: 3 6; opacity: .5; }
.map-route--optional { stroke-dasharray: 8 5; marker-end: url(#aura-map-arrow); }
.map-packet { stroke: var(--map-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 1; animation: map-packet-flow 4.8s linear infinite; animation-play-state: paused; }
[data-route="link"] .map-packet { animation-delay: -2.4s; }
[data-route="link-return"] .map-packet { animation-delay: -1s; }
.ecosystem-map.is-in-view .map-packet { animation-play-state: running; }
.map-internet-label { position: absolute; transform: translate(-50%, -100%); padding: 5px 6px; color: var(--muted); background: var(--background); font: 9px/1.5 'Geist Mono', monospace; white-space: nowrap; pointer-events: none; }
.map-legend { border-top: 1px solid var(--rule); font-size: 9px; }
.map-legend > span { display: inline-flex; align-items: center; gap: 9px; }
.map-legend i { width: 22px; height: 0; border-top: 1px solid var(--muted); }
.map-legend i.map-legend-dash { border-top-style: dashed; }
.map-legend-note { margin-left: auto; }
.ecosystem-map:has(.map-aq:is(:hover, :focus-visible)) [data-route="aq"] .map-route,
.ecosystem-map:has(.map-satellites:is(:hover, :focus-visible)) [data-route="satellites"] .map-route,
.ecosystem-map:has(.map-link:is(:hover, :focus-visible)) [data-route="link"] .map-route,
.ecosystem-map:has(.map-link:is(:hover, :focus-visible)) [data-route="link-return"] .map-route,
.ecosystem-map:has(.map-hub:is(:hover, :focus-visible)) .map-route { stroke: var(--map-accent); opacity: 1; }
.ecosystem-node:focus-visible .map-node-arrow { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .ecosystem-node:hover .instrument-visual { transform: translateY(-5px); }
  .ecosystem-node:hover .map-node-arrow { opacity: 1; }
}
@keyframes map-packet-flow { to { stroke-dashoffset: -1; } }
@media (max-width: 1100px) {
  .map-scene { column-gap: 5%; padding-inline: 26px; }
  .ecosystem-node strong { font-size: 22px; }
  .map-hub strong { font-size: 28px; }
}
@media (max-width: 900px) {
  .map-scene { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; row-gap: 46px; padding: 38px 28px 24px; }
  .map-aq { grid-column: 1; grid-row: 1; }
  .map-satellites { grid-column: 2; grid-row: 1; margin: 0; align-self: stretch; justify-content: center; }
  .map-hub { grid-column: 1 / 3; grid-row: 2; width: min(100%, 360px); justify-self: center; }
  .map-link { grid-column: 1 / 3; grid-row: 3; width: min(100%, 300px); justify-self: center; }
  .map-local-zone { width: auto; right: 14px; left: 14px; bottom: auto; }
  .map-legend-note { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .ecosystem-map { border-radius: 16px; }
  .map-heading, .map-legend { padding: 16px; }
  .map-heading > span:last-child { font-size: 9px; }
  .map-scene { padding: 34px 18px 24px; column-gap: 18px; row-gap: 44px; }
  .ecosystem-node { padding-inline: 0; }
  .ecosystem-node strong { font-size: 20px; }
  .map-hub strong { font-size: 27px; }
  .map-node-role { font-size: 12px; }
  .map-node-status, .map-node-eyebrow { font-size: 9px; }
  .map-hub .instrument-visual { max-width: 220px; }
  .map-link .instrument-visual { max-width: 185px; }
  .map-node-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce), print {
  .map-packet { animation: none; display: none; }
  .instrument-visual { transition: none; }
}