fix css selectors for demo

Author: justinchiu-cohere

diff-viz-styles.css

@@ -1,4 +1,4 @@
-* {
+#demo-figure * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
@@ -9,19 +9,19 @@
     font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
 }
 
-.demo-wrapper {
+#demo-figure .demo-wrapper {
     position: relative;
     overflow: hidden;
     border-radius: 8px;
 }
 
-.container {
+#demo-figure .container {
     display: flex;
     height: 500px;
     background: #f8f8f8;
 }
 
-.code-panel {
+#demo-figure .code-panel {
     width: 50%;
     background: white;
     display: flex;
@@ -33,7 +33,7 @@
 }
 
 
-.code-header {
+#demo-figure .code-header {
     background: #f5f5f5;
     padding: 12px 16px;
     border-bottom: 1px solid #ddd;
@@ -43,7 +43,7 @@
     text-align: left;
 }
 
-.code-content {
+#demo-figure .code-content {
     flex: 1;
     overflow-y: auto;
     font-size: 12px;
@@ -56,32 +56,32 @@
 }
 
 /* Style scrollbar for Chrome, Safari and Opera */
-.code-content::-webkit-scrollbar {
+#demo-figure .code-content::-webkit-scrollbar {
     width: 8px;
 }
 
-.code-content::-webkit-scrollbar-track {
+#demo-figure .code-content::-webkit-scrollbar-track {
     background: #f5f5f5;
 }
 
-.code-content::-webkit-scrollbar-thumb {
+#demo-figure .code-content::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 4px;
 }
 
-.code-content::-webkit-scrollbar-thumb:hover {
+#demo-figure .code-content::-webkit-scrollbar-thumb:hover {
     background: #999;
 }
 
-.code-line {
+#demo-figure .code-line {
     display: flex;
     align-items: flex-start;
     transition: background-color 0.3s ease;
     padding: 1px 0;
     border-left: 3px solid transparent;
 }
 
-.line-number {
+#demo-figure .line-number {
     color: #999;
     width: 38px;
     flex-shrink: 0;
@@ -91,24 +91,24 @@
     font-size: 12px;
 }
 
-.line-content {
+#demo-figure .line-content {
     flex: 1;
     white-space: pre;
     padding-right: 12px;
     text-align: left;
 }
 
 
-.added {
+#demo-figure .added {
     background-color: #d4edda !important;
 }
 
-.deleted {
+#demo-figure .deleted {
     background-color: #ffebee !important;
     opacity: 0.7;
 }
 
-.modified {
+#demo-figure .modified {
     background-color: #fff3cd;
     border-left: 3px solid #ffc107;
     animation: slideInYellow 0.5s ease;
@@ -143,7 +143,7 @@
 
 
 /* Status badge */
-.status-badge {
+#demo-figure .status-badge {
     position: absolute;
     bottom: 20px;
     left: 50%;
@@ -160,7 +160,7 @@
 }
 
 /* Phase indicator */
-.phase-indicator {
+#demo-figure .phase-indicator {
     display: inline-block;
     width: 10px;
     height: 10px;
@@ -170,22 +170,22 @@
     transition: all 0.3s ease;
 }
 
-.phase-indicator.phase-loading {
+#demo-figure .phase-indicator.phase-loading {
     background: #ff9800;
     animation: pulse 1s infinite;
 }
 
-.phase-indicator.phase-library {
+#demo-figure .phase-indicator.phase-library {
     background: #2196F3;
     animation: pulse 1s infinite;
 }
 
-.phase-indicator.phase-solution {
+#demo-figure .phase-indicator.phase-solution {
     background: #4CAF50;
     animation: pulse 1s infinite;
 }
 
-.phase-indicator.phase-complete {
+#demo-figure .phase-indicator.phase-complete {
     background: #9C27B0;
 }
 
@@ -196,90 +196,90 @@
 
 
 /* Syntax highlighting */
-.keyword { 
+#demo-figure .keyword { 
     color: #0066cc; 
     font-weight: bold; 
 }
 
-.builtin {
+#demo-figure .builtin {
     color: #3366cc;
     font-weight: 500;
 }
 
-.string { 
+#demo-figure .string { 
     color: #009900; 
 }
 
-.docstring {
+#demo-figure .docstring {
     color: #006600;
     font-style: italic;
 }
 
-.comment { 
+#demo-figure .comment { 
     color: #808080; 
     font-style: italic; 
 }
 
-.function { 
+#demo-figure .function { 
     color: #cc6600; 
     font-weight: bold; 
 }
 
-.number { 
+#demo-figure .number { 
     color: #ff6600; 
 }
 
-.decorator {
+#demo-figure .decorator {
     color: #9966cc;
     font-weight: bold;
 }
 
-.type {
+#demo-figure .type {
     color: #006666;
     font-style: italic;
 }
 
 /* Mobile responsive font sizes */
 @media (max-width: 768px) {
-    .code-header {
+    #demo-figure .code-header {
         font-size: 12px;
     }
 
-    .code-content {
+    #demo-figure .code-content {
         font-size: 9px;
         line-height: 10px;
     }
 
-    .line-number {
+    #demo-figure .line-number {
         font-size: 9px;
         width: 22px;
         padding-right: 4px;
     }
 
-    .status-badge {
+    #demo-figure .status-badge {
         font-size: 10px;
         padding: 2px 10px;
         bottom: 10px;
     }
 }
 
 @media (max-width: 480px) {
-    .code-header {
+    #demo-figure .code-header {
         font-size: 10px;
     }
 
-    .code-content {
+    #demo-figure .code-content {
         font-size: 7px;
         line-height: 8px;
     }
 
-    .line-number {
+    #demo-figure .line-number {
         font-size: 7px;
         width: 17px;
         padding-right: 3px;
     }
 
-    .status-badge {
+    #demo-figure .status-badge {
         font-size: 8px;
         padding: 1px 6px;
         bottom: 5px;