/* ================================================================
   Custom Styles — Chapter 6: Graphs
   Reveal.js White Theme Overrides
   ================================================================ */

:root {
  --graph-primary: #2e86c1;
  --graph-primary-dark: #1a5276;
  --graph-primary-light: #85c1e9;
  --graph-secondary: #2c3e50;
  --graph-secondary-light: #5d6d7e;
  --graph-accent-green: #2ecc71;
  --graph-accent-green-dark: #27ae60;
  --graph-accent-orange: #e67e22;
  --graph-accent-orange-dark: #d35400;
  --graph-accent-red: #e74c3c;
  --graph-text-muted: #7f8c8d;
  --graph-card-bg: #ffffff;
  --graph-shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --graph-shadow-md: 0 6px 20px rgba(0,0,0,0.12);
  --graph-radius: 12px;
}

/* Base font size */
.reveal {
  font-size: 38px;
}

/* ================================================================
   SLIDE 1 — Title Slide: Network Graph
   ================================================================ */
.graph-title-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.5em 1em;
}

.graph-hero {
  width: 100%;
  max-width: 520px;
  margin-bottom: 0.15em;
}

.title-graph-svg {
  width: 100%;
  height: auto;
  display: block;
}

.graph-title-slide h1 {
  font-size: 2.4em;
  margin: 0;
  font-weight: 800;
  color: var(--graph-primary-dark);
  letter-spacing: -0.03em;
  opacity: 0;
  animation: titleFadeIn 0.8s ease 2.2s forwards;
}

.graph-title-slide .subtitle {
  font-size: 0.55em;
  color: var(--graph-text-muted);
  margin-top: 0.15em;
  font-weight: 400;
  letter-spacing: 0.02em;
  opacity: 0;
  animation: titleFadeIn 0.8s ease 2.4s forwards;
}

.title-footer {
  display: flex;
  gap: 1.5em;
  justify-content: center;
  margin-top: 0.35em;
  font-size: 0.5em;
  color: var(--graph-text-muted);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  animation: titleFadeIn 0.8s ease 2.6s forwards;
}

.title-footer span {
  position: relative;
}

.title-footer span + span::before {
  content: "\00B7";
  position: absolute;
  left: -1em;
  color: var(--graph-primary-light);
  font-weight: 700;
}

@keyframes titleFadeIn {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Network graph node animations --- */
.graph-node {
  opacity: 0;
  animation: graphNodeAppear 0.45s ease forwards;
}

.graph-node.n0  { animation-delay: 0.1s; }
.graph-node.n1  { animation-delay: 0.2s; }
.graph-node.n2  { animation-delay: 0.3s; }
.graph-node.n3  { animation-delay: 0.4s; }
.graph-node.n4  { animation-delay: 0.5s; }
.graph-node.n5  { animation-delay: 0.6s; }
.graph-node.n6  { animation-delay: 0.7s; }
.graph-node.n7  { animation-delay: 0.8s; }

/* --- Network graph edge animations --- */
.graph-edge {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: graphDrawEdge 0.5s ease forwards;
}

.graph-edge.e0  { animation-delay: 0.9s; }
.graph-edge.e1  { animation-delay: 1.0s; }
.graph-edge.e2  { animation-delay: 1.1s; }
.graph-edge.e3  { animation-delay: 1.2s; }
.graph-edge.e4  { animation-delay: 1.3s; }
.graph-edge.e5  { animation-delay: 1.4s; }
.graph-edge.e6  { animation-delay: 1.5s; }
.graph-edge.e7  { animation-delay: 1.6s; }
.graph-edge.e8  { animation-delay: 1.7s; }
.graph-edge.e9  { animation-delay: 1.8s; }
.graph-edge.e10 { animation-delay: 1.9s; }
.graph-edge.e11 { animation-delay: 2.0s; }

/* Edge weight labels follow the edge */
.graph-edge-weight {
  opacity: 0;
  animation: weightFadeIn 0.3s ease forwards;
}

.graph-edge-weight.w0  { animation-delay: 1.05s; }
.graph-edge-weight.w1  { animation-delay: 1.15s; }
.graph-edge-weight.w2  { animation-delay: 1.25s; }
.graph-edge-weight.w3  { animation-delay: 1.35s; }
.graph-edge-weight.w4  { animation-delay: 1.45s; }
.graph-edge-weight.w5  { animation-delay: 1.55s; }
.graph-edge-weight.w6  { animation-delay: 1.65s; }
.graph-edge-weight.w7  { animation-delay: 1.75s; }
.graph-edge-weight.w8  { animation-delay: 1.85s; }
.graph-edge-weight.w9  { animation-delay: 1.95s; }
.graph-edge-weight.w10 { animation-delay: 2.05s; }
.graph-edge-weight.w11 { animation-delay: 2.15s; }

@keyframes graphNodeAppear {
  0%   { opacity: 0; transform: scale(0); }
  65%  { transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes graphDrawEdge {
  to { stroke-dashoffset: 0; }
}

@keyframes weightFadeIn {
  to { opacity: 1; }
}

/* ================================================================
   SLIDE 2 — Why Study Graphs?
   ================================================================ */
.twocol-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8em;
  align-items: start;
  margin-top: 0.15em;
  height: calc(100% - 1.2em);
}

.twocol-left {
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  text-align: left;
}

.twocol-left .lead-text {
  font-size: 0.6em;
  line-height: 1.35;
  color: var(--graph-secondary);
  margin: 0;
}

.twocol-left .lead-text strong {
  color: var(--graph-primary-dark);
}

.example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25em;
  margin-top: 0.15em;
}

.example-item {
  display: flex;
  align-items: center;
  gap: 0.35em;
  font-size: 0.5em;
  padding: 0.25em 0.5em;
  background: var(--graph-card-bg);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border-left: 3px solid var(--graph-primary-light);
  color: var(--graph-secondary);
  font-weight: 500;
}

.example-item .ex-icon {
  width: 1.4em;
  height: 1.4em;
  flex-shrink: 0;
}

.twocol-right {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.5em;
  min-height: 260px;
}

.twocol-right svg {
  width: 100%;
  height: auto;
  max-height: 480px;
}

/* City node animations */
.city-node {
  opacity: 0;
  animation: cityNodeAppear 0.45s ease forwards;
}

.city-node.c0 { animation-delay: 0.1s; }
.city-node.c1 { animation-delay: 0.2s; }
.city-node.c2 { animation-delay: 0.3s; }
.city-node.c3 { animation-delay: 0.4s; }
.city-node.c4 { animation-delay: 0.5s; }
.city-node.c5 { animation-delay: 0.6s; }

/* City road animations */
.road-edge {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: roadDrawEdge 0.5s ease forwards;
}

.road-edge.r0 { animation-delay: 0.7s; }
.road-edge.r1 { animation-delay: 0.85s; }
.road-edge.r2 { animation-delay: 1.0s; }
.road-edge.r3 { animation-delay: 1.15s; }
.road-edge.r4 { animation-delay: 1.3s; }
.road-edge.r5 { animation-delay: 1.45s; }
.road-edge.r6 { animation-delay: 1.6s; }
.road-edge.r7 { animation-delay: 1.75s; }
.road-edge.r8 { animation-delay: 1.9s; }
.road-edge.r9 { animation-delay: 2.05s; }

/* Road weight labels */
.road-weight {
  opacity: 0;
  animation: weightFadeIn 0.3s ease forwards;
}

.road-weight.r0 { animation-delay: 0.85s; }
.road-weight.r1 { animation-delay: 1.0s; }
.road-weight.r2 { animation-delay: 1.15s; }
.road-weight.r3 { animation-delay: 1.3s; }
.road-weight.r4 { animation-delay: 1.45s; }
.road-weight.r5 { animation-delay: 1.6s; }
.road-weight.r6 { animation-delay: 1.75s; }
.road-weight.r7 { animation-delay: 1.9s; }
.road-weight.r8 { animation-delay: 2.05s; }
.road-weight.r9 { animation-delay: 2.2s; }

@keyframes cityNodeAppear {
  0%   { opacity: 0; transform: scale(0); }
  65%  { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes roadDrawEdge {
  to { stroke-dashoffset: 0; }
}

/* Bottom callout */
.bottom-callout {
  margin-top: 0.25em;
  text-align: center;
  font-size: 0.55em;
  font-style: italic;
  color: var(--graph-primary-dark);
  background: #ebf5fb;
  border-radius: var(--graph-radius);
  padding: 0.35em 0.8em;
  border-left: 4px solid var(--graph-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
  opacity: 0;
  animation: calloutSlideUp 0.6s ease 2.4s forwards;
}

@keyframes calloutSlideUp {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   Slide 2 — Section Title Override
   ================================================================ */
.section-title-graph {
  font-size: 1.1em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.1em 0;
  text-align: left;
  letter-spacing: -0.02em;
}

/* ================================================================
   SLIDE 3 — 6.1 Introduction: What is a Graph?
   ================================================================ */
.intro-section-title {
  font-size: 0.85em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.05em 0;
  text-align: left;
  letter-spacing: -0.02em;
}

.intro-subtitle {
  font-size: 0.55em;
  color: var(--graph-text-muted);
  margin: 0 0 0.1em 0;
  text-align: left;
  font-weight: 400;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
  align-items: start;
  margin-top: 0.05em;
  height: calc(100% - 0.7em);
}

.intro-left {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  text-align: left;
}

.intro-left .def-text {
  font-size: 0.48em;
  line-height: 1.35;
  color: var(--graph-secondary);
  margin: 0;
}

.intro-left .def-text strong {
  color: var(--graph-primary-dark);
}

.intro-katex-display {
  text-align: center;
  font-size: 1em;
  margin: 0.05em 0;
  padding: 0.15em;
  background: #f8f9fa;
  border-radius: 6px;
  color: var(--graph-primary-dark);
}

.intro-left .sets-text {
  font-size: 0.45em;
  color: var(--graph-secondary);
  margin: 0;
  line-height: 1.4;
}

.intro-left .sets-text .mono {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 600;
  color: var(--graph-primary-dark);
}

.intro-left .section-label {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin: 0.1em 0 0.05em 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prop-list {
  list-style: none;
  padding: 0;
  margin: 0.05em 0 0;
}

.prop-list li {
  display: flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.15em 0;
  font-size: 0.48em;
  color: var(--graph-secondary);
  line-height: 1.25;
}

.prop-list li .prop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background: #ebf5fb;
  color: var(--graph-primary);
  font-weight: 700;
  flex-shrink: 0;
}

.intro-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.3em;
  min-height: 250px;
}

.intro-right svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Intro SVG node animation */
.intro-node {
  opacity: 0;
  animation: introNodePop 0.4s ease forwards;
}
.intro-node.in0 { animation-delay: 0.1s; }
.intro-node.in1 { animation-delay: 0.2s; }
.intro-node.in2 { animation-delay: 0.3s; }
.intro-node.in3 { animation-delay: 0.4s; }
.intro-node.in4 { animation-delay: 0.5s; }

@keyframes introNodePop {
  0%   { opacity: 0; transform: scale(0); }
  65%  { transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1); }
}

/* Fragment-based edge reveal (appears green) */
.edge-reveal {
  opacity: 0;
  stroke: #2ecc71;
  stroke-width: 3;
  transition: opacity 0.4s ease;
}

/* Formula display under graph */
.graph-formula-box {
  margin-top: 0.1em;
  font-size: 0.6em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  text-align: center;
  padding: 0.1em 0.6em;
  background: #f8f9fa;
  border-radius: 6px;
}

/* Callout that uses fragments (no auto-animation) */
.callout-frag {
  margin-top: 0.12em;
  text-align: center;
  font-size: 0.48em;
  font-style: italic;
  color: var(--graph-primary-dark);
  background: #ebf5fb;
  border-radius: var(--graph-radius);
  padding: 0.25em 0.8em;
  border-left: 4px solid var(--graph-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ================================================================
   SLIDE 4 — Building a Graph
   ================================================================ */
.build-section-title {
  font-size: 0.9em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.1em 0;
  text-align: left;
  letter-spacing: -0.02em;
}

.build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6em;
  align-items: start;
  margin-top: 0.05em;
  height: calc(100% - 0.7em);
}

.build-left {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  text-align: left;
}

.build-step {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  padding: 0.2em 0.4em;
  background: var(--graph-card-bg);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  border-left: 3px solid var(--graph-primary-light);
}

.build-step .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--graph-primary);
  color: #fff;
  font-size: 0.5em;
  font-weight: 700;
  flex-shrink: 0;
}

.build-step .step-text {
  font-size: 0.48em;
  line-height: 1.3;
  color: var(--graph-secondary);
  margin: 0;
}

.build-step .step-text strong {
  color: var(--graph-primary-dark);
}

.build-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.3em;
  min-height: 260px;
}

.build-right svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Node pop-in for build graph (activated via fragment) */
.node-build {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.node-build.visible {
  opacity: 1;
  transform: scale(1);
}
.node-build.nd0 { transition-delay: 0.00s; }
.node-build.nd1 { transition-delay: 0.07s; }
.node-build.nd2 { transition-delay: 0.14s; }
.node-build.nd3 { transition-delay: 0.21s; }
.node-build.nd4 { transition-delay: 0.28s; }
.node-build.nd5 { transition-delay: 0.35s; }

/* Edge building fragments */
.edge-build {
  opacity: 0;
  stroke: #95a5a6;
  stroke-width: 2.5;
  transition: opacity 0.35s ease, stroke 0.35s ease;
}
.edge-build.visible {
  opacity: 1;
}

/* Cycle edge (F-A) */
.edge-build.edge-cycle {
  stroke: #e67e22;
  stroke-width: 3.5;
  stroke-dasharray: 8,5;
}

/* Cycle detection label */
.cycle-label {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cycle-label.visible {
  opacity: 1;
}

.cycle-label rect {
  fill: #fef9e7;
  stroke: #e67e22;
  stroke-width: 1.5;
  rx: 5;
}
.cycle-label text {
  font-size: 14px;
  font-weight: 700;
  fill: #d35400;
}

/* Important note card */
.build-note-card {
  background: #fef9e7;
  border-left: 4px solid var(--graph-accent-orange);
  border-radius: 0 var(--graph-radius) var(--graph-radius) 0;
  padding: 0.2em 0.5em;
  margin-top: 0.08em;
  font-size: 0.42em;
  line-height: 1.35;
  color: var(--graph-secondary);
}
.build-note-card strong {
  color: var(--graph-accent-orange-dark);
}
.build-note-card ul {
  list-style: none;
  padding: 0;
  margin: 0.05em 0 0;
}
.build-note-card ul li {
  padding: 0.05em 0;
}
.build-note-card ul li::before {
  content: "\2713";
  color: var(--graph-accent-orange);
  font-weight: 700;
  margin-right: 0.4em;
}

/* Bottom summary badges for Slide 4 */
.build-summary {
  margin-top: 0.12em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3em;
  justify-content: center;
  font-size: 0.42em;
}
.summary-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.15em 0.55em;
  border-radius: 50px;
  font-weight: 600;
  color: #fff;
}
.summary-badge.sb-blue   { background: #2e86c1; }
.summary-badge.sb-green  { background: #27ae60; }
.summary-badge.sb-orange { background: #e67e22; }
.summary-badge.sb-gray   { background: #7f8c8d; }

/* ================================================================
   SLIDE 5 — Graph Terminologies (Part 1)
   ================================================================ */
.term-section-title {
  font-size: 0.8em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.05em 0;
  text-align: left;
  letter-spacing: -0.02em;
}
.term-subtitle {
  font-size: 0.5em;
  color: var(--graph-text-muted);
  margin: 0 0 0.08em 0;
  text-align: left;
  font-weight: 400;
}

.term-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  align-items: start;
  margin-top: 0.05em;
  height: calc(100% - 0.6em);
}

.term-left {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  text-align: left;
}

.term-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.2em 0.45em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border-left: 3px solid var(--graph-primary-light);
  font-size: 0.45em;
  line-height: 1.3;
}
.term-card h4 {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin: 0 0 0.03em 0;
}
.term-card p {
  margin: 0;
  color: var(--graph-secondary);
}
.term-card .color-dot {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  margin-right: 0.25em;
  vertical-align: middle;
}

.term-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.3em;
  min-height: 250px;
}
.term-right svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Term node pop-in */
.term-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.term-node.visible {
  opacity: 1;
  transform: scale(1);
}
.term-node.tn0 { transition-delay: 0.00s; }
.term-node.tn1 { transition-delay: 0.08s; }
.term-node.tn2 { transition-delay: 0.16s; }
.term-node.tn3 { transition-delay: 0.24s; }
.term-node.tn4 { transition-delay: 0.32s; }

/* Term base edges */
.term-edge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.term-edge.visible {
  opacity: 1;
}

/* Highlight overlays for vertices */
.hl-overlay {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hl-overlay.visible {
  opacity: 1;
}

/* Highlight overlays for edges */
.hl-edge {
  opacity: 0;
  transition: opacity 0.4s ease, stroke 0.4s ease;
}
.hl-edge.visible {
  opacity: 1;
}

/* Chain summary at bottom */
.chain-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  margin-top: 0.1em;
  font-size: 0.45em;
}
.chain-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15em 0.5em;
  border-radius: 6px;
  font-weight: 600;
  color: #fff;
  background: var(--graph-primary);
}
.chain-arrow {
  font-size: 1em;
  color: var(--graph-primary-light);
  font-weight: 700;
}

/* ================================================================
   SLIDE 6 — Graph Terminologies (Part 2)
   ================================================================ */
.degree-section-title {
  font-size: 0.8em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.05em 0;
  text-align: left;
  letter-spacing: -0.02em;
}
.degree-subtitle {
  font-size: 0.5em;
  color: var(--graph-text-muted);
  margin: 0 0 0.08em 0;
  text-align: left;
  font-weight: 400;
}

.degree-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  align-items: start;
  margin-top: 0.05em;
  height: calc(100% - 0.6em);
}

.degree-left {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  text-align: left;
}

.degree-left .def-text {
  font-size: 0.48em;
  line-height: 1.35;
  color: var(--graph-secondary);
  margin: 0;
}
.degree-left .def-text strong {
  color: var(--graph-primary-dark);
}

.degree-formula-box {
  text-align: center;
  font-size: 0.85em;
  margin: 0.05em 0;
  padding: 0.12em 0.3em;
  background: #f8f9fa;
  border-radius: 6px;
  color: var(--graph-primary-dark);
}

.degree-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.3em;
  min-height: 250px;
}
.degree-right svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Degree graph base nodes and edges */
.dg-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dg-node.visible {
  opacity: 1;
  transform: scale(1);
}
.dg-node.dn0 { transition-delay: 0.00s; }
.dg-node.dn1 { transition-delay: 0.06s; }
.dg-node.dn2 { transition-delay: 0.12s; }
.dg-node.dn3 { transition-delay: 0.18s; }
.dg-node.dn4 { transition-delay: 0.00s; }
.dg-node.dn5 { transition-delay: 0.06s; }
.dg-node.dn6 { transition-delay: 0.12s; }
.dg-node.dn7 { transition-delay: 0.18s; }

.dg-edge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dg-edge.visible {
  opacity: 1;
}

/* Degree highlight overlays */
.dg-hl-node {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dg-hl-node.visible {
  opacity: 1;
}

.dg-hl-edge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.dg-hl-edge.visible {
  opacity: 1;
}

.degree-tag {
  font-size: 12px;
  font-weight: 700;
  fill: var(--graph-primary-dark);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Important note */
.degree-note {
  margin-top: 0.08em;
  text-align: center;
  font-size: 0.5em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  background: #ebf5fb;
  border-radius: var(--graph-radius);
  padding: 0.2em 0.6em;
  border-left: 4px solid var(--graph-primary);
}

/* ================================================================
   SLIDE 9 — Types of Graphs: Directed vs Undirected
   ================================================================ */
.tg-section-title {
  font-size: 0.8em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.05em 0;
  text-align: left;
  letter-spacing: -0.02em;
}
.tg-subtitle {
  font-size: 0.5em;
  color: var(--graph-text-muted);
  margin: 0 0 0.08em 0;
  text-align: left;
  font-weight: 400;
}

.tg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  align-items: start;
  margin-top: 0.05em;
  height: calc(100% - 0.6em);
}

.tg-left {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  text-align: left;
}

.tg-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.2em 0.45em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.42em;
  line-height: 1.3;
}
.tg-card-header {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.1em;
}
.tg-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1em;
}
.tg-card-undirected .tg-card-icon {
  background: #ebf5fb;
  color: #2e86c1;
}
.tg-card-directed .tg-card-icon {
  background: #eafaf1;
  color: #27ae60;
}
.tg-card-header h4 {
  font-size: 1em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin: 0;
}
.tg-card-undirected {
  border-left: 3px solid #2e86c1;
}
.tg-card-directed {
  border-left: 3px solid #27ae60;
}
.tg-card-body {
  margin: 0;
  color: var(--graph-secondary);
}
.tg-card-body strong {
  color: var(--graph-primary-dark);
}
.tg-card-example {
  margin: 0.1em 0 0;
  font-size: 0.9em;
  color: var(--graph-text-muted);
  font-style: italic;
}
.tg-card-example strong {
  color: var(--graph-secondary);
  font-style: normal;
}
.tg-card-list {
  margin: 0.1em 0 0;
  padding-left: 1.2em;
  font-size: 0.85em;
  line-height: 1.4;
  color: var(--graph-secondary);
}
.tg-card-list li {
  margin-bottom: 0.05em;
}
.tg-card-list strong {
  color: var(--graph-primary-dark);
}

.tg-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.3em;
  min-height: 250px;
}
.tg-right svg {
  width: 100%;
  height: auto;
  display: block;
}

/* TG fragment-based animations */
.tg-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tg-node.visible {
  opacity: 1;
  transform: scale(1);
}
.tg-edge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tg-edge.visible {
  opacity: 1;
}
.tg-label {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tg-label.visible {
  opacity: 1;
}
.tg-hl {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tg-hl.visible {
  opacity: 1;
}

/* Comparison table (shared for slides 9 & 10) */
.tg-table-wrap,
.wg-table-wrap {
  margin-top: 0.1em;
}
.tg-table,
.wg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.4em;
}
.tg-table th,
.wg-table th {
  background: var(--graph-primary-dark);
  color: #fff;
  padding: 0.2em 0.5em;
  text-align: left;
  font-weight: 700;
}
.tg-table td,
.wg-table td {
  padding: 0.15em 0.5em;
  border-bottom: 1px solid #ecf0f1;
  color: var(--graph-secondary);
}
.tg-table tr:nth-child(even),
.wg-table tr:nth-child(even) {
  background: #f8f9fa;
}
.tg-table tr:hover,
.wg-table tr:hover {
  background: #ebf5fb;
}

/* ================================================================
   SLIDE 10 — Weighted vs Unweighted Graph
   ================================================================ */
.wg-section-title {
  font-size: 0.8em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.05em 0;
  text-align: left;
  letter-spacing: -0.02em;
}
.wg-subtitle {
  font-size: 0.5em;
  color: var(--graph-text-muted);
  margin: 0 0 0.08em 0;
  text-align: left;
  font-weight: 400;
}

.wg-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  align-items: start;
  margin-top: 0.05em;
  height: calc(100% - 0.6em);
}

.wg-left {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  text-align: left;
}

.wg-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.2em 0.45em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.42em;
  line-height: 1.3;
}
.wg-card-header {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.1em;
}
.wg-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1em;
}
.wg-card-unweighted .wg-card-icon {
  background: #ebf5fb;
  color: #2e86c1;
}
.wg-card-weighted .wg-card-icon {
  background: #fef9e7;
  color: #e67e22;
}
.wg-card-header h4 {
  font-size: 1em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin: 0;
}
.wg-card-unweighted {
  border-left: 3px solid #2e86c1;
}
.wg-card-weighted {
  border-left: 3px solid #e67e22;
}
.wg-card-body {
  margin: 0;
  color: var(--graph-secondary);
}
.wg-card-body strong {
  color: var(--graph-primary-dark);
}
.wg-card-example {
  margin: 0.1em 0 0;
  font-size: 0.9em;
  color: var(--graph-text-muted);
  font-style: italic;
}
.wg-card-example strong {
  color: var(--graph-secondary);
  font-style: normal;
}

.wg-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.3em;
  min-height: 250px;
}
.wg-right svg {
  width: 100%;
  height: auto;
  display: block;
}

/* WG fragment-based animations */
.wg-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wg-node.visible {
  opacity: 1;
  transform: scale(1);
}
.wg-edge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wg-edge.visible {
  opacity: 1;
}
.wg-weight {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wg-weight.visible {
  opacity: 1;
}
.wg-label {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wg-label.visible {
  opacity: 1;
}
.wg-highlight {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.wg-highlight.visible {
  opacity: 1;
}

/* ================================================================
   SLIDE 11 — Cyclic vs Acyclic Graph
   ================================================================ */
.cy-section-title {
  font-size: 0.8em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.05em 0;
  text-align: left;
  letter-spacing: -0.02em;
}
.cy-subtitle {
  font-size: 0.5em;
  color: var(--graph-text-muted);
  margin: 0 0 0.08em 0;
  text-align: left;
  font-weight: 400;
}

.cy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  align-items: start;
  margin-top: 0.05em;
  height: calc(100% - 0.6em);
}

.cy-left {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
  text-align: left;
}

.cy-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.2em 0.45em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.42em;
  line-height: 1.3;
}
.cy-card-header {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.08em;
}
.cy-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1em;
}
.cy-card-cycle .cy-card-icon {
  background: #fef9e7;
  color: #e67e22;
}
.cy-card-cyclic .cy-card-icon {
  background: #fdedec;
  color: #e74c3c;
}
.cy-card-acyclic .cy-card-icon {
  background: #eafaf1;
  color: #27ae60;
}
.cy-card-header h4 {
  font-size: 1em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin: 0;
}
.cy-card-cycle {
  border-left: 3px solid #e67e22;
}
.cy-card-cyclic {
  border-left: 3px solid #e74c3c;
}
.cy-card-acyclic {
  border-left: 3px solid #27ae60;
}
.cy-card-body {
  margin: 0;
  color: var(--graph-secondary);
}
.cy-card-body strong {
  color: var(--graph-primary-dark);
}
.cy-card-example {
  margin: 0.08em 0 0;
  font-size: 0.9em;
  color: var(--graph-text-muted);
  font-style: italic;
}
.cy-card-example strong {
  color: var(--graph-secondary);
  font-style: normal;
}

.cy-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.3em;
  min-height: 250px;
}
.cy-right svg {
  width: 100%;
  height: auto;
  display: block;
}

/* CY fragment-based animations */
.cy-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cy-node.visible {
  opacity: 1;
  transform: scale(1);
}
.cy-edge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cy-edge.visible {
  opacity: 1;
}
.cy-label {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cy-label.visible {
  opacity: 1;
}
.cy-hl {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cy-hl.visible {
  opacity: 1;
}

/* ================================================================
   SLIDE 12 — Connected vs Disconnected Graph
   ================================================================ */
.cn-section-title {
  font-size: 0.8em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.05em 0;
  text-align: left;
  letter-spacing: -0.02em;
}
.cn-subtitle {
  font-size: 0.5em;
  color: var(--graph-text-muted);
  margin: 0 0 0.08em 0;
  text-align: left;
  font-weight: 400;
}

.cn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  align-items: start;
  margin-top: 0.05em;
  height: calc(100% - 0.6em);
}

.cn-left {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
  text-align: left;
}

.cn-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.2em 0.45em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.42em;
  line-height: 1.3;
}
.cn-card-header {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.08em;
}
.cn-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1em;
}
.cn-card-connected .cn-card-icon {
  background: #eafaf1;
  color: #27ae60;
}
.cn-card-disconnected .cn-card-icon {
  background: #fdedec;
  color: #e74c3c;
}
.cn-card-component .cn-card-icon {
  background: #ebf5fb;
  color: #2e86c1;
}
.cn-card-header h4 {
  font-size: 1em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin: 0;
}
.cn-card-connected {
  border-left: 3px solid #27ae60;
}
.cn-card-disconnected {
  border-left: 3px solid #e74c3c;
}
.cn-card-component {
  border-left: 3px solid #2e86c1;
}
.cn-card-body {
  margin: 0;
  color: var(--graph-secondary);
}
.cn-card-body strong {
  color: var(--graph-primary-dark);
}
.cn-card-example {
  margin: 0.08em 0 0;
  font-size: 0.9em;
  color: var(--graph-text-muted);
  font-style: italic;
}
.cn-card-example strong {
  color: var(--graph-secondary);
  font-style: normal;
}

.cn-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.3em;
  min-height: 250px;
}
.cn-right svg {
  width: 100%;
  height: auto;
  display: block;
}

/* CN fragment-based animations */
.cn-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cn-node.visible {
  opacity: 1;
  transform: scale(1);
}
.cn-edge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cn-edge.visible {
  opacity: 1;
}
.cn-label {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cn-label.visible {
  opacity: 1;
}
.cn-hl {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.cn-hl.visible {
  opacity: 1;
}

/* Bottom callout for connected/disconnected */
.cn-callout {
  margin-top: 0.12em;
  text-align: center;
  font-size: 0.48em;
  font-style: italic;
  color: var(--graph-primary-dark);
  background: #ebf5fb;
  border-radius: var(--graph-radius);
  padding: 0.25em 0.8em;
  border-left: 4px solid var(--graph-primary);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ================================================================
   SLIDE 13 — Why Do We Need Graph Representation?
   ================================================================ */
.gp-section-title {
  font-size: 0.8em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  margin: 0 0 0.05em 0;
  text-align: left;
  letter-spacing: -0.02em;
}
.gp-subtitle {
  font-size: 0.5em;
  color: var(--graph-text-muted);
  margin: 0 0 0.08em 0;
  text-align: left;
  font-weight: 400;
}

.gp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  align-items: start;
  margin-top: 0.05em;
  height: calc(100% - 0.6em);
}
.gp-left {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
  text-align: left;
}
.gp-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.3em;
}
.gp-right svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Representation info cards */
.gp-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.2em 0.45em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.42em;
  line-height: 1.3;
}
.gp-card-header {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.06em;
}
.gp-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 1em;
}
.gp-card-matrix .gp-card-icon  { background: #ebf5fb; color: #2e86c1; }
.gp-card-incidence .gp-card-icon { background: #f4ecf7; color: #8e44ad; }
.gp-card-list .gp-card-icon   { background: #eafaf1; color: #27ae60; }
.gp-card-header h4 {
  font-size: 1em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin: 0;
}
.gp-card-matrix    { border-left: 3px solid #2e86c1; }
.gp-card-incidence { border-left: 3px solid #8e44ad; }
.gp-card-list      { border-left: 3px solid #27ae60; }
.gp-card-body {
  margin: 0;
  color: var(--graph-secondary);
}
.gp-card-body strong {
  color: var(--graph-primary-dark);
}
.gp-card-example {
  margin: 0.06em 0 0;
  font-size: 0.9em;
  color: var(--graph-text-muted);
  font-style: italic;
}
.gp-card-example strong {
  color: var(--graph-secondary);
  font-style: normal;
}

/* Flow diagram at bottom of slide 13 */
.gp-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin-top: 0.12em;
  font-size: 0.45em;
  font-weight: 600;
}
.gp-flow-step {
  display: flex;
  align-items: center;
  gap: 0.25em;
  background: var(--graph-card-bg);
  border: 2px solid var(--graph-primary-light);
  border-radius: var(--graph-radius);
  padding: 0.2em 0.6em;
  color: var(--graph-primary-dark);
  font-size: 1em;
  box-shadow: var(--graph-shadow-sm);
}
.gp-flow-arrow {
  color: var(--graph-primary);
  font-size: 1.4em;
  font-weight: 700;
}

/* Fragment animations for graph → representation transform */
.gp-gnode {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gp-gnode.visible {
  opacity: 1;
  transform: scale(1);
}
.gp-gedge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gp-gedge.visible {
  opacity: 1;
}
.gp-glabel {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gp-glabel.visible {
  opacity: 1;
}
.gp-ghl {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gp-ghl.visible {
  opacity: 1;
}

/* ================================================================
   SLIDE 14 — Adjacency Matrix
   ================================================================ */
.gm-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.22em 0.45em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.42em;
  line-height: 1.35;
}
.gm-card-title {
  font-weight: 700;
  color: var(--graph-primary-dark);
  font-size: 0.95em;
  margin-bottom: 0.06em;
}
.gm-card-body {
  color: var(--graph-secondary);
  margin: 0;
}
.gm-card-body strong {
  color: var(--graph-primary-dark);
}
.gm-card-def {
  border-left: 3px solid var(--graph-primary);
  background: #ebf5fb;
}

/* Matrix visualization */
.gm-matrix-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15em;
  margin-top: 0.1em;
}
.gm-matrix {
  border-collapse: collapse;
  font-size: 0.5em;
  font-family: 'JetBrains Mono', monospace;
}
.gm-matrix th {
  padding: 0.15em 0.45em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  border-bottom: 2px solid var(--graph-primary-light);
}
.gm-matrix td {
  padding: 0.15em 0.45em;
  text-align: center;
  border: 1.5px solid #d5dbdb;
  min-width: 1.8em;
  height: 1.8em;
  font-weight: 600;
  color: var(--graph-secondary);
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
  opacity: 0;
}
.gm-matrix td.visible {
  opacity: 1;
}
.gm-matrix td.gm-filled {
  background: #d5f5e3;
  color: var(--graph-accent-green-dark);
  box-shadow: inset 0 0 0 2px var(--graph-accent-green);
}
.gm-matrix td.gm-zero {
  background: #f8f9fa;
  color: #bdc3c7;
}
.gm-matrix td.gm-diag {
  background: #fef9e7;
  color: var(--graph-text-muted);
  font-style: italic;
}
.gm-matrix .gm-row-head {
  background: transparent;
  border: none;
  font-weight: 700;
  color: var(--graph-primary-dark);
  opacity: 1;
}
.gm-matrix .gm-row-head.visible {
  opacity: 1;
}

/* Matrix row/column highlight */
.gm-matrix td.gm-hl-row {
  box-shadow: inset 0 0 0 2px #e67e22;
}
.gm-matrix td.gm-hl-col {
  box-shadow: inset 0 0 0 2px #2e86c1;
}

/* Graph + arrow + matrix transform layout */
.gm-transform {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 0.12em;
}
.gm-transform-arrow {
  font-size: 1.2em;
  color: var(--graph-primary);
  font-weight: 700;
  flex-shrink: 0;
}

/* Complexity box at bottom */
.gm-complexity {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  flex-wrap: wrap;
  margin-top: 0.12em;
}
.gm-complexity-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border: 2px solid var(--graph-primary-light);
  border-radius: var(--graph-radius);
  padding: 0.15em 0.5em;
  min-width: 8em;
  box-shadow: var(--graph-shadow-sm);
}
.gm-complexity-label {
  font-size: 0.38em;
  font-weight: 700;
  color: var(--graph-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.05em;
}
.gm-complexity-value {
  font-size: 0.5em;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--graph-primary-dark);
}

/* Symmetry indicator */
.gm-symmetry {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;
  margin-top: 0.08em;
  font-size: 0.42em;
  font-weight: 600;
  color: var(--graph-accent-orange);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.gm-symmetry.visible {
  opacity: 1;
}

/* ================================================================
   SLIDE 15 — Incidence Matrix
   ================================================================ */
.gi-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.22em 0.45em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.42em;
  line-height: 1.35;
}
.gi-card-title {
  font-weight: 700;
  color: var(--graph-primary-dark);
  font-size: 0.95em;
  margin-bottom: 0.05em;
}
.gi-card-body {
  color: var(--graph-secondary);
  margin: 0;
}
.gi-card-body strong {
  color: var(--graph-primary-dark);
}
.gi-card-def {
  border-left: 3px solid #8e44ad;
  background: #f4ecf7;
}
.gi-card-undirected {
  border-left: 3px solid var(--graph-primary);
}
.gi-card-directed {
  border-left: 3px solid var(--graph-accent-orange);
}

/* Incidence matrix table */
.gi-matrix {
  border-collapse: collapse;
  font-size: 0.48em;
  font-family: 'JetBrains Mono', monospace;
}
.gi-matrix th {
  padding: 0.15em 0.4em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  border-bottom: 2px solid var(--graph-primary-light);
}
.gi-matrix th.gi-edge-hl {
  background: #ebf5fb;
  color: var(--graph-accent-orange);
}
.gi-matrix td {
  padding: 0.15em 0.4em;
  text-align: center;
  border: 1.5px solid #d5dbdb;
  min-width: 2em;
  height: 2em;
  font-weight: 600;
  color: var(--graph-secondary);
  transition: background 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
  opacity: 0;
}
.gi-matrix td.visible {
  opacity: 1;
}
.gi-matrix td.gi-one {
  background: #d5f5e3;
  color: var(--graph-accent-green-dark);
}
.gi-matrix td.gi-minus {
  background: #fdedec;
  color: var(--graph-accent-red);
}
.gi-matrix td.gi-zero {
  background: #f8f9fa;
  color: #bdc3c7;
}
.gi-matrix .gi-row-head {
  background: transparent;
  border: none;
  font-weight: 700;
  color: var(--graph-primary-dark);
  opacity: 1;
}
.gi-matrix .gi-row-head.visible {
  opacity: 1;
}

/* Edge highlight column */
.gi-matrix th.gi-col-active {
  background: #ebf5fb;
  color: var(--graph-accent-orange);
  box-shadow: inset 0 -2px 0 var(--graph-accent-orange);
}
.gi-matrix td.gi-col-active {
  box-shadow: inset 0 0 0 2px var(--graph-accent-orange);
}

/* Advantages box */
.gi-advantages {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  flex-wrap: wrap;
  margin-top: 0.12em;
}
.gi-adv-item {
  display: flex;
  align-items: center;
  gap: 0.25em;
  background: var(--graph-card-bg);
  border: 2px solid #27ae60;
  border-radius: var(--graph-radius);
  padding: 0.15em 0.5em;
  font-size: 0.42em;
  font-weight: 600;
  color: var(--graph-accent-green-dark);
  box-shadow: var(--graph-shadow-sm);
}
.gi-adv-icon {
  font-size: 1.1em;
}

/* Fragment animations for incidence matrix */
.gi-cell {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.gi-cell.visible {
  opacity: 1;
}

/* ================================================================
   SLIDE 16 — Adjacency Matrix vs Incidence Matrix
   ================================================================ */
.gc-compare-wrap {
  max-width: 900px;
  margin: 0 auto;
}

.gc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--graph-radius);
  overflow: hidden;
  box-shadow: var(--graph-shadow-sm);
  font-size: 0.45em;
}
.gc-table th {
  background: var(--graph-primary);
  color: #fff;
  padding: 0.3em 0.6em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.gc-table th:first-child {
  text-align: left;
  width: 22%;
}
.gc-table td {
  padding: 0.3em 0.6em;
  border-bottom: 1px solid #eef0f2;
  background: var(--graph-card-bg);
  color: var(--graph-secondary);
  text-align: center;
  vertical-align: middle;
}
.gc-table td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--graph-primary-dark);
}
.gc-table tr:last-child td {
  border-bottom: none;
}
.gc-table tr:nth-child(even) td {
  background: #f8f9fa;
}
.gc-table tr:hover td {
  background: #ebf5fb;
}

/* Winner indicators */
.gc-win {
  display: inline-block;
  background: #d5f5e3;
  color: var(--graph-accent-green-dark);
  padding: 0.05em 0.4em;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9em;
}
.gc-lose {
  display: inline-block;
  background: #fadbd8;
  color: var(--graph-accent-red);
  padding: 0.05em 0.4em;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9em;
}
.gc-even {
  display: inline-block;
  background: #fef9e7;
  color: var(--graph-accent-orange);
  padding: 0.05em 0.4em;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9em;
}

/* Row icons */
.gc-row-icon {
  margin-right: 0.3em;
  font-size: 1em;
}

/* Decision tree */
.gc-decision {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12em;
  margin-top: 0.18em;
  font-size: 0.42em;
}
.gc-decision-q {
  background: var(--graph-card-bg);
  border: 2px solid var(--graph-primary);
  border-radius: var(--graph-radius);
  padding: 0.2em 0.7em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  text-align: center;
  box-shadow: var(--graph-shadow-sm);
}
.gc-decision-arrow {
  font-size: 1.4em;
  color: var(--graph-primary);
  font-weight: 700;
}
.gc-decision-branch {
  display: flex;
  gap: 1.5em;
  align-items: flex-start;
}
.gc-decision-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.08em;
}
.gc-decision-label {
  font-size: 0.85em;
  color: var(--graph-text-muted);
  font-style: italic;
}
.gc-decision-answer {
  border: 2px solid;
  border-radius: var(--graph-radius);
  padding: 0.18em 0.6em;
  font-weight: 700;
  text-align: center;
}
.gc-decision-answer.adj {
  border-color: #2e86c1;
  color: #2e86c1;
  background: #ebf5fb;
}
.gc-decision-answer.inc {
  border-color: #8e44ad;
  color: #8e44ad;
  background: #f4ecf7;
}

/* ================================================================
   SLIDE 17 — Adjacency List Representation
   ================================================================ */
.gl-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.22em 0.45em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.42em;
  line-height: 1.35;
}
.gl-card-title {
  font-weight: 700;
  color: var(--graph-primary-dark);
  font-size: 0.95em;
  margin-bottom: 0.05em;
}
.gl-card-body {
  color: var(--graph-secondary);
  margin: 0;
}
.gl-card-body strong {
  color: var(--graph-primary-dark);
}
.gl-card-def {
  border-left: 3px solid var(--graph-accent-green);
  background: #eafaf1;
}

/* Advantages list */
.gl-adv-list {
  list-style: none;
  padding: 0;
  margin: 0.1em 0 0;
}
.gl-adv-list li {
  display: flex;
  align-items: center;
  gap: 0.3em;
  font-size: 0.4em;
  padding: 0.12em 0;
  color: var(--graph-secondary);
  font-weight: 500;
}
.gl-adv-check {
  color: var(--graph-accent-green);
  font-weight: 700;
  font-size: 1.1em;
  flex-shrink: 0;
}

/* Adjacency list visualization (linked-list style) */
.gl-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.12em;
  margin-top: 0.08em;
  width: 100%;
}
.gl-list-row {
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gl-list-row.visible {
  opacity: 1;
}
.gl-list-vertex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  border: 2px solid var(--graph-accent-green);
  border-radius: 6px;
  background: #d5f5e3;
  font-weight: 700;
  font-size: 0.7em;
  color: var(--graph-accent-green-dark);
  flex-shrink: 0;
}
.gl-list-arrow {
  width: 1.4em;
  text-align: center;
  color: var(--graph-primary);
  font-size: 0.65em;
  font-weight: 700;
  flex-shrink: 0;
}
.gl-list-neighbors {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.gl-list-node {
  display: flex;
  align-items: center;
  gap: 0;
}
.gl-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2em;
  height: 2em;
  border: 1.5px solid var(--graph-primary-light);
  border-radius: 5px;
  background: #ebf5fb;
  font-weight: 600;
  font-size: 0.6em;
  color: var(--graph-primary-dark);
  padding: 0 0.3em;
}
.gl-list-sep {
  width: 1.2em;
  text-align: center;
  color: var(--graph-text-muted);
  font-size: 0.55em;
  flex-shrink: 0;
}
.gl-list-null {
  font-size: 0.5em;
  color: var(--graph-text-muted);
  font-style: italic;
  margin-left: 0.2em;
}

/* Fragment animations for adjacency list */
.gl-row {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.gl-row.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ================================================================
   SLIDE 18 — Comparison of Graph Representations
   ================================================================ */
.gx-compare-wrap {
  max-width: 950px;
  margin: 0 auto;
}

.gx-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--graph-radius);
  overflow: hidden;
  box-shadow: var(--graph-shadow-sm);
  font-size: 0.42em;
}
.gx-table th {
  background: var(--graph-primary);
  color: #fff;
  padding: 0.3em 0.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.gx-table th:first-child {
  text-align: left;
  width: 18%;
}
.gx-table td {
  padding: 0.28em 0.5em;
  border-bottom: 1px solid #eef0f2;
  background: var(--graph-card-bg);
  color: var(--graph-secondary);
  text-align: center;
  vertical-align: middle;
}
.gx-table td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--graph-primary-dark);
}
.gx-table tr:last-child td {
  border-bottom: none;
}
.gx-table tr:nth-child(even) td {
  background: #f8f9fa;
}
.gx-table tr:hover td {
  background: #ebf5fb;
}

/* Best-in-column highlight */
.gx-best {
  display: inline-block;
  background: #d5f5e3;
  color: var(--graph-accent-green-dark);
  padding: 0.05em 0.4em;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9em;
}
.gx-mid {
  display: inline-block;
  background: #fef9e7;
  color: var(--graph-accent-orange);
  padding: 0.05em 0.4em;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9em;
}
.gx-worst {
  display: inline-block;
  background: #fadbd8;
  color: var(--graph-accent-red);
  padding: 0.05em 0.4em;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9em;
}

/* Decision flow */
.gx-decision {
  display: flex;
  justify-content: center;
  gap: 1.2em;
  flex-wrap: wrap;
  margin-top: 0.15em;
  font-size: 0.4em;
}
.gx-decision-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.06em;
  max-width: 160px;
}
.gx-decision-q {
  font-weight: 600;
  color: var(--graph-text-muted);
  font-style: italic;
  text-align: center;
  font-size: 0.95em;
}
.gx-decision-arrow {
  font-size: 1.3em;
  color: var(--graph-primary);
  font-weight: 700;
}
.gx-decision-a {
  border: 2px solid;
  border-radius: var(--graph-radius);
  padding: 0.15em 0.5em;
  font-weight: 700;
  text-align: center;
  font-size: 1.05em;
}
.gx-decision-a.adj-m {
  border-color: #2e86c1;
  color: #2e86c1;
  background: #ebf5fb;
}
.gx-decision-a.adj-l {
  border-color: #27ae60;
  color: #27ae60;
  background: #eafaf1;
}
.gx-decision-a.inc-m {
  border-color: #8e44ad;
  color: #8e44ad;
  background: #f4ecf7;
}

/* Conclusion callout */
.gx-conclusion {
  margin-top: 0.12em;
  text-align: center;
  font-size: 0.5em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  background: #eafaf1;
  border-radius: var(--graph-radius);
  padding: 0.22em 0.8em;
  border-left: 4px solid var(--graph-accent-green);
  letter-spacing: 0.01em;
}

/* ================================================================
   SLIDE 19 — Basic Graph Operations
   ================================================================ */
.go-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.18em 0.4em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.4em;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.35em;
}
.go-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.85em;
}
.go-card-add .go-card-icon    { background: #d5f5e3; color: #27ae60; }
.go-card-remove .go-card-icon { background: #fadbd8; color: #e74c3c; }
.go-card-search .go-card-icon { background: #ebf5fb; color: #2e86c1; }
.go-card-text h4 {
  font-size: 1em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin: 0;
}
.go-card-text p {
  margin: 0;
  color: var(--graph-text-muted);
  font-size: 0.9em;
}

/* Applications row */
.go-apps {
  display: flex;
  justify-content: center;
  gap: 0.5em;
  flex-wrap: wrap;
  margin-top: 0.1em;
  font-size: 0.42em;
}
.go-app-item {
  display: flex;
  align-items: center;
  gap: 0.2em;
  background: var(--graph-card-bg);
  border: 1.5px solid var(--graph-primary-light);
  border-radius: var(--graph-radius);
  padding: 0.12em 0.45em;
  font-weight: 600;
  color: var(--graph-primary-dark);
  box-shadow: var(--graph-shadow-sm);
}
.go-app-icon {
  font-size: 1em;
}

/* Fragment animations for operations slide */
.gop-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gop-node.visible {
  opacity: 1;
  transform: scale(1);
}
.gop-edge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gop-edge.visible {
  opacity: 1;
}
.gop-edge-delete {
  opacity: 1;
  transition: opacity 0.5s ease, stroke-dasharray 0.5s ease;
}
.gop-edge-delete.visible {
  opacity: 0;
  stroke-dasharray: 4, 4;
}
.gop-node-delete {
  opacity: 1;
  transition: opacity 0.5s ease;
}
.gop-node-delete.visible {
  opacity: 0.15;
}
.gop-label {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gop-label.visible {
  opacity: 1;
}

/* ================================================================
   SLIDE 20 — Graph Operations using Adjacency List
   ================================================================ */
.gq-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.18em 0.4em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.38em;
  line-height: 1.3;
}
.gq-card-title {
  font-weight: 700;
  color: var(--graph-primary-dark);
  font-size: 0.95em;
  margin-bottom: 0.04em;
}
.gq-card-body {
  color: var(--graph-secondary);
  margin: 0;
}
.gq-card-code {
  background: #1e272e;
  color: #d2dae2;
  border-radius: 6px;
  padding: 0.2em 0.35em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  line-height: 1.4;
  overflow-x: auto;
  margin-top: 0.06em;
}
.gq-card-code .kw { color: #e67e22; font-weight: 700; }
.gq-card-code .fn { color: #2ecc71; }
.gq-card-code .cm { color: #7f8c8d; font-style: italic; }
.gq-card-code .st { color: #e74c3c; }

/* Adjacency list visualization for slide 20 */
.gq-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.08em;
  width: 100%;
}
.gq-list-row {
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.gq-list-row.visible {
  opacity: 1;
  transform: translateX(0);
}
.gq-list-vertex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  border: 2px solid var(--graph-primary);
  border-radius: 5px;
  background: #ebf5fb;
  font-weight: 700;
  font-size: 0.65em;
  color: var(--graph-primary-dark);
  flex-shrink: 0;
}
.gq-list-arrow {
  width: 1.2em;
  text-align: center;
  color: var(--graph-primary);
  font-size: 0.55em;
  font-weight: 700;
  flex-shrink: 0;
}
.gq-list-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  height: 1.8em;
  border: 1.5px solid var(--graph-primary-light);
  border-radius: 4px;
  background: #f4f8fb;
  font-weight: 600;
  font-size: 0.55em;
  color: var(--graph-primary-dark);
  padding: 0 0.25em;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.gq-list-sep {
  width: 1em;
  text-align: center;
  color: var(--graph-text-muted);
  font-size: 0.5em;
  flex-shrink: 0;
}
.gq-list-null {
  font-size: 0.45em;
  color: var(--graph-text-muted);
  font-style: italic;
  margin-left: 0.15em;
}
.gq-list-item.gq-highlight {
  background: #d5f5e3;
  border-color: #27ae60;
  color: #27ae60;
  font-weight: 700;
}
.gq-list-item.gq-remove {
  background: #fadbd8;
  border-color: #e74c3c;
  color: #e74c3c;
  text-decoration: line-through;
}

/* Complexity table for slide 20 */
.gq-cx {
  display: flex;
  justify-content: center;
  gap: 0.4em;
  flex-wrap: wrap;
  margin-top: 0.1em;
}
.gq-cx-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border: 2px solid var(--graph-primary-light);
  border-radius: var(--graph-radius);
  padding: 0.12em 0.4em;
  min-width: 7em;
  box-shadow: var(--graph-shadow-sm);
}
.gq-cx-label {
  font-size: 0.35em;
  font-weight: 700;
  color: var(--graph-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.03em;
}
.gq-cx-value {
  font-size: 0.45em;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--graph-primary-dark);
}

/* ================================================================
   SLIDE 21 — Graph Traversal (DFS & BFS)
   ================================================================ */
.gt-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.2em 0.4em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.4em;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.gt-card.visible {
  opacity: 1;
  transform: translateY(0);
}
.gt-card-header {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-bottom: 0.08em;
}
.gt-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  font-weight: 800;
  flex-shrink: 0;
  font-size: 0.8em;
}
.gt-card-dfs .gt-card-badge { background: #ebf5fb; color: #2e86c1; }
.gt-card-bfs .gt-card-badge { background: #eafaf1; color: #27ae60; }
.gt-card-header h4 {
  font-size: 1em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin: 0;
}
.gt-card-dfs { border-left: 3px solid #2e86c1; }
.gt-card-bfs { border-left: 3px solid #27ae60; }
.gt-card-body {
  color: var(--graph-secondary);
  margin: 0;
}
.gt-card-body strong { color: var(--graph-primary-dark); }
.gt-keyword {
  display: inline-block;
  background: #ebf5fb;
  color: #2e86c1;
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9em;
  margin: 0.06em 0;
}
.gt-keyword.kw-green {
  background: #eafaf1;
  color: #27ae60;
}
.gt-apps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em;
  margin-top: 0.08em;
}
.gt-app-tag {
  display: inline-block;
  background: #f8f9fa;
  border: 1px solid #d5dbdb;
  border-radius: 4px;
  padding: 0.05em 0.3em;
  font-size: 0.8em;
  color: var(--graph-secondary);
  font-weight: 500;
}
.gt-compare {
  display: flex;
  justify-content: center;
  gap: 0.8em;
  margin-top: 0.1em;
  font-size: 0.45em;
  font-weight: 700;
}
.gt-compare-item {
  display: flex;
  align-items: center;
  gap: 0.25em;
  background: var(--graph-card-bg);
  border: 2px solid;
  border-radius: var(--graph-radius);
  padding: 0.12em 0.5em;
  box-shadow: var(--graph-shadow-sm);
}
.gt-compare-item.dfs { border-color: #2e86c1; color: #2e86c1; }
.gt-compare-item.bfs { border-color: #27ae60; color: #27ae60; }

/* ================================================================
   SLIDE 22 — Depth-First Search (DFS)
   ================================================================ */
.gd-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.18em 0.4em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.4em;
  line-height: 1.3;
}
.gd-card-title {
  font-weight: 700;
  color: var(--graph-primary-dark);
  font-size: 0.95em;
  margin-bottom: 0.05em;
}
.gd-card-body {
  color: var(--graph-secondary);
  margin: 0;
}
.gd-card-body strong { color: var(--graph-primary-dark); }

/* DFS pseudocode */
.gd-code {
  background: #1e272e;
  color: #d2dae2;
  border-radius: 6px;
  padding: 0.2em 0.35em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  line-height: 1.45;
  margin-top: 0.06em;
}
.gd-code .kw { color: #e67e22; font-weight: 700; }
.gd-code .fn { color: #2ecc71; }
.gd-code .cm { color: #7f8c8d; font-style: italic; }
.gd-code .var { color: #8e44ad; }
.gd-code .str { color: #e74c3c; }

/* DFS line-by-line fragments */
.gd-code-line {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.gd-code-line.visible {
  opacity: 1;
}

/* DFS complexity */
.gd-cx {
  display: flex;
  gap: 0.5em;
  margin-top: 0.08em;
}
.gd-cx-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border: 2px solid var(--graph-primary-light);
  border-radius: var(--graph-radius);
  padding: 0.1em 0.4em;
  flex: 1;
  box-shadow: var(--graph-shadow-sm);
}
.gd-cx-label {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--graph-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gd-cx-value {
  font-size: 0.9em;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--graph-primary-dark);
}

/* DFS traversal graph */
.gd-graph {
  display: flex;
  gap: 0.3em;
  align-items: flex-start;
}
.gd-svg-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.2em;
}
.gd-svg-wrap svg { width: 100%; height: auto; display: block; }

/* Stack display */
.gd-stack {
  width: 6em;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.gd-stack-title {
  font-size: 0.42em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.08em;
}
.gd-stack-visual {
  display: flex;
  flex-direction: column-reverse;
  gap: 0.04em;
  width: 100%;
  min-height: 8em;
  border: 2px solid var(--graph-primary-light);
  border-radius: 6px;
  padding: 0.1em;
  background: #f8f9fa;
}
.gd-stack-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebf5fb;
  border: 1.5px solid var(--graph-primary-light);
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  padding: 0.12em 0;
  font-family: 'JetBrains Mono', monospace;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gd-stack-item.visible {
  opacity: 1;
  transform: translateY(0);
}
.gd-stack-item.gd-stack-active {
  background: #d5f5e3;
  border-color: #27ae60;
  color: #27ae60;
}

/* Traversal order */
.gd-order {
  text-align: center;
  font-size: 0.48em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  background: #ebf5fb;
  border-radius: var(--graph-radius);
  padding: 0.18em 0.6em;
  border-left: 4px solid var(--graph-primary);
  margin-top: 0.08em;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

/* Fragment animations for DFS graph */
.gd-node {
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gd-node.visible {
  opacity: 1;
  transform: scale(1);
}
.gd-edge {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gd-edge.visible {
  opacity: 1;
}
.gd-node-current {
  fill: #27ae60 !important;
  stroke: #27ae60 !important;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
.gd-node-visited {
  fill: #2e86c1 !important;
  stroke: #2e86c1 !important;
  transition: fill 0.4s ease, stroke 0.4s ease;
}
.gd-edge-active {
  stroke: #e67e22 !important;
  stroke-width: 3px !important;
  transition: stroke 0.4s ease;
}
.gd-node-hl {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gd-node-hl.visible {
  opacity: 1;
}

/* ================================================================
   SLIDE 23 — Breadth-First Search (BFS)
   ================================================================ */
.gb-card {
  background: var(--graph-card-bg);
  border-radius: 8px;
  padding: 0.18em 0.4em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 0.4em;
  line-height: 1.3;
}
.gb-card-title {
  font-weight: 700;
  color: var(--graph-primary-dark);
  font-size: 0.95em;
  margin-bottom: 0.05em;
}
.gb-card-body {
  color: var(--graph-secondary);
  margin: 0;
}
.gb-card-body strong { color: var(--graph-primary-dark); }

/* BFS pseudocode */
.gb-code {
  background: #1e272e;
  color: #d2dae2;
  border-radius: 6px;
  padding: 0.2em 0.35em;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
  line-height: 1.45;
  margin-top: 0.06em;
}
.gb-code .kw { color: #e67e22; font-weight: 700; }
.gb-code .fn { color: #2ecc71; }
.gb-code .cm { color: #7f8c8d; font-style: italic; }
.gb-code .var { color: #8e44ad; }
.gb-code .str { color: #e74c3c; }

.gb-code-line {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.gb-code-line.visible {
  opacity: 1;
}

/* BFS complexity */
.gb-cx {
  display: flex;
  gap: 0.5em;
  margin-top: 0.08em;
}
.gb-cx-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--graph-card-bg);
  border: 2px solid var(--graph-accent-green);
  border-radius: var(--graph-radius);
  padding: 0.1em 0.4em;
  flex: 1;
  box-shadow: var(--graph-shadow-sm);
}
.gb-cx-label {
  font-size: 0.7em;
  font-weight: 700;
  color: var(--graph-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gb-cx-value {
  font-size: 0.9em;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: var(--graph-primary-dark);
}

/* BFS graph + queue layout */
.gb-graph {
  display: flex;
  gap: 0.2em;
  align-items: flex-start;
}
.gb-svg-wrap {
  flex: 2;
  display: flex;
  justify-content: center;
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.2em;
}
.gb-svg-wrap svg { width: 100%; height: auto; display: block; }

/* Queue display */
.gb-queue {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.gb-queue-title {
  font-size: 0.42em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.08em;
}
.gb-queue-visual {
  display: flex;
  flex-direction: column;
  gap: 0.04em;
  width: 100%;
  min-height: 8em;
  border: 2px solid var(--graph-accent-green);
  border-radius: 6px;
  padding: 0.1em;
  background: #f8f9fa;
}
.gb-queue-item {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eafaf1;
  border: 1.5px solid var(--graph-accent-green);
  border-radius: 4px;
  font-size: 0.7em;
  font-weight: 700;
  color: var(--graph-accent-green-dark);
  padding: 0.12em 0;
  font-family: 'JetBrains Mono', monospace;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.gb-queue-item.visible {
  opacity: 1;
  transform: translateX(0);
}
.gb-queue-item.gb-q-active {
  background: #d5f5e3;
  border-color: #27ae60;
  color: #27ae60;
}

/* BFS traversal order */
.gb-order {
  text-align: center;
  font-size: 0.48em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  background: #eafaf1;
  border-radius: var(--graph-radius);
  padding: 0.18em 0.6em;
  border-left: 4px solid var(--graph-accent-green);
  margin-top: 0.08em;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

/* BFS node highlight overlays (reuse gd-node-hl) */

/* ================================================================
   SLIDE 24 — DFS vs BFS Comparison
   ================================================================ */
.gv-table-wrap {
  max-width: 920px;
  margin: 0 auto;
}
.gv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--graph-radius);
  overflow: hidden;
  box-shadow: var(--graph-shadow-sm);
  font-size: 0.42em;
}
.gv-table th {
  background: var(--graph-primary);
  color: #fff;
  padding: 0.28em 0.5em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}
.gv-table th:first-child { text-align: left; width: 22%; }
.gv-table td {
  padding: 0.25em 0.5em;
  border-bottom: 1px solid #eef0f2;
  background: var(--graph-card-bg);
  color: var(--graph-secondary);
  text-align: center;
  vertical-align: middle;
}
.gv-table td:first-child {
  text-align: left;
  font-weight: 700;
  color: var(--graph-primary-dark);
}
.gv-table tr:last-child td { border-bottom: none; }
.gv-table tr:nth-child(even) td { background: #f8f9fa; }
.gv-table tr:hover td { background: #ebf5fb; }

/* Side-by-side SVG comparison */
.gv-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4em;
  margin-top: 0.1em;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.gv-panel {
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.2em;
  text-align: center;
}
.gv-panel-title {
  font-size: 0.45em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin-bottom: 0.08em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gv-panel svg { width: 100%; height: auto; display: block; }

/* Takeaway badges */
.gv-takeaways {
  display: flex;
  justify-content: center;
  gap: 0.6em;
  flex-wrap: wrap;
  margin-top: 0.1em;
}
.gv-takeaway {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.04em;
  background: var(--graph-card-bg);
  border: 2px solid;
  border-radius: var(--graph-radius);
  padding: 0.15em 0.5em;
  box-shadow: var(--graph-shadow-sm);
}
.gv-takeaway.dfs { border-color: #2e86c1; }
.gv-takeaway.bfs { border-color: #27ae60; }
.gv-takeaway-title {
  font-size: 0.4em;
  font-weight: 800;
  color: var(--graph-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gv-takeaway-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.02em;
}
.gv-takeaway-item {
  font-size: 0.38em;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.2em;
}
.gv-takeaway-item.dfs { color: #2e86c1; }
.gv-takeaway-item.bfs { color: #27ae60; }

/* Side-by-side traversal animation */
.gv-trav {
  display: flex;
  gap: 0.4em;
  justify-content: center;
  align-items: flex-start;
  margin-top: 0.08em;
}
.gv-trav-panel {
  background: var(--graph-card-bg);
  border-radius: var(--graph-radius);
  box-shadow: var(--graph-shadow-sm);
  padding: 0.15em 0.3em;
  text-align: center;
  flex: 1;
  max-width: 320px;
}
.gv-trav-title {
  font-size: 0.38em;
  font-weight: 700;
  color: var(--graph-primary-dark);
  margin-bottom: 0.05em;
}
.gv-trav svg { width: 100%; height: auto; display: block; }

/* ================================================================
   Responsive
   ================================================================ */
@media (max-width: 1400px) {
  .twocol-grid { gap: 0.5em; }
  .example-grid { gap: 0.5em; }
}

@media (max-width: 1200px) {
  .twocol-grid { gap: 0.4em; }
  .graph-title-slide h1 { font-size: 1.9em; }
  .graph-hero { max-width: 450px; }
  .example-grid { gap: 0.4em; }
  .intro-grid, .build-grid, .term-grid, .degree-grid, .tg-grid, .wg-grid, .gp-grid { gap: 0.5em; }
  .gm-complexity-item { min-width: 7em; }
}

@media (max-width: 800px) {
  .twocol-grid {
    grid-template-columns: 1fr;
    gap: 0.4em;
  }
  .graph-title-slide h1 { font-size: 1.6em; }
  .graph-hero { max-width: 380px; }
  .example-grid { grid-template-columns: 1fr; }
  .title-footer { font-size: 0.45em; }
  .intro-grid,
  .build-grid,
  .term-grid,
  .degree-grid,
  .tg-grid,
  .wg-grid,
  .gp-grid {
    grid-template-columns: 1fr;
    gap: 0.4em;
  }
  .gm-complexity {
    gap: 0.3em;
  }
  .gm-complexity-item {
    min-width: 6em;
  }
  .gp-flow {
    flex-wrap: wrap;
    gap: 0.2em;
  }
}

@media (max-width: 480px) {
  .graph-title-slide h1 { font-size: 1.3em; }
  .graph-hero { max-width: 280px; }
}