From dde40b8512db33d0a9eb58896f7ea8ee11775bc8 Mon Sep 17 00:00:00 2001
From: Lum1104 <linyux1104@163.com>
Date: Fri, 27 Mar 2026 09:29:44 +0800
Subject: [PATCH] refactor(dashboard): rename gold CSS variables to accent
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rename all gold-related CSS custom properties, Tailwind classes,
and keyframe animations from "gold" to "accent" to prepare for
the theme system where the accent color is user-configurable.

- --color-gold -> --color-accent (plus -dim and -bright variants)
- @keyframes goldPulse -> accentPulse
- .animate-gold-pulse -> .animate-accent-pulse
- All text-gold, bg-gold, border-gold, ring-gold Tailwind classes

No behavioral or visual change — pure mechanical rename.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../packages/dashboard/src/App.tsx            |  2 +-
 .../dashboard/src/components/CodeViewer.tsx   |  8 ++++----
 .../dashboard/src/components/CustomNode.tsx   | 12 +++++------
 .../dashboard/src/components/GraphView.tsx    |  2 +-
 .../src/components/KeyboardShortcutsHelp.tsx  |  2 +-
 .../dashboard/src/components/LayerLegend.tsx  |  2 +-
 .../dashboard/src/components/LearnPanel.tsx   | 20 +++++++++----------
 .../dashboard/src/components/NodeInfo.tsx     | 12 +++++------
 .../src/components/PersonaSelector.tsx        |  2 +-
 .../src/components/ProjectOverview.tsx        | 14 ++++++-------
 .../dashboard/src/components/SearchBar.tsx    |  8 ++++----
 .../packages/dashboard/src/index.css          | 16 +++++++--------
 12 files changed, 50 insertions(+), 50 deletions(-)

diff --git a/understand-anything-plugin/packages/dashboard/src/App.tsx b/understand-anything-plugin/packages/dashboard/src/App.tsx
index 58fef79..634461d 100644
--- a/understand-anything-plugin/packages/dashboard/src/App.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/App.tsx
@@ -200,7 +200,7 @@ function App() {
           <LayerLegend />
           <button
             onClick={() => setShowKeyboardHelp(true)}
-            className="text-text-muted hover:text-gold transition-colors"
+            className="text-text-muted hover:text-accent transition-colors"
             title="Keyboard shortcuts (Shift + ?)"
           >
             <svg
diff --git a/understand-anything-plugin/packages/dashboard/src/components/CodeViewer.tsx b/understand-anything-plugin/packages/dashboard/src/components/CodeViewer.tsx
index d1df7c3..859799d 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/CodeViewer.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/CodeViewer.tsx
@@ -56,14 +56,14 @@ export default function CodeViewer() {
       <div className="flex-1 overflow-auto p-5">
         {/* Summary */}
         <div className="mb-4">
-          <h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">Summary</h4>
+          <h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">Summary</h4>
           <p className="text-sm text-text-secondary leading-relaxed">{node.summary}</p>
         </div>
 
         {/* Language notes callout */}
         {node.languageNotes && (
-          <div className="mb-4 bg-gold/5 border border-gold/20 rounded-lg p-3">
-            <h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-1.5">Language Notes</h4>
+          <div className="mb-4 bg-accent/5 border border-accent/20 rounded-lg p-3">
+            <h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-1.5">Language Notes</h4>
             <p className="text-sm text-text-secondary leading-relaxed">{node.languageNotes}</p>
           </div>
         )}
@@ -71,7 +71,7 @@ export default function CodeViewer() {
         {/* Tags */}
         {node.tags.length > 0 && (
           <div className="mb-4">
-            <h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">Tags</h4>
+            <h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">Tags</h4>
             <div className="flex flex-wrap gap-1.5">
               {node.tags.map((tag) => (
                 <span key={tag} className="text-[11px] glass text-text-secondary px-2.5 py-1 rounded-full">
diff --git a/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx b/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx
index 111d7a7..d2ec838 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/CustomNode.tsx
@@ -20,7 +20,7 @@ const typeTextColors: Record<string, string> = {
 
 const complexityColors: Record<string, string> = {
   simple: "text-node-function",
-  moderate: "text-gold-dim",
+  moderate: "text-accent-dim",
   complex: "text-[#c97070]",
 };
 
@@ -51,17 +51,17 @@ function CustomNodeComponent({
 
   let extraClass = "";
   if (data.isSelected) {
-    extraClass = "ring-2 ring-gold node-glow";
+    extraClass = "ring-2 ring-accent node-glow";
   } else if (data.isTourHighlighted) {
-    extraClass = "ring-2 ring-gold-dim animate-gold-pulse";
+    extraClass = "ring-2 ring-accent-dim animate-accent-pulse";
   } else if (data.isHighlighted) {
     const score = data.searchScore ?? 1;
     if (score <= 0.1) {
-      extraClass = "ring-2 ring-gold-bright";
+      extraClass = "ring-2 ring-accent-bright";
     } else if (score <= 0.3) {
-      extraClass = "ring-2 ring-gold";
+      extraClass = "ring-2 ring-accent";
     } else {
-      extraClass = "ring-1 ring-gold-dim/60";
+      extraClass = "ring-1 ring-accent-dim/60";
     }
   }
 
diff --git a/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx b/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx
index b1d6fe3..a7ee299 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/GraphView.tsx
@@ -429,7 +429,7 @@ function GraphViewInner() {
       {layouting && (
         <div className="absolute inset-0 z-50 flex items-center justify-center bg-root/80 rounded-lg">
           <div className="text-center">
-            <div className="inline-block w-8 h-8 border-2 border-gold border-t-transparent rounded-full animate-spin mb-3" />
+            <div className="inline-block w-8 h-8 border-2 border-accent border-t-transparent rounded-full animate-spin mb-3" />
             <p className="text-text-secondary text-sm">
               Laying out {topoNodes.length.toLocaleString()} nodes...
             </p>
diff --git a/understand-anything-plugin/packages/dashboard/src/components/KeyboardShortcutsHelp.tsx b/understand-anything-plugin/packages/dashboard/src/components/KeyboardShortcutsHelp.tsx
index 22178f5..c9fcd1f 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/KeyboardShortcutsHelp.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/KeyboardShortcutsHelp.tsx
@@ -62,7 +62,7 @@ export default function KeyboardShortcutsHelp({
         <div className="p-6 space-y-6">
           {Object.entries(groupedShortcuts).map(([category, categoryShortcuts]) => (
             <div key={category}>
-              <h3 className="text-sm font-semibold text-gold uppercase tracking-wider mb-3">
+              <h3 className="text-sm font-semibold text-accent uppercase tracking-wider mb-3">
                 {category}
               </h3>
               <div className="space-y-2">
diff --git a/understand-anything-plugin/packages/dashboard/src/components/LayerLegend.tsx b/understand-anything-plugin/packages/dashboard/src/components/LayerLegend.tsx
index 6d4fc24..f98e389 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/LayerLegend.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/LayerLegend.tsx
@@ -47,7 +47,7 @@ export default function LayerLegend() {
         disabled={!hasLayers}
         className={`px-2 py-0.5 rounded text-[11px] font-medium transition-colors ${
           showLayers && hasLayers
-            ? "bg-gold/20 text-gold"
+            ? "bg-accent/20 text-accent"
             : hasLayers
               ? "bg-elevated text-text-secondary hover:bg-surface"
               : "bg-elevated text-text-muted cursor-not-allowed"
diff --git a/understand-anything-plugin/packages/dashboard/src/components/LearnPanel.tsx b/understand-anything-plugin/packages/dashboard/src/components/LearnPanel.tsx
index 2534fd4..09e5a9c 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/LearnPanel.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/LearnPanel.tsx
@@ -47,13 +47,13 @@ export default function LearnPanel() {
 
         <button
           onClick={startTour}
-          className="w-full mb-4 bg-gold/10 border border-gold/30 text-gold text-sm font-medium py-2.5 px-4 rounded-lg hover:bg-gold/20 transition-colors"
+          className="w-full mb-4 bg-accent/10 border border-accent/30 text-accent text-sm font-medium py-2.5 px-4 rounded-lg hover:bg-accent/20 transition-colors"
         >
           Start Tour
         </button>
 
         <div className="space-y-2">
-          <h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">
+          <h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">
             Steps
           </h3>
           {tourSteps.map((step, i) => (
@@ -61,7 +61,7 @@ export default function LearnPanel() {
               key={step.order}
               className="flex items-start gap-2 text-xs bg-elevated rounded-lg px-3 py-2 border border-border-subtle"
             >
-              <span className="text-gold font-mono shrink-0 mt-0.5">
+              <span className="text-accent font-mono shrink-0 mt-0.5">
                 {i + 1}.
               </span>
               <span className="text-text-secondary">{step.title}</span>
@@ -86,7 +86,7 @@ export default function LearnPanel() {
       {/* Header with progress counter and exit */}
       <div className="flex items-center justify-between px-3 py-2 border-b border-border-subtle shrink-0">
         <div className="flex items-center gap-2">
-          <h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider">
+          <h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider">
             Tour
           </h3>
           <span className="text-xs text-text-muted">
@@ -104,7 +104,7 @@ export default function LearnPanel() {
       {/* Progress bar */}
       <div className="h-1 bg-elevated shrink-0">
         <div
-          className="h-full bg-gold transition-all duration-300"
+          className="h-full bg-accent transition-all duration-300"
           style={{ width: `${progressPct}%` }}
         />
       </div>
@@ -154,8 +154,8 @@ export default function LearnPanel() {
 
         {/* Language lesson */}
         {step.languageLesson && (
-          <div className="bg-gold/5 border border-gold/20 rounded p-3 mb-4">
-            <h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-1.5">
+          <div className="bg-accent/5 border border-accent/20 rounded p-3 mb-4">
+            <h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-1.5">
               Language Lesson
             </h4>
             <p className="text-sm text-text-secondary leading-relaxed">
@@ -167,7 +167,7 @@ export default function LearnPanel() {
         {/* Referenced component pills */}
         {step.nodeIds.length > 0 && (
           <div className="mb-4">
-            <h4 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">
+            <h4 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">
               Referenced Components
             </h4>
             <div className="flex flex-wrap gap-1.5">
@@ -198,7 +198,7 @@ export default function LearnPanel() {
               onClick={() => setTourStep(i)}
               className={`w-2 h-2 rounded-full transition-colors ${
                 i === currentTourStep
-                  ? "bg-gold"
+                  ? "bg-accent"
                   : "bg-elevated hover:bg-surface"
               }`}
               aria-label={`Go to step ${i + 1}`}
@@ -217,7 +217,7 @@ export default function LearnPanel() {
           </button>
           <button
             onClick={isLast ? stopTour : nextTourStep}
-            className="flex-1 text-xs bg-gold/10 border border-gold/30 text-gold py-1.5 rounded-lg hover:bg-gold/20 transition-colors"
+            className="flex-1 text-xs bg-accent/10 border border-accent/30 text-accent py-1.5 rounded-lg hover:bg-accent/20 transition-colors"
           >
             {isLast ? "Finish" : "Next"}
           </button>
diff --git a/understand-anything-plugin/packages/dashboard/src/components/NodeInfo.tsx b/understand-anything-plugin/packages/dashboard/src/components/NodeInfo.tsx
index 78c1041..ad60b1b 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/NodeInfo.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/NodeInfo.tsx
@@ -11,7 +11,7 @@ const typeBadgeColors: Record<string, string> = {
 
 const complexityBadgeColors: Record<string, string> = {
   simple: "text-node-function border border-node-function/30 bg-node-function/10",
-  moderate: "text-gold-dim border border-gold-dim/30 bg-gold-dim/10",
+  moderate: "text-accent-dim border border-accent-dim/30 bg-accent-dim/10",
   complex: "text-[#c97070] border border-[#c97070]/30 bg-[#c97070]/10",
 };
 
@@ -75,7 +75,7 @@ export default function NodeInfo() {
         <div className="mb-4">
           <button
             onClick={() => setLanguageExpanded(!languageExpanded)}
-            className="flex items-center gap-1.5 text-xs font-semibold text-gold uppercase tracking-wider mb-2 hover:text-gold-bright transition-colors"
+            className="flex items-center gap-1.5 text-xs font-semibold text-accent uppercase tracking-wider mb-2 hover:text-accent-bright transition-colors"
           >
             <svg
               className={`w-3 h-3 transition-transform ${languageExpanded ? "rotate-90" : ""}`}
@@ -88,7 +88,7 @@ export default function NodeInfo() {
             Language Concepts
           </button>
           {languageExpanded && (
-            <div className="bg-gold/5 border border-gold/20 rounded-lg p-3">
+            <div className="bg-accent/5 border border-accent/20 rounded-lg p-3">
               <p className="text-sm text-text-secondary leading-relaxed">
                 {node.languageNotes}
               </p>
@@ -99,7 +99,7 @@ export default function NodeInfo() {
 
       {node.tags.length > 0 && (
         <div className="mb-4">
-          <h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">
+          <h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">
             Tags
           </h3>
           <div className="flex flex-wrap gap-1.5">
@@ -117,7 +117,7 @@ export default function NodeInfo() {
 
       {connections.length > 0 && (
         <div>
-          <h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">
+          <h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">
             Connections ({connections.length})
           </h3>
           <div className="space-y-1.5">
@@ -132,7 +132,7 @@ export default function NodeInfo() {
                   key={i}
                   className="text-xs bg-elevated rounded-lg px-3 py-2 border border-border-subtle flex items-center gap-2"
                 >
-                  <span className="text-gold font-mono">{arrow}</span>
+                  <span className="text-accent font-mono">{arrow}</span>
                   <span className="text-text-muted">{edge.type}</span>
                   <span className="text-text-primary truncate">
                     {otherNode?.name ?? otherId}
diff --git a/understand-anything-plugin/packages/dashboard/src/components/PersonaSelector.tsx b/understand-anything-plugin/packages/dashboard/src/components/PersonaSelector.tsx
index 98e42d7..d496a7c 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/PersonaSelector.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/PersonaSelector.tsx
@@ -32,7 +32,7 @@ export default function PersonaSelector() {
           title={p.description}
           className={`px-2.5 py-1 rounded text-[11px] font-medium transition-colors ${
             persona === p.id
-              ? "bg-gold/20 text-gold"
+              ? "bg-accent/20 text-accent"
               : "text-text-muted hover:text-text-secondary hover:bg-surface"
           }`}
         >
diff --git a/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx b/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx
index 7438620..3969511 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/ProjectOverview.tsx
@@ -30,19 +30,19 @@ export default function ProjectOverview() {
       {/* Stats grid */}
       <div className="grid grid-cols-2 gap-3 mb-6">
         <div className="bg-elevated rounded-lg p-3 border border-border-subtle">
-          <div className="text-2xl font-mono font-medium text-gold">{nodes.length}</div>
+          <div className="text-2xl font-mono font-medium text-accent">{nodes.length}</div>
           <div className="text-[11px] text-text-muted uppercase tracking-wider mt-1">Nodes</div>
         </div>
         <div className="bg-elevated rounded-lg p-3 border border-border-subtle">
-          <div className="text-2xl font-mono font-medium text-gold">{edges.length}</div>
+          <div className="text-2xl font-mono font-medium text-accent">{edges.length}</div>
           <div className="text-[11px] text-text-muted uppercase tracking-wider mt-1">Edges</div>
         </div>
         <div className="bg-elevated rounded-lg p-3 border border-border-subtle">
-          <div className="text-2xl font-mono font-medium text-gold">{layers.length}</div>
+          <div className="text-2xl font-mono font-medium text-accent">{layers.length}</div>
           <div className="text-[11px] text-text-muted uppercase tracking-wider mt-1">Layers</div>
         </div>
         <div className="bg-elevated rounded-lg p-3 border border-border-subtle">
-          <div className="text-2xl font-mono font-medium text-gold">{Object.keys(typeCounts).length}</div>
+          <div className="text-2xl font-mono font-medium text-accent">{Object.keys(typeCounts).length}</div>
           <div className="text-[11px] text-text-muted uppercase tracking-wider mt-1">Types</div>
         </div>
       </div>
@@ -50,7 +50,7 @@ export default function ProjectOverview() {
       {/* Languages */}
       {project.languages.length > 0 && (
         <div className="mb-5">
-          <h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">Languages</h3>
+          <h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">Languages</h3>
           <div className="flex flex-wrap gap-1.5">
             {project.languages.map((lang) => (
               <span key={lang} className="text-[11px] glass text-text-secondary px-2.5 py-1 rounded-full">
@@ -64,7 +64,7 @@ export default function ProjectOverview() {
       {/* Frameworks */}
       {project.frameworks.length > 0 && (
         <div className="mb-5">
-          <h3 className="text-[11px] font-semibold text-gold uppercase tracking-wider mb-2">Frameworks</h3>
+          <h3 className="text-[11px] font-semibold text-accent uppercase tracking-wider mb-2">Frameworks</h3>
           <div className="flex flex-wrap gap-1.5">
             {project.frameworks.map((fw) => (
               <span key={fw} className="text-[11px] glass text-text-secondary px-2.5 py-1 rounded-full">
@@ -84,7 +84,7 @@ export default function ProjectOverview() {
       {hasTour && (
         <button
           onClick={startTour}
-          className="w-full bg-gold/10 border border-gold/30 text-gold text-sm font-medium py-2.5 px-4 rounded-lg hover:bg-gold/20 transition-all duration-200"
+          className="w-full bg-accent/10 border border-accent/30 text-accent text-sm font-medium py-2.5 px-4 rounded-lg hover:bg-accent/20 transition-all duration-200"
         >
           Start Guided Tour
         </button>
diff --git a/understand-anything-plugin/packages/dashboard/src/components/SearchBar.tsx b/understand-anything-plugin/packages/dashboard/src/components/SearchBar.tsx
index 8a8f245..112b552 100644
--- a/understand-anything-plugin/packages/dashboard/src/components/SearchBar.tsx
+++ b/understand-anything-plugin/packages/dashboard/src/components/SearchBar.tsx
@@ -94,14 +94,14 @@ export default function SearchBar() {
           onChange={handleInputChange}
           onFocus={() => setDropdownOpen(true)}
           placeholder="Search nodes by name, summary, or tags..."
-          className="flex-1 bg-elevated text-text-primary text-sm rounded-lg px-3 py-1.5 border border-border-subtle focus:outline-none focus:border-gold/50 placeholder-text-muted"
+          className="flex-1 bg-elevated text-text-primary text-sm rounded-lg px-3 py-1.5 border border-border-subtle focus:outline-none focus:border-accent/50 placeholder-text-muted"
         />
         <div className="flex items-center gap-1 bg-elevated rounded-lg p-0.5 shrink-0">
           <button
             onClick={() => setSearchMode("fuzzy")}
             className={`text-[10px] px-1.5 py-0.5 rounded transition-colors ${
               searchMode === "fuzzy"
-                ? "bg-gold/20 text-gold"
+                ? "bg-accent/20 text-accent"
                 : "text-text-muted hover:text-text-secondary"
             }`}
           >
@@ -111,7 +111,7 @@ export default function SearchBar() {
             onClick={() => setSearchMode("semantic")}
             className={`text-[10px] px-1.5 py-0.5 rounded transition-colors ${
               searchMode === "semantic"
-                ? "bg-gold/20 text-gold"
+                ? "bg-accent/20 text-accent"
                 : "text-text-muted hover:text-text-secondary"
             }`}
           >
@@ -159,7 +159,7 @@ export default function SearchBar() {
                 <div className="flex items-center gap-1.5 shrink-0">
                   <div className="w-16 h-1.5 bg-elevated rounded-full overflow-hidden">
                     <div
-                      className="h-full bg-gold rounded-full"
+                      className="h-full bg-accent rounded-full"
                       style={{ width: `${relevance}%` }}
                     />
                   </div>
diff --git a/understand-anything-plugin/packages/dashboard/src/index.css b/understand-anything-plugin/packages/dashboard/src/index.css
index a0f8ffa..3afaafa 100644
--- a/understand-anything-plugin/packages/dashboard/src/index.css
+++ b/understand-anything-plugin/packages/dashboard/src/index.css
@@ -7,10 +7,10 @@
   --color-elevated: #1a1a1a;
   --color-panel: #141414;
 
-  /* Gold accent spectrum */
-  --color-gold: #d4a574;
-  --color-gold-dim: #c9a96e;
-  --color-gold-bright: #e8c49a;
+  /* Accent spectrum */
+  --color-accent: #d4a574;
+  --color-accent-dim: #c9a96e;
+  --color-accent-bright: #e8c49a;
 
   /* Text hierarchy */
   --color-text-primary: #f5f0eb;
@@ -89,7 +89,7 @@ body {
   font-family: var(--font-mono);
   font-size: 0.75rem;
   font-weight: 600;
-  color: var(--color-gold);
+  color: var(--color-accent);
   background: rgba(212, 165, 116, 0.1);
   border: 1px solid rgba(212, 165, 116, 0.3);
   border-radius: 0.25rem;
@@ -117,7 +117,7 @@ body {
   }
 }
 
-@keyframes goldPulse {
+@keyframes accentPulse {
   0%, 100% {
     box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.4);
   }
@@ -135,8 +135,8 @@ body {
   animation: slideUp 0.3s ease-out forwards;
 }
 
-.animate-gold-pulse {
-  animation: goldPulse 2s ease-in-out infinite;
+.animate-accent-pulse {
+  animation: accentPulse 2s ease-in-out infinite;
 }
 
 /* Node selection glow */