/* Preserved insight-tree artwork and animation. Layout lives in styles.css. */
.ground-spokes line {
  stroke: rgba(6, 42, 90, 0.095);
  vector-effect: non-scaling-stroke;
}

.ground-rings circle {
  fill: none;
  stroke: rgba(6, 42, 90, 0.16);
  vector-effect: non-scaling-stroke;
}

.ground-rings circle:nth-child(n+5) {
  stroke: rgba(6, 42, 90, 0.095);
}

.ground-ripple {
  fill: none;
  stroke: rgba(16, 197, 232, 0.46);
  vector-effect: non-scaling-stroke;
  opacity: 0;
  animation: ringExpand 5.4s ease-out infinite;
}

.ground-ripple.ripple-b { animation-delay: -1.8s; }
.ground-ripple.ripple-c { animation-delay: -3.6s; }

.branch-red,
.flow-line.red,
.flow-packet.red,
.end-dot.red { color: var(--red); }

.branch-orange,
.flow-line.orange,
.flow-packet.orange,
.end-dot.orange { color: var(--orange); }

.branch-amber,
.flow-line.amber,
.flow-packet.amber,
.end-dot.amber { color: var(--amber); }

.branch-cyan,
.flow-line.cyan-line,
.flow-packet.cyan,
.end-dot.cyan { color: var(--cyan); }

.branch-teal,
.flow-line.teal-line,
.flow-packet.teal,
.end-dot.teal { color: #1cc4c9; }

.branch-green,
.flow-line.green,
.flow-packet.green,
.end-dot.green { color: var(--green); }

.data-branch,
.root-tendril,
.branch-comet,
.flow-line {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.branch-haze {
  stroke-width: 7.5;
  opacity: 0.11;
  filter: url("#wideGlow");
}

.data-branch.branch-primary {
  stroke-width: 1.45;
  opacity: 0.74;
  filter: drop-shadow(0 0 5px currentColor);
  animation: branchBreathe 5.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.root-tendril {
  stroke-width: 0.72;
  opacity: 0.28;
  filter: drop-shadow(0 0 3px currentColor);
}

.branch-comet {
  stroke-width: 2.2;
  opacity: 0.75;
  stroke-dasharray: 0.028 0.972;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px currentColor);
  animation: branchComet var(--speed, 4.5s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.flow-particle,
.junction-dot,
.end-dot {
  fill: currentColor;
  filter: drop-shadow(0 0 6px currentColor);
}

.flow-particle {
  opacity: 0.88;
  animation: particlePulse 1.7s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.flow-particle-small {
  opacity: 0.56;
}

.junction-dot {
  opacity: 0.72;
  animation: junctionPulse 2.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

.end-dot {
  opacity: 0.86;
}

.column-halo,
.pool-halo {
  pointer-events: none;
}

.trunk-beam,
.trunk-strand,
.canopy-branch,
.canopy-hair,
.canopy-comet {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trunk-body {
  fill: url("#trunkBody");
  filter: url("#softGlow");
  opacity: 0.9;
}

.trunk-beam {
  filter: url("#wideGlow");
}

.trunk-beam-wide {
  stroke: #3fd0ee;
  stroke-width: 16;
  opacity: 0.22;
}

.trunk-beam-mid {
  stroke: #7feeff;
  stroke-width: 11;
  opacity: 0.4;
}

.trunk-beam-core {
  stroke: #ffffff;
  stroke-width: 8;
  opacity: 0.72;
  filter: url("#softGlow");
}

.trunk-beam-hot {
  stroke: #ffffff;
  stroke-width: 13;
  opacity: 0.72;
  filter: url("#softGlow");
}

.trunk-strand {
  stroke: url("#trunkFade");
  stroke-width: 1.5;
  opacity: 0.85;
  animation: columnFlicker 4.8s ease-in-out infinite;
}

.trunk-strand:nth-child(2n) {
  animation-delay: -1.6s;
}

.trunk-strand:nth-child(3n) {
  animation-delay: -3.1s;
}

.canopy-haze path {
  fill: none;
  stroke: #37d6f2;
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.11;
  filter: url("#wideGlow");
}

.canopy-hair {
  stroke: url("#trunkFade");
  stroke-width: 1.1;
  opacity: 0.55;
}

.canopy-branch {
  stroke-width: 2.1;
  opacity: 0.9;
  animation: columnFlicker 5.2s ease-in-out infinite;
}

.canopy-branch.col-left { stroke: url("#colLeft"); }
.canopy-branch.col-core { stroke: url("#colCore"); }
.canopy-branch.col-right { stroke: url("#colRight"); }

.canopy-branch.strong {
  stroke-width: 2.6;
  opacity: 1;
}

.canopy-branch.bright {
  stroke-width: 3;
  filter: url("#softGlow");
}

.canopy-comet {
  stroke: #f2ffff;
  stroke-width: 2.4;
  opacity: 0.92;
  stroke-dasharray: 0.045 0.955;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(127, 240, 255, 0.9));
  animation: columnComet 3.6s linear infinite;
  animation-delay: var(--delay, 0s);
}

.canopy-spark {
  fill: #eafcff;
  opacity: 0.86;
  filter: drop-shadow(0 0 7px rgba(127, 240, 255, 0.95));
}

.arrow-tip use {
  fill: url("#arrowGrad");
  filter: url("#softGlow") drop-shadow(0 0 8px rgba(16, 197, 232, 0.75));
  animation: arrowPulse 3.2s ease-in-out infinite;
}

.arrow-tip:nth-child(2n) use { animation-delay: -1.1s; }
.arrow-tip:nth-child(3n) use { animation-delay: -2.2s; }

.canopy-dot {
  fill: #5fe3ff;
  filter: drop-shadow(0 0 6px rgba(95, 227, 255, 0.9));
  animation: junctionPulse 2.8s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

.canopy-dot.hair-dot {
  fill: #46d5f2;
}

.ground-root {
  fill: none;
  stroke: #19b8d8;
  stroke-width: 1.3;
  stroke-linecap: round;
  opacity: 0.3;
  filter: drop-shadow(0 0 4px rgba(25, 184, 216, 0.6));
}

.ambient-mote {
  fill: #9ae9f7;
  opacity: 0;
  filter: drop-shadow(0 0 4px rgba(95, 227, 255, 0.8));
  animation: moteRise 7s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  transform-box: fill-box;
  transform-origin: center;
}

.hub-pool {
  fill: url("#poolGlow");
}

.hub-core {
  fill: #ffffff;
  opacity: 0.94;
  filter: blur(3px);
}

.hub-rim {
  fill: none;
  stroke: rgba(16, 197, 232, 0.62);
  stroke-width: 1.45;
}

.hub-pulse {
  fill: none;
  stroke: rgba(127, 240, 255, 0.86);
  stroke-width: 2.4;
  opacity: 0.76;
  animation: hubPulse 2.6s ease-in-out infinite;
  transform-origin: 330px 356px;
}

.node-card .card-bg {
  fill: rgba(255, 255, 255, 0.95);
  stroke: rgba(13, 69, 116, 0.13);
  stroke-width: 1;
  filter: url("#cardShadow");
}

.node-card .card-glint {
  fill: rgba(255, 255, 255, 0.65);
}

.node-card use {
  fill: none;
  stroke: #7d8da6;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-float {
  animation: cardFloat 5.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.flow-arrow {
  fill: none;
  stroke: #14b8cf;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(20, 199, 234, 0.72));
  animation: arrowRise 3.4s ease-in-out infinite;
}

.flow-arrow.arrow-main {
  stroke-width: 2.8;
  stroke: #0fc6e6;
}

.flow-arrow.arrow-small {
  stroke-width: 1.8;
  opacity: 0.82;
}

@keyframes arrowPulse {
  0%, 100% { opacity: 0.88; }
  50% { opacity: 1; }
}

@keyframes moteRise {
  0% { opacity: 0; transform: translateY(6px) scale(0.7); }
  18% { opacity: 0.75; }
  62% { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-34px) scale(1.05); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.55); opacity: 1; }
}

@keyframes streamRise {
  from { stroke-dashoffset: 366; }
  to { stroke-dashoffset: 0; }
}

@keyframes ringExpand {
  0% { r: 70; opacity: 0.48; }
  78% { opacity: 0.15; }
  100% { r: 328; opacity: 0; }
}

@keyframes hubPulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(1);
  }
  50% {
    opacity: 0.24;
    transform: scale(1.42);
  }
}

@keyframes branchBreathe {
  0%, 100% { opacity: 0.54; }
  48% { opacity: 0.78; }
}

@keyframes branchComet {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes columnComet {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes columnFlicker {
  0%, 100% { opacity: 0.7; }
  45% { opacity: 1; }
  72% { opacity: 0.78; }
}

@keyframes particlePulse {
  0%, 100% { opacity: 0.64; transform: scale(0.82); }
  48% { opacity: 1; transform: scale(1.22); }
}

@keyframes junctionPulse {
  0%, 100% { opacity: 0.58; transform: scale(0.92); }
  50% { opacity: 0.96; transform: scale(1.24); }
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes arrowRise {
  0%, 100% { transform: translateY(0); opacity: 0.96; }
  50% { transform: translateY(-6px); opacity: 0.66; }
}

@keyframes waveDrift {
  from { translate: -2% 0; }
  to { translate: 3% -12px; }
}