/* 能力关系台：目录内容、技术连线与局部切换，共用展馆色彩令牌。 */
.capability-console {
  margin: 0 auto;
  padding: 30px var(--edge) 96px;
  max-width: 1780px;
  color: var(--ink);
}
.console-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 32px; }
.console-heading .section-kicker { margin-bottom: 14px; }
.console-heading h2 { font-size: clamp(24px, 2.35vw, 38px); font-weight: 450; line-height: 1.4; }
.console-select { display: flex; flex-wrap: wrap; gap: 5px; padding: 5px; border: 1px solid var(--border-charcoal); border-radius: 5px; }
.console-select button { border: 0; border-radius: 3px; min-height: 44px; padding: 10px 17px; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; background: transparent; transition: background-color .2s ease, color .2s ease; }
.console-select button[aria-pressed="true"] { background: var(--mist); color: var(--accent-emerald); }
.console-select button:hover { color: var(--ink); }
.capability-console :focus-visible { outline: 2px solid var(--accent-emerald); outline-offset: 4px; }
.console-panel { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(220px, .75fr); margin-bottom: 24px; border: 1px solid var(--border-charcoal); background: color-mix(in srgb, var(--bg-carbon) 90%, transparent); border-radius: 4px; overflow: hidden; }
.console-panel[hidden] { display: none; }
.console-map { position: relative; min-width: 0; padding: 24px; background: color-mix(in srgb, var(--mist) 47%, transparent); }
.console-map-register { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; color: var(--faint); letter-spacing: .08em; }
.console-diagram { display: block; width: 100%; height: auto; margin: 15px 0 0; overflow: visible; }
.console-map-frame { fill: none; stroke: color-mix(in srgb, var(--border-charcoal) 60%, transparent); stroke-width: 1; }
.console-map-frame > path:first-child { stroke: var(--accent-emerald); }
.console-map-axis { stroke-dasharray: 2 10; }
.console-map-links { fill: none; stroke: var(--accent-emerald); stroke-width: 1.5; opacity: .65; }
.console-map-node rect { fill: var(--panel); stroke: var(--border-charcoal); stroke-width: 1; }
.console-node-notch { fill: none; stroke: var(--accent-emerald); stroke-width: 1.5; }
.console-map-node circle { fill: var(--accent-emerald); }
.console-map-node text, .console-map-hub text { fill: var(--ink); font-size: 16px; font-family: inherit; }
.console-map-hub { fill: var(--panel); stroke: var(--accent-emerald); stroke-width: 1; }
.console-map-hub .console-hub-inner { fill: none; stroke: var(--border-charcoal); }
.console-map-hub path { fill: none; stroke: var(--accent-emerald); stroke-width: 1.5; }
.console-map-hub text { stroke: none; font-size: 15px; }
.console-reading { min-width: 0; padding: clamp(24px, 2.6vw, 42px); border-left: 1px solid var(--border-charcoal); align-self: stretch; }
.console-reading h3 { font-size: 22px; font-weight: 450; margin-bottom: 17px; }
.console-description { font-size: 14px; color: var(--muted); line-height: 1.85; margin-bottom: 22px; }
.console-reading ul { list-style: none; margin: 0; padding: 0; }
.console-reading li { border-top: 1px solid color-mix(in srgb, var(--border-charcoal) 75%, transparent); }
.console-reading a { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 48px; padding: 12px 0; color: var(--ink); font-size: 14px; text-decoration: none; }
.console-reading a > span { color: var(--accent-emerald); flex: 0 0 auto; }
.console-reading a:hover { color: var(--accent-emerald); }
.capability-console[data-console-change="true"] .console-panel:not([hidden]) { animation: console-panel-in .42s ease-out both; }
.capability-console[data-console-change="true"] .console-panel:not([hidden]) .console-map-links { animation: console-link-in .55s ease-out both; }
@keyframes console-panel-in { from { opacity: .45; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes console-link-in { from { opacity: .15; } to { opacity: .65; } }
html[data-motion-enabled="false"] .capability-console *, html[data-motion-enabled="false"] .capability-console *::before { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .capability-console *, .capability-console *::before { animation: none !important; transition: none !important; }
}
@media (max-width: 1000px) {
  .console-heading { align-items: start; flex-direction: column; gap: 24px; }
  .console-panel { grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr); }
  .console-map { padding: 20px 12px; align-self: center; }
}
@media (max-width: 640px) {
  .capability-console { padding-bottom: 64px; }
  .console-heading { gap: 20px; margin-bottom: 22px; }
  .console-select { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
  .console-select button { padding: 10px 4px; font-size: 12px; white-space: nowrap; }
  .console-panel { grid-template-columns: minmax(0, 1fr); }
  .console-map { padding: 20px 10px 10px; }
  .console-map-register { font-size: 10px; padding-inline: 8px; letter-spacing: .02em; }
  .console-diagram { margin-top: 7px; }
  .console-reading { border-left: 0; border-top: 1px solid var(--border-charcoal); padding: 23px; }
  .console-reading h3 { font-size: 20px; }
  .console-description { font-size: 13px; margin-bottom: 17px; }
}
@media print {
  .console-select { display: none; }
  .console-panel, .console-panel[hidden] { display: grid; break-inside: avoid; }
  .capability-console * { animation: none !important; transition: none !important; }
}