/* Rich Hickey's simple vs complex. "Simple" is simplex — one fold, one concern per
   thing. "Complex" is complected — braided together. When concerns are complected,
   changing one forces you to reason about all of them; decomplecting makes each
   independent, so a change touches only what it should. Simple is not easy: it is
   the deliberate, harder choice to keep things un-braided. Vanilla JS, no deps.
   Dark theme. Palette shared with siblings: green = simple/independent (the win),
   violet = the complected tangle. No red. */

#complecting {
  --cx-simple: #30d158;              /* independent — the win */
  --cx-tangle: #b488ff;             /* complected/braided */
  --cx-node: #5ac8fa;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  padding: clamp(16px, 3vw, 26px);
  margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}

.cx-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.cx-explain {
  font-size: 0.9rem; line-height: 1.55; margin: 8px 0 14px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

.cx-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--color-bg-surface, #1a1a1a); margin-bottom: 6px; }
.cx-mode {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 600;
  border: 0; background: transparent; color: var(--color-text-secondary, rgba(255,255,255,0.55));
  padding: 7px 15px; border-radius: 7px; transition: color 0.18s, background 0.18s;
}
.cx-mode:hover { color: var(--color-text-primary, #fff); }
.cx-mode.is-on { color: #0b0b0b; background: var(--color-accent, #fff); }

.cx-stage { width: 100%; height: auto; display: block; }
.cx-edge { stroke: var(--cx-tangle); stroke-width: 2; opacity: 0; transition: opacity 0.4s; }
.cx-edge.show { opacity: 0.6; }
.cx-edge.hot { opacity: 1; stroke-width: 3; }
/* pulsing halo that says "click me" until the first interaction */
.cx-halo { fill: none; stroke: var(--cx-node); stroke-width: 2; opacity: 0; transform-origin: center; transform-box: fill-box; animation: cx-pulse 2s ease-out infinite; }
.cx-halo.quiet { animation: none; opacity: 0; }
@keyframes cx-pulse { 0% { opacity: 0.5; transform: scale(1); } 70% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; transform: scale(1.5); } }
@media (prefers-reduced-motion: reduce) { .cx-halo { animation: none; opacity: 0; } }
.cx-node { fill: var(--color-bg-surface, #1a1a1a); stroke: var(--cx-node); stroke-width: 2; cursor: pointer; transition: stroke 0.2s, fill 0.2s; }
.cx-node:hover { fill: rgba(90,200,250,0.16); stroke-width: 3; }
.cx-node.touched { stroke: var(--cx-tangle); fill: rgba(180,136,255,0.16); }
.cx-node.picked { stroke: var(--cx-simple); fill: rgba(48,209,88,0.16); }
.cx-nodelabel { fill: var(--color-text-secondary, rgba(255,255,255,0.82)); font-size: 12px; text-anchor: middle; pointer-events: none; font-family: var(--font-family, sans-serif); }

.cx-readout {
  margin-top: 14px; font-size: 0.9rem; line-height: 1.55; min-height: 2.6em;
  background: var(--color-bg-surface, #1a1a1a);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 14px 16px; transition: border-color 0.25s;
}
.cx-readout.simple { border-color: var(--cx-simple); }
.cx-readout b { color: #fff; }
.cx-readout .cx-hl-simple { color: var(--cx-simple); font-weight: 650; }
.cx-readout .cx-hl-tangle { color: var(--cx-tangle); font-weight: 650; }
.cx-count { font-variant-numeric: tabular-nums; }

.cx-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }