/* 概念动图的样式 —— 与 l1-math-ui.css / math-ui-base.css 共用。
   颜色走各面板注入的 --tgm-* 变量；#l1Math 里另有一份同名映射（见文件末）。 */

.ca-svg {
  display: block;
  width: 100%;
  aspect-ratio: 250 / 140;
  border-radius: 13px;
  background:
    radial-gradient(circle at 34% 74%, color-mix(in srgb, var(--ca-u, #73e2ff) 9%, transparent), transparent 62%),
    rgba(5, 9, 15, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.ca-caption {
  margin: 9px 0 0;
  font-size: 12.5px;
  line-height: 1.62;
  color: rgba(238, 247, 245, 0.7);
}
.ca-caption b {
  display: block;
  margin-bottom: 3px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(238, 247, 245, 0.94);
}

/* 图元 */
.ca-svg .ca-vec { stroke-width: 2.1; stroke-linecap: round; fill: none; transition: filter .2s ease; }
.ca-svg .ca-head { stroke: none; }
.ca-svg .ca-u { stroke: var(--ca-u, #73e2ff); }
.ca-svg polygon.ca-u { fill: var(--ca-u, #73e2ff); }
.ca-svg .ca-v { stroke: var(--ca-v, #ffb06f); }
.ca-svg polygon.ca-v { fill: var(--ca-v, #ffb06f); }
.ca-svg .ca-r { stroke: var(--ca-seal, #f6edc8); }
.ca-svg polygon.ca-r { fill: var(--ca-seal, #f6edc8); }
.ca-svg .ca-ghost { opacity: 0.3; stroke-dasharray: 4 3; }
.ca-svg .ca-vec.is-hit { filter: drop-shadow(0 0 5px currentColor); stroke-width: 2.6; }

.ca-svg .ca-guide { stroke: rgba(255, 255, 255, 0.14); stroke-width: 1; }
.ca-svg .ca-dash { stroke-dasharray: 3 3; }
.ca-svg .ca-ring {
  fill: none; stroke: var(--ca-pos, #b3ffd7); stroke-width: 1.6;
  transition: stroke-width .18s ease, filter .18s ease;
}
.ca-svg .ca-ring.is-hit { stroke-width: 2.6; filter: drop-shadow(0 0 6px var(--ca-pos, #b3ffd7)); }
.ca-svg .ca-circle { fill: none; stroke: rgba(255, 255, 255, 0.13); stroke-width: 1; }
.ca-svg .ca-eigen { stroke: color-mix(in srgb, var(--ca-seal, #f6edc8) 34%, transparent); stroke-width: 1.1; stroke-dasharray: 5 4; }
.ca-svg .ca-eigen.is-hit { stroke: var(--ca-seal, #f6edc8); stroke-dasharray: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ca-seal, #f6edc8) 70%, transparent)); }
.ca-svg .ca-arc { fill: none; stroke: color-mix(in srgb, var(--ca-seal, #f6edc8) 60%, transparent); stroke-width: 1.3; }
.ca-svg .ca-arc.is-negative { stroke: var(--ca-neg, #8db4ff); }
.ca-svg .ca-para {
  fill: color-mix(in srgb, var(--ca-seal, #f6edc8) 7%, transparent);
  stroke: color-mix(in srgb, var(--ca-seal, #f6edc8) 36%, transparent);
  stroke-width: 1; stroke-dasharray: 3.5 2.5;
}
.ca-svg .ca-para.is-fill {
  fill: color-mix(in srgb, var(--ca-pos, #b3ffd7) 17%, transparent);
  stroke: color-mix(in srgb, var(--ca-pos, #b3ffd7) 72%, transparent);
  stroke-dasharray: none;
}
.ca-svg .ca-para.is-fill.is-negative {
  fill: color-mix(in srgb, var(--ca-neg, #8db4ff) 20%, transparent);
  stroke: color-mix(in srgb, var(--ca-neg, #8db4ff) 76%, transparent);
}
.ca-svg .ca-para.is-hit { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ca-rose, #ff8fb8) 60%, transparent)); }
.ca-svg .ca-lattice path { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 0.8; }
.ca-svg .ca-dot { fill: var(--ca-seal, #f6edc8); }
.ca-svg .ca-bead { fill: var(--ca-seal, #f6edc8); transition: r .15s ease; }
.ca-svg .ca-bead.is-hit { filter: drop-shadow(0 0 7px var(--ca-seal, #f6edc8)); }

.ca-svg .ca-lab {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; font-style: italic; font-weight: 600;
  text-anchor: middle; dominant-baseline: middle;
  fill: currentColor; stroke: none;
  paint-order: stroke; stroke: rgba(4, 8, 14, 0.85); stroke-width: 2.6px; stroke-linejoin: round;
}
.ca-svg text.ca-u { color: var(--ca-u, #73e2ff); fill: var(--ca-u, #73e2ff); }
.ca-svg text.ca-v { color: var(--ca-v, #ffb06f); fill: var(--ca-v, #ffb06f); }
.ca-svg text.ca-r { color: var(--ca-seal, #f6edc8); fill: var(--ca-seal, #f6edc8); }
.ca-svg .ca-big { font-size: 13px; font-style: normal; fill: var(--ca-pos, #b3ffd7); }
.ca-svg .ca-big.is-negative { fill: var(--ca-neg, #8db4ff); }
.ca-svg .ca-lab.is-hit { fill: var(--ca-pos, #b3ffd7); }

/* 开场三图：轮流点亮，其余压暗 */
.ca-svg .ca-motif { opacity: 0.34; transition: opacity .7s ease, filter .7s ease; }
.ca-svg .ca-motif.is-hit { opacity: 1; filter: drop-shadow(0 0 6px rgba(246, 237, 200, 0.28)); }
.ca-svg .ca-thin { stroke-width: 1.4; opacity: 0.75; }

/* 概念标签行（点一下换动图，替掉原先并排堆叠的一整列说明段落） */
.ca-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.ca-tab {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(238, 247, 245, 0.56);
  font-size: 11.5px; line-height: 1.5; cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.ca-tab:hover { color: rgba(238, 247, 245, 0.85); border-color: rgba(255, 255, 255, 0.26); }
.ca-tab.is-active {
  color: #fff9df;
  border-color: color-mix(in srgb, var(--ca-seal, #f6edc8) 48%, transparent);
  background: color-mix(in srgb, var(--ca-seal, #f6edc8) 13%, transparent);
}