/* Only measured desktop gaps receive this playground; never a score or live signal. */
.iq-gap-art.constellation { pointer-events: auto; color: #b3e9e2; border: 1px solid #24645d;
  background: radial-gradient(ellipse at 50% 48%, #103937 0, #081b22 42%, #040f14 80%);
  box-shadow: inset 0 0 36px #1ea29712; font: 11px var(--mono, monospace); }
.constellation::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(#7dcbc84d .7px, transparent .7px); background-size: 27px 27px;
  mask-image: linear-gradient(90deg, #000, transparent 45%, #000); }
.constellation header { position: absolute; z-index: 2; inset: 12px 14px auto; display: flex;
  align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; letter-spacing: 1.5px; }
.constellation header > div { display: flex; gap: 6px; }
.constellation button { color: #a4d3d3; border: 1px solid #427c795c; background: #071a20;
  font: inherit; cursor: pointer; border-radius: 5px; }
.constellation header button { min-height: 28px; padding: 3px 7px; font-size: 10px; letter-spacing: 0; }
.constellation button:hover, .constellation button:focus-visible { color: #edffff; border-color: #8cfff2;
  outline: 2px solid #8cfff2; outline-offset: 3px; }
.constellation header button[aria-pressed="true"] { color: #85ffe1; border-color: #61bdae; }
.iq-gap-art .constellation-map { position: absolute; inset: 0; }
.iq-gap-art .constellation-core { position: absolute; width: 48%; height: 80%; left: 26%; top: 10%; overflow: visible; }
.constellation-rotor, .constellation-counter { transform-origin: 150px 150px;
  animation: constellation-turn 22s linear infinite; animation-play-state: paused; }
.constellation-counter { animation-direction: reverse; animation-duration: 35s; }
.constellation[data-playing]:not([data-paused]) :is(.constellation-rotor, .constellation-counter) { animation-play-state: running; }
.constellation .constellation-node { position: absolute; display: flex; align-items: center; gap: 8px;
  width: 21%; height: 12%; min-height: 26px; padding: 3px 8px; color: var(--node-color);
  border-color: color-mix(in srgb, var(--node-color) 35%, transparent); text-align: left;
  background: linear-gradient(110deg, #10232c, #07131bd9); transition: box-shadow .2s, border-color .2s; }
.constellation .constellation-node svg { flex: none; width: 22px; height: 22px; fill: none;
  stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.constellation-node span { font-size: clamp(9px, .8vw, 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.constellation .constellation-node[aria-pressed="true"] { border-color: var(--node-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--node-color) 30%, transparent), inset 0 0 12px #58f4ed12; }
.constellation .constellation-scan { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; color: #a9fff5; background: #092127; font-size: 28px;
  box-shadow: 0 0 24px #3bffe329; }
.constellation-wires .is-lit { stroke: #afffee; stroke-width: 2; stroke-opacity: 1; filter: drop-shadow(0 0 4px #40f5dc); }
.constellation-pulse { opacity: 0; transform-origin: 150px 150px; }
.constellation.is-pinging:not([data-paused]) .constellation-pulse { animation: constellation-ping .85s ease-out; }
.constellation figcaption { position: absolute; bottom: 9px; left: 6px; right: 6px; text-align: center;
  color: #94b6b8; font-size: 10px; pointer-events: none; }
@keyframes constellation-turn { to { transform: rotate(360deg); } }
@keyframes constellation-ping { from { opacity: .9; transform: scale(.7); } to { opacity: 0; transform: scale(3.3); } }
@media (prefers-reduced-motion: reduce) {
  .constellation *, .constellation.is-pinging .constellation-pulse { animation: none !important; transition: none !important; }
}