/* Google Fonts: Outfit (headings) & Plus Jakarta Sans (body) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors */
  --bg-base: #f8fafc;
  --bg-surface: rgba(255, 255, 255, 0.7);
  --bg-surface-hover: rgba(255, 255, 255, 0.95);
  --bg-navbar: rgba(248, 250, 252, 0.85);
  
  --primary: #4f46e5; /* Indigo 600 */
  --primary-glow: rgba(79, 70, 229, 0.15);
  --secondary: #2563eb; /* Blue 600 */
  --secondary-glow: rgba(37, 99, 235, 0.15);
  --accent: #0891b2; /* Cyan 600 */
  --accent-pink: #db2777; /* Pink 600 */
  --accent-purple: #8b5cf6; /* Violet 500 */
  --danger: #ef4444; /* Red 500 */
  --success: #10b981; /* Emerald 500 */
  
  --text-primary: #0f172a; /* Slate 900 */
  --text-secondary: #475569; /* Slate 600 */
  --text-muted: #64748b; /* Slate 500 */
  
  --border-light: rgba(15, 23, 42, 0.08);
  --border-focus: rgba(79, 70, 229, 0.4);
  
  /* Gradients */
  --gradient-main: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-pink) 0%, var(--primary) 100%);
  --gradient-glow: linear-gradient(135deg, rgba(79, 70, 229, 0.04) 0%, rgba(37, 99, 235, 0.04) 100%);
  --gradient-text: linear-gradient(135deg, #0f172a 30%, #4338ca 100%);
  
  /* Transitions & Shadows */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  
  --shadow-sm: 0 2px 8px -2px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 12px 20px -8px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 20px 40px -15px rgba(15, 23, 42, 0.15);
  --shadow-glow: 0 0 25px 0 var(--primary-glow);
  
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background-color: var(--bg-base);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Background Gradients & Glows */
body::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.06) 0%, transparent 70%);
  z-index: -2;
  pointer-events: none;
  filter: blur(80px);
}

body::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.04) 0%, transparent 70%);
  z-index: -2;
  pointer-events: none;
  filter: blur(100px);
}

.ambient-glow-green {
  content: '';
  position: absolute;
  top: 120%;
  left: -20%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(8, 145, 178, 0.03) 0%, transparent 70%);
  z-index: -2;
  pointer-events: none;
  filter: blur(100px);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
}

h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

p {
  color: var(--text-secondary);
  font-size: 1.05rem;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-base);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  border: 2px solid var(--bg-base);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.4);
}

/* Layout Utilities */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 6rem 0;
  position: relative;
}

/* Glassmorphism Class */
.glass-panel {
  background: var(--bg-surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  transition: var(--transition-normal);
}

.glass-panel:hover {
  background: var(--bg-surface-hover);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--shadow-lg), 0 0 20px 0 rgba(139, 92, 246, 0.05);
}

/* Navigation Bar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: var(--bg-navbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition-normal);
}

.navbar-scrolled {
  padding: 0.5rem 0;
  background: rgba(6, 9, 19, 0.85);
  box-shadow: var(--shadow-md);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 800;
  font-size: 1.5rem;
  font-family: 'Outfit', sans-serif;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-icon {
  width: 32px;
  height: 32px;
  background: var(--gradient-main);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: white;
  font-weight: 900;
  font-size: 1.1rem;
  -webkit-text-fill-color: white;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4);
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-link {
  font-weight: 500;
  color: var(--text-secondary);
  position: relative;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}

.nav-link:hover, .nav-link.active {
  color: var(--text-primary);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gradient-main);
  transition: var(--transition-normal);
}

.nav-link:hover::after, .nav-link.active::after {
  width: 100%;
}

.nav-btn {
  padding: 0.6rem 1.2rem;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-light);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-btn:hover {
  background: var(--gradient-main);
  border-color: transparent;
  box-shadow: var(--shadow-glow);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Hero Section */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding-top: 120px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 4rem;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 100px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: var(--accent-purple);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: pulse-border 2s infinite ease-in-out;
}

.hero-title {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  font-weight: 800;
}

.hero-description {
  font-size: 1.15rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  max-width: 600px;
}

.hero-actions {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 2rem;
  border-radius: 30px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition-normal);
}

.btn-primary {
  background: var(--gradient-main);
  color: white;
  box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.4);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px -5px rgba(139, 92, 246, 0.6), var(--shadow-glow);
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

/* Decorative Hero Art */
.hero-art-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-glow-blob {
  position: absolute;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, rgba(59, 130, 246, 0) 70%);
  filter: blur(30px);
  animation: float 6s infinite ease-in-out;
}

.mesh-grid {
  width: 100%;
  max-width: 420px;
  height: 420px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  background: linear-gradient(45deg, rgba(139, 92, 246, 0.2), rgba(34, 211, 238, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: var(--shadow-lg), inset 0 0 50px rgba(255, 255, 255, 0.05);
  animation: morphing 12s infinite alternate ease-in-out;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.mesh-grid::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: inherit;
  border: 2px dashed rgba(255, 255, 255, 0.15);
  animation: spin 30s linear infinite;
}

.node-center {
  width: 60px;
  height: 60px;
  background: var(--gradient-main);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(139, 92, 246, 0.6);
  z-index: 2;
  position: relative;
}

/* Stats Section */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: -3rem;
  position: relative;
  z-index: 10;
}

.stat-card {
  padding: 2rem;
  text-align: center;
  border-radius: var(--radius-md);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  font-family: 'Outfit', sans-serif;
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* Section Header */
.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem auto;
}

.section-subtitle {
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.section-header p {
  font-size: 1.1rem;
}

/* Curriculum Section */
.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.curriculum-grid-3col {
  grid-template-columns: repeat(3, 1fr);
}

.curriculum-card {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.curriculum-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.2);
  display: grid;
  place-items: center;
  color: var(--accent-purple);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
  transition: var(--transition-normal);
}

.curriculum-card:hover .curriculum-icon {
  background: var(--gradient-main);
  color: white;
  border-color: transparent;
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.3);
  transform: scale(1.05);
}

.curriculum-card h3 {
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.curriculum-card p {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.curriculum-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border-light);
  padding: 1.25rem 0 0 0;
  margin: 0;
}

.curriculum-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.curriculum-list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: bold;
}

/* Interactive Playground Section */
.playground-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 1.75rem;
  align-items: stretch;
}

.canvas-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  min-height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  background: #ffffff;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.canvas-overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(8px);
  pointer-events: none;
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.playground-controls {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  justify-content: space-between;
}

.controls-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.control-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
}

.control-slider-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

input[type="range"] {
  flex-grow: 1;
  accent-color: var(--primary);
  height: 6px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 3px;
  border: none;
  outline: none;
}

.slider-val {
  font-weight: 700;
  min-width: 20px;
  color: var(--accent);
}

.btn-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.btn-ctrl {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border-light);
  background: rgba(15, 23, 42, 0.03);
  color: var(--text-primary);
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-ctrl:hover:not(:disabled) {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.15);
}

.btn-ctrl:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-ctrl-primary {
  background: var(--gradient-main);
  border-color: transparent;
  color: white;
  grid-column: span 2;
  font-size: 0.95rem;
}

.btn-ctrl-primary:hover:not(:disabled) {
  box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
  transform: translateY(-1px);
}

.playground-stats {
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  font-size: 0.9rem;
}

.pg-stat-row {
  display: flex;
  justify-content: space-between;
}

.pg-stat-val {
  font-weight: 700;
  color: var(--text-primary);
}

/* Projects & Labs Section */
.filter-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.filter-tab {
  padding: 0.6rem 1.5rem;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-normal);
}

.filter-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.filter-tab.active {
  background: var(--gradient-main);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.75rem;
  min-height: 400px;
}

.project-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.project-card.hidden {
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  padding: 0;
  margin: 0;
  border: none;
}

.project-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 30px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: var(--secondary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.project-content {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 2;
}

.project-content h3 {
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
}

.project-content p {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.project-tech {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.tech-tag {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.95rem;
  align-self: flex-start;
}

.project-link svg {
  transition: transform var(--transition-fast);
}

.project-link:hover svg {
  transform: translateX(4px);
}

/* Resources & External Links Section */
.resources-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.resource-card {
  padding: 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  text-decoration: none;
}

.resource-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(34, 211, 238, 0.08);
  border: 1px solid rgba(34, 211, 238, 0.2);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: var(--transition-normal);
}

.resource-card:hover .resource-icon {
  background: var(--accent);
  color: var(--bg-base);
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.4);
}

.resource-info h3 {
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

.resource-info p {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* Footer styling */
footer {
  border-top: 1px solid var(--border-light);
  padding: 4rem 0 2rem 0;
  background: rgba(6, 9, 19, 0.6);
  backdrop-filter: blur(8px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  margin-bottom: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-brand p {
  font-size: 0.95rem;
  max-width: 320px;
}

.footer-col h4 {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-links a {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.footer-links a:hover {
  color: var(--accent);
  padding-left: 4px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border-light);
  padding-top: 2rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.social-links {
  display: flex;
  gap: 1rem;
}

.social-link {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.02);
  display: grid;
  place-items: center;
  transition: var(--transition-fast);
}

.social-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--text-secondary);
  color: white;
}

/* Animations */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(3deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

@keyframes morphing {
  0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  25% { border-radius: 58% 42% 75% 25% / 76% 46% 54% 24%; }
  50% { border-radius: 50% 50% 33% 67% / 55% 27% 73% 45%; }
  75% { border-radius: 33% 67% 58% 42% / 63% 68% 32% 37%; }
  100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse-border {
  0% { border-color: rgba(139, 92, 246, 0.25); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.15); }
  50% { border-color: rgba(139, 92, 246, 0.6); box-shadow: 0 0 10px 4px rgba(139, 92, 246, 0.1); }
  100% { border-color: rgba(139, 92, 246, 0.25); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.15); }
}

/* Responsive Adaptations */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }
  
  .hero-badge, .hero-description {
    margin-left: auto;
    margin-right: auto;
  }
  
  .hero-actions {
    justify-content: center;
  }
  
  .hero-art-container {
    order: -1;
  }
  
  .playground-grid,
  .vaccum-bottom-grid {
    grid-template-columns: 1fr !important;
  }

  .curriculum-grid-3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    background: var(--bg-base);
    border-bottom: 1px solid var(--border-light);
    flex-direction: column;
    padding: 1.5rem;
    gap: 1.5rem;
    box-shadow: var(--shadow-lg);
  }
  
  .nav-links.active {
    display: flex;
  }
  
  .menu-toggle {
    display: block;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .section {
    padding: 4rem 0;
  }

  .curriculum-grid-3col {
    grid-template-columns: 1fr;
  }
}

/* --- Maze Abstraction Demo Styles --- */
.playground-tabs-container {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.playground-tabs {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--border-light);
  padding: 0.25rem;
  border-radius: 100px;
  gap: 0.25rem;
}

/* Playground: tab bar starts at the left edge of the demo panels */
.section-header.playground-tabs-bar {
  text-align: left;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.playground-tabs-bar .playground-tabs { flex-wrap: wrap; align-items: center; border-radius: 22px; }
.playground-tabs-bar .playground-tab { padding: 0.45rem 0.85rem; font-size: 0.85rem; }
.playground-tab-sep { width: 1px; height: 1.3rem; background: var(--border-light); margin: 0 0.15rem; }

.playground-tab {
  padding: 0.5rem 1.25rem;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.playground-tab:hover {
  color: var(--text-primary);
}

.playground-tab.active {
  background: var(--gradient-main);
  color: white;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.playground-view {
  display: none;
  opacity: 0;
}

.playground-view.active {
  display: block;
  opacity: 1;
  animation: fadeIn 0.4s ease-in-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Flow Progress Bar */
.flow-progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  gap: 1rem;
}

.flow-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.4;
  cursor: pointer;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.flow-step:hover {
  opacity: 0.75;
}

.flow-step.active {
  opacity: 1;
  font-weight: 700;
  color: var(--primary);
}

.flow-step.completed {
  opacity: 0.75;
  color: var(--accent);
}

.flow-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.05);
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  transition: var(--transition-normal);
}

.flow-step.active .flow-step-num {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
}

.flow-step.completed .flow-step-num {
  background: var(--accent);
  color: white;
}

.flow-step-name {
  font-size: 0.85rem;
  font-family: 'Outfit', sans-serif;
}

/* Teaching Panels */
.teaching-panels-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.teaching-panel {
  display: none;
}

.teaching-panel.active {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  animation: slideIn 0.3s ease-out forwards;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.teaching-panel h3 {
  font-size: 1.25rem;
  margin-bottom: 0.1rem;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
}

.teaching-panel p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Special badges and math cards */
.badge-s {
  background: #10b981;
  color: white;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.badge-g {
  background: #ef4444;
  color: white;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.8rem;
}

.formula-box {
  background: rgba(79, 70, 229, 0.04);
  border-left: 4px solid var(--primary);
  padding: 0.6rem 1rem;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.02);
}

.stat-summary-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}

.summary-item {
  display: flex;
  flex-direction: column;
}

.summary-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.summary-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}

.teaching-tip {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: rgba(8, 145, 178, 0.04);
  border: 1px dashed rgba(8, 145, 178, 0.2);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

.teaching-tip i {
  color: var(--accent);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* State Space manual tester */
.manual-robot-tester {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tester-header {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.tester-btn-group {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 0.5rem;
}

.manual-log-box {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #0f172a;
  color: #f8fafc;
  padding: 0.6rem;
  font-family: monospace;
  font-size: 0.75rem;
  box-shadow: var(--shadow-sm);
}

.manual-log-title {
  font-size: 0.65rem;
  color: #64748b;
  border-bottom: 1px solid #1e293b;
  padding-bottom: 0.25rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.manual-log-content {
  height: 65px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.manual-log-content .log-entry {
  line-height: 1.3;
}

.manual-log-content .log-entry span {
  color: #38bdf8;
}

.manual-log-content .log-entry strong {
  color: #f472b6;
}

.tester-footer-tip {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  font-style: italic;
}

/* Comparison Table */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.75rem;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.comparison-table th, .comparison-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.comparison-table th {
  background: rgba(79, 70, 229, 0.03);
  color: var(--primary);
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
}

.comparison-table tr:last-child td {
  border-bottom: none;
}

/* Small Action Button for Table Row */
.btn-action-sm {
  padding: 3px 8px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 600;
  transition: var(--transition-fast);
  display: inline-block;
  text-align: center;
}
.btn-action-sm:hover {
  background: var(--secondary);
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25);
  transform: translateY(-0.5px);
}
.btn-action-sm.active {
  background: #10b981; /* Emerald Green */
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}

/* --- Maze Search & Performance Demo Styles --- */
.ms-frontier-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-height: 75px;
  overflow-y: auto;
  padding: 0.4rem;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 6px;
}

.ms-frontier-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 0.2rem 0.4rem;
  font-size: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.ms-frontier-card.next-pop {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 0 0 1px #f59e0b;
}

.ms-frontier-card .card-node-id {
  font-weight: 700;
  color: var(--text-primary);
}

.ms-frontier-card .card-values {
  font-size: 0.65rem;
  color: var(--text-secondary);
  display: flex;
  gap: 0.25rem;
}

.ms-frontier-card.more {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-weight: 600;
  justify-content: center;
}

.frontier-empty-tip {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.25rem;
}

.badge-optimal {
  background: #10b981;
  color: white;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8rem;
}

.badge-suboptimal {
  background: #ef4444;
  color: white;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8rem;
}

.badge-optimal-sm {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.65rem;
}

.badge-suboptimal-sm {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.65rem;
}

.ms-log-entry {
  line-height: 1.4;
  color: #e2e8f0;
}

.ms-log-entry.goal_found {
  color: #34d399;
  font-weight: 700;
}

.ms-log-entry.select {
  color: #c084fc;
}

.ms-log-entry.expand {
  color: #93c5fd;
}

.ms-log-step {
  color: #94a3b8;
  font-weight: 600;
}

.active-row {
  background: rgba(79, 70, 229, 0.08) !important;
  font-weight: 600;
}

.compare-row {
  background: rgba(245, 158, 11, 0.08) !important;
  font-weight: 600;
}

/* Search Demo Interface */
.search-controls-container {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
}

.control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.ctrl-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.select-input {
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  background: white;
  color: var(--text-primary);
  outline: none;
  cursor: pointer;
  max-width: 190px;
}

.slider-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: center;
  max-width: 190px;
}

.live-search-stats {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.stats-mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.mini-stat-card {
  background: white;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
}

.mini-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 600;
}

.mini-stat-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}

.search-status-banner {
  background: rgba(15, 23, 42, 0.03);
  padding: 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  text-align: center;
  border: 1px solid var(--border-light);
  font-family: monospace;
}

.search-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.search-list-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.scrollable-list-box {
  height: 48px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  background: white;
  padding: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-content: flex-start;
}

.frontier-node-badge {
  background: rgba(234, 179, 8, 0.12);
  color: #854d0e;
  border: 1px solid rgba(234, 179, 8, 0.2);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.frontier-node-badge small {
  opacity: 0.7;
  font-size: 0.55rem;
}

.reached-node-badge {
  background: rgba(8, 145, 178, 0.08);
  color: #155e75;
  border: 1px solid rgba(8, 145, 178, 0.2);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.65rem;
  font-weight: 600;
}

.empty-list {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-style: italic;
  margin: auto;
}

.step-nav-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border-light);
  padding-top: 0.85rem;
  margin-top: 0.4rem;
}

/* Keycaps style */
kbd {
  background-color: #e2e8f0;
  border-radius: 3px;
  border: 1px solid #cbd5e1;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #334155;
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

/* --- 8-Puzzle State-Space Demo Styles --- */
.puzzle-flow-progress-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  gap: 1rem;
}

.puzzle-flow-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.4;
  cursor: pointer;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.puzzle-flow-step:hover {
  opacity: 0.75;
}

.puzzle-flow-step.active {
  opacity: 1;
  font-weight: 700;
  color: var(--primary);
}

.puzzle-flow-step.completed {
  opacity: 0.75;
  color: var(--accent);
}

.puzzle-flow-step.active .flow-step-num {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
}

.puzzle-flow-step.completed .flow-step-num {
  background: var(--accent);
  color: white;
}

.puzzle-teaching-panel {
  display: none;
}

.puzzle-teaching-panel.active {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  animation: slideIn 0.3s ease-out forwards;
}

.puzzle-teaching-panel h3 {
  font-size: 1.25rem;
  margin-bottom: 0.1rem;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
}

.puzzle-teaching-panel p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

#puzzle-canvas {
  cursor: default;
}

/* --- Graph Search Algorithms Demo Styles --- */
.search-cycle-diagram {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.6rem 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  gap: 0.5rem;
}

.cycle-step {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  opacity: 0.3;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.cycle-step.active {
  opacity: 1;
  font-weight: 700;
  color: var(--primary);
}

.cycle-step.active .cycle-step-num {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
}

.cycle-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.05);
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: var(--text-secondary);
  transition: var(--transition-normal);
}

.cycle-step-name {
  font-size: 0.75rem;
  font-family: 'Outfit', sans-serif;
}

.cycle-arrow {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  opacity: 0.4;
}

.cycle-arrow i {
  width: 14px;
  height: 14px;
}

.search-tabs-container {
  display: flex;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.search-tab {
  padding: 0.45rem 1.1rem;
  border-radius: 100px;
  border: 1px solid var(--border-light);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  cursor: pointer;
  transition: var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.search-tab:hover {
  color: var(--text-primary);
  background: rgba(15, 23, 42, 0.03);
}

.search-tab.active {
  background: var(--gradient-main);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.15);
}

#search-canvas {
  cursor: default;
}

/* --- Graph Search Solution Path & Comparison Matrix Styles --- */
.search-solution-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  box-shadow: var(--shadow-sm);
}

.search-solution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-solution-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.search-solution-title i {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.search-solution-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 100px;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-secondary);
  transition: var(--transition-fast);
}

.search-solution-badge.success {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.search-solution-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.search-solution-badge.danger {
  background: rgba(239, 68, 68, 0.15);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.search-solution-path-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.4rem 0.55rem;
  background: rgba(15, 23, 42, 0.03);
  border-radius: 6px;
  min-height: 32px;
}

.path-placeholder {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}

.path-node-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 700;
  background: #10b981;
  color: white;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}

.path-node-pill.start {
  background: #06b6d4;
  box-shadow: 0 1px 3px rgba(6, 182, 212, 0.3);
}

.path-node-pill.goal {
  background: #e11d48;
  box-shadow: 0 1px 3px rgba(225, 29, 72, 0.3);
}

.path-node-pill-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  background: #10b981;
  color: white;
}

.path-node-pill-sm.start {
  background: #06b6d4;
}

.path-node-pill-sm.goal {
  background: #e11d48;
}

.path-arrow {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: bold;
}

.search-solution-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border-top: 1px solid rgba(15, 23, 42, 0.05);
  padding-top: 0.4rem;
}

.metric-item {
  display: flex;
  flex-direction: column;
}

.metric-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.metric-value {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.optimal-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.68rem;
  color: #059669;
  background: rgba(16, 185, 129, 0.12);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  font-weight: 700;
  margin-left: 4px;
}

/* --- Two-Room Vacuum Robot Demo Styles --- */
.vaccum-flow-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.4;
  cursor: pointer;
  transition: var(--transition-normal);
  white-space: nowrap;
}

.vaccum-flow-step:hover {
  opacity: 0.75;
}

.vaccum-flow-step.active {
  opacity: 1;
  font-weight: 700;
  color: var(--primary);
}

.vaccum-flow-step.completed {
  opacity: 0.75;
  color: var(--accent);
}

.vaccum-flow-step.active .flow-step-num {
  background: var(--primary);
  color: white;
  box-shadow: 0 0 10px rgba(79, 70, 229, 0.3);
}

.vaccum-flow-step.completed .flow-step-num {
  background: var(--accent);
  color: white;
}

.vaccum-teaching-panel {
  display: none;
}

.vaccum-teaching-panel.active {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  animation: slideIn 0.3s ease-out forwards;
}

.vaccum-teaching-panel h3 {
  font-size: 1.25rem;
  margin-bottom: 0.1rem;
  font-family: 'Outfit', sans-serif;
  color: var(--text-primary);
}

.vaccum-teaching-panel p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

#vaccum-canvas {
  cursor: pointer;
}

.vaccum-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.vaccum-info-card {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.vaccum-info-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.vaccum-formula {
  font-size: 0.95rem;
  font-family: 'Fira Code', monospace;
  background: rgba(15, 23, 42, 0.05);
  padding: 0.35rem 0.6rem;
  border-radius: 4px;
  color: var(--primary);
  margin: 0.2rem 0;
}

.vaccum-pill {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
}

.vaccum-pill.success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent);
}

.vaccum-pill.danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.vaccum-pill.neutral {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-secondary);
}

.vaccum-action-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-primary);
}

.vaccum-action-pill.suck {
  background: rgba(245, 158, 11, 0.2);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.4);
}

.vaccum-action-pill.left,
.vaccum-action-pill.right {
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.vaccum-action-pill.noop {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.vaccum-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.vaccum-inspector-box {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 1rem;
}

.vaccum-inspector-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}

.vaccum-history-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  min-height: 42px;
}

.vaccum-history-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: 'Fira Code', monospace;
}

.vaccum-history-step {
  font-size: 0.65rem;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  font-weight: 700;
}

.vaccum-arrow {
  color: var(--text-muted);
  font-weight: bold;
}

.vaccum-rule-box {
  background: rgba(15, 23, 42, 0.05);
  border-left: 3px solid var(--primary);
  padding: 0.6rem 0.8rem;
  border-radius: 0 6px 6px 0;
  font-family: 'Fira Code', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
}

.vaccum-rule-tag {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}

.vaccum-callout-note {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.2);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.vaccum-callout-note i {
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.vaccum-callout-warning {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.vaccum-callout-warning i {
  color: var(--danger);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.vaccum-model-display {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.vaccum-model-room-box {
  flex: 1;
  min-width: 140px;
  background: rgba(15, 23, 42, 0.04);
  border: 1px solid var(--border-light);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}

.vaccum-model-pill {
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
  text-transform: uppercase;
}

.vaccum-model-pill.clean {
  background: rgba(16, 185, 129, 0.2);
  color: var(--accent);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.vaccum-model-pill.dirty {
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.vaccum-model-pill.unknown {
  background: rgba(100, 116, 139, 0.2);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.3);
}

.vaccum-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
}

.vaccum-badge.success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent);
}

.vaccum-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.vaccum-badge.danger {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

.vaccum-badge.pending {
  background: rgba(99, 102, 241, 0.15);
  color: var(--primary);
}

.vaccum-badge.neutral {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-secondary);
}

.vaccum-action-log-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.vaccum-agent-trace-card {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
}

.vaccum-agent-trace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}

.vaccum-agent-trace-header h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  margin: 0;
  color: var(--text-primary);
}

.vaccum-trace-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.vaccum-sequence-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  background: rgba(15, 23, 42, 0.04);
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  font-size: 0.85rem;
}

.vaccum-explanation-bar {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 1rem;
}

/* ============================================================
   Problem Formulation Page (Topic 01 — Lecture Illustration)
   Concept-first, single-viewport layout: the 8(+1) concepts are the
   primary navigation; the worked example (Vacuum / Puzzle) is a small,
   secondary switch that only changes the supporting illustration.
   ============================================================ */

html:has(body.pf-page) {
  height: 100%;
}

body.pf-page {
  height: 100%;
  overflow: hidden;
}

body.pf-page::before,
body.pf-page::after {
  display: none;
}

.pf-shell {
  height: 100vh;
  padding-top: 70px; /* .nav-container height */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.pf-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  padding: 0.85rem 1.5rem;
  flex-wrap: wrap;
}

.pf-title-block {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.pf-title-block h1 {
  font-size: 1.4rem;
  margin: 0;
}

.pf-topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: var(--accent-purple);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.pf-topic-badge i {
  width: 13px;
  height: 13px;
}

.pf-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.pf-breadcrumb:hover {
  color: var(--primary);
}

.pf-breadcrumb i {
  width: 14px;
  height: 14px;
}

/* Example switch — lives INSIDE the illustration box, above the
   illustration itself, below the concept (topic) stepper. Secondary to
   the concept stepper: small, quiet, a 2x2 grid of compact buttons. */
.pf-example-switch {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border-light);
}

.pf-example-switch-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

.pf-example-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.35rem;
}

.pf-example-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: rgba(15, 23, 42, 0.02);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.pf-example-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}

.pf-example-tab.active {
  background: var(--gradient-main);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.pf-example-tab i {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Concept stepper — the page's primary navigation. Lives inside the
   concept column (above the definition/formula/teaching-tip panel) and
   wraps into two balanced rows (5 + 4, via a 5-column grid) instead of
   one long row, since the column is only half the page width now. Each
   step stacks its number circle above its (short, wrapping) name so it
   still fits at that width. Scoped to .pf-flow-bar-wrap so the shared
   .flow-progress-bar/.flow-step classes used by Playground are untouched. */
.pf-flow-bar-wrap {
  padding: 0;
  margin-bottom: 1.25rem;
}

.pf-flow-bar-wrap .flow-progress-bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  row-gap: 0.75rem;
  column-gap: 0.4rem;
  margin-bottom: 0;
  padding: 0.75rem 0.5rem;
  overflow: visible;
}

.pf-flow-bar-wrap .flow-step {
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  white-space: normal;
  text-align: center;
}

.pf-flow-bar-wrap .flow-step-name {
  font-size: 0.62rem;
  line-height: 1.15;
  font-weight: 600;
}

.pf-flow-bar-wrap .flow-step-num {
  width: 22px;
  height: 22px;
  font-size: 0.7rem;
}

/* Main two-column area: an equal 50/50 split — concept column (definition,
   formula, teaching tip) and illustration column are the same size — kept
   proportional (not a fixed px sidebar) so the two stay visually balanced
   at any viewport width. minmax(0, ...) keeps each track from growing to
   fit its content and breaking the column's own overflow scroll. */
.pf-main-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1rem 1.5rem 1.25rem;
}

.pf-concept-col {
  min-height: 0;
  overflow: auto;
  padding: 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
}

.pf-concept-col .teaching-panels-container {
  flex: 1 1 auto;
  justify-content: center;
}

.pf-concept-col .teaching-panel h3 {
  font-size: 1.6rem;
}

.pf-concept-col .teaching-panel p {
  font-size: 1rem;
}

.pf-concept-col .formula-box {
  font-size: 1.05rem;
  padding: 0.85rem 1.1rem;
}

.pf-nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid var(--border-light);
}

.pf-stage-col {
  min-height: 0;
  overflow: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.pf-stage-illustration {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.pf-stage-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-align: center;
}

/* Vacuum world visualization */
.pf-vaccum-rooms {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.pf-room {
  width: 128px;
  padding: 1rem 0.6rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-light);
  background: rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  transition: var(--transition-normal);
}

.pf-room.pf-room-here {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}

.pf-room-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.pf-robot-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gradient-main);
  color: white;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}

.pf-robot-icon i {
  width: 18px;
  height: 18px;
}

/* 8-puzzle grid */
.pf-puzzle-board {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  grid-template-rows: repeat(3, 54px);
  gap: 0.4rem;
  margin: 0 auto;
}

.pf-puzzle-tile {
  border-radius: 10px;
  background: var(--gradient-main);
  color: white;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: var(--transition-fast);
  user-select: none;
}

.pf-puzzle-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pf-puzzle-tile.pf-blank {
  background: rgba(15, 23, 42, 0.04);
  box-shadow: none;
  cursor: default;
}

.pf-puzzle-tile.pf-blank:hover {
  transform: none;
}

/* Maze grid */
.pf-maze-board {
  display: grid;
  grid-template-columns: repeat(5, 38px);
  grid-template-rows: repeat(5, 38px);
  gap: 3px;
  margin: 0 auto;
}

.pf-maze-cell {
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.03);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  transition: var(--transition-fast);
}

.pf-maze-cell i {
  width: 15px;
  height: 15px;
}

.pf-maze-cell.pf-maze-wall {
  background: rgba(15, 23, 42, 0.18);
}

.pf-maze-cell.pf-maze-adjacent {
  cursor: pointer;
  background: rgba(79, 70, 229, 0.08);
}

.pf-maze-cell.pf-maze-adjacent:hover {
  background: rgba(79, 70, 229, 0.18);
  transform: translateY(-1px);
}

.pf-maze-cell.pf-maze-here {
  background: var(--gradient-main);
  color: white;
  box-shadow: var(--shadow-md);
}

.pf-maze-cell.pf-maze-goal:not(.pf-maze-here) {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: var(--success);
}

/* Find Path (route-finding) visualization */
.pf-path-city {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text-primary);
}

.pf-path-city i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.pf-path-trail {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-secondary);
}


/* Action buttons row under the stage */
.pf-action-row {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.pf-action-btn {
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  border: 1px solid var(--border-light);
  background: white;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.pf-action-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-1px);
}

.pf-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pf-action-btn.pf-highlight {
  border-color: var(--primary);
  background: var(--primary-glow);
  color: var(--primary);
}

.pf-state-readout {
  text-align: center;
}

.pf-state-readout .formula-box {
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  display: inline-block;
}

.pf-reset-link {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pf-reset-link:hover {
  color: var(--primary);
}

/* Abstraction 3-panel diagram (shown inside the concept column on the
   Abstraction step, since it IS the concept, not the illustration) */
.pf-abstraction-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0.75rem;
  align-items: center;
}

.pf-abstraction-panel {
  padding: 0.85rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: rgba(15, 23, 42, 0.02);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pf-abstraction-panel h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0.2rem;
}

.pf-abstraction-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-muted);
}

.pf-abstraction-arrow i {
  width: 20px;
  height: 20px;
  color: var(--primary);
}

.pf-abstraction-arrow span {
  font-size: 0.58rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  max-width: 74px;
}

.pf-detail-tag {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  padding: 0.15rem 0;
}

.pf-detail-tag.pf-dropped {
  color: var(--text-muted);
  text-decoration: line-through;
  opacity: 0.65;
}

.pf-detail-tag.pf-kept {
  color: var(--text-primary);
  font-weight: 700;
}

.pf-detail-tag i {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.pf-detail-tag.pf-dropped i {
  color: var(--danger);
}

.pf-detail-tag.pf-kept i {
  color: var(--success);
}

.pf-state-final-panel {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Formulated-problem summary — the final step of the concept stepper,
   not a separate scrolled section. */
.pf-final-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.pf-final-item {
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: rgba(15, 23, 42, 0.02);
}

.pf-final-item strong {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  margin-bottom: 0.3rem;
}

.pf-final-item span {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Below this width, fitting everything into one screen stops being
   realistic — fall back to a normal scrolling stacked layout. */
@media (max-width: 900px), (max-height: 640px) {
  html:has(body.pf-page) {
    height: auto;
  }

  body.pf-page {
    height: auto;
    overflow: visible;
  }

  .pf-shell {
    height: auto;
  }

  .pf-main-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .pf-concept-col,
  .pf-stage-col {
    overflow: visible;
  }

  .pf-topbar {
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .pf-abstraction-flow {
    grid-template-columns: 1fr;
  }

  .pf-abstraction-arrow {
    transform: rotate(90deg);
    margin: 0 auto;
  }

  .pf-vaccum-rooms {
    flex-direction: column;
    align-items: center;
  }
}


/* ============================================================
   Search & Planning Lecture Page (search_planning.html)
   SCAFFOLD ONLY: shell + topic selector bar + 60/40 two-column layout.
   Per-topic content (terminology table, data structures, strategies,
   evaluation) is not implemented yet — the placeholder styles below are
   deliberately plain. Same single-viewport shell as the Problem
   Formulation page (.pf-shell). Prefixed .sl- to avoid colliding with .pf-.
   ============================================================ */

html:has(body.sl-page) {
  height: 100%;
}

body.sl-page {
  height: 100%;
  overflow: hidden;
}

body.sl-page::before,
body.sl-page::after {
  display: none;
}

.sl-shell {
  height: 100vh;
  padding-top: 70px; /* .nav-container height */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.sl-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.25rem;
  padding: 0.85rem 1.5rem;
  flex-wrap: wrap;
}

.sl-title-block {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.sl-title-block h1 {
  font-size: 1.4rem;
  margin: 0;
}

.sl-topic-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: var(--secondary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.sl-topic-badge i {
  width: 13px;
  height: 13px;
}

.sl-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.sl-breadcrumb:hover {
  color: var(--primary);
}

.sl-breadcrumb i {
  width: 14px;
  height: 14px;
}

/* Simple topic selector bar — 4 topics, not a numbered step flow like
   Problem Formulation's flow-progress-bar. */
.sl-topic-bar-wrap {
  padding: 0 1.5rem;
}

.sl-topic-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-light);
}

.sl-topic-tab {
  padding: 0.55rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: rgba(15, 23, 42, 0.02);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.sl-topic-tab:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}

.sl-topic-tab.active {
  background: var(--gradient-main);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

/* Main two-column area: an equal 50/50 split — concept column and
   illustration column are the same size — kept proportional (not a fixed
   px sidebar) so the two stay visually balanced at any viewport width.
   minmax(0, ...) keeps each track from growing to fit its content and
   breaking the column's own overflow scroll. */
.sl-main-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.25rem;
  padding: 1rem 1.5rem 1.25rem;
}

.sl-concept-col {
  min-height: 0;
  overflow: auto;
  padding: 1.75rem 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: flex-start;
}

.sl-concept-col .teaching-panel h3 {
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}

.sl-graph-col {
  min-height: 0;
  overflow: auto;
  padding: 1.25rem 0.6rem;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

/* Search Terminology (implemented) — brief intro line, then the in-place
   Concept Selector bar for all 7 terms (per the spec: no separate pages
   or subtopics per term), then the usual definition / formula / tip. */
.sl-topic-intro {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin: 0 0 0.7rem;
  line-height: 1.5;
}

/* Wraps into two balanced rows once there are more than ~6 concepts
   (7 Search Terminology terms -> 4 + 3), per the doc, instead of
   shrinking the chip font or letting one long row overflow/scroll. */
.sl-concept-selector {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid var(--border-light);
}

/* Each row's column count is set inline per row (matching its exact
   chip count), so a row is always exactly one line — long names wrap
   to a second text line inside their own cell instead of the row
   itself breaking onto extra visual lines. */
.sl-concept-row {
  display: grid;
  gap: 0.35rem;
}

.sl-concept-chip {
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: rgba(15, 23, 42, 0.02);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.25;
  cursor: pointer;
  transition: var(--transition-fast);
  white-space: normal;
  text-align: center;
}

.sl-concept-chip:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}

.sl-concept-chip.active {
  background: var(--gradient-main);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

/* Fixed graph illustration (Search Terminology's Illustration column) */
.sl-graph-illustration {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.85rem;
}

.sl-graph-svg-wrap {
  width: 100%;
}

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

/* Used by the terms whose Illustration Note asks for both the
   state-space graph AND the corresponding search tree (per the doc's
   "Illustration" rule) — shown side by side rather than stacked, since
   two diagrams next to each other need far less vertical room than one
   on top of the other. Centered like the single-graph illustration for
   visual consistency between the two modes; the pair is well within the
   column's height at their current sizes, so centering carries no
   clipping risk. */
.sl-graph-illustration-compact {
  gap: 0.6rem;
  justify-content: center;
}

.sl-dual-diagrams {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  width: 100%;
}

.sl-diagram-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  min-width: 160px;
}

/* Flex-basis is weighted (graph wider than tree, matching the graph's
   wider aspect ratio) and grow/shrink is shared equally past that, so
   both diagrams scale up together to fill the illustration column —
   instead of stopping at small fixed caps that read as "shrunk" next
   to the full-width single-graph view used by the other terms. */
.sl-diagram-block-graph {
  flex: 1 1 240px;
  max-width: 420px;
}

.sl-diagram-block-tree {
  flex: 1 1 180px;
  max-width: 340px;
}

/* Tree-Like vs. Graph Search shows the graph next to TWO trees instead
   of one, so all three need to be narrower to fit the same illustration
   column without wrapping to a second row or overflowing horizontally. */
.sl-graph-illustration-triple .sl-diagram-block-graph {
  flex: 1 1 170px;
  max-width: 230px;
}

.sl-diagram-block-tree-narrow {
  flex: 1 1 130px;
  max-width: 190px;
}

.sl-diagram-block .sl-graph-svg-wrap,
.sl-diagram-block .sl-tree-svg-wrap {
  width: 100%;
}

.sl-tree-caption {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  text-align: center;
}

/* A pruned tree node: an attempted, rejected path (Graph Search) — drawn
   as a faded, dashed ghost rather than a normal node or a duplicate
   (which would both wrongly suggest it became a real tree node). */
.sl-gnode.sl-tree-pruned circle {
  fill: rgba(15, 23, 42, 0.03);
  stroke: rgba(180, 83, 9, 0.4);
  stroke-width: 1;
  stroke-dasharray: 1.2 1;
}

.sl-gnode.sl-tree-pruned .sl-gnode-label {
  fill: rgba(120, 53, 15, 0.55);
}

.sl-gnode.sl-tree-pruned .sl-gnode-badge {
  fill: #b45309;
}

.sl-illustration-note {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
}

.sl-gedge {
  stroke: rgba(15, 23, 42, 0.15);
  stroke-width: 0.9;
}

.sl-gedge.sl-gedge-highlight {
  stroke: #4f46e5;
  stroke-width: 1.6;
}

.sl-gedge.sl-gedge-dup {
  stroke: #f59e0b;
  stroke-width: 1.4;
  stroke-dasharray: 1.6 1.1;
}

.sl-gedge-cost-bg {
  fill: #ffffff;
  stroke: rgba(15, 23, 42, 0.15);
  stroke-width: 0.4;
}

.sl-gedge-cost-bg.sl-gedge-highlight {
  stroke: #4f46e5;
}

.sl-gedge-cost-bg.sl-gedge-dup {
  stroke: #f59e0b;
}

.sl-gedge-cost-text {
  font: 700 3.6px 'Outfit', sans-serif;
  fill: var(--text-secondary);
  text-anchor: middle;
  dominant-baseline: middle;
}

.sl-gnode circle {
  fill: #ffffff;
  stroke: rgba(15, 23, 42, 0.18);
  stroke-width: 1.2;
  transition: var(--transition-fast);
}

.sl-gnode-label {
  font: 700 5.2px 'Outfit', sans-serif;
  fill: var(--text-primary);
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.sl-gnode-badge {
  font-size: 4.2px;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  fill: var(--primary);
  text-anchor: middle;
}

.sl-gnode-sublabel {
  font: 600 3.4px 'Outfit', sans-serif;
  fill: var(--text-muted);
  text-anchor: middle;
}

.sl-gnode.sl-current circle {
  fill: #4f46e5;
  stroke: #4f46e5;
}

.sl-gnode.sl-current .sl-gnode-label {
  fill: #ffffff;
}

.sl-gnode.sl-frontier circle {
  fill: #e0e7ff;
  stroke: #4f46e5;
}

.sl-gnode.sl-frontier .sl-gnode-label {
  fill: #3730a3;
}

.sl-gnode.sl-explored circle {
  fill: #1e293b;
  stroke: #1e293b;
}

.sl-gnode.sl-explored .sl-gnode-label {
  fill: #ffffff;
}

.sl-gnode.sl-dup circle {
  fill: #fef3c7;
  stroke: #f59e0b;
  stroke-width: 1.6;
}

.sl-gnode.sl-dup .sl-gnode-label {
  fill: #b45309;
}

.sl-gnode.sl-goal circle {
  stroke: var(--success);
  stroke-width: 2;
}

.sl-gnode.sl-start circle {
  stroke: var(--primary);
  stroke-width: 2;
  stroke-dasharray: 2 1.2;
}

/* Search Strategies: the user-selected start/goal cities get a persistent
   dashed ring (like the Playground's cyan/red outlines) so both endpoints
   stay visible for the whole run, not just the instant the goal is found.
   Reuses .sl-start's dashed pattern in green instead of primary so it
   never gets confused with .sl-goal's SOLID ring (which specifically means
   "the goal was just reached here"). */
.sl-gnode.sl-goal-target circle {
  stroke: var(--success);
  stroke-width: 2;
  stroke-dasharray: 2 1.2;
}

/* Search Strategies: BIBF runs two searches at once (forward from the
   start, backward from the goal) — backward-direction nodes get a
   visually distinct teal scheme so the two searches read as clearly
   separate on the same graph. */
.sl-gnode.sl-frontier-b circle {
  fill: #ccfbf1;
  stroke: #0d9488;
}

.sl-gnode.sl-frontier-b .sl-gnode-label {
  fill: #0f766e;
}

.sl-gnode.sl-explored-b circle {
  fill: #134e4a;
  stroke: #134e4a;
}

.sl-gnode.sl-explored-b .sl-gnode-label {
  fill: #ffffff;
}

/* Search Strategies' city graph reuses the same SVG geometry as the A-H
   graph, just with 3-letter labels — shrink the text to fit the same
   circle instead of widening the whole diagram. */
.sl-graph-svg.sl-graph-svg-cities .sl-gnode-label {
  font-size: 3.7px;
}

.sl-graph-svg.sl-graph-svg-cities .sl-gnode-badge {
  font-size: 3.6px;
}

.sl-graph-svg.sl-graph-svg-cities .sl-gnode-sublabel {
  font-size: 3px;
}

/* Search Strategies — Start/Goal (+ SMA* memory bound) selectors, live
   above the algorithm's stepper controls. */
.sl-ss-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: rgba(79, 70, 229, 0.04);
}

.sl-ss-control-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sl-ss-control-row label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sl-ss-select {
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  cursor: pointer;
}

.sl-ss-select:hover {
  border-color: var(--border-focus);
}

/* Auto-Run / Reset button variants, layered on top of .sl-step-btn */
.sl-step-controls-secondary {
  margin-top: -0.2rem;
}

.sl-step-btn-play {
  border-color: rgba(79, 70, 229, 0.35);
  color: var(--primary);
}

.sl-step-btn-play:hover {
  background: rgba(79, 70, 229, 0.06);
}

.sl-step-btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  padding: 0.3rem 0.6rem;
  font-size: 0.72rem;
}

.sl-step-btn-ghost:hover {
  color: var(--text-secondary);
  border-color: var(--border-light);
}

/* Frontier shown as visual blocks (reusing Search Data Structures'
   .sl-frontier-box(-pop)/.sl-frontier-boxes styling) instead of plain
   text, in the Search Strategies stepper's readout panel. */
.sl-ss-frontier-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

.sl-ss-frontier-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sl-frontier-order-note {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
}

.sl-frontier-empty-msg {
  font-size: 0.76rem;
  font-style: italic;
  color: var(--text-muted);
  text-align: center;
  padding: 0.3rem 0;
}

/* BIBF's frontier splits into two clearly separate rows — forward (from
   start) and backward (from goal) — since it's really two priority queues
   running at once. */
.sl-frontier-dir-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.sl-frontier-dir-label {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Step table — one row per significant decision point (START/SELECT/
   GOAL_FOUND/ITERATION_START/FAIL), populated up through the current step
   and auto-scrolled to the bottom, mirroring the Playground's own dynamic
   step table. Height-bounded with its own scrollbar so a long run (IDS,
   BIBF) never pushes the graph out of view. */
.sl-ss-step-table-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.sl-ss-step-table-wrap {
  max-height: 130px;
  overflow-y: auto;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.sl-ss-step-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
}

.sl-ss-step-table thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  color: var(--text-muted);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--border-light);
}

.sl-ss-step-table td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  color: var(--text-secondary);
  vertical-align: top;
}

.sl-ss-step-table tr:last-child td {
  border-bottom: none;
}

.sl-ss-table-row-active {
  background: rgba(79, 70, 229, 0.07);
}

.sl-ss-table-row-active td {
  color: var(--text-primary);
  font-weight: 600;
}

/* Putting It Together's interactive graph: any node that was ever
   POP'd/expanded in the current algorithm's trace is a jump target,
   regardless of which step is showing right now. */
.sl-gnode.sl-gnode-clickable {
  cursor: pointer;
}

.sl-gnode.sl-gnode-clickable circle {
  transition: var(--transition-fast);
}

.sl-gnode.sl-gnode-clickable:hover circle {
  stroke: #4f46e5;
  stroke-width: 2.2;
}

/* ---------- Search Data Structures (implemented) ---------- */

/* Node Structure: a small key/value card listing node.STATE/PARENT/
   ACTION/PATH-COST for the highlighted tree node, shown as a third
   diagram block next to the graph and the tree. */
.sl-nodecard {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.02);
}

.sl-nodecard-row {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.78rem;
}

.sl-nodecard-key {
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.68rem;
  white-space: nowrap;
}

.sl-nodecard-val {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

/* Frontier Operations: a row of boxes for the frontier's current
   contents, plus a static log of IS-EMPTY/TOP/POP/ADD calls and their
   results, run in sequence. */
.sl-frontier-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
}

.sl-frontier-box {
  min-width: 2.2rem;
  padding: 0.4rem 0.6rem;
  border: 1.5px solid #4f46e5;
  border-radius: 8px;
  background: #e0e7ff;
  color: #3730a3;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  position: relative;
}

.sl-frontier-ops {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.sl-frontier-op {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.35rem 0.55rem;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition-fast);
}

.sl-frontier-op:hover {
  border-color: var(--border-focus);
}

.sl-frontier-op-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary);
}

.sl-frontier-op-result {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* Frontier Operations run state: pending ops are dimmed (their result
   hasn't happened yet, shown as "…"); the active op is the one the graph
   and frontier box currently reflect; done ops stay legible but recede
   once the run has moved past them. */
.sl-frontier-op-pending {
  opacity: 0.5;
}

.sl-frontier-op-pending .sl-frontier-op-result {
  font-style: italic;
}

.sl-frontier-op-active {
  border-color: #4f46e5;
  background: rgba(79, 70, 229, 0.06);
  box-shadow: 0 0 0 1px rgba(79, 70, 229, 0.25);
}

.sl-frontier-op-active .sl-frontier-op-result {
  color: var(--text-primary);
  font-weight: 600;
}

/* Frontier Operations' CONCEPT column: a small badge naming which
   operation the explanation below belongs to, and a highlight on that
   operation's own notation inside the formula box — both change with
   every click, so the left-hand explanation never goes stale while the
   graph on the right moves. */
.sl-frontier-op-stepbadge {
  display: inline-block;
  align-self: flex-start;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.08);
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: -0.3rem 0 -0.1rem;
}

.sl-formula-op {
  transition: var(--transition-fast);
}

.sl-formula-op.active {
  background: rgba(79, 70, 229, 0.14);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  margin: 0 -0.3rem;
}

/* Frontier Types: three side-by-side panels running FIFO / LIFO /
   Priority Queue over the SAME graph from the SAME starting frontier —
   each panel keeps its own small expansion tree (renderExpansionTreeSVG)
   plus a live frontier-box row, advanced together by a shared tick
   counter (Run/Prev/Next below the row, per .sl-step-controls). */
.sl-frontier-types-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 0.7rem;
  width: 100%;
}

.sl-frontier-type-panel {
  flex: 1 1 150px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.02);
}

.sl-frontier-type-sub {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: -0.25rem;
}

.sl-frontier-type-panel .sl-tree-svg-wrap {
  width: 100%;
}

/* Kept for older cached markup; the live panel now uses the shared
   .sl-frontier-boxes (horizontal) layout instead. */
.sl-frontier-boxes-vert {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
}

.sl-frontier-box-pop {
  border-color: var(--success);
  background: #dcfce7;
  color: #166534;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.sl-frontier-box-cost {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sl-frontier-type-pop {
  font-size: 0.74rem;
  color: var(--text-secondary);
  text-align: center;
  min-height: 2.1em;
}

.sl-frontier-type-pop.sl-frontier-type-done {
  color: #166534;
  font-weight: 600;
}

/* Putting It Together: BFS/UCS algo toggle, pseudocode block with a
   moving highlight, and step Prev/Next controls, all in the concept
   column; the graph + frontier/reached/order readout live in the
   illustration column via .sl-stepper-panel. */
.sl-algo-toggle {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0 0.4rem;
}

.sl-algo-btn {
  flex: 1 1 0;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: rgba(15, 23, 42, 0.02);
  color: var(--text-secondary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.76rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.sl-algo-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-focus);
}

.sl-algo-btn.active {
  background: var(--gradient-main);
  color: white;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.sl-pseudocode {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.64rem;
  line-height: 1.32;
  padding: 0.45rem 0.7rem;
  border-radius: 10px;
  background: #0f172a;
  color: #cbd5e1;
  overflow-x: auto;
  margin-bottom: 0.35rem;
}

.sl-pseudo-line {
  white-space: pre;
  border-radius: 4px;
  padding: 0.02rem 0.3rem;
  margin: 0 -0.3rem;
  cursor: pointer;
}

.sl-pseudo-line:hover {
  background: rgba(148, 163, 184, 0.18);
}

.sl-pseudo-line.active {
  background: rgba(79, 70, 229, 0.35);
  color: #ffffff;
}

.sl-pseudo-line.active:hover {
  background: rgba(79, 70, 229, 0.48);
}

.sl-pseudo-linenum {
  display: inline-block;
  width: 1.2rem;
  color: #64748b;
  text-align: right;
  margin-right: 0.55rem;
  user-select: none;
}

.sl-pseudo-line.active .sl-pseudo-linenum {
  color: rgba(255, 255, 255, 0.7);
}

.sl-stepper-noteblock {
  margin: -0.4rem 0 -0.35rem;
}

.sl-stepper-noteblock .sl-frontier-op-stepbadge {
  margin: 0 0 0.2rem;
}

.sl-stepper-note {
  font-size: 0.76rem;
  color: var(--text-secondary);
  line-height: 1.28;
  margin: 0;
}

.sl-step-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.sl-step-btn {
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition-fast);
}

.sl-step-btn:hover:not(:disabled) {
  border-color: var(--border-focus);
  color: var(--primary);
}

.sl-step-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.sl-step-indicator {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.sl-stepper-panel {
  justify-content: flex-start;
}

.sl-stepper-readout {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.02);
}

.sl-stepper-readout-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.76rem;
}

.sl-stepper-readout-row .sl-nodecard-val {
  text-align: right;
  word-break: break-word;
}

/* Placeholder styling — deliberately plain, to be replaced once each
   topic's real content is implemented. */
.sl-placeholder-block {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.85rem 1.1rem;
  border: 1px dashed var(--border-light);
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.02);
}

.sl-placeholder-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.sl-placeholder-text {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
}

.sl-placeholder-illustration {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px dashed var(--border-light);
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.sl-placeholder-illustration i {
  width: 28px;
  height: 28px;
  opacity: 0.5;
}

/* Below this width, fitting everything into one screen stops being
   realistic — fall back to a normal scrolling stacked layout (same
   convention as the Problem Formulation page). */
@media (max-width: 900px), (max-height: 640px) {
  html:has(body.sl-page) {
    height: auto;
  }

  body.sl-page {
    height: auto;
    overflow: visible;
  }

  .sl-shell {
    height: auto;
  }

  .sl-main-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .sl-concept-col,
  .sl-graph-col {
    overflow: visible;
  }

  .sl-topbar {
    justify-content: center;
    text-align: center;
  }
}

/* ============================================================
   Topic 02 Reading Page (topic02_reading.html)
   A textbook-style companion to the interactive search_planning.html
   lecture, styled after the CS 188 online textbook: numbered sections,
   a sticky in-page table of contents, prose paragraphs, and a
   definition-list "spec card" per search strategy (Frontier / Goal Test /
   Completeness / Optimality / Time / Space) instead of the interactive
   page's click-through steppers. Reuses .sl-breadcrumb/.sl-topic-badge
   (masthead), .formula-box/.teaching-tip (inline notation + asides) and
   the site's shared tokens so it reads as the same site, not a bolted-on
   page. Prefixed .rp- ("reading page") for everything that's new.
   ============================================================ */

.rp-masthead {
  padding: 7.5rem 0 2.5rem;
  position: relative;
}

.rp-masthead-inner {
  max-width: 820px;
}

.rp-masthead .sl-breadcrumb {
  margin-bottom: 1.1rem;
}

.rp-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}

.rp-title-row h1 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  margin: 0;
}

.rp-lede {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 68ch;
  margin-bottom: 1.25rem;
}

.rp-citation {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  background: rgba(79, 70, 229, 0.05);
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  color: var(--text-secondary);
  max-width: 68ch;
}

.rp-citation i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--primary);
  margin-top: 0.15rem;
}

.rp-citation strong {
  color: var(--text-primary);
}

/* ---- Two-column reading layout: sticky TOC + article ---- */
.rp-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
  padding-bottom: 6rem;
}

.rp-toc {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding-right: 0.5rem;
}

.rp-toc-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.rp-toc nav {
  display: flex;
  flex-direction: column;
}

.rp-toc a {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  padding-left: 0.75rem;
  margin-left: -0.05rem;
  transition: var(--transition-fast);
  line-height: 1.35;
}

.rp-toc a:hover {
  color: var(--primary);
  border-left-color: var(--border-focus);
}

.rp-toc a.rp-toc-h2 {
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 0.9rem;
}

.rp-toc a.rp-toc-h2:first-child {
  margin-top: 0;
}

.rp-toc a.rp-toc-h3 {
  padding-left: 1.4rem;
  font-size: 0.78rem;
}

/* ---- Article typography ---- */
.rp-article {
  min-width: 0;
  max-width: 760px;
}

.rp-article section {
  margin-bottom: 3rem;
  scroll-margin-top: 90px;
}

.rp-article h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary);
  background: none;
  -webkit-text-fill-color: unset;
  display: block;
  padding-bottom: 0.6rem;
  margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-light);
}

.rp-article h2 .rp-num {
  color: var(--primary);
  margin-right: 0.4rem;
}

.rp-article h3 {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 2rem 0 0.75rem;
  scroll-margin-top: 90px;
}

.rp-article h3 .rp-num {
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 0.35rem;
}

.rp-article > section > p:first-of-type {
  margin-top: 0;
}

.rp-article p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.rp-article strong {
  color: var(--text-primary);
  font-weight: 700;
}

.rp-article em {
  font-style: italic;
}

.rp-article ul,
.rp-article ol {
  margin: 0 0 1.1rem 1.3rem;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
}

.rp-article li {
  margin-bottom: 0.35rem;
}

.rp-article .formula-box {
  margin: 1rem 0 1.25rem;
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.6;
}

.rp-article .teaching-tip {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
}

/* ---- Multi-line pseudocode block ---- */
.rp-pseudocode {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  margin: 1rem 0 1.5rem;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}

.rp-pseudocode-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  margin-bottom: 0.6rem;
}

.rp-pseudocode pre {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.65;
  white-space: pre;
  color: #e2e8f0;
}

.rp-pseudocode .rp-pc-kw { color: #93c5fd; }
.rp-pseudocode .rp-pc-fn { color: #67e8f9; }
.rp-pseudocode .rp-pc-cm { color: #64748b; font-style: italic; }

/* ---- Per-strategy spec card (Frontier / Goal Test / Completeness /
   Optimality / Time / Space), the reading page's equivalent of the
   interactive page's click-through algorithm stepper. ---- */
.rp-spec {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 0.5rem 1rem;
  padding: 1rem 1.2rem;
  background: rgba(15, 23, 42, 0.02);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  margin: 1rem 0 1.5rem;
}

.rp-spec dt {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 0.35rem 0;
}

.rp-spec dd {
  font-size: 0.88rem;
  color: var(--text-primary);
  padding: 0.35rem 0;
  line-height: 1.5;
}

.rp-spec dd code,
.rp-article p code,
.rp-article li code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background: rgba(79, 70, 229, 0.07);
  color: var(--primary);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ---- Static SVG figures (reusing the interactive page's own
   .sl-gnode/.sl-gedge drawing classes so a figure like the b/d/m/C*/epsilon
   tree renders with identical colors/markers to search_planning.html) ---- */
.rp-figure {
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.rp-figure .sl-graph-svg {
  max-width: 300px;
  margin: 0 auto;
}

.rp-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---- Summary comparison table ---- */
.rp-table-wrap {
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.rp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 640px;
}

.rp-table th,
.rp-table td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  line-height: 1.4;
}

.rp-table th {
  background: rgba(79, 70, 229, 0.05);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.rp-table td:first-child,
.rp-table th:first-child {
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.rp-table tr:last-child td {
  border-bottom: none;
}

.rp-table code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.85em;
  color: var(--primary);
}

/* ---- "Reading Notes" CTA button on search_planning.html's topbar ---- */
.sl-reading-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  background: var(--gradient-main);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  transition: var(--transition-fast);
  margin-left: auto;
  white-space: nowrap;
}

.sl-reading-btn:hover {
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

.sl-reading-btn i {
  width: 14px;
  height: 14px;
}

@media (max-width: 900px) {
  .rp-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .rp-toc {
    position: static;
    max-height: none;
    padding: 1rem 1.1rem;
    background: rgba(15, 23, 42, 0.02);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
  }

  .rp-toc nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    column-gap: 1.5rem;
  }

  .rp-article {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .rp-spec {
    grid-template-columns: 1fr;
  }

  .rp-spec dt {
    padding-bottom: 0;
  }

  .rp-spec dd {
    padding-top: 0;
  }
}

/* ============================================================
   Section 5: Practice Exercises (topic02_reading.html)
   Each exercise is a bordered card (.rp-exercise) with a prompt
   (.rp-exercise-body) and a native <details>/<summary> disclosure
   (.rp-answer) for the hidden solution -- <summary> is restyled to
   read as a real "Show Answer" button (default marker removed, a
   rotating chevron added) rather than a native triangle, and needs
   no JS: the browser's own open/close state does the hiding.
   Multi-part answers use .rp-answer-part/.rp-answer-part-label for
   the (a)/(b)/(c) subpart structure. Exercise 1's tree figure reuses
   its own small .rp-ex-* node/edge classes (a bespoke, larger-than-
   usual viewBox for 21 nodes) rather than the shared .sl-gnode/
   .sl-gedge classes, which are tuned for the 8-9 node diagrams
   elsewhere on this page.
   ============================================================ */

.rp-exercise {
  margin: 0 0 1.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.rp-exercise-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.3rem 0;
}

.rp-exercise-num {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.08);
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  white-space: nowrap;
}

.rp-exercise-title {
  margin: 0 !important;
  font-size: 1.02rem !important;
  font-weight: 700;
  color: var(--text-primary);
}

.rp-exercise-body {
  padding: 0.6rem 1.3rem 1.2rem;
}

.rp-exercise-body p {
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
}

.rp-exercise-body p:last-child {
  margin-bottom: 0;
}

/* ---- Exercise 1's tree figure ---- */
.rp-ex-figure {
  margin: 0.9rem 0 0;
  padding: 1rem 1rem 0.9rem;
  background: rgba(15, 23, 42, 0.015);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  text-align: center;
}

.rp-ex-graph-svg {
  width: 100%;
  max-width: 760px;
  height: auto;
  margin: 0 auto;
  display: block;
}

.rp-ex-figure figcaption {
  margin-top: 0.65rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  text-align: left;
}

.rp-ex-panel-title {
  font: 800 10px 'Outfit', sans-serif;
  letter-spacing: 0.08em;
  fill: var(--text-muted);
  text-anchor: middle;
}

.rp-ex-divider {
  stroke: var(--border-light);
  stroke-dasharray: 4 4;
  stroke-width: 1.2;
}

.rp-ex-edge {
  stroke: #cbd5e1;
  stroke-width: 1.6;
}

.rp-ex-edge-pruned {
  stroke: #cbd5e1;
  stroke-dasharray: 4 4;
  stroke-width: 1.4;
}

.rp-ex-edge-cost-bg {
  fill: #ffffff;
  stroke: #e2e8f0;
  stroke-width: 1;
}

.rp-ex-edge-cost-text {
  font: 700 11px 'Outfit', sans-serif;
  fill: var(--text-muted);
  text-anchor: middle;
  dominant-baseline: middle;
}

.rp-ex-node circle {
  fill: #1e293b;
  stroke: #1e293b;
  stroke-width: 1.5;
}

.rp-ex-node-label {
  font: 700 13px 'Outfit', sans-serif;
  fill: #ffffff;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}

.rp-ex-node-start circle {
  fill: var(--primary);
  stroke: var(--primary);
}

.rp-ex-node-start-label {
  font: 700 13px 'Outfit', sans-serif;
  fill: var(--primary);
  text-anchor: middle;
}

.rp-ex-node-goal circle {
  fill: #ffffff;
  stroke: var(--success);
  stroke-width: 3;
}

.rp-ex-node-goal .rp-ex-node-label {
  fill: var(--success);
}

.rp-ex-node-goal-tag {
  font: 700 9px 'Outfit', sans-serif;
  letter-spacing: 0.05em;
  fill: var(--success);
  text-anchor: middle;
}

.rp-ex-node-sub {
  font: 600 11px 'Outfit', sans-serif;
  fill: var(--text-muted);
  text-anchor: middle;
}

.rp-ex-node-tag {
  font: 700 9px 'Outfit', sans-serif;
  letter-spacing: 0.05em;
  text-anchor: middle;
}

.rp-ex-node-tag-start {
  fill: var(--primary);
}

.rp-ex-node-tag-goal {
  fill: var(--success);
}

.rp-ex-node-tag-subopt {
  fill: #e11d48;
}

.rp-ex-node-subopt circle {
  fill: #ffffff;
  stroke: #e11d48;
  stroke-width: 2.5;
}

.rp-ex-node-subopt .rp-ex-node-label {
  fill: #e11d48;
}

.rp-ex-node-pruned circle {
  fill: #ffffff;
  stroke: #94a3b8;
  stroke-dasharray: 3.5 3.5;
  stroke-width: 1.5;
}

.rp-ex-node-pruned .rp-ex-node-label {
  fill: #94a3b8;
}

.rp-ex-node-pruned-goal circle {
  fill: #ffffff;
  stroke: var(--success);
  stroke-dasharray: 3.5 3.5;
  stroke-width: 2;
  opacity: 0.7;
}

.rp-ex-node-pruned-goal .rp-ex-node-label {
  fill: var(--success);
  opacity: 0.7;
}

.rp-ex-node-tag-pruned {
  font: 700 8.5px 'Outfit', sans-serif;
  letter-spacing: 0.04em;
  fill: #94a3b8;
  text-anchor: middle;
}

.rp-ex-tree-level {
  font: 600 10px 'Outfit', sans-serif;
  fill: var(--text-muted);
  text-anchor: start;
}

.rp-ex-tree-guide {
  stroke: var(--border-light);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

/* ---- "Show Answer" disclosure ---- */
.rp-answer {
  border-top: 1px solid var(--border-light);
}

.rp-answer-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 0.75rem 1.3rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--primary);
  background: rgba(79, 70, 229, 0.04);
  transition: var(--transition-fast);
}

.rp-answer-toggle:hover {
  background: rgba(79, 70, 229, 0.08);
}

.rp-answer-toggle::-webkit-details-marker {
  display: none;
}

.rp-answer-toggle::before {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.rp-answer[open] .rp-answer-toggle::before {
  transform: rotate(45deg);
}

.rp-answer-toggle::after {
  content: 'Show Answer';
}

.rp-answer[open] .rp-answer-toggle::after {
  content: 'Hide Answer';
}

.rp-answer-body {
  padding: 1rem 1.3rem 1.3rem;
  border-top: 1px dashed var(--border-light);
}

.rp-answer-body > p {
  font-size: 0.92rem;
  margin-bottom: 0.9rem;
}

.rp-answer-body .rp-table-wrap,
.rp-answer-body .formula-box,
.rp-answer-body .teaching-tip {
  font-size: 0.85rem;
}

.rp-answer-part {
  margin: 0 0 1.3rem;
  padding-left: 0.9rem;
  border-left: 3px solid rgba(79, 70, 229, 0.18);
}

.rp-answer-part:last-child {
  margin-bottom: 0;
}

.rp-answer-part-label {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.rp-answer-part p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 0.6rem;
}

.rp-answer-part p:last-child {
  margin-bottom: 0;
}

.rp-answer-part .formula-box {
  margin: 0.7rem 0 0;
  text-align: left;
}

.rp-answer-part .teaching-tip,
.rp-answer-part .rp-table-wrap {
  margin-top: 0.7rem;
}

@media (max-width: 640px) {
  .rp-exercise-head {
    flex-direction: column;
    gap: 0.3rem;
  }
}

/* ==========================================
   Adversarial Search Playground Demo Styles
   ========================================== */

.adv-subtab-pane {
  display: none;
  opacity: 0;
}

.adv-subtab-pane.active {
  display: block;
  opacity: 1;
  animation: fadeIn 0.3s ease-in-out forwards;
}

.adv-tree-canvas-container {
  position: relative;
  width: 100%;
  min-height: 400px;
  background: radial-gradient(circle at center, rgba(248, 250, 252, 0.9) 0%, rgba(241, 245, 249, 0.95) 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

#adv-tree-canvas {
  width: 100%;
  height: 420px;
  display: block;
}

/* Keep the tree panel at its natural height instead of stretching to the controls column */
.adv-tree-canvas-container {
  align-self: start;
}

@media (min-width: 1025px) {
  /* Tree stays in view while scrolling the (taller) controls column */
  .adv-tree-canvas-container {
    position: sticky;
    top: 96px;
  }
}

.adv-tree-legend {
  position: static;
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--border-light);
  padding: 6px 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  z-index: 5;
}

.adv-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.adv-legend-symbol {
  display: inline-block;
  font-size: 0.85rem;
}

.adv-legend-symbol.max { color: #10b981; }
.adv-legend-symbol.min { color: #ef4444; }
.adv-legend-symbol.chance { color: #3b82f6; }
.adv-legend-symbol.prune { color: #ef4444; }

/* Arena Layout & Games */
.arena-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .arena-grid {
    grid-template-columns: 1fr;
  }
}

.arena-board-glass {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  box-shadow: var(--shadow-sm);
}

.arena-status-banner {
  margin-top: 1.25rem;
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.2);
  color: var(--primary);
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-align: center;
}

/* Tic-Tac-Toe Grid */
.ttt-grid-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ttt-grid {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: repeat(3, 80px);
  gap: 8px;
  background: rgba(15, 23, 42, 0.04);
  padding: 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.ttt-cell {
  background: white;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
}

.ttt-cell:hover:not(:disabled) {
  background: rgba(79, 70, 229, 0.08);
  border-color: var(--primary);
  transform: scale(1.04);
}

.ttt-cell.x {
  color: #10b981;
}

.ttt-cell.o {
  color: #ef4444;
}

.ttt-cell.win-cell {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  animation: pulse 1s infinite alternate;
}

/* Micro Connect Grid */
.connect-grid-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.connect-drop-row {
  display: grid;
  grid-template-columns: repeat(4, 60px);
  gap: 8px;
  margin-bottom: 8px;
}

.connect-drop-btn {
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(79, 70, 229, 0.1);
  border: 1px solid rgba(79, 70, 229, 0.25);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-fast);
}

.connect-drop-btn:hover:not(:disabled) {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
}

.connect-grid {
  display: grid;
  gap: 8px;
  background: #1e293b;
  padding: 12px;
  border-radius: var(--radius-md);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

.connect-cell {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #334155;
  transition: var(--transition-normal);
}

.connect-cell.red {
  background: radial-gradient(circle at 35% 35%, #f87171 0%, #ef4444 60%, #991b1b 100%);
  border-color: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
}

.connect-cell.yellow {
  background: radial-gradient(circle at 35% 35%, #fde047 0%, #eab308 60%, #a16207 100%);
  border-color: #eab308;
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.4);
}

.connect-cell.win-cell {
  box-shadow: 0 0 16px #10b981;
  border-color: #10b981;
}

/* Nim Pebbles */
.nim-game-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.nim-pebbles-display {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 320px;
  min-height: 90px;
  padding: 1rem;
  background: rgba(15, 23, 42, 0.04);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

.nim-pebble {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(79, 70, 229, 0.3);
  animation: fadeIn 0.3s ease-out;
}

.nim-count-badge {
  margin-top: 0.75rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.nim-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 1rem;
}

/* MCTS Cards */
.mcts-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.mcts-branch-card {
  padding: 1.25rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mcts-branch-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mcts-branch-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.mcts-formula-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.mcts-term {
  display: flex;
  justify-content: space-between;
}

.mcts-progress-bar-bg {
  height: 8px;
  width: 100%;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 100px;
  overflow: hidden;
}

.mcts-progress-bar-fill {
  height: 100%;
  background: var(--gradient-main);
  border-radius: 100px;
  transition: width 0.3s ease;
}

/* Benchmark Comparison Table */
.benchmark-card {
  padding: 1.5rem;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}


/* ============================================================
   Topic 04 — Constraint Satisfaction Problems
   Lecture page (csp.html, body.csp-page), Playground lab
   (#view-csp) and reading notes (topic04_reading.html).
   Reuses the .sl- lecture shell and the site tokens; everything
   new is prefixed .csp-. Accent: teal (#0d9488).
   ============================================================ */

.csp-page,
#view-csp,
#view-maze-search,
.csp-reading {
  --csp-accent: #0d9488;
  --csp-accent-soft: rgba(13, 148, 136, 0.1);
  --csp-accent-border: rgba(13, 148, 136, 0.28);
  --csp-bad: #dc2626;
  --csp-warn: #d97706;
  --csp-ok: #059669;
}

.csp-badge-accent {
  background: var(--csp-accent-soft) !important;
  border-color: var(--csp-accent-border) !important;
  color: var(--csp-accent) !important;
}

.csp-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.csp-topbar-actions .sl-reading-btn { margin-left: 0; }

.csp-demo-btn {
  background: var(--csp-accent-soft) !important;
  border: 1px solid var(--csp-accent-border);
  color: var(--csp-accent) !important;
  box-shadow: none !important;
}

/* ---- Concept column ---- */
.csp-concept { display: flex; flex-direction: column; gap: 0.85rem; }
.csp-page .sl-concept-col { padding: 1.4rem 1.9rem; }

.csp-concept-head {
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.75rem;
}

.csp-concept-head h2 {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0.55rem 0 0.4rem;
}

.csp-concept-head .sl-topic-intro { margin: 0; font-size: 0.88rem; line-height: 1.45; }

.csp-concept .sl-concept-selector { margin-bottom: 0; }

.csp-box-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.csp-box-label i { width: 14px; height: 14px; }

.csp-def-box {
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0.75rem 1rem;
}

.csp-def-text { color: var(--text-primary); font-size: 0.92rem; line-height: 1.5; font-weight: 500; }

.csp-notation-box {
  background: #1e293b;
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.csp-notation-box .csp-box-label { color: #94a3b8; }

.csp-notation-text {
  color: #5eead4;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.84rem;
  line-height: 1.6;
}

.csp-notation-text sub, .csp-notation-text sup { font-size: 0.72em; }

.csp-tip-box {
  background: rgba(245, 158, 11, 0.08);
  border-left: 4px solid #f59e0b;
  border-radius: 4px 10px 10px 4px;
  padding: 0.75rem 1rem;
}

.csp-tip-box .csp-box-label { color: #b45309; }
.csp-tip-text { color: #78350f; font-size: 0.88rem; line-height: 1.5; }

/* ---- Illustration shell ---- */
.csp-ill {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  gap: 0.7rem;
  padding: 0.35rem 0.85rem;
}

.csp-ill-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0.6rem;
}

.csp-ill-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.csp-ill-tools { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }

.csp-ill-body {
  /* Never shrink below its content: when the panel is short, the
     illustration must push the footer down (panel scrolls) instead of
     overflowing on top of the header and footer. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  gap: 0.75rem;
  min-height: 0;
}
.csp-ill-body > * { flex-shrink: 0; }

.csp-ill-foot { display: flex; flex-direction: column; gap: 0.5rem; }

.csp-empty { padding: 2rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

/* ---- Controls ---- */
.csp-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: #ffffff;
  color: var(--text-primary);
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: none;
  transition: var(--transition-fast);
  white-space: nowrap;
}

.csp-btn i { width: 14px; height: 14px; }
.csp-btn:hover:not(:disabled) { border-color: var(--csp-accent-border); color: var(--csp-accent); }
.csp-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.csp-btn-primary { background: var(--csp-accent); border-color: var(--csp-accent); color: #ffffff; }
.csp-btn-primary:hover:not(:disabled) { background: #0f766e; color: #ffffff; }

.csp-select {
  padding: 0.38rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: #ffffff;
  font-family: 'Outfit', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  max-width: 100%;
}

.csp-seg {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  background: rgba(15, 23, 42, 0.05);
  border-radius: 8px;
}

.csp-seg button {
  border: 0;
  background: transparent;
  padding: 0.28rem 0.65rem;
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.csp-seg button.active { background: #ffffff; color: var(--csp-accent); box-shadow: var(--shadow-sm); }

.csp-stepper { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.csp-step-ind { margin-left: auto; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); }

.csp-sliders { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.25rem; }
.csp-sliders-col { grid-template-columns: 1fr; }

.csp-sliders label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.csp-sliders label b { color: var(--csp-accent); font-size: 0.85rem; }
.csp-sliders input[type="range"] { accent-color: var(--csp-accent); width: 100%; }

/* ---- Pills, readouts, metrics ---- */
.csp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.55rem;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
}

.csp-pill.ok { background: rgba(5, 150, 105, 0.1); color: var(--csp-ok); border-color: rgba(5, 150, 105, 0.25); }
.csp-pill.bad { background: rgba(220, 38, 38, 0.08); color: var(--csp-bad); border-color: rgba(220, 38, 38, 0.25); }
.csp-pill.warn { background: rgba(217, 119, 6, 0.1); color: var(--csp-warn); border-color: rgba(217, 119, 6, 0.25); }
.csp-pill.info { background: var(--csp-accent-soft); color: var(--csp-accent); border-color: var(--csp-accent-border); }
.csp-pill.neutral { background: rgba(15, 23, 42, 0.05); color: var(--text-secondary); border-color: var(--border-light); }

.csp-status-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.csp-msg { font-size: 0.83rem; color: var(--text-primary); line-height: 1.45; flex: 1 1 200px; }
.csp-muted { font-size: 0.78rem; color: var(--text-muted); }
.csp-note { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }
.csp-bad-txt { color: var(--csp-bad); font-weight: 600; }

.csp-code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: #e2e8f0;
  background: #1e293b;
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.csp-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}

.csp-metric-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.csp-metric {
  flex: 1 1 110px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border-light);
  background: rgba(15, 23, 42, 0.02);
}

.csp-metric span { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); }
.csp-metric b { font-family: 'Outfit', sans-serif; font-size: 1rem; color: var(--text-primary); overflow-wrap: anywhere; }
.csp-metric em { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }
.csp-metric.ok { border-color: rgba(5, 150, 105, 0.25); background: rgba(5, 150, 105, 0.05); }
.csp-metric.ok b { color: var(--csp-ok); }
.csp-metric.bad { border-color: rgba(220, 38, 38, 0.22); background: rgba(220, 38, 38, 0.04); }
.csp-metric.bad b { color: var(--csp-bad); }
.csp-metric.warn b { color: var(--csp-warn); }

.csp-legend { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.74rem; color: var(--text-muted); }
.csp-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.csp-legend-col { flex-direction: column; gap: 0.4rem; }
.csp-lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1px solid rgba(15, 23, 42, 0.12); }
.csp-lg.ok { background: rgba(13, 148, 136, 0.18); }
.csp-lg.h2 { background: #e2e8f0; }
.csp-lg.h4 { background: rgba(245, 158, 11, 0.25); }
.csp-lg.att { background: #fecaca; border-radius: 50%; }
.csp-lg.col { background: rgba(13, 148, 136, 0.18); }
.csp-lg.ghost { background: transparent; border: 1.5px dashed #94a3b8; border-radius: 50%; }

.csp-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  vertical-align: -1px;
  border: 1px solid rgba(15, 23, 42, 0.2);
  margin-right: 2px;
}

.csp-dot-off { opacity: 0.18; }

/* ---- Map & graph SVGs ---- */
.csp-map-wrap { display: flex; justify-content: center; }
.csp-map-wrap .csp-map-svg { max-width: 460px; }
.csp-map-sm .csp-map-svg { max-width: 300px; }

.csp-map-svg, .csp-graph-svg, .csp-chart-svg, .csp-board-svg { width: 100%; height: auto; display: block; }

.csp-sea { fill: #f8fafc; }

.csp-region {
  stroke: #475569;
  stroke-width: 1.1;
  stroke-linejoin: round;
  transition: fill 0.2s ease, opacity 0.2s ease;
}

.csp-region.clickable { cursor: pointer; }
.csp-region.clickable:hover { filter: brightness(0.94); }
.csp-region.hl { stroke: #0f172a; stroke-width: 2.6; }
.csp-region.dim { opacity: 0.35; }

.csp-region-label {
  font: 800 14px 'Outfit', sans-serif;
  fill: #334155;
  text-anchor: middle;
  pointer-events: none;
}

.csp-region-label.on { fill: #ffffff; paint-order: stroke; stroke: rgba(15, 23, 42, 0.35); stroke-width: 2px; }
.csp-wipe-label { font: 800 10px 'Outfit', sans-serif; fill: var(--csp-bad); text-anchor: middle; pointer-events: none; }

.csp-conflict-line { stroke: var(--csp-bad); stroke-width: 3; stroke-dasharray: 5 3; pointer-events: none; }
.csp-conflict-mark { fill: #ffffff; stroke: var(--csp-bad); stroke-width: 2; pointer-events: none; }
.csp-conflict-x { font: 800 10px 'Outfit', sans-serif; fill: var(--csp-bad); text-anchor: middle; pointer-events: none; }
.csp-arc-line { stroke: #0f172a; stroke-width: 2.4; pointer-events: none; }

.csp-badge-svg rect { fill: #0f172a; }
.csp-badge-svg text { font: 800 10px 'Outfit', sans-serif; fill: #ffffff; text-anchor: middle; }
.csp-badge-svg.hot rect { fill: var(--csp-accent); }

.csp-gedge { stroke: #cbd5e1; stroke-width: 2; }
.csp-gedge.hl { stroke: var(--csp-accent); stroke-width: 3; }
.csp-gedge.gone { stroke-dasharray: 4 4; opacity: 0.45; }
.csp-garc { stroke: var(--csp-accent); stroke-width: 2.6; }

.csp-gnode { cursor: pointer; }
.csp-gnode circle { stroke: #334155; stroke-width: 1.6; }
.csp-gnode.hl circle { stroke: var(--csp-accent); stroke-width: 3.2; }
.csp-gnode.dim { opacity: 0.4; }
.csp-gnode.removed { opacity: 0.3; }
.csp-gnode.removed circle { stroke-dasharray: 3 3; }
.csp-gnode-label { font: 800 11px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; pointer-events: none; }
.csp-gnode-label.on { fill: #ffffff; }
.csp-gnode-sub { font: 700 10px 'Outfit', sans-serif; fill: var(--text-muted); text-anchor: middle; }

.csp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; align-items: center; }
.csp-duo-cell { display: flex; flex-direction: column; gap: 0.4rem; align-items: stretch; min-width: 0; }
.csp-duo-cell .csp-pill { align-self: center; }

.csp-duo-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.csp-deg-chip {
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: 100px;
  padding: 0.12rem 0.5rem;
  cursor: pointer;
}

.csp-deg-chip b { color: var(--csp-accent); }
.csp-deg-chip.active { background: var(--csp-accent); color: #ffffff; border-color: var(--csp-accent); }
.csp-deg-chip.active b { color: #ffffff; }

/* ---- ⟨X, D, C⟩ cards ---- */
.csp-xdc-visual { display: flex; justify-content: center; }
.csp-xdc-visual .csp-map-svg { max-width: 330px; }
.csp-xdc-cards { display: flex; flex-direction: column; gap: 0.45rem; }

.csp-xdc-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
}

.csp-xdc-key {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--csp-accent);
  color: #fff;
  font: 800 0.95rem 'Outfit', sans-serif;
}

.csp-xdc-name { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.csp-xdc-val { font-size: 0.84rem; color: var(--text-primary); line-height: 1.45; }

/* Mini timetable grid (X,D,C + node consistency) */
.csp-mini-tt-wrap { overflow-x: auto; }

.csp-mini-tt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px;
  font-size: 0.66rem;
  table-layout: fixed;
}

.csp-mini-tt th { font-weight: 700; color: var(--text-muted); text-align: center; padding: 0.15rem; }
.csp-mini-tt th.csp-mini-p { font-weight: 600; font-size: 0.6rem; }

.csp-mini-tt th.csp-mini-room {
  text-align: left;
  color: var(--text-primary);
  width: 74px;
  font-size: 0.7rem;
  line-height: 1.15;
}

.csp-mini-tt th.csp-mini-room span { display: block; font-weight: 500; color: var(--text-muted); font-size: 0.6rem; }

.csp-mini-tt td {
  height: 28px;
  background: rgba(15, 23, 42, 0.03);
  border-radius: 4px;
  text-align: center;
  font-weight: 700;
  color: var(--text-muted);
}

.csp-mini-tt td.on { background: var(--csp-accent); color: #fff; font-size: 0.58rem; }
.csp-nc-table td.csp-nc-ok { background: rgba(13, 148, 136, 0.14); color: var(--csp-accent); }
.csp-nc-table td.csp-nc-h2 { background: #e2e8f0; color: #64748b; }
.csp-nc-table td.csp-nc-h4 { background: rgba(245, 158, 11, 0.22); color: #b45309; }
.csp-nc-table td.struck { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 4px, #eef2f7 4px, #eef2f7 8px); }

.csp-course-facts {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* ---- Constraint types ---- */
.csp-type-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }

.csp-type-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: flex-start;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  background: #ffffff;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  text-align: left;
}

.csp-type-card.active { border-color: var(--csp-accent); background: var(--csp-accent-soft); }
.csp-type-label { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
.csp-type-arity { font-size: 0.72rem; color: var(--text-muted); }
.csp-type-visual svg { max-height: 230px; }
.csp-hyper-box { fill: #0f172a; }
.csp-hyper-label { font: 700 11px 'Outfit', sans-serif; fill: #ffffff; text-anchor: middle; }
text.csp-hyper-label { paint-order: normal; }
.csp-type-visual text.csp-hyper-label:not(g text) { fill: var(--csp-accent); }

/* ---- Hard / soft ---- */
.csp-hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.csp-hs-title { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); margin-bottom: 0.45rem; display: flex; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; }
.csp-hs-title span { font-size: 0.68rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.csp-hs-list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; padding: 0; margin: 0; }
.csp-hs-list li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--text-secondary); }
.csp-hs-name { flex: 1; }
.csp-hs-name em { font-style: normal; color: var(--text-muted); font-size: 0.7rem; }
.csp-hs-key { font: 800 0.68rem 'Outfit', sans-serif; padding: 0.12rem 0.4rem; border-radius: 5px; }
.csp-hs-key.hard { background: rgba(220, 38, 38, 0.1); color: var(--csp-bad); }
.csp-hs-key.soft { background: rgba(217, 119, 6, 0.12); color: var(--csp-warn); }
.csp-hs-cost { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--text-muted); }
.csp-hs-cost b { color: var(--csp-ok); }

.csp-hs-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.csp-hs-bar > div { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.55rem 0.75rem; border-radius: 8px; background: var(--csp-accent-soft); border: 1px solid var(--csp-accent-border); font-size: 0.8rem; color: var(--text-primary); }

/* ---- Search-size diagram ---- */
.csp-tree-root { fill: #0f172a; }
.csp-tree-leaf { fill: var(--csp-accent); }
.csp-tree-t { font: 700 9px 'Outfit', sans-serif; fill: var(--text-muted); text-anchor: middle; }
.csp-tree-root + .csp-tree-t { fill: #ffffff; }

/* ---- REVISE chips ---- */
.csp-row-label { font: 800 14px 'Outfit', sans-serif; fill: var(--csp-accent); }
.csp-support { stroke: var(--csp-accent); stroke-width: 1.8; opacity: 0.7; }
.csp-vchip rect { fill: #ffffff; stroke: var(--csp-accent); stroke-width: 1.6; }
.csp-vchip text { font: 800 12px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; }
.csp-vchip.gone rect { fill: #f1f5f9; stroke: #cbd5e1; stroke-dasharray: 3 3; }
.csp-vchip.gone text { fill: #cbd5e1; text-decoration: line-through; }

.csp-log {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.76rem;
  color: var(--text-secondary);
  background: rgba(15, 23, 42, 0.025);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  line-height: 1.4;
}

.csp-log-row { padding: 0.15rem 0.4rem; border-radius: 5px; }
.csp-log-row.cur { background: var(--csp-accent-soft); color: var(--text-primary); font-weight: 600; }
.csp-log-row.k-reject, .csp-log-row.k-wipeout { color: var(--csp-bad); }
.csp-log-row.k-undo, .csp-log-row.k-deadend { color: var(--csp-warn); }
.csp-log-row.k-solution { color: var(--csp-ok); font-weight: 700; }

/* ---- AC-3 queue ---- */
.csp-queue { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.csp-queue-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-right: 0.25rem; }

.csp-arc-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-secondary);
}

.csp-arc-chip.next { background: var(--csp-accent); color: #fff; }
.csp-arc-chip.upnext { background: #ffffff; color: var(--csp-accent); box-shadow: inset 0 0 0 1.5px var(--csp-accent); }
.csp-arc-chip.added { background: rgba(245, 158, 11, 0.18); color: #b45309; font-weight: 700; }
.csp-arc-chip.upnext.added { box-shadow: inset 0 0 0 1.5px var(--csp-accent); }
.csp-legend .csp-arc-chip { font-style: normal; }
.csp-queue-sep { width: 1px; align-self: stretch; background: var(--border-light); margin: 0 0.35rem; }

/* ---- Tables ---- */
.csp-table-wrap { overflow-x: auto; border: 1px solid var(--border-light); border-radius: 10px; }
.csp-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.csp-table th, .csp-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-light); text-align: left; color: var(--text-secondary); vertical-align: middle; }
.csp-table thead th { background: rgba(13, 148, 136, 0.06); color: var(--text-primary); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.csp-table tr:last-child td, .csp-table tr:last-child th { border-bottom: none; }
.csp-table td.mono { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: var(--text-primary); }
.csp-table tr.best td { background: rgba(5, 150, 105, 0.06); }
.csp-bench-table td:last-child { white-space: nowrap; }
.csp-t-ok { color: var(--csp-ok) !important; font-weight: 600; }
.csp-t-bad { color: var(--csp-bad) !important; font-weight: 600; }
.csp-t-warn { color: var(--csp-warn) !important; font-weight: 600; }
.csp-prop-table td, .csp-prop-table th { font-size: 0.74rem; }

.csp-fc-table th:first-child { white-space: nowrap; font-size: 0.72rem; }
.csp-fc-table td { text-align: center; white-space: nowrap; padding: 0.28rem 0.25rem; }
.csp-fc-table tr.cur th, .csp-fc-table tr.cur td { background: var(--csp-accent-soft); }
.csp-fc-table td.changed { box-shadow: inset 0 0 0 2px var(--csp-accent); border-radius: 4px; }
.csp-fc-table td.wiped { color: var(--csp-bad); font-weight: 800; box-shadow: inset 0 0 0 2px var(--csp-bad); }
.csp-fc-table td.assigned { background: rgba(15, 23, 42, 0.05); }

.csp-bar-cell { display: flex; align-items: center; gap: 0.4rem; }
.csp-bar { height: 8px; border-radius: 4px; background: var(--csp-accent); opacity: 0.7; flex-shrink: 0; max-width: 110px; }
.csp-bench-table .csp-bar { width: 0; }

/* ---- Pigeonhole ---- */
.csp-pig-row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

.csp-pig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.65rem;
  border-radius: 10px;
  border: 1px solid var(--border-light);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.csp-pig i { width: 24px; height: 24px; border-radius: 50%; display: block; border: 1px solid rgba(15, 23, 42, 0.2); }
.csp-pig i.none { background: #fee2e2; color: var(--csp-bad); font-style: normal; text-align: center; line-height: 22px; font-size: 0.8rem; border-color: rgba(220, 38, 38, 0.4); }
.csp-pig.over { border-color: rgba(220, 38, 38, 0.4); background: rgba(220, 38, 38, 0.04); }
.csp-pig-vals { margin-top: 0.6rem; text-align: center; font-size: 0.78rem; color: var(--text-secondary); }

/* ---- Sudoku ---- */
.csp-sud-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }

.csp-sudoku {
  display: grid;
  border: 2.5px solid #0f172a;
  border-radius: 6px;
  overflow: hidden;
  background: #ffffff;
}

.csp-sudoku-4 { grid-template-columns: repeat(4, 58px); grid-auto-rows: 58px; }
.csp-sudoku-static.csp-sudoku-4 { grid-template-columns: repeat(4, 44px); grid-auto-rows: 44px; }
.csp-sudoku-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); width: min(100%, 420px); aspect-ratio: 1; }

.csp-sud-cell {
  border-right: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 1.1rem 'Outfit', sans-serif;
  color: var(--csp-accent);
  position: relative;
  transition: background 0.2s ease;
}

.csp-sud-cell.br { border-right: 2.5px solid #0f172a; }
.csp-sud-cell.bb { border-bottom: 2.5px solid #0f172a; }
.csp-sud-cell.given { color: #0f172a; background: #f1f5f9; }
.csp-sud-cell.solved { background: rgba(13, 148, 136, 0.08); }
.csp-sud-cell.cur { background: rgba(13, 148, 136, 0.25); }
.csp-sud-cell.src { box-shadow: inset 0 0 0 2.5px #f59e0b; }
.csp-sud-cands span.cut { color: #dc2626; text-decoration: line-through; font-weight: 700; }
.csp-sud-cell.guess { color: var(--accent-purple); }
.csp-sud-cands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 6px; font: 600 0.72rem 'Outfit', sans-serif; color: var(--text-muted); }
.csp-sudoku-9 .csp-sud-cands { grid-template-columns: repeat(3, 1fr); gap: 0 2px; font-size: 0.5rem; line-height: 1.05; }
.csp-sud-cands span.off { visibility: hidden; }
.csp-sudoku-9 .csp-sud-cell { font-size: 1rem; }
.csp-sud-legend { display: flex; gap: 0.8rem; font-size: 0.72rem; color: var(--text-muted); flex-wrap: wrap; justify-content: center; }
.csp-sud-legend span { display: inline-flex; gap: 0.3rem; align-items: center; }
.csp-sud-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.csp-sud-legend i.cur { background: rgba(13, 148, 136, 0.35); }
.csp-sud-legend i.src { box-shadow: inset 0 0 0 2px #f59e0b; }
.csp-sud-legend i.given { background: #e2e8f0; }

/* ---- Backtracking stepper ---- */
.csp-bt-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.75rem; align-items: center; }
.csp-bt-grid .csp-log { max-height: 250px; overflow-y: auto; }

/* ---- LCV ---- */
.csp-lcv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

.csp-lcv-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: #ffffff;
  font-size: 0.76rem;
}

.csp-lcv-card.best { border-color: rgba(5, 150, 105, 0.45); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.08); }
.csp-lcv-card.dead { border-color: rgba(220, 38, 38, 0.4); }
.csp-lcv-card.rejected { background: rgba(15, 23, 42, 0.03); justify-content: center; }
.csp-lcv-head { font-weight: 700; color: var(--text-primary); font-size: 0.82rem; }
.csp-lcv-x { color: var(--text-muted); font-size: 0.76rem; }
.csp-lcv-nb { display: flex; align-items: center; gap: 0.35rem; color: var(--text-secondary); }
.csp-lcv-nb span { width: 32px; font-weight: 700; }
.csp-lcv-nb b { margin-left: auto; color: var(--text-primary); }
.csp-lcv-total { font-weight: 700; font-size: 0.74rem; color: var(--csp-ok); }
.csp-lcv-card.dead .csp-lcv-total { color: var(--csp-bad); }

.csp-mac-list { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.76rem; color: var(--text-secondary); }
.csp-mac-list li.wipeout { color: var(--csp-bad); font-weight: 600; }

/* ---- Backjumping ---- */
.csp-bj-box { stroke: rgba(15, 23, 42, 0.25); stroke-width: 1.2; }
.csp-bj-box.conf { stroke: var(--csp-accent); stroke-width: 3; }
.csp-bj-box.fail { stroke: var(--csp-bad); stroke-width: 2.4; stroke-dasharray: 5 3; }
.csp-bj-var { font: 800 12px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; }
.csp-bj-val { font: 600 10px 'Outfit', sans-serif; fill: var(--csp-bad); text-anchor: middle; }
.csp-bj-var.on, .csp-bj-val.on { fill: #ffffff; }
.csp-bj-idx { font: 700 10px 'Outfit', sans-serif; fill: var(--text-muted); text-anchor: middle; }
.csp-bj-chrono { fill: none; stroke: #94a3b8; stroke-width: 2; stroke-dasharray: 5 4; }
.csp-bj-jump { fill: none; stroke: var(--csp-accent); stroke-width: 2.6; }
.csp-bj-lbl { font: 700 10px 'Outfit', sans-serif; text-anchor: middle; }
.csp-bj-lbl.chrono { fill: #64748b; }
.csp-bj-lbl.jump { fill: var(--csp-accent); }
.csp-code-cell { justify-content: center; }

/* ---- Queens board ---- */
.csp-mc-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0.9rem; align-items: center; }
.csp-mc-side { display: flex; flex-direction: column; gap: 0.5rem; }
.csp-board-wrap { max-width: 340px; width: 100%; margin: 0 auto; }
.csp-sq-l { fill: #f8fafc; }
.csp-sq-d { fill: #e2e8f0; }
.csp-sq-col { fill: rgba(13, 148, 136, 0.18); }
.csp-queen circle { fill: #0f172a; }
.csp-queen text { fill: #ffffff; text-anchor: middle; font-family: 'Outfit', sans-serif; }
.csp-queen.att circle { fill: var(--csp-bad); }
.csp-q-count { font: 700 11px 'Outfit', sans-serif; fill: #475569; text-anchor: middle; }
.csp-q-count.min { fill: var(--csp-accent); font-weight: 800; }
.csp-q-ghost { fill: none; stroke: #94a3b8; stroke-width: 1.5; stroke-dasharray: 3 3; }

/* ---- Chart ---- */
.csp-chart-line { fill: none; stroke: var(--csp-accent); stroke-width: 2; stroke-linejoin: round; }
.csp-plateau { fill: rgba(217, 119, 6, 0.12); }
.csp-axis-t { font: 600 9px 'Outfit', sans-serif; fill: var(--text-muted); }
.csp-grid-l { stroke: rgba(15, 23, 42, 0.06); }

/* ---- Tree solver ---- */
.csp-order-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; justify-content: center; }
.csp-order-chip { font-size: 0.74rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 6px; background: rgba(15, 23, 42, 0.05); color: var(--text-secondary); }
.csp-order-chip.active { background: var(--csp-accent); color: #ffffff; }

/* ---- Tree decomposition ---- */
.csp-td-blob { fill: rgba(13, 148, 136, 0.08); stroke: var(--csp-accent); stroke-width: 1.6; }
.csp-td-link { stroke: var(--csp-accent); stroke-width: 2.2; stroke-dasharray: 5 4; }
.csp-td-shared { fill: #ffffff; stroke: var(--csp-accent-border); }
.csp-td-shared-t { font: 700 9px 'Outfit', sans-serif; fill: var(--csp-accent); text-anchor: middle; }
.csp-td-node { fill: #ffffff; stroke: #334155; stroke-width: 1.4; }
.csp-td-node.sa { fill: #0f172a; }
.csp-td-t { font: 800 10px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; }
.csp-td-node.sa + .csp-td-t { fill: #ffffff; }

@media (max-width: 1200px) {
  .csp-lcv-grid { grid-template-columns: 1fr 1fr; }
  .csp-type-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px), (max-height: 640px) {
  .csp-topbar-actions { margin-left: 0; }
}

@media (max-width: 640px) {
  .csp-duo, .csp-hs-grid, .csp-hs-bar, .csp-bt-grid, .csp-mc-grid, .csp-sliders, .csp-lcv-grid { grid-template-columns: 1fr; }
  .csp-sudoku-4 { grid-template-columns: repeat(4, 52px); grid-auto-rows: 52px; }
}

/* ---- Topic 04 Playground lab (#view-csp) ---- */
.csp-subtab-pane { display: none; }
.csp-subtab-pane.active { display: block; animation: fadeIn 0.3s ease-in-out forwards; }

.csp-lab-grid { grid-template-columns: minmax(0, 1fr) 400px; }

.csp-lab-stage {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.csp-lab-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.csp-lab-visual { display: flex; justify-content: center; }
.csp-lab-visual .csp-map-svg, .csp-lab-visual .csp-graph-svg { max-width: 620px; }

.csp-lab-msg {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.5;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--csp-accent-soft);
  border: 1px solid var(--csp-accent-border);
}

.csp-lab-log { max-height: 190px; overflow-y: auto; }
.csp-lab-controls { padding: 1.5rem; gap: 1.1rem; justify-content: flex-start; }
.csp-lab-controls .controls-group { gap: 0.55rem; }
.csp-lab-controls .control-label { font-size: 0.75rem; }
.csp-lab-controls input[type="range"] { accent-color: var(--csp-accent); }
.csp-lab-controls .csp-select { width: 100%; padding: 0.5rem 0.65rem; font-size: 0.82rem; }
.csp-lab-controls .playground-stats { font-size: 0.84rem; gap: 0.55rem; }
.csp-lab-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.csp-lab-row .csp-select { flex: 1; width: auto; }
.csp-btn-wide { width: 100%; justify-content: center; padding: 0.55rem 0.75rem; font-size: 0.82rem; }
.csp-board-lg { max-width: 520px; }

/* Timetable */
.csp-sched-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.5rem; align-items: start; }
.csp-tt-wrap { overflow-x: auto; }
.csp-tt { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; min-width: 760px; }
.csp-tt th { font-size: 0.7rem; color: var(--text-muted); font-weight: 700; text-align: center; }
.csp-tt th.csp-tt-day { color: var(--text-primary); font-size: 0.78rem; background: rgba(13, 148, 136, 0.07); border-radius: 6px; padding: 0.3rem; }
.csp-tt th.csp-tt-p { font-weight: 600; font-size: 0.64rem; }
.csp-tt th.csp-tt-room { width: 128px; text-align: left; color: var(--text-primary); font-size: 0.78rem; line-height: 1.2; }
.csp-tt th.csp-tt-room span { display: block; font-weight: 500; font-size: 0.6rem; color: var(--text-muted); }

.csp-tt-cell {
  height: 64px;
  background: rgba(15, 23, 42, 0.025);
  border: 1px dashed rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  vertical-align: top;
  padding: 2px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.csp-tt-cell.hint-ok { background: rgba(5, 150, 105, 0.1); border-color: rgba(5, 150, 105, 0.35); }
.csp-tt-cell.hint-no { background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 4px, #eef2f7 4px, #eef2f7 8px); cursor: not-allowed; }

.csp-tt-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 2px;
  padding: 0.22rem 0.35rem;
  border-radius: 5px;
  border: 1px solid transparent;
  border-left: 4px solid var(--co);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  text-align: left;
  line-height: 1.15;
}

.csp-status-row .csp-tt-chip { width: auto; }
.csp-tt-chip b { font-size: 0.7rem; color: var(--text-primary); }
.csp-tt-chip span { font-size: 0.58rem; color: var(--text-muted); }
.csp-tt-chip.hard { border-color: var(--csp-bad); background: #fef2f2; }
.csp-tt-chip.soft { border-top-color: rgba(217, 119, 6, 0.45); border-right-color: rgba(217, 119, 6, 0.45); border-bottom-color: rgba(217, 119, 6, 0.45); }
.csp-tt-chip.sel { outline: 3px solid var(--csp-accent); outline-offset: 1px; }

.csp-soft-toggles { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; color: var(--text-secondary); }
.csp-soft-toggles label { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.csp-soft-toggles input { accent-color: var(--csp-accent); }
.csp-soft-toggles em { margin-left: auto; font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }

.csp-viol-wrap { max-height: 220px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: 8px; }
.csp-viol-list { list-style: none; margin: 0; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.76rem; }
.csp-viol-list:empty { display: none; }
.csp-viol-list li { padding: 0.3rem 0.45rem; border-radius: 5px; color: var(--text-secondary); }
.csp-viol-list li b { font-family: 'Outfit', sans-serif; margin-right: 0.25rem; }
.csp-viol-list li em { font-style: normal; float: right; color: var(--csp-warn); font-weight: 700; }
.csp-viol-list li.hard { background: rgba(220, 38, 38, 0.06); color: #991b1b; }
.csp-viol-list li.hard b { color: var(--csp-bad); }
.csp-viol-list li.soft b { color: var(--csp-warn); }
.csp-viol-list li.ok { background: rgba(5, 150, 105, 0.07); color: var(--csp-ok); font-weight: 600; }

@media (max-width: 1100px) {
  .csp-lab-grid, .csp-sched-grid { grid-template-columns: 1fr; }
}

/* ---- Topic 04 reading notes ---- */
.csp-reading .rp-figure .csp-map-svg { max-width: 380px; margin: 0 auto; }
.csp-reading .rp-figure .csp-graph-svg { max-width: 360px; margin: 0 auto; }
.csp-rp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: center; }
.csp-rp-duo figcaption { grid-column: 1 / -1; }
.csp-rp-fc td, .csp-rp-fc th { text-align: center !important; white-space: nowrap; }
.csp-rp-fc th:first-child { text-align: left !important; }
.csp-rp-fc td.changed { box-shadow: inset 0 0 0 2px var(--csp-accent); }
.csp-rp-fc td.wiped { color: var(--csp-bad); font-weight: 800; box-shadow: inset 0 0 0 2px var(--csp-bad); }
.csp-reading .rp-ex-figure .csp-queen text { fill: #fff; text-anchor: middle; }
@media (max-width: 640px) { .csp-rp-duo { grid-template-columns: 1fr; } }

/* ---- Topic 04 reading: exercises 7-11 (search trees, demo boxes, jump arrows) ---- */
.csp-reading .csp-rp-box { margin: 0.9rem 0 0; }
.csp-reading .csp-rp-box .csp-notation-text,
.csp-reading .csp-rp-box .csp-def-text,
.csp-reading .csp-rp-box .csp-tip-text { font-size: 0.86rem; }
.csp-reading .rp-answer-body .teaching-tip { margin-top: 0.9rem; }
.csp-reading .rp-answer-body > .rp-ex-figure { margin: 0 0 1rem; }
.csp-reading .csp-rp-box + p { margin-top: 0.9rem; }
.csp-reading .rp-ex-figure .csp-graph-svg { max-width: 340px; margin: 0 auto; display: block; }
.csp-tn rect { fill: #ffffff; stroke: #334155; stroke-width: 1.4; }
.csp-tn text { font: 700 11px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; dominant-baseline: middle; }
.csp-tn.root rect { fill: #1e293b; stroke: #1e293b; }
.csp-tn.root text { fill: #ffffff; }
.csp-tn.path rect { stroke: var(--csp-accent); stroke-width: 2.2; fill: #f0fdfa; }
.csp-tn.dead rect, .csp-tn.skip rect { stroke: #94a3b8; fill: #f8fafc; }
.csp-tn.dead text, .csp-tn.skip text { fill: #64748b; }
.csp-tn.fail rect { stroke: var(--csp-bad); stroke-dasharray: 4 3; fill: #fef2f2; }
.csp-tn.fail text { fill: var(--csp-bad); }
.csp-tn.jump rect { stroke: var(--csp-warn); stroke-width: 2.2; fill: #fffbeb; }
.csp-tn.goal rect { stroke: var(--csp-ok); stroke-width: 2.8; fill: #ecfdf5; }
.csp-tn.goal text { fill: var(--csp-ok); }
.csp-tn-note { font: 600 9.5px 'Outfit', sans-serif; fill: var(--text-muted); text-anchor: middle; }
.csp-tn-note.bad { fill: var(--csp-bad); }
.csp-tn-note.ok { fill: var(--csp-ok); font-weight: 800; }
.csp-tedge { stroke: #cbd5e1; stroke-width: 1.6; }
.csp-tedge.path { stroke: var(--csp-accent); stroke-width: 2.4; }
.csp-tedge.fail { stroke: var(--csp-bad); stroke-dasharray: 4 4; opacity: 0.7; }
.csp-gedge.bad { stroke: var(--csp-bad); stroke-width: 2.6; }
.csp-gnode.bad circle { stroke: var(--csp-bad); stroke-width: 3.2; }
.csp-hyper rect { fill: #fffbeb; stroke: var(--csp-warn); stroke-width: 1.8; }
.csp-hyper text { font: 800 11px 'JetBrains Mono', monospace; fill: #92400e; text-anchor: middle; }
.csp-digit { font: 800 26px 'JetBrains Mono', monospace; fill: #0f172a; text-anchor: middle; }
.csp-carry { font: 700 12px 'Outfit', sans-serif; fill: var(--csp-accent); text-anchor: middle; }
.csp-carry-arrow { fill: none; stroke: var(--csp-accent); stroke-width: 1.3; stroke-dasharray: 3 3; }
.csp-sumline { stroke: #0f172a; stroke-width: 2; }
.csp-order-tag { font: 700 9.5px 'Outfit', sans-serif; fill: var(--csp-accent); }
.csp-jump { fill: none; stroke: var(--csp-bad); stroke-width: 2; }
.csp-step-dot { fill: var(--csp-accent); }
.csp-step-num { font: 800 10px 'Outfit', sans-serif; fill: #ffffff; text-anchor: middle; }

/* Compact lecture layout for short (laptop / projector) screens */
@media (min-width: 901px) and (max-height: 820px) {
  .csp-page .sl-topbar { padding: 0.5rem 1.5rem; }
  .csp-page .sl-topic-tabs { padding: 0.4rem 0; }
  .csp-page .sl-topic-tab { padding: 0.4rem 0.85rem; font-size: 0.8rem; }
  .csp-page .sl-main-grid { padding: 0.7rem 1.5rem 0.9rem; }
  .csp-page .sl-concept-col { padding: 1rem 1.4rem; }
  .csp-page .sl-graph-col { padding: 0.8rem 0.5rem; }
  .csp-concept { gap: 0.6rem; }
  .csp-concept-head { padding-bottom: 0.5rem; }
  .csp-concept-head h2 { font-size: 1.12rem; margin: 0.35rem 0 0.25rem; }
  .csp-concept-head .sl-topic-intro { font-size: 0.8rem; line-height: 1.4; }
  .csp-page .sl-concept-chip { padding: 0.38rem 0.45rem; font-size: 0.76rem; }
  .csp-def-box, .csp-notation-box, .csp-tip-box { padding: 0.55rem 0.8rem; }
  .csp-def-text { font-size: 0.84rem; line-height: 1.45; }
  .csp-notation-text { font-size: 0.78rem; line-height: 1.5; }
  .csp-tip-text { font-size: 0.8rem; line-height: 1.45; }
  .csp-box-label { margin-bottom: 0.15rem; font-size: 0.66rem; }
  .csp-ill { gap: 0.5rem; }
  .csp-map-wrap .csp-map-svg { max-width: 380px; }
  .csp-xdc-visual .csp-map-svg { max-width: 250px; }
  .csp-xdc-card { padding: 0.4rem 0.7rem; }
}

@media (min-width: 901px) and (max-height: 740px) {
  .csp-concept-head .sl-topic-intro { display: none; }
}

@media (max-width: 640px) {
  .csp-page .sl-concept-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---- Topic 04 · Search → Adversarial Search → CSP ---- */
.csp-sg-svg { width: 100%; height: auto; display: block; }
.csp-sg-edge { stroke: #cbd5e1; stroke-width: 1.6; }
.csp-sg-edge.hot { stroke: #2563eb; stroke-width: 3; }
.csp-sg-cost { font: 600 8px 'Outfit', sans-serif; fill: #94a3b8; text-anchor: middle; }
.csp-sg-cost.hot { fill: #2563eb; font-weight: 800; }
.csp-sg-node { fill: #ffffff; stroke: #94a3b8; stroke-width: 1.5; }
.csp-sg-node.start { stroke: #2563eb; stroke-width: 2.2; }
.csp-sg-node.goal { stroke: #059669; stroke-width: 2.2; }
.csp-sg-node.hot { fill: #dbeafe; }
.csp-sg-label { font: 700 8px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; }

.csp-gm-edge { stroke: #cbd5e1; stroke-width: 1.5; }
.csp-gm-edge.best { stroke: #10b981; stroke-width: 3.2; }
.csp-gm-act { font: 700 9px 'Outfit', sans-serif; fill: #64748b; text-anchor: middle; }
.csp-gm-act.best { fill: #059669; }
.csp-gm-max { fill: #10b981; stroke: #047857; stroke-width: 1.4; }
.csp-gm-min { fill: #ef4444; stroke: #b91c1c; stroke-width: 1.4; }
.csp-gm-t { font: 700 9px 'Outfit', sans-serif; fill: #ffffff; text-anchor: middle; }
.csp-gm-leaf { fill: #fef3c7; stroke: #d97706; }
.csp-gm-leaf-t { font: 700 9px 'Outfit', sans-serif; fill: #92400e; text-anchor: middle; }
.csp-gm-layer { fill: #f8fafc; stroke: #e2e8f0; }
.csp-gm-layer.l0 { fill: rgba(16, 185, 129, 0.08); stroke: rgba(16, 185, 129, 0.35); }
.csp-gm-layer.l1 { fill: rgba(239, 68, 68, 0.07); stroke: rgba(239, 68, 68, 0.3); }
.csp-gm-layer.l2 { fill: rgba(217, 119, 6, 0.07); stroke: rgba(217, 119, 6, 0.3); }
.csp-gm-layer-a { font: 800 9px 'Outfit', sans-serif; fill: #0f172a; }
.csp-gm-layer-b { font: 600 8px 'JetBrains Mono', monospace; fill: #64748b; }

/* three-column comparison */
.csp-g3 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.35rem; align-items: stretch; }
.csp-g3-arrow { align-self: center; font-size: 1.1rem; font-weight: 800; color: #94a3b8; }
.csp-g3-col { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.6rem; border-radius: 10px; background: #ffffff; border: 1px solid var(--border-light); border-top: 3px solid #2563eb; min-width: 0; }
.csp-g3-col.c1 { border-top-color: #ef4444; }
.csp-g3-col.c2 { border-top-color: var(--csp-accent); }
.csp-g3-tag { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.csp-g3-q { font-size: 0.76rem; font-style: italic; color: var(--text-primary); line-height: 1.35; min-height: 2.7em; }
.csp-g3-vis { display: flex; align-items: center; justify-content: center; min-height: 110px; }
.csp-g3-map .csp-map-svg { max-height: 130px; }
.csp-g3-goal { font-size: 0.72rem; line-height: 1.35; color: var(--text-secondary); }
.csp-g3-ans { margin-top: auto; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px dashed var(--border-light); font-size: 0.72rem; font-weight: 700; text-align: center; color: var(--text-muted); }
.csp-g3-ans.on { border-style: solid; border-color: var(--csp-accent-border); background: var(--csp-accent-soft); color: var(--text-primary); }

/* state representation */
.csp-sr-main { display: flex; justify-content: center; }
.csp-sr-main > svg { max-height: 210px; }
.csp-sr-box { fill: #ffffff; stroke: #94a3b8; stroke-width: 1.5; }
.csp-sr-box.goal { stroke: #059669; stroke-width: 2; }
.csp-sr-box.atomic { fill: #eff6ff; stroke: #2563eb; stroke-width: 2.2; }
.csp-sr-box-t { font: 700 13px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; }
.csp-sr-box-t.big { font-size: 20px; }
.csp-sr-note { font: 600 9px 'Outfit', sans-serif; fill: #64748b; text-anchor: middle; }
.csp-sr-arrow { stroke: #64748b; stroke-width: 1.6; }
.csp-sr-headp { fill: #64748b; }
.csp-sr-act { font: 600 9px 'JetBrains Mono', monospace; fill: #475569; text-anchor: middle; }
.csp-sr-duo { width: 100%; }
.csp-sr-duo .csp-graph-svg { max-height: 190px; }
.csp-sr-vars th, .csp-sr-vars td { padding: 0.25rem 0.5rem; font-size: 0.72rem; }
.csp-sr-vars tr.set td { color: var(--text-primary); font-weight: 600; }
.csp-sr-vars tr.tight td, .csp-sr-vars tr.tight th { background: var(--csp-accent-soft); }
.csp-an { display: flex; flex-direction: column; gap: 0.35rem; }
.csp-an-row { display: grid; grid-template-columns: 130px 1fr; gap: 0.5rem; align-items: center; padding: 0.35rem 0.5rem; border-radius: 9px; border: 1px solid var(--border-light); background: #ffffff; cursor: pointer; font: inherit; text-align: left; }
.csp-an-row.sel { border-color: var(--csp-accent); background: var(--csp-accent-soft); }
.csp-an-l { display: flex; flex-direction: column; font-size: 0.74rem; color: var(--text-primary); }
.csp-an-l em { font-style: normal; font-size: 0.66rem; color: var(--text-muted); }
.csp-an-cells { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.csp-an-cell { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.15rem 0.45rem; border-radius: 6px; border: 1px solid #cbd5e1; background: #f8fafc; font: 600 0.68rem 'JetBrains Mono', monospace; color: var(--text-secondary); }
.csp-an-cell.whole { min-width: 140px; justify-content: center; background: #eff6ff; border-color: #2563eb; color: #1e3a8a; }
.csp-an-cell.turn { background: rgba(239, 68, 68, 0.07); border-color: rgba(239, 68, 68, 0.35); }
.csp-an-cell.util { background: rgba(217, 119, 6, 0.07); border-color: rgba(217, 119, 6, 0.35); }
.csp-an-cell.var.set { border-color: var(--csp-accent); background: #ffffff; color: var(--text-primary); }
.csp-an-cell.con { border-style: dashed; }

/* solutions */
.csp-st-kind { font: 700 0.86rem 'Outfit', sans-serif; color: var(--text-primary); }
.csp-st-ans { margin-top: auto; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.7rem; }
.csp-st-path { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; }
.csp-st-chip { padding: 0.12rem 0.4rem; border-radius: 6px; background: #eff6ff; border: 1px solid #bfdbfe; font: 700 0.68rem 'Outfit', sans-serif; color: #1e3a8a; display: inline-flex; align-items: center; gap: 0.2rem; }
.csp-st-chip.best { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.45); color: #047857; }
.csp-st-chip.sm { background: #ffffff; border-color: var(--border-light); color: var(--text-primary); }
.csp-st-arrow { display: inline-flex; flex-direction: column; align-items: center; font-size: 0.7rem; line-height: 0.9; color: #2563eb; }
.csp-st-arrow em { font-style: normal; font-size: 0.58rem; color: #64748b; }
.csp-st-table th, .csp-st-table td { font-size: 0.71rem; }
.csp-st-table tbody th { white-space: nowrap; }

/* transition grid */
.csp-tg { display: flex; flex-direction: column; gap: 0.35rem; }
.csp-tg-row { display: grid; grid-template-columns: 112px repeat(3, minmax(0, 1fr)); gap: 0.35rem; align-items: stretch; transition: opacity 0.25s; }
.csp-tg-h { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.csp-tg-ico { width: 40px; height: 24px; }
.csp-tg-ico circle { fill: #ffffff; stroke: #2563eb; stroke-width: 1.6; }
.csp-tg-ico circle.g { stroke: #059669; }
.csp-tg-ico path { stroke: #64748b; stroke-width: 1.4; fill: none; }
.csp-tg-ico .mx { fill: #10b981; } .csp-tg-ico .mn { fill: #ef4444; }
.csp-tg-ico .r { fill: #ef4444; } .csp-tg-ico .gr { fill: #22c55e; } .csp-tg-ico .b { fill: #3b82f6; }
.csp-tg-l { display: flex; align-items: center; font-size: 0.72rem; font-weight: 800; color: var(--text-primary); }
.csp-tg-span { grid-column: 2 / -1; display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.7rem; border-radius: 9px; background: rgba(79, 70, 229, 0.06); border: 1px solid rgba(79, 70, 229, 0.25); font-size: 0.76rem; color: var(--text-primary); }
.csp-tg-span svg { width: 16px; height: 16px; color: #4f46e5; flex-shrink: 0; }
.csp-tg-cell { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.45rem 0.55rem; border-radius: 9px; background: #ffffff; border: 1px solid var(--border-light); border-left: 3px solid #2563eb; font-size: 0.7rem; line-height: 1.3; color: var(--text-secondary); min-height: 3.4em; }
.csp-tg-cell.c1 { border-left-color: #ef4444; }
.csp-tg-cell.c2 { border-left-color: var(--csp-accent); }
.csp-tg-cell b { font-size: 0.78rem; color: var(--text-primary); }
.csp-tg-row.off .csp-tg-cell { background: #f8fafc; border-left-color: #e2e8f0; align-items: center; justify-content: center; }
.csp-tg-row.off .csp-tg-l { color: var(--text-muted); }
.csp-tg-q { font-size: 1rem; font-weight: 800; color: #cbd5e1; }
.csp-tg-row.cur .csp-tg-cell, .csp-tg-row.cur .csp-tg-span { box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.35); }
.csp-tg-key { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.8rem; border-radius: 10px; border: 1px dashed var(--border-light); font-size: 0.8rem; line-height: 1.45; color: var(--text-muted); opacity: 0.55; transition: all 0.25s; }
.csp-tg-key svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 0.1rem; }
.csp-tg-key.on { opacity: 1; border-style: solid; border-color: var(--csp-accent); background: var(--csp-accent-soft); color: var(--text-primary); }
.csp-tg-key.on svg { color: var(--csp-accent); }

@media (min-width: 901px) and (max-height: 760px) {
  .csp-tg-ico { display: none; }
  .csp-tg { gap: 0.25rem; }
  .csp-tg-cell { padding: 0.3rem 0.45rem; min-height: 0; font-size: 0.66rem; }
  .csp-tg-cell b { font-size: 0.72rem; }
  .csp-tg-span { padding: 0.35rem 0.6rem; font-size: 0.7rem; }
  .csp-tg-key { padding: 0.4rem 0.6rem; font-size: 0.72rem; }
  .csp-g3-q { min-height: 0; }
  .csp-g3-vis { min-height: 90px; }
  .csp-g3-map .csp-map-svg { max-height: 96px; }
  .csp-st-table th, .csp-st-table td { padding: 0.3rem 0.5rem; }
  .csp-sr-main > svg { max-height: 170px; }
}
@media (max-width: 900px) {
  .csp-g3 { grid-template-columns: 1fr; }
  .csp-g3-arrow { justify-self: center; transform: rotate(90deg); }
  .csp-tg-row { grid-template-columns: 1fr; }
  .csp-tg-head { display: none; }
  .csp-tg-span { grid-column: auto; }
  .csp-an-row { grid-template-columns: 1fr; }
}


/* ---- Code trace (Backtracking Code Trace) — layout follows the CPP201
   "Trace the Code" demo: note · toolbar · code panel | state panel + explain ---- */
.csp-trace { display: flex; flex-direction: column; gap: 0.6rem; container-type: inline-size; }
.csp-trace code, .csp-concept code { font-family: 'JetBrains Mono', monospace; font-size: 0.9em; background: rgba(15, 23, 42, 0.05); padding: 0 0.25em; border-radius: 4px; }
.csp-trace-note { border-left: 3px solid var(--csp-accent); background: var(--csp-accent-soft); border-radius: 8px; padding: 0.5rem 0.8rem; }
.csp-trace-note p { margin: 0.1rem 0 0; font-size: 0.76rem; color: var(--text-secondary); }
.csp-trace-note .csp-trace-note-title { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.9rem; color: var(--text-primary); }
.csp-trace-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.csp-trace-count { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
.csp-trace-controls { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.csp-trace-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; align-items: start; }
@container (min-width: 780px) { .csp-trace-panels { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.csp-trace-panel { border: 1.5px solid var(--border-light); border-radius: 10px; overflow: hidden; background: #ffffff; }
.csp-trace-panel-title { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.45rem 0.75rem 0.15rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.78rem; color: var(--text-primary); }
.csp-trace-tag { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: var(--text-muted); }
.csp-trace-tag.ok { background: rgba(5, 150, 105, 0.12); color: var(--csp-ok); }
.csp-trace-tag.bad { background: rgba(220, 38, 38, 0.1); color: var(--csp-bad); }
.csp-trace-tag.warn { background: rgba(217, 119, 6, 0.12); color: var(--csp-warn); }
.csp-trace-code { position: relative; margin: 0; padding: 0.2rem 0 0.4rem; overflow: auto; background: #ffffff; }
.csp-trace-line { display: flex; align-items: baseline; gap: 0.45rem; padding: 0 0.75rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; line-height: 1.4; color: #0f172a; min-width: max-content; }
.csp-trace-line.is-active { background: #fef3c7; }
.csp-trace-arrow { width: 1em; color: var(--csp-warn); font-weight: 700; }
.csp-trace-no { min-width: 1.4em; text-align: right; color: #94a3b8; }
.csp-trace-src { white-space: pre; }
.csp-trace-src .kw { color: #7c3aed; font-weight: 700; }
.csp-trace-src .fn { color: var(--csp-accent); font-weight: 600; }
.csp-trace-state { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 0.6rem; padding: 0.4rem 0.75rem 0.6rem; align-items: start; }
.csp-trace-map .csp-map-svg { max-width: 260px; margin: 0 auto; }
.csp-trace-regions { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.csp-trace-region { border: 1.5px dashed var(--border-light); border-radius: 8px; padding: 0.35rem 0.5rem; }
.csp-trace-region-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; }
.csp-trace-frame { font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; line-height: 1.35; padding: 1px 5px; border-radius: 5px; color: var(--text-muted); overflow-wrap: anywhere; }
.csp-trace-frame.is-top { background: var(--csp-accent-soft); color: var(--text-primary); font-weight: 600; }
.csp-trace-empty { margin: 0; font-size: 0.7rem; color: var(--text-muted); }
.csp-trace-var { display: flex; justify-content: space-between; gap: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; color: var(--text-muted); padding: 1px 0; }
.csp-trace-var b { color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
.csp-trace-var b.bad { color: var(--csp-bad); }
.csp-trace-explain { border-top: 1.5px solid var(--border-light); padding: 0.5rem 0.75rem; background: #eff6ff; }
.csp-trace-explain-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.76rem; color: var(--text-primary); margin-bottom: 0.1rem; }
.csp-trace-explain-body { font-size: 0.8rem; line-height: 1.45; color: var(--text-secondary); min-height: 3.2em; }

/* Narrow illustration column (laptops): code panel scrolls to the active
   line so the search state stays on screen without page scrolling. */
/* Backtracking Code Trace: the code panel fills the concept column; the
   illustration column holds the search state, call stack and explanation. */
.csp-concept-code { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.csp-concept:has(.csp-concept-code) { flex: 1 1 auto; min-height: 0; }
.csp-trace-panel-code { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.csp-trace-panel-code .csp-trace-code { flex: 1 1 auto; min-height: 0; padding: 0.35rem 0 0.6rem; }
.csp-trace-panel-code .csp-trace-line { font-size: 0.8rem; line-height: 1.55; }
.csp-trace-panel-code .csp-trace-panel-title { padding: 0.55rem 0.9rem 0.25rem; font-size: 0.82rem; }
.csp-trace-tag-step { margin-left: auto; background: var(--csp-accent-soft); color: var(--csp-accent); }
.csp-trace-side .csp-trace-state { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 0.5rem 0.9rem 0.75rem; gap: 0.8rem; }
.csp-trace-side .csp-trace-map .csp-map-svg { max-width: 340px; }
.csp-trace-side .csp-trace-frame { font-size: 0.72rem; line-height: 1.45; }
.csp-trace-side .csp-trace-var { font-size: 0.72rem; }
.csp-trace-side .csp-trace-region-label { font-size: 0.66rem; }
.csp-trace-side .csp-trace-explain { padding: 0.7rem 0.9rem; }
.csp-trace-side .csp-trace-explain-title { font-size: 0.82rem; }
.csp-trace-side .csp-trace-explain-body { font-size: 0.88rem; min-height: 3.6em; }
.csp-trace-side .csp-trace-note .csp-trace-note-title { font-size: 0.95rem; }
@container (max-width: 520px) { .csp-trace-side .csp-trace-state { grid-template-columns: minmax(0, 1fr); } }

/* Code Trace topic — extra state widgets */
.csp-trace-table { font-size: 0.72rem; }
.csp-trace-table th, .csp-trace-table td { padding: 0.28rem 0.4rem; }
.csp-trace-table thead th { font-size: 0.62rem; }
.csp-trace-table td.hl, .csp-trace-table th.hl { background: rgba(245, 158, 11, 0.14); }
.csp-trace-table .csp-dot { width: 9px; height: 9px; }
.csp-lcv-hit { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.64rem; padding: 0 5px; border-radius: 4px; background: #f1f5f9; color: var(--text-muted); margin: 1px 0; }
.csp-lcv-hit.on { background: rgba(220, 38, 38, 0.1); color: var(--csp-bad); font-weight: 700; }
.csp-trace-order { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.csp-trace-side .csp-trace-state-wide { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); }
.csp-fc-table td:first-child { white-space: nowrap; font-weight: 600; color: var(--text-primary); }
.csp-fc-table td { text-align: center; white-space: nowrap; padding: 0.28rem 0.25rem; }
.csp-fc-table .csp-dot { width: 7px; height: 7px; margin: 0; }

/* Timetabling example (Backtracking Search + Code Trace) */
.csp-tt-grid { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 0.72rem; }
.csp-tt-grid thead th { font-size: 0.64rem; font-weight: 700; color: var(--text-muted); text-align: center; line-height: 1.2; padding: 0.15rem; }
.csp-tt-grid td { height: 2.4rem; min-width: 3.6rem; border: 1.5px dashed var(--border-light); border-radius: 7px; text-align: center; vertical-align: middle; padding: 2px; background: #fbfdfe; }
.csp-tt-grid td.col { background: rgba(245, 158, 11, 0.06); }
.csp-tt-grid td.clash { border: 2px solid var(--csp-bad); background: rgba(220, 38, 38, 0.06); }
.csp-tt-room { text-align: left; font-weight: 700; font-size: 0.72rem; color: var(--text-primary); padding-right: 0.3rem; white-space: nowrap; }
.csp-tt-room span { display: block; font-weight: 500; font-size: 0.6rem; color: var(--text-muted); }
.csp-tt-chip { display: inline-block; padding: 2px 6px; margin: 1px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; color: #fff; background: var(--c); }
.csp-tt-chip.hl { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.csp-tt-chip.try { background: transparent; color: var(--c); border: 1.5px dashed var(--c); }
.csp-tt-chip.try.bad { color: var(--csp-bad); border-color: var(--csp-bad); text-decoration: line-through; }
.csp-bt-tt { display: flex; flex-direction: column; gap: 0.6rem; }
.csp-bt-tt-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.csp-bt-tt-row .csp-log { max-height: 230px; overflow-y: auto; }
.csp-tt-courses td, .csp-tt-courses th { white-space: nowrap; }
.csp-trace-side .csp-trace-state-tt { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
@container (max-width: 560px) { .csp-trace-side .csp-trace-state-tt { grid-template-columns: minmax(0, 1fr); } }

/* Timetable (easy) — constraint graph + slot board */
.csp-tte { display: flex; flex-direction: column; gap: 0.45rem; }
.csp-tte .csp-graph-svg { max-width: 420px; width: 100%; margin: 0 auto; overflow: visible; }
.csp-tte-legend { display: flex; flex-wrap: wrap; gap: 0.3rem; justify-content: center; }
.csp-tte-legend span { font-size: 0.64rem; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: var(--text-muted); }
.csp-tte-legend span.on { background: rgba(220, 38, 38, 0.1); color: var(--csp-bad); font-weight: 700; }
.csp-tte-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.csp-tte-slot { border: 1.5px dashed var(--border-light); border-radius: 8px; padding: 0.35rem; min-height: 3.6rem; display: flex; flex-wrap: wrap; gap: 0.25rem; align-content: flex-start; }
.csp-tte-slot.try { border-color: var(--csp-accent); background: var(--csp-accent-soft); }
.csp-tte-slot.bad { border: 2px solid var(--csp-bad); background: rgba(220, 38, 38, 0.05); }
.csp-tte-slot-h { width: 100%; display: flex; align-items: center; gap: 0.3rem; font-size: 0.66rem; font-weight: 700; color: var(--text-secondary); }
.csp-tte-chip { font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: #0f172a; color: #fff; }
.csp-tte-chip.try { background: transparent; color: var(--csp-accent); border: 1.5px dashed var(--csp-accent); }
.csp-tte-chip.try.bad { color: var(--csp-bad); border-color: var(--csp-bad); text-decoration: line-through; }

/* ============================================================
   TOPIC 05: Knowledge & Reasoning (knowledge.html, #view-knowledge, topic05_reading.html)
   ============================================================ */

.knowledge-page,
#view-knowledge,
.knowledge-reading {
  --kl-accent: #8b5cf6;
  --kl-accent-soft: rgba(139, 92, 246, 0.12);
  --kl-accent-border: rgba(139, 92, 246, 0.3);
  --kl-indigo: #6366f1;
  --kl-cyan: #38bdf8;
  --kl-ok: #10b981;
  --kl-bad: #f43f5e;
}

.knowledge-badge-accent {
  background: var(--kl-accent-soft) !important;
  border-color: var(--kl-accent-border) !important;
  color: var(--kl-accent) !important;
}

.knowledge-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.knowledge-page .sl-concept-col { padding: 1.4rem 1.9rem; }
.knowledge-page .sl-graph-col { padding: 1.2rem 1.4rem; }

/* Subview switching in playground */
#view-knowledge .kl-subview {
  display: none;
}

#view-knowledge .kl-subview.active {
  display: block;
}

/* Wumpus cells & hover */
.wumpus-cell:hover,
.wumpus-lab-cell:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.dag-node:hover circle,
.kl-bn-node:hover circle {
  filter: brightness(0.95);
}

/* ---- Wumpus Logic Explorer (#kl-wumpus-pane) ---- */
#view-knowledge {
  --wq-ok: #059669;
  --wq-bad: #dc2626;
  --wq-warn: #d97706;
  --wq-tell: #6d28d9;
}
.wq-grid { grid-template-columns: minmax(0, 1fr) 400px; }
.wq-stage {
  display: flex; flex-direction: column; gap: 0.75rem; padding: 1.25rem; min-width: 0;
  background: #ffffff; border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
}
.wq-stage-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.wq-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.wq-ok { color: var(--wq-ok); font-weight: 700; }
.wq-bad { color: var(--wq-bad); font-weight: 700; }
.wq-warn { color: var(--wq-warn); font-weight: 700; }
.wq-muted { font-size: 0.74rem; color: var(--text-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }
.wq-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; }

.wq-pill {
  display: inline-flex; align-items: center; padding: 0.18rem 0.55rem; border-radius: 100px; white-space: nowrap;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent;
}
.wq-pill.ok { background: rgba(5, 150, 105, 0.1); color: var(--wq-ok); border-color: rgba(5, 150, 105, 0.25); }
.wq-pill.bad { background: rgba(220, 38, 38, 0.08); color: var(--wq-bad); border-color: rgba(220, 38, 38, 0.25); }
.wq-pill.warn { background: rgba(217, 119, 6, 0.1); color: var(--wq-warn); border-color: rgba(217, 119, 6, 0.25); }
.wq-pill.info { background: var(--kl-accent-soft); color: var(--kl-accent); border-color: var(--kl-accent-border); }
.wq-pill.neutral { background: rgba(15, 23, 42, 0.05); color: var(--text-secondary); border-color: var(--border-light); }

/* Board */
.wq-board-wrap { display: flex; justify-content: center; }
.wq-board {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 440px; aspect-ratio: 1;
  padding: 8px; border-radius: 12px; background: rgba(15, 23, 42, 0.04);
}
.wq-board.editing { outline: 2px dashed var(--kl-accent-border); outline-offset: 3px; }
.wq-cell {
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 0;
  border-radius: 9px; border: 2px solid rgba(15, 23, 42, 0.1); background: #ffffff; cursor: pointer;
  font-family: 'Outfit', sans-serif; color: var(--text-primary); padding: 0;
  transition: var(--transition-fast);
}
.wq-cell:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.wq-cell.st-visited { background: #eef2f7; }
.wq-cell.st-safe { background: rgba(5, 150, 105, 0.08); border-color: rgba(5, 150, 105, 0.55); }
.wq-cell.st-danger { background: rgba(220, 38, 38, 0.07); border-color: rgba(220, 38, 38, 0.6); }
.wq-cell.st-maybe { background: rgba(217, 119, 6, 0.06); border-color: rgba(217, 119, 6, 0.45); }
.wq-cell.reach { border-style: dashed; }
.wq-cell.reach.st-unknown { border-color: var(--kl-accent); }
.wq-cell.here { background: rgba(99, 102, 241, 0.16); border-color: var(--kl-indigo); border-style: solid; }
.wq-cell.here.dead { background: rgba(220, 38, 38, 0.15); border-color: var(--wq-bad); }
.wq-cell.sel { box-shadow: 0 0 0 3px var(--kl-accent-border); }
.wq-xy { position: absolute; top: 4px; left: 6px; font-size: 0.62rem; color: var(--text-muted); font-weight: 600; }
.wq-truth { position: absolute; top: 3px; right: 5px; font-size: 0.85rem; opacity: 0.75; display: flex; gap: 1px; }
.wq-mark { font-size: 0.95rem; font-weight: 800; letter-spacing: 0.02em; }
.st-visited .wq-mark { color: #94a3b8; }
.st-safe .wq-mark { color: var(--wq-ok); }
.st-danger .wq-mark { color: var(--wq-bad); }
.st-maybe .wq-mark { color: var(--wq-warn); }
.st-unknown .wq-mark { color: #cbd5e1; }
.wq-agent { font-size: 1.7rem; line-height: 1; display: inline-flex; align-items: flex-end; }
.wq-agent small { font-size: 0.9rem; margin-left: -4px; }
.wq-foot { position: absolute; bottom: 4px; left: 5px; right: 5px; display: flex; justify-content: space-between; align-items: center; gap: 2px; }
.wq-chips { display: inline-flex; gap: 2px; align-items: center; }
.wq-chips i {
  font-style: normal; font-size: 0.6rem; font-weight: 800; width: 15px; height: 15px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center; color: #ffffff;
}
.wq-chips i.b { background: #0284c7; }
.wq-chips i.s { background: #7c3aed; }
.wq-chips i.g { background: #ca8a04; }
.wq-prob { margin-left: auto; font-size: 0.6rem; font-weight: 700; color: var(--wq-warn); white-space: nowrap; }

.wq-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.9rem; font-size: 0.72rem; color: var(--text-muted); }
.wq-legend > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.wq-legend .wq-chips i { margin-left: 0.3rem; }
.wq-lg { width: 12px; height: 12px; border-radius: 3px; display: inline-block; border: 1.5px solid rgba(15, 23, 42, 0.15); }
.wq-lg.visited { background: #eef2f7; }
.wq-lg.safe { background: rgba(5, 150, 105, 0.12); border-color: var(--wq-ok); }
.wq-lg.danger { background: rgba(220, 38, 38, 0.1); border-color: var(--wq-bad); }
.wq-lg.maybe { background: rgba(217, 119, 6, 0.1); border-color: var(--wq-warn); }
.wq-lg.unknown { background: #ffffff; }
.wq-lg.reach { border-style: dashed; border-color: var(--kl-accent); }

.wq-msg {
  font-size: 0.84rem; line-height: 1.5; color: var(--text-primary); padding: 0.6rem 0.8rem; border-radius: 8px;
  background: var(--kl-accent-soft); border: 1px solid var(--kl-accent-border);
}

/* Inspector + trace */
.wq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.wq-insp, .wq-logbox {
  border: 1px solid var(--border-light); border-radius: 8px; padding: 0.65rem 0.75rem; background: rgba(15, 23, 42, 0.02);
  display: flex; flex-direction: column; gap: 0.5rem; min-width: 0;
}
.wq-insp-head { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.wq-insp-title { font-size: 0.78rem; font-weight: 700; color: var(--text-primary); }
.wq-insp-row { display: flex; flex-direction: column; gap: 0.2rem; }
.wq-insp-q { font-size: 0.78rem; color: var(--text-secondary); }
.wq-insp-why { font-size: 0.76rem; line-height: 1.45; color: var(--text-primary); padding-left: 0.6rem; border-left: 2px solid var(--kl-accent-border); }
.wq-insp-probs { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.74rem; color: var(--text-secondary); }
.wq-insp-probs > span { display: grid; grid-template-columns: 76px 1fr 36px; align-items: center; gap: 0.4rem; }
.wq-insp-probs b { text-align: right; color: var(--text-primary); }
.wq-bar { height: 6px; border-radius: 3px; background: rgba(15, 23, 42, 0.07); overflow: hidden; }
.wq-bar > span { display: block; height: 100%; border-radius: 3px; }
.wq-bar .p { background: var(--wq-warn); }
.wq-bar .w { background: #7c3aed; }
.wq-log { max-height: 230px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; font-size: 0.72rem; line-height: 1.4; }
.wq-log-row { display: flex; gap: 0.4rem; padding: 0.12rem 0.3rem; border-radius: 4px; color: var(--text-secondary); }
.wq-log-t { flex: 0 0 auto; min-width: 1.4rem; font-family: 'JetBrains Mono', monospace; font-size: 0.66rem; color: #94a3b8; }
.wq-log-row.t-tell { color: var(--wq-tell); font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; }
.wq-log-row.t-tell em { font-family: 'Outfit', sans-serif; color: var(--text-muted); }
.wq-log-row.t-percept { color: var(--text-muted); }
.wq-log-row.t-ask { color: #047857; background: rgba(5, 150, 105, 0.05); }
.wq-log-row.t-act { color: var(--text-primary); font-weight: 600; }
.wq-log-row.t-death { color: var(--wq-bad); font-weight: 700; background: rgba(220, 38, 38, 0.06); }
.wq-log-row.t-win { color: var(--wq-ok); font-weight: 700; background: rgba(5, 150, 105, 0.07); }

/* Controls */
.wq-controls { padding: 1.5rem; gap: 1.1rem; justify-content: flex-start; }
.wq-controls .controls-group { gap: 0.55rem; }
.wq-controls .control-label { font-size: 0.75rem; align-items: center; }
.wq-controls .playground-stats { font-size: 0.82rem; gap: 0.5rem; }
.wq-controls .pg-stat-row { gap: 0.6rem; }
.wq-controls .pg-stat-row > span:first-child { color: var(--text-secondary); }
.wq-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.wq-row .wq-select { flex: 1; }
.wq-select {
  width: 100%; padding: 0.5rem 0.65rem; border-radius: 8px; border: 1px solid var(--border-light); background: #ffffff;
  font-family: 'Outfit', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); cursor: pointer;
}
.wq-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.42rem 0.7rem; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--border-light); background: #ffffff; color: var(--text-primary); cursor: pointer;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.78rem; transition: var(--transition-fast);
}
.wq-btn i { width: 14px; height: 14px; }
.wq-btn:hover:not(:disabled) { border-color: var(--kl-accent-border); color: var(--kl-accent); }
.wq-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.wq-btn-primary { background: var(--kl-accent); border-color: var(--kl-accent); color: #ffffff; }
.wq-btn-primary:hover:not(:disabled) { background: #7c3aed; color: #ffffff; }
.wq-shoot { padding: 0.42rem 0.55rem; min-width: 30px; justify-content: center; }
.wq-actions .wq-muted { margin-left: 0.3rem; }
.wq-seg { display: flex; gap: 0.2rem; padding: 0.2rem; background: rgba(15, 23, 42, 0.05); border-radius: 8px; }
.wq-seg button {
  flex: 1; border: 0; background: transparent; padding: 0.35rem 0.4rem; border-radius: 6px; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.75rem; color: var(--text-secondary);
}
.wq-seg button.active { background: #ffffff; color: var(--kl-accent); box-shadow: var(--shadow-sm); }
.wq-check { display: flex; align-items: flex-start; gap: 0.45rem; font-size: 0.8rem; color: var(--text-primary); cursor: pointer; line-height: 1.35; }
.wq-check input { accent-color: var(--kl-accent); margin-top: 2px; }
.wq-axioms summary { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--kl-accent); }
.wq-ax-list { margin-top: 0.5rem; max-height: 220px; overflow-y: auto; padding: 0.5rem; border-radius: 8px; background: rgba(15, 23, 42, 0.03); border: 1px solid var(--border-light); }
.wq-ax-group + .wq-ax-group { margin-top: 0.5rem; }
.wq-ax-name { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 0.15rem; }
.wq-ax-name span { font-weight: 500; color: var(--text-muted); }
.wq-ax { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--wq-tell); line-height: 1.5; }
.wq-ax.wq-muted { font-family: 'Outfit', sans-serif; }

@media (max-width: 1100px) {
  .wq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wq-two { grid-template-columns: 1fr; }
  .wq-stage { padding: 0.85rem; }
  .wq-board { gap: 5px; padding: 5px; }
  .wq-agent { font-size: 1.3rem; }
  .wq-prob { display: none; }
}

/* ==========================================================================
   Topic 06: Learning & Decision Making Styles
   ========================================================================== */
.learning-page,
.learning-shell,
#view-kmeans,
.learning-reading {
  --lr-accent: #10b981;
  --lr-accent-soft: rgba(16, 185, 129, 0.12);
  --lr-accent-border: rgba(16, 185, 129, 0.3);
  --lr-amber: #f59e0b;
  --lr-blue: #3b82f6;
  --lr-rose: #f43f5e;
  --lr-purple: #8b5cf6;
}

.learning-badge-accent {
  background: var(--lr-accent-soft) !important;
  border-color: var(--lr-accent-border) !important;
  color: var(--lr-accent) !important;
}

.learning-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.learning-demo-btn {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #34d399 !important;
}

.learning-demo-btn:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  color: #6ee7b7 !important;
}

.learning-page .sl-concept-col { padding: 1.4rem 1.9rem; }
.learning-page .sl-graph-col { padding: 1.2rem 1.4rem; }



/* Attacking-pairs explanation (min-conflicts stepper + playground lab) */
.csp-pairs-info { display: block; font-style: normal; font-size: 0.72rem; line-height: 1.4; color: var(--text-muted); }
.csp-pairs-info strong { color: var(--text-primary); }
.csp-pairs-info-row { padding: 0.15rem 0 0.4rem; }

/* --- 8-Puzzle reachability walkthrough (steps 4–9) --- */
.puz-question {
  border-left: 3px solid var(--primary);
  background: rgba(79, 70, 229, 0.05);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.puz-question-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.2rem;
}
.puz-rule-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.puz-rule-list li { margin-bottom: 0.2rem; }
.puz-arrow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  max-width: 250px;
  margin: 0 auto;
  width: 100%;
}
.puz-arrow-mid {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--primary);
}
.puz-answer {
  border: 1px solid rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.06);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}
.puz-answer p { font-size: 0.84rem; line-height: 1.5; margin: 0 0 0.35rem; color: var(--text-primary); }
.puz-answer p:last-child { margin-bottom: 0; }

/* 8-puzzle: build-a-state tray */
.puz-rep-tray { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.puz-rep-tray .btn-ctrl { padding: 0.45rem 0; font-weight: 700; font-size: 0.95rem; justify-content: center; min-width: 0; }
.puz-rep-actions { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
@media (max-width: 480px) { .puz-rep-tray { grid-template-columns: repeat(5, 1fr); } }

/* 8-puzzle: search-tree algorithm tabs */
.puz-alg-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.puz-alg-tabs .btn-ctrl { padding: 0.45rem 0.2rem; font-weight: 700; font-size: 0.82rem; justify-content: center; min-width: 0; }
.puz-alg-tabs .btn-ctrl.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 8-puzzle: compact search-tree panel */
#puzzle-controls-panel { padding: 1.4rem 1.5rem; gap: 1rem; }
.puzzle-teaching-panel.puz-st-panel.active { gap: 0.55rem; }
.puz-st-panel h3 { font-size: 1.1rem; }
.puz-st-intro { font-size: 0.82rem !important; line-height: 1.4 !important; margin: 0; }
.puz-st-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.puz-st-row .select-input { flex: 1 1 auto; min-width: 0; padding: 0.3rem 0.4rem; font-size: 0.8rem; }
.puz-st-row input[type="range"] { flex: 0 1 90px; min-width: 60px; }
.puz-st-msg { font-size: 0.78rem !important; text-align: left; font-family: sans-serif !important; font-weight: normal !important; line-height: 1.4; min-height: 74px; padding: 0.5rem 0.7rem !important; margin: 0; }
.puz-st-controls { display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr; gap: 4px; }
.puz-st-controls .btn-ctrl { padding: 0.45rem 0.4rem; font-size: 0.8rem; justify-content: center; min-width: 0; }
.puz-st-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.puz-st-stats > div { display: flex; flex-direction: column; align-items: center; padding: 0.3rem 0.2rem; border: 1px solid var(--border-light); border-radius: 6px; background: #fff; }
.puz-st-stats span { font-size: 0.66rem; font-weight: 600; color: var(--text-muted); }
.puz-st-stats b { font-size: 0.95rem; color: var(--text-primary); }
.puz-st-solution { padding: 0.55rem 0.7rem !important; gap: 0.35rem !important; }
.puz-st-metrics { font-size: 0.74rem; color: var(--text-secondary); }
.puz-st-metrics b { color: var(--text-primary); }
.puz-st-controls .btn-ctrl-primary { grid-column: auto; font-size: 0.8rem; }
.puzzle-flow-progress-bar { margin-bottom: 1rem; padding: 0.55rem 1.25rem; }

/* 8-puzzle: compact reachability-test panel */
.puzzle-teaching-panel.puz-rt-panel.active { gap: 0.6rem; }
.puz-rt-panel h3 { font-size: 1.1rem; }
.puz-rt-panel p { font-size: 0.82rem !important; line-height: 1.45 !important; margin: 0; }
.puz-rt-btns { grid-template-columns: 1fr 1fr; gap: 5px; }
.puz-rt-btns .btn-ctrl { padding: 0.45rem 0.5rem; font-size: 0.8rem; grid-column: auto; }
.puz-rt-panel .search-status-banner { padding: 0.45rem 0.6rem !important; font-size: 0.8rem; }
.puz-rt-panel .teaching-tip { padding: 0.45rem 0.7rem; font-size: 0.78rem; }

/* Graph Search Algorithms: compact control panel */
#search-controls-panel { padding: 1.25rem 1.4rem; gap: 0.8rem; }
#search-controls-panel .teaching-panel { gap: 0.5rem !important; }
#search-controls-panel h3 { font-size: 1.1rem; margin: 0; }
#search-controls-panel .search-controls-container { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.8rem; padding: 0.45rem 0.7rem; }
#search-controls-panel .search-controls-container .control-row { padding: 0; margin: 0; font-size: 0.8rem; }
#search-controls-panel #sma-maxnodes-row { grid-column: 1 / -1; }
#search-controls-panel #search-explanation-text { min-height: 44px !important; padding: 0.45rem 0.7rem; font-size: 0.78rem !important; margin: 0; }
#search-controls-panel .btn-group { grid-template-columns: repeat(5, 1fr) !important; gap: 4px !important; }
#search-controls-panel .btn-group .btn-ctrl { grid-column: auto !important; padding: 0.45rem 0.3rem; font-size: 0.8rem; min-width: 0; }
#search-controls-panel .controls-group { gap: 2px !important; }
#search-controls-panel .controls-group .control-label { font-size: 0.72rem; }
#search-controls-panel .live-search-stats { margin-top: 0 !important; gap: 4px; }
#search-controls-panel .mini-stat-card { padding: 0.3rem 0.55rem; }
#search-controls-panel .search-solution-card { padding: 0.55rem 0.7rem; gap: 0.35rem; }
#search-controls-panel .comparison-table-wrapper { max-height: 104px !important; }

/* CSP lab: Backtracking / Local search method switch */
.csp-method-seg { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.csp-method-seg button { white-space: nowrap; font-size: 0.8rem; padding: 0.45rem 0.4rem; }

/* Maze Search: CSP-style layout */
#view-maze-search .ms-canvas-box { aspect-ratio: auto; height: 440px; min-height: 0; box-shadow: none; border-radius: 10px; }
#view-maze-search .ms-legend { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.75rem; color: var(--text-muted); }
#view-maze-search .csp-lab-msg { min-height: 2.6rem; }
#view-maze-search .ms-log-entry { color: var(--text-primary); }
#view-maze-search .ms-log-step { color: var(--text-muted); }
#view-maze-search .ms-log-entry.select { color: #7c3aed; }
#view-maze-search .ms-log-entry.expand { color: #1d4ed8; }
#view-maze-search .ms-log-entry.goal_found { color: #047857; }
#view-maze-search .ms-frontier-block { display: flex; flex-direction: column; gap: 0.35rem; }
#view-maze-search .ms-frontier-block .control-label { font-size: 0.75rem; }
#view-maze-search .ms-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); cursor: pointer; }
#view-maze-search .ms-summary-table { max-height: 170px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: 6px; }
#view-maze-search .ms-summary-table .comparison-table { font-size: 0.66rem; box-shadow: none; }

/* ---- Topic 05 · Bayesian Networks · Lab Code Trace (demos/knowledge_demo/bayes_trace.js)
   Layout follows the CPP201 "Trace the Code" demo (same as the Topic 04 code
   traces): Python source fills the concept column; the illustration column
   holds the part selector, stepper, runtime state and "What's happening?". ---- */
.knowledge-page { --klt-ok: #059669; --klt-bad: #e11d48; --klt-warn: #d97706; }
.kl-concept-code { flex: 1 1 auto; min-height: 260px; display: flex; flex-direction: column; }
.klt-panel { border: 1.5px solid var(--border-light); border-radius: 10px; overflow: hidden; background: #ffffff; }
.klt-panel-code { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.klt-panel-title { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.5rem 0.85rem 0.2rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.8rem; color: var(--text-primary); }
.klt-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.klt-tag { flex-shrink: 0; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: var(--text-muted); }
.klt-tag.ok { background: rgba(5, 150, 105, 0.12); color: var(--klt-ok); }
.klt-tag.bad { background: rgba(225, 29, 72, 0.1); color: var(--klt-bad); }
.klt-tag.warn { background: rgba(217, 119, 6, 0.12); color: var(--klt-warn); }
.klt-tag.info { background: var(--kl-accent-soft); color: #6d28d9; }
.klt-tag-step { margin-left: auto; background: var(--kl-accent-soft); color: #6d28d9; }
.klt-code { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0.3rem 0 0.6rem; overflow: auto; background: #ffffff; position: relative; }
.klt-line { display: flex; align-items: baseline; gap: 0.45rem; padding: 0 0.85rem; font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; line-height: 1.55; color: #0f172a; min-width: max-content; }
.klt-line.is-active { background: #fef3c7; }
.klt-arrow { width: 1em; color: var(--klt-warn); font-weight: 700; }
.klt-no { min-width: 1.5em; text-align: right; color: #94a3b8; }
.klt-src { white-space: pre; }
.klt-src .kw { color: #7c3aed; font-weight: 700; }
.klt-src .fn { color: #4f46e5; font-weight: 600; }
.klt-src .st { color: #047857; }
.klt-src .nu { color: #b45309; }
.klt-src .cm { color: #94a3b8; font-style: italic; }

.klt { display: flex; flex-direction: column; gap: 0.6rem; container-type: inline-size; }
.klt code { font-family: 'JetBrains Mono', monospace; font-size: 0.9em; background: rgba(15, 23, 42, 0.05); padding: 0 0.25em; border-radius: 4px; }
.klt-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.klt-head-title { display: flex; align-items: center; gap: 0.4rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--text-primary); }
.klt-head-title svg { width: 17px; height: 17px; color: var(--kl-accent); }
.klt-head-tools { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.klt-select { padding: 0.35rem 0.5rem; border-radius: 7px; border: 1px solid var(--border-light); background: #ffffff; color: var(--text-primary); font-size: 0.78rem; font-family: inherit; max-width: 100%; }
.klt-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.klt-count { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
.klt-controls { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.klt-btn { padding: 0.35rem 0.7rem; border-radius: 7px; border: 1px solid var(--border-light); background: #ffffff; color: var(--text-primary); font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.klt-btn:hover:not(:disabled) { border-color: var(--kl-accent-border); background: var(--kl-accent-soft); }
.klt-btn:disabled { opacity: 0.45; cursor: default; }
.klt-btn-primary { background: var(--kl-accent); border-color: var(--kl-accent); color: #ffffff; }
.klt-btn-primary:hover:not(:disabled) { background: #7c3aed; color: #ffffff; }
.klt-note { border-left: 3px solid var(--kl-accent); background: var(--kl-accent-soft); border-radius: 8px; padding: 0.5rem 0.8rem; }
.klt-note-title { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.92rem; color: var(--text-primary); }
.klt-explain { border-top: 1.5px solid var(--border-light); padding: 0.65rem 0.9rem; background: #f5f3ff; }
.klt-explain-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.8rem; color: var(--text-primary); margin-bottom: 0.1rem; }
.klt-explain-body { font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); min-height: 3.4em; }

.klt-state { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; padding: 0.5rem 0.9rem 0.75rem; align-items: start; }
.klt-state-stack { grid-template-columns: minmax(0, 1fr); }
.klt-state-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; align-items: start; }
@container (max-width: 520px) { .klt-state, .klt-state-2 { grid-template-columns: minmax(0, 1fr); } }
.klt-regions { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.klt-region { border: 1.5px dashed var(--border-light); border-radius: 8px; padding: 0.4rem 0.55rem; min-width: 0; overflow-x: auto; }
.klt-region-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.25rem; }
.klt-frame { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; line-height: 1.45; padding: 1px 5px; border-radius: 5px; color: var(--text-muted); overflow-wrap: anywhere; }
.klt-frame.is-top { background: var(--kl-accent-soft); color: var(--text-primary); font-weight: 600; }
.klt-empty { margin: 0; font-size: 0.72rem; color: var(--text-muted); }
.klt-muted { color: var(--text-muted); font-size: 0.9em; }
.klt-var { display: flex; justify-content: space-between; gap: 0.5rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--text-muted); padding: 1px 0; }
.klt-var b { color: var(--text-primary); text-align: right; overflow-wrap: anywhere; }
.klt-var b.ok { color: var(--klt-ok); }
.klt-var b.bad { color: var(--klt-bad); }

/* DAG */
.klt-dag { width: 100%; max-width: 360px; display: block; margin: 0 auto; }
.klt-edge { stroke: #94a3b8; stroke-width: 1.6; }
.klt-edge.ghost { stroke-dasharray: 4 4; opacity: 0.35; }
.klt-node rect { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1.6; }
.klt-node text { font: 600 12px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; }
.klt-node.ghost { opacity: 0.3; }
.klt-node.ghost rect { stroke-dasharray: 4 3; }
.klt-node.evidence rect { fill: #ecfdf5; stroke: #10b981; }
.klt-node.query rect { fill: #f5f3ff; stroke: #8b5cf6; }
.klt-node.current rect { stroke: #f59e0b; stroke-width: 3; fill: #fffbeb; }
.klt-badge circle { stroke: #ffffff; stroke-width: 1.5; }
.klt-badge text { font: 800 10px 'JetBrains Mono', monospace; fill: #ffffff; text-anchor: middle; }
.klt-badge.t circle { fill: #10b981; }
.klt-badge.f circle { fill: #f43f5e; }
.klt-badge.q circle { fill: #8b5cf6; }
.klt-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.8rem; margin-top: 0.3rem; font-size: 0.66rem; color: var(--text-muted); }
.klt-legend span { display: inline-flex; align-items: center; gap: 0.25rem; }
.klt-legend .lg { width: 11px; height: 11px; border-radius: 3px; border: 1.5px solid; display: inline-block; }
.klt-legend .lg.evi { background: #ecfdf5; border-color: #10b981; }
.klt-legend .lg.qry { background: #f5f3ff; border-color: #8b5cf6; }
.klt-legend .lg.cur { background: #fffbeb; border-color: #f59e0b; }

/* Tables */
.klt-cpt { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
.klt-cpt th, .klt-cpt td { padding: 0.22rem 0.4rem; text-align: center; border-bottom: 1px solid #f1f5f9; white-space: nowrap; }
.klt-cpt thead th { font-size: 0.64rem; color: var(--text-muted); font-weight: 700; }
.klt-cpt tr.hl td { background: rgba(245, 158, 11, 0.14); }
.klt-joint td:nth-child(2) { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; }
.klt-cmp td { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; line-height: 1.25; }
.klt-samples { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; }
.klt-samples th, .klt-samples td { padding: 0.15rem 0.3rem; text-align: center; }
.klt-samples thead th { font-size: 0.62rem; color: var(--text-muted); }
.klt-samples th.evi { color: #059669; }
.klt-samples th.qry { color: #7c3aed; }
.klt-samples td.t { color: #059669; font-weight: 700; }
.klt-samples td.f { color: #e11d48; }
.klt-samples tr.bad td { opacity: 0.45; text-decoration: line-through; }
.klt-samples tr.bad td:last-child { text-decoration: none; opacity: 1; color: #e11d48; }
.klt-samples tr.ok td:last-child { color: #059669; font-weight: 700; }

/* Bars */
.klt-bar-row { display: grid; grid-template-columns: minmax(70px, auto) minmax(60px, 1fr) 4.2em; align-items: center; gap: 0.45rem; font-size: 0.7rem; padding: 2px 0; }
.klt-bar-row.pending { opacity: 0.4; }
.klt-bar-label { font-family: 'JetBrains Mono', monospace; color: var(--text-secondary); white-space: nowrap; }
.klt-bar-track { position: relative; height: 10px; border-radius: 999px; background: #f1f5f9; overflow: visible; }
.klt-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--kl-accent); transition: width 0.3s; }
.klt-bar-fill.up { background: #10b981; }
.klt-bar-fill.down { background: #f43f5e; }
.klt-bar-fill.base { background: #94a3b8; }
.klt-bar-fill.rej { background: #f59e0b; }
.klt-bar-fill.lw { background: #8b5cf6; }
.klt-bar-fill.big { background: #0284c7; }
.klt-bar-exact { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: #0f172a; border-radius: 1px; }
.klt-bar-val { font-family: 'JetBrains Mono', monospace; text-align: right; color: var(--text-primary); }
.klt-bar-note { display: flex; align-items: center; gap: 0.35rem; margin-top: 0.25rem; font-size: 0.64rem; color: var(--text-muted); }
.klt-bar-exact-key { display: inline-block; width: 2px; height: 11px; background: #0f172a; }

/* Enumeration tree (AIMA Fig. 14.8) */
.klt-tree-wrap { overflow-x: auto; }
.klt-tree { width: 100%; display: block; margin: 0 auto; }
.klt-tree-lvl { font: 700 10px 'Outfit', sans-serif; fill: #94a3b8; }
.klt-tree-edge { stroke: #cbd5e1; stroke-width: 1.4; }
.klt-tree-edge.on { stroke: #f59e0b; stroke-width: 2.2; }
.klt-tree-node rect { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1.4; }
.klt-tree-node.evi rect { stroke: #10b981; }
.klt-tree-node.query rect { stroke: #8b5cf6; }
.klt-tree-node.hid rect { stroke: #94a3b8; stroke-dasharray: 3 2; }
.klt-tree-node.done rect { fill: #f0fdf4; }
.klt-tree-node.path rect { stroke: #f59e0b; stroke-width: 2; stroke-dasharray: none; }
.klt-tree-node.cur rect { fill: #fef3c7; stroke: #d97706; stroke-width: 2.6; stroke-dasharray: none; }
.klt-tree-node .lit { font: 700 10px 'JetBrains Mono', monospace; fill: #0f172a; text-anchor: middle; }
.klt-tree-node .val { font: 600 9.5px 'JetBrains Mono', monospace; fill: #475569; text-anchor: middle; }

/* ---- Topic 05 · Uncertainty & Bayes · "Interactive Bayes Examples" concept
   (demos/knowledge_demo/bayes_update.js). Single-screen layout: example
   switcher, problem, sliders and Reset / Show-Solution fill the concept
   column (#kl-concept-lab); the illustration column shows the belief summary
   plus view tabs (Tree / Population / Prior vs Posterior / Solution), one
   view at a time. ---- */
.knowledge-page { --kbu-h: #8b5cf6; --kbu-h-soft: #ddd6fe; --kbu-n: #f43f5e; --kbu-n-soft: #e2e8f0; --kbu-neg: #94a3b8; }
.kbu { display: flex; flex-direction: column; gap: 0.6rem; container-type: inline-size; }
.kbu code { font-family: 'JetBrains Mono', monospace; font-size: 0.88em; background: rgba(15, 23, 42, 0.05); padding: 0 0.3em; border-radius: 4px; }

.kbu-ex-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
.kbu-ex-tab { display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.5rem 0.55rem; border-radius: 9px; border: 1px solid var(--border-light); background: rgba(15, 23, 42, 0.03); color: var(--text-secondary); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; text-align: center; line-height: 1.2; }
.kbu-ex-tab svg { width: 15px; height: 15px; flex-shrink: 0; }
.kbu-ex-tab:hover { border-color: var(--kl-accent-border); color: var(--text-primary); }
.kbu-ex-tab.active { background: var(--kl-accent-soft); border-color: var(--kl-accent); color: #6d28d9; }

.kbu-problem { background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 0.7rem 0.95rem; }
.kbu-problem-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.3rem 0.75rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.kbu-problem-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.kbu-question { font-size: 0.82rem; font-weight: 600; color: #6d28d9; }
.kbu-problem p { font-size: 0.84rem; line-height: 1.5; color: var(--text-secondary); margin: 0 0 0.45rem; }
.kbu-problem p b { color: var(--text-primary); }
.kbu-vars { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.kbu-vars span { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; background: rgba(15, 23, 42, 0.05); color: #334155; }
.kbu-vars b { color: #6d28d9; }

.kbu-sliders { display: flex; flex-direction: column; gap: 0.55rem; background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 0.7rem 0.95rem; }
.kbu-slider { display: flex; flex-direction: column; gap: 0.15rem; }
.kbu-sl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.kbu-sl-top b { color: #6d28d9; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; min-width: 4.2em; text-align: right; }
.kbu-slider input[type="range"] { width: 100%; accent-color: var(--kl-accent); cursor: pointer; }
.kbu-sl-hint { font-size: 0.7rem; color: var(--text-muted); }

.kbu-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.kbu-actions .klt-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.9rem; font-size: 0.82rem; }
.kbu-actions .klt-btn svg { width: 15px; height: 15px; }

.kbu-solution { padding: 0.65rem 0.95rem 0.1rem; }
.kbu-steps { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; }
.kbu-steps li { font-size: 0.82rem; color: var(--text-secondary); }
.kbu-steps li::marker { color: #6d28d9; font-weight: 700; }
.kbu-step-name { font-weight: 700; color: var(--text-primary); margin-bottom: 0.15rem; }
.kbu-math { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; line-height: 1.5; padding: 0.3rem 0.7rem; background: rgba(15, 23, 42, 0.04); border-left: 3px solid #0284c7; border-radius: 6px; color: #334155; overflow-x: auto; }
.kbu-answer { color: #059669; }
.kbu-sol-answer { margin-top: 0.5rem; font-size: 0.84rem; padding: 0.55rem 0.8rem; border-radius: 8px; background: #ecfdf5; color: #065f46; border: 1px solid rgba(16, 185, 129, 0.3); }
.kbu-c-h { color: #6d28d9; font-weight: 700; }
.kbu-c-n { color: #e11d48; font-weight: 700; }

/* Illustration column */
.kbu-belief { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.5rem; align-items: stretch; }
.kbu-belief-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0.45rem 0.5rem; border-radius: 10px; border: 1.5px solid var(--border-light); background: #ffffff; text-align: center; }
.kbu-belief-box span { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--text-muted); }
.kbu-belief-box b { font-family: 'Outfit', sans-serif; font-size: 1.55rem; line-height: 1.15; color: var(--text-primary); }
.kbu-belief-box small { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: var(--text-muted); overflow-wrap: anywhere; }
.kbu-belief-box.post { border-color: var(--kl-accent); background: var(--kl-accent-soft); }
.kbu-belief-box.post b { color: #6d28d9; }
.kbu-belief-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; font-size: 0.66rem; color: var(--text-muted); text-align: center; max-width: 7.5rem; }
.kbu-belief-arrow svg { width: 22px; height: 22px; color: var(--kl-accent); }
.kbu-belief-arrow small { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.72rem; }
.kbu-belief-arrow small.up { color: #059669; }
.kbu-belief-arrow small.down { color: #e11d48; }
.kbu-insight { margin: 0.45rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); padding: 0.5rem 0.75rem; border-radius: 8px; background: rgba(99, 102, 241, 0.08); }

.kbu-view-tabs { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.kbu-view-tab { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid var(--border-light); background: rgba(15, 23, 42, 0.03); color: var(--text-secondary); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.78rem; cursor: pointer; transition: all 0.2s; }
.kbu-view-tab svg { width: 14px; height: 14px; }
.kbu-view-tab:hover { border-color: var(--kl-accent-border); color: var(--text-primary); }
.kbu-view-tab.active { background: var(--kl-accent-soft); border-color: var(--kl-accent); color: #6d28d9; }
.kbu-view-tab.sol.active { background: #ecfdf5; border-color: #10b981; color: #047857; }
.kbu-panel { padding: 0.35rem 0 0.6rem; }
.kbu-panel .klt-panel-title svg { width: 15px; height: 15px; color: var(--kl-accent); }
.kbu-panel-foot { font-size: 0.76rem; line-height: 1.5; color: var(--text-secondary); padding: 0.45rem 0.85rem 0; }

.kbu-chart { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.6rem 0.85rem 0.2rem; }
.kbu-bar-row { display: grid; grid-template-columns: minmax(0, 11.5rem) minmax(0, 1fr) 4.4rem; gap: 0.6rem; align-items: center; }
.kbu-bar-label { font-size: 0.72rem; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.kbu-bar-track { height: 16px; border-radius: 999px; background: rgba(15, 23, 42, 0.07); overflow: hidden; }
.kbu-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width 0.25s ease; }
.kbu-bar-fill.prior { background: #64748b; }
.kbu-bar-fill.post { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.kbu-bar-fill.neg { background: #cbd5e1; }
.kbu-bar-val { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; text-align: right; color: var(--text-primary); }
.kbu-bar-row[data-row="post"] .kbu-bar-val { color: #6d28d9; }

.kbu-tree { padding: 0.25rem 0.5rem 0; }
.kbu-tree-svg { width: 100%; display: block; }
.kbu-t-edge { stroke: #cbd5e1; stroke-width: 2; }
.kbu-t-edge.h { stroke: #a78bfa; }
.kbu-t-edge.n { stroke: #fda4af; }
.kbu-t-edge.hl-h { stroke: var(--kbu-h); stroke-width: 3.5; }
.kbu-t-edge.hl-n { stroke: var(--kbu-n); stroke-width: 3.5; }
.kbu-t-elbl { font: 600 11px 'JetBrains Mono', monospace; fill: #475569; text-anchor: end; }
.kbu-t-elbl.ne { fill: #94a3b8; }
.kbu-t-node rect { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1.6; }
.kbu-t-node text { font: 700 12px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; }
.kbu-t-node.root rect { fill: #f1f5f9; }
.kbu-t-node.h rect { fill: #f5f3ff; stroke: var(--kbu-h); }
.kbu-t-node.n rect { fill: #fff1f2; stroke: var(--kbu-n); }
.kbu-t-node.hl-h rect { fill: var(--kbu-h); stroke: var(--kbu-h); }
.kbu-t-node.hl-n rect { fill: var(--kbu-n); stroke: var(--kbu-n); }
.kbu-t-node.hl-h text, .kbu-t-node.hl-n text { fill: #ffffff; }
.kbu-t-node.dim { opacity: 0.55; }
.kbu-t-joint { font: 600 11px 'JetBrains Mono', monospace; fill: #475569; }
.kbu-t-jval { font: 700 12px 'JetBrains Mono', monospace; fill: #0f172a; }
.kbu-t-joint.hl-h, .kbu-t-jval.hl-h { fill: #6d28d9; }
.kbu-t-joint.hl-n, .kbu-t-jval.hl-n { fill: #e11d48; }
.kbu-t-joint.dim, .kbu-t-jval.dim { fill: #94a3b8; }

.kbu-pop { padding: 0.4rem 0.85rem 0; }
.kbu-pop-svg { width: 100%; max-width: 560px; display: block; margin: 0 auto; }
.kbu-dot.tp { fill: var(--kbu-h); }
.kbu-dot.fn { fill: var(--kbu-h-soft); }
.kbu-dot.fp { fill: var(--kbu-n); }
.kbu-dot.tn { fill: var(--kbu-n-soft); }
.kbu-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 0.8rem; padding: 0.45rem 0.85rem 0; font-size: 0.72rem; color: var(--text-secondary); }
.kbu-legend span { display: flex; align-items: center; gap: 0.35rem; }
.kbu-legend b { margin-left: auto; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); }
.kbu-legend .lg { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.kbu-legend .lg.tp { background: var(--kbu-h); }
.kbu-legend .lg.fn { background: var(--kbu-h-soft); }
.kbu-legend .lg.fp { background: var(--kbu-n); }
.kbu-legend .lg.tn { background: var(--kbu-n-soft); }

@container (max-width: 460px) {
  .kbu-ex-tabs { grid-template-columns: minmax(0, 1fr); }
  .kbu-bar-row { grid-template-columns: minmax(0, 1fr) 4.2rem; }
  .kbu-bar-label { grid-column: 1 / -1; }
  .kbu-legend { grid-template-columns: minmax(0, 1fr); }
  .kbu-belief-box b { font-size: 1.25rem; }
}

/* ---- Topic 05 · Bayesian Networks · "Network Construction" and
   "Inference & Graph Exploration" concepts (demos/knowledge_demo/bn_lab.js).
   Reuses the .kbu-* example tabs / problem card / view tabs / belief summary
   of the Bayes examples lab; .kbn-* adds the DAG, CPT editor, evidence
   controls and enumeration tables. ---- */
.knowledge-page { --kbn-q: #8b5cf6; --kbn-ev: #10b981; --kbn-hid: #f59e0b; --kbn-sel: #0284c7; }
.kbn-ex-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* DAG */
.kbn-graph { position: relative; }
.kbn-dag { width: 100%; max-width: 440px; max-height: 208px; display: block; margin: 0 auto; }
.kbn-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: var(--text-muted); }
.kbn-edge { stroke: #94a3b8; stroke-width: 1.8; }
.kbn-edge.dim { stroke: #cbd5e1; stroke-dasharray: 4 3; }
.kbn-edge.hi { stroke: var(--kbn-q); stroke-width: 2.6; }
.kbn-edge.new { stroke: var(--kbn-hid); stroke-width: 2.8; }
.kbn-node { cursor: pointer; }
.kbn-node .kbn-box { fill: #ffffff; stroke: #cbd5e1; stroke-width: 1.6; transition: fill 0.2s, stroke 0.2s; }
.kbn-node:hover .kbn-box, .kbn-node:focus .kbn-box { stroke: var(--kbn-sel); }
.kbn-node:focus { outline: none; }
.kbn-name { font: 700 12px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; pointer-events: none; }
.kbn-sub { font: 600 9.5px 'JetBrains Mono', monospace; fill: #64748b; text-anchor: middle; pointer-events: none; }
.kbn-bar-bg { fill: rgba(15, 23, 42, 0.08); }
.kbn-bar { fill: #6366f1; }
.kbn-ring { fill: none; stroke: var(--kbn-sel); stroke-width: 2.4; stroke-dasharray: 5 3; }
.kbn-node.ghost { cursor: default; opacity: 0.22; }
.kbn-node.ghost .kbn-box { stroke-dasharray: 4 3; }
.kbn-node.new .kbn-box { fill: #fffbeb; stroke: var(--kbn-hid); stroke-width: 2.4; }
.kbn-node.added .kbn-box { fill: #f8fafc; stroke: #64748b; }
.kbn-node.query .kbn-box { fill: #f5f3ff; stroke: var(--kbn-q); stroke-width: 2.4; }
.kbn-node.query .kbn-name { fill: #6d28d9; }
.kbn-node.query .kbn-bar { fill: var(--kbn-q); }
.kbn-node.evidence .kbn-box { fill: #ecfdf5; stroke: var(--kbn-ev); stroke-width: 2.4; }
.kbn-node.evidence .kbn-sub { fill: #047857; }
.kbn-node.hidden .kbn-box { fill: #fffbeb; stroke: var(--kbn-hid); stroke-dasharray: 5 3; stroke-width: 1.8; }
.kbn-node.hidden .kbn-bar { fill: var(--kbn-hid); }
.kbn-node.irrelevant { opacity: 0.55; }
.kbn-node.irrelevant .kbn-box { fill: #f1f5f9; stroke: #94a3b8; stroke-dasharray: 3 3; }
.kbn-node.irrelevant .kbn-bar { fill: #94a3b8; }
.kbn-badge circle { stroke: #ffffff; stroke-width: 1.5; }
.kbn-badge.t circle { fill: #10b981; }
.kbn-badge.f circle { fill: #f43f5e; }
.kbn-badge text { font: 800 10px 'JetBrains Mono', monospace; fill: #ffffff; text-anchor: middle; pointer-events: none; }

.kbn-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 0.8rem; font-size: 0.68rem; color: var(--text-muted); }
.kbn-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.kbn-legend .lg { width: 12px; height: 12px; border-radius: 3px; border: 1.8px solid; display: inline-block; }
.kbn-legend .lg.new { background: #fffbeb; border-color: var(--kbn-hid); }
.kbn-legend .lg.added { background: #f8fafc; border-color: #64748b; }
.kbn-legend .lg.ghost { border-style: dashed; border-color: #cbd5e1; }
.kbn-legend .lg.sel { border-style: dashed; border-color: var(--kbn-sel); }
.kbn-legend .lg.query { background: #f5f3ff; border-color: var(--kbn-q); }
.kbn-legend .lg.evidence { background: #ecfdf5; border-color: var(--kbn-ev); }
.kbn-legend .lg.hidden { background: #fffbeb; border-color: var(--kbn-hid); border-style: dashed; }
.kbn-legend .lg.irrelevant { background: #f1f5f9; border-color: #94a3b8; border-style: dashed; }
.kbn-legend .lg.edge { height: 0; border-width: 0; border-top: 2.6px solid var(--kbn-q); border-radius: 0; width: 16px; }

/* Construction: factorization + step panel */
.kbn-factor { font-size: 0.78rem; line-height: 1.55; color: var(--text-secondary); padding: 0.5rem 0.8rem; border-radius: 8px; background: rgba(99, 102, 241, 0.07); }
.kbn-factor span { font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; white-space: nowrap; }
.kbn-factor .f-on { color: #0f172a; font-weight: 600; }
.kbn-factor .f-new { color: #b45309; font-weight: 700; background: #fef3c7; border-radius: 4px; padding: 0 3px; }
.kbn-factor .f-off { color: #cbd5e1; }
.kbn-factor-sub { margin-top: 0.2rem; font-size: 0.72rem; color: var(--text-muted); }
.kbn-steppanel { background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 0.7rem 0.95rem; font-size: 0.83rem; line-height: 1.5; color: var(--text-secondary); }
.kbn-steppanel p { margin: 0 0 0.45rem; font-size: 0.83rem; line-height: 1.5; }
.knowledge-page .kl-concept-lab { margin-top: -0.7rem; }
/* Interactive lab concepts (Bayes examples, BN construction / inference) need the whole column: hide the topic intro paragraph there. */
.knowledge-page .sl-concept-col:has(.kl-concept-lab) .sl-concept-header p { display: none; }
.kbn-scroll { position: relative; max-height: 236px; overflow-y: auto; }
.kbn-steppanel b { color: var(--text-primary); }
.kbn-step-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6d28d9; }
.kbn-dots { display: inline-flex; gap: 4px; }
.kbn-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e2e8f0; display: inline-block; }
.kbn-dots i.on { background: var(--kl-accent); }
.kbn-step-title { font-family: 'Outfit', sans-serif; font-size: 0.92rem; color: var(--text-primary); margin-bottom: 0.35rem; }
.kbn-ci, .kbn-done { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.45rem 0.65rem; border-radius: 8px; font-size: 0.8rem; }
.kbn-ci { background: var(--kl-accent-soft); border: 1px solid var(--kl-accent-border); color: #5b21b6; }
.kbn-ci b { color: #5b21b6; }
.kbn-done { margin-top: 0.45rem; background: #ecfdf5; border: 1px solid rgba(16, 185, 129, 0.3); color: #065f46; }
.kbn-ci svg, .kbn-done svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.kbn-controls .kbu-actions .klt-btn svg { width: 15px; height: 15px; }
.kbn-controls .kbu-actions { align-items: center; }

/* CPT editor */
.kbn-cpt-panel { padding: 0.55rem 0.85rem 0.6rem; }
.kbn-cpt-in { padding: 0.25rem 0.85rem 0; }
.kbn-cpt-empty { font-size: 0.8rem; color: var(--text-muted); padding: 0.4rem 0; }
.kbn-cpt-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--text-primary); margin-bottom: 0.35rem; }
.kbn-cpt-head .klt-btn { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; padding: 0.25rem 0.55rem; }
.kbn-cpt-head .klt-btn svg { width: 13px; height: 13px; }
.kbn-cpt-wrap { overflow-x: auto; }
.kbn-cpt { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
.kbn-cpt th { text-align: left; font-weight: 700; color: var(--text-muted); font-size: 0.68rem; padding: 0.25rem 0.4rem; border-bottom: 1.5px solid var(--border-light); white-space: nowrap; }
.kbn-cpt td { padding: 0.2rem 0.4rem; border-bottom: 1px solid var(--border-light); }
.kbn-tf { font-family: 'JetBrains Mono', monospace; font-weight: 700; text-align: center; width: 2.2em; }
.kbn-tf.t { color: #059669; }
.kbn-tf.f { color: #e11d48; }
.kbn-edit { display: flex; align-items: center; gap: 0.4rem; }
.kbn-edit input[type="range"] { flex: 1 1 auto; min-width: 70px; accent-color: var(--kl-accent); }
.kbn-edit input[type="number"] { width: 4.8rem; padding: 0.15rem 0.3rem; border-radius: 6px; border: 1px solid var(--border-light); font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; color: #6d28d9; font-weight: 700; }
.kbn-mod { color: transparent; font-size: 0.7rem; }
.kbn-mod.on { color: var(--kbn-hid); }
.kbn-pf { font-family: 'JetBrains Mono', monospace; color: var(--text-muted); width: 4.5em; }
.kbn-cpt-note { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.35rem; }

/* Inference: evidence controls */
.kbn-try { display: flex; gap: 0.35rem; align-items: flex-start; font-size: 0.76rem !important; color: #92400e !important; margin: 0 !important; }
.kbn-try svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--kbn-hid); }
.kbn-evi { background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 0.65rem 0.95rem; display: flex; flex-direction: column; gap: 0.45rem; }
.kbn-query { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; font-weight: 700; color: #6d28d9; }
.kbn-query select { min-width: 10rem; font-weight: 600; }
.kbn-evi-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #047857; }
.kbn-evi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 0.9rem; }
.kbn-evi-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.78rem; font-weight: 600; color: var(--text-primary); }
.kbn-evi-row.is-q { color: #6d28d9; }
.kbn-evi-row em { font-style: normal; font-size: 0.68rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--kl-accent-soft); color: #6d28d9; }
.kbn-seg { display: inline-flex; border: 1px solid var(--border-light); border-radius: 7px; overflow: hidden; }
.kbn-seg button { border: none; background: #ffffff; padding: 0.15rem 0.55rem; font-family: 'JetBrains Mono', monospace; font-size: 0.74rem; font-weight: 700; color: var(--text-muted); cursor: pointer; }
.kbn-seg button + button { border-left: 1px solid var(--border-light); }
.kbn-seg button:hover { background: #f8fafc; color: var(--text-primary); }
.kbn-seg button.on.u { background: #f1f5f9; color: var(--text-primary); }
.kbn-seg button.on.t { background: #10b981; color: #ffffff; }
.kbn-seg button.on.f { background: #f43f5e; color: #ffffff; }
.kbn-stepcount { margin-left: auto; }
.kbn-whats { padding: 0.55rem 0.85rem; }
.kbn-whats-body { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); margin-top: 0.15rem; }

/* Inference: summary, prior-vs-posterior chart, enumeration */
.kbn-belief .kbu-belief-box b { font-size: 1.3rem; }
.kbn-belief .kbu-belief-box { padding: 0.3rem 0.5rem; }
.kbn-pp-legend { display: flex; gap: 0.9rem; flex-wrap: wrap; padding: 0.3rem 0.85rem 0; font-size: 0.7rem; color: var(--text-muted); }
.kbn-pp-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.kbn-pp-legend .lg { width: 14px; height: 8px; border-radius: 4px; display: inline-block; }
.kbn-pp-legend .lg.prior { background: #64748b; }
.kbn-pp-legend .lg.post { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.kbn-pp-list { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.45rem 0.85rem 0; }
.kbn-pp { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.15rem 0.35rem; border-radius: 6px; }
.kbn-pp.is-q { background: var(--kl-accent-soft); }
.kbn-pp-name { font-size: 0.76rem; font-weight: 700; color: var(--text-primary); }
.kbn-pp-name em { font-style: normal; font-size: 0.62rem; color: #6d28d9; text-transform: uppercase; letter-spacing: 0.04em; }
.kbn-pp-bars { display: flex; flex-direction: column; gap: 3px; }
.kbn-pp-row { display: grid; grid-template-columns: minmax(0, 1fr) 4rem; gap: 0.5rem; align-items: center; }
.kbn-pp-row .kbu-bar-track { height: 9px; }
.kbn-pp-row b { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; text-align: right; color: var(--text-muted); }
.kbn-pp-row b.post { color: #6d28d9; }

.kbn-steps { margin: 0; padding: 0.4rem 0.85rem 0 2.1rem; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.8rem; color: var(--text-secondary); }
.kbn-steps li::marker { color: #6d28d9; font-weight: 700; }
.kbn-steps li.latest { background: #fefce8; border-radius: 8px; box-shadow: 0 0 0 4px #fefce8; }
.kbn-math { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; line-height: 1.55; padding: 0.3rem 0.65rem; background: rgba(15, 23, 42, 0.04); border-left: 3px solid #0284c7; border-radius: 6px; color: #334155; overflow-x: auto; }
.kbn-enum-wrap { overflow-x: auto; margin-top: 0.3rem; }
.kbn-enum { width: 100%; border-collapse: collapse; font-size: 0.7rem; }
.kbn-enum th { text-align: left; font-size: 0.64rem; color: var(--text-muted); padding: 0.15rem 0.35rem; border-bottom: 1.5px solid var(--border-light); white-space: nowrap; }
.kbn-enum td { padding: 0.12rem 0.35rem; border-bottom: 1px solid var(--border-light); }
.kbn-enum tfoot td { font-weight: 700; color: var(--text-primary); border-bottom: none; padding-top: 0.25rem; }
.kbn-mono { font-family: 'JetBrains Mono', monospace; white-space: nowrap; }
.kbn-c-q { color: #6d28d9; }
.kbn-more { font-size: 0.76rem; color: var(--text-muted); padding: 0.4rem 0.85rem 0; }
.kbn .kbu-sol-answer { margin: 0.5rem 0.85rem 0; }

@container (max-width: 460px) {
  .kbn-ex-tabs, .kbn-evi-grid { grid-template-columns: minmax(0, 1fr); }
  .kbn-pp { grid-template-columns: minmax(0, 1fr); }
  .kbn-stepcount { margin-left: 0; }
}

/* Inference step-by-step reveal (bn_lab.js): bars animate prior → posterior,
   a tick marks the prior, nodes changed by the latest step pulse once. */
.kbn-bar { transform-box: fill-box; transform-origin: left center; transition: transform 0.7s ease; }
.kbn-mark { stroke: #0f172a; stroke-width: 1.4; opacity: 0.55; pointer-events: none; }
.kbn-node.changed .kbn-box { animation: kbn-pulse 1.1s ease-out 1; }
.kbn-node.changed .kbn-sub { animation: kbn-sub-in 0.6s ease-out 1; }
@keyframes kbn-pulse {
  0% { stroke: #f59e0b; stroke-width: 4; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7)); }
  100% { filter: none; }
}
@keyframes kbn-sub-in { from { opacity: 0; } to { opacity: 1; } }
.kbu-belief-box.post.pending { border-style: dashed; background: #ffffff; }
.kbu-belief-box.post.pending b { color: #c4b5fd; }
.kbn-pending-track { background: repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.07) 0 6px, transparent 6px 10px); }
@media (prefers-reduced-motion: reduce) {
  .kbn-bar { transition: none; }
  .kbn-node.changed .kbn-box, .kbn-node.changed .kbn-sub { animation: none; }
}

/* ---- Topic 05 · Temporal HMMs · "HMM Construction", "Filtering & Prediction"
   and "Viterbi" concepts (demos/knowledge_demo/hmm_lab.js). Reuses the BN
   lab's .kbn-* nodes, edges, CPT editor, evidence segments and step lists;
   .khm-* adds the time-slice layout, trellis path and sequence summary. ---- */
.khm-dag { width: 100%; max-width: 500px; max-height: 210px; display: block; margin: 0 auto; }
.khm-row { font: 700 9px 'Outfit', sans-serif; fill: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.khm-col { font: 600 9.5px 'JetBrains Mono', monospace; fill: #94a3b8; text-anchor: middle; }
.kbn-edge.khm-faint { stroke: #e2e8f0; stroke-width: 1.2; }
.kbn-edge.path { stroke: #10b981; stroke-width: 3.4; }
.kbn-node.onpath .kbn-box { fill: #ecfdf5; stroke: #10b981; stroke-width: 2.6; }
.kbn-node.onpath .kbn-name { fill: #047857; }
.kbn-node.onpath .kbn-bar { fill: #10b981; }
.kbn-legend .lg.path { height: 0; border-width: 0; border-top: 3.4px solid #10b981; border-radius: 0; width: 16px; }

/* CPT part selector */
.khm-parts { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; margin-bottom: 0.4rem; }
.khm-parts .kbn-restore { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; padding: 0.25rem 0.55rem; }
.khm-parts .kbn-restore svg { width: 13px; height: 13px; }

/* Observation sequence controls */
.khm-evi-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.khm-days { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-primary); }
.khm-days .klt-btn { padding: 0.1rem 0.55rem; font-size: 0.85rem; line-height: 1.2; }
.khm-evi-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.35rem; }
.khm-evi-day { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-size: 0.7rem; font-weight: 700; color: var(--text-muted); padding: 0.3rem 0.2rem; border: 1px dashed var(--border-light); border-radius: 8px; }

/* Viterbi sequence summary */
.khm-seq { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 0.75rem; align-items: center; padding: 0.55rem 0.8rem; border: 1.5px solid var(--border-light); border-radius: 10px; background: #ffffff; }
.khm-seq-label { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.khm-seq-items { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.khm-seq-items i { font-style: normal; font-family: 'JetBrains Mono', monospace; font-size: 0.76rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.khm-seq-items i.ev.t { background: #ecfdf5; color: #047857; }
.khm-seq-items i.ev.f { background: #fff1f2; color: #e11d48; }
.khm-seq-items i.st.yes { background: #10b981; color: #ffffff; }
.khm-seq-items i.st.no { background: #64748b; color: #ffffff; }
.khm-seq-items i.pending { background: #f5f3ff; color: #a78bfa; font-family: inherit; font-weight: 600; }

/* Panels */
.khm-na { font-size: 0.66rem; color: #cbd5e1; font-style: italic; }
.khm-table .kbn-enum th, .khm-table .kbn-enum td { text-align: center; }
.khm-table .kbn-enum tbody th { text-align: left; font-family: 'JetBrains Mono', monospace; color: var(--text-primary); }
.khm-onpath { background: #ecfdf5; color: #047857; font-weight: 700; }
.khm-q { color: #c4b5fd; }
.khm-cmp td, .khm-cmp th { border-top: 1.5px solid var(--border-light); }

@container (max-width: 460px) {
  .khm-evi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   CSP Backtracking Comparison (playground → Constraint Satisfaction
   → Backtracking Comparison). JS: demos/csp_demo/csp_bt_compare.js
   ============================================================ */
.cspbt-wrap { display: flex; flex-direction: column; gap: 1rem; }

.cspbt-setup {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  padding: 1rem 1.25rem; background: #ffffff; border: 1px solid var(--border-light); border-radius: 14px;
}
.cspbt-setup-main { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; flex: 1 1 520px; }
.cspbt-setup-title { display: flex; align-items: center; gap: 0.45rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.cspbt-setup-title i { width: 18px; height: 18px; color: var(--csp-accent); }
.cspbt-facts { display: flex; flex-wrap: wrap; gap: 0.45rem 1.1rem; }
.cspbt-facts div { display: flex; flex-direction: column; gap: 0.05rem; }
.cspbt-facts span { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.cspbt-facts b { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 600; color: var(--text-primary); }
.cspbt-setup-ctrl { display: flex; flex-direction: column; align-items: flex-end; gap: 0.55rem; }
.cspbt-global { display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: flex-end; }

.cspbt-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.74rem; color: var(--text-secondary); padding: 0 0.25rem; }
.cspbt-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.cspbt-legend .cspbt-chip { font-style: normal; transform: scale(0.85); }

.cspbt-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.cspbt-panel {
  display: flex; flex-direction: column; gap: 0.6rem; min-width: 0;
  padding: 1rem; background: #ffffff; border: 1px solid var(--border-light); border-radius: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.cspbt-panel.solved { border-color: rgba(5, 150, 105, 0.45); box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.08); }
.cspbt-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.cspbt-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin-bottom: -0.25rem; }
.cspbt-tag { flex-shrink: 0; padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--csp-accent); color: #ffffff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; }
.cspbt-desc { margin: 0; font-size: 0.76rem; color: var(--text-secondary); line-height: 1.45; min-height: 2.2em; }

.cspbt-graph-wrap { background: rgba(15, 23, 42, 0.025); border-radius: 10px; padding: 0.25rem; }
.cspbt-graph { width: 100%; height: auto; display: block; }
.cspbt-edge { stroke: #cbd5e1; stroke-width: 2.4; }
.cspbt-edge.ok { stroke: var(--csp-ok); stroke-width: 3.2; }
.cspbt-edge.bad { stroke: var(--csp-bad); stroke-width: 3.2; }
.cspbt-neq { font: 800 13px 'Outfit', sans-serif; fill: var(--text-muted); text-anchor: middle; }
.cspbt-neq.ok { fill: var(--csp-ok); }
.cspbt-neq.bad { fill: var(--csp-bad); }
.cspbt-x { font: 800 14px 'Outfit', sans-serif; fill: var(--csp-bad); text-anchor: middle; }
.cspbt-tick { font: 800 13px 'Outfit', sans-serif; fill: var(--csp-ok); text-anchor: middle; }
.cspbt-arc { fill: none; stroke-width: 2; stroke-dasharray: 5 3; }
.cspbt-arc.ok { stroke: var(--csp-accent); }
.cspbt-arc.bad { stroke: var(--csp-bad); }
.cspbt-ah.ok { fill: var(--csp-accent); }
.cspbt-ah.bad { fill: var(--csp-bad); }
.cspbt-node circle { fill: #ffffff; stroke: #334155; stroke-width: 1.8; transition: fill 0.2s ease; }
.cspbt-node.asg circle { fill: var(--csp-accent); stroke: #0f766e; }
.cspbt-node.focus circle { stroke: #f59e0b; stroke-width: 3.4; }
.cspbt-node.try circle { fill: #fffbeb; stroke: #f59e0b; stroke-width: 3.4; stroke-dasharray: 4 3; }
.cspbt-node.wipe circle { fill: #fef2f2; stroke: var(--csp-bad); stroke-width: 3.4; }
.cspbt-nlabel { font: 800 13px 'Outfit', sans-serif; fill: #0f172a; text-anchor: middle; }
.cspbt-node.asg .cspbt-nlabel { fill: #ffffff; }
.cspbt-sub { font: 700 12px 'JetBrains Mono', monospace; fill: var(--text-secondary); text-anchor: middle; }
.cspbt-sub.asg { fill: #0f766e; }
.cspbt-sub.try { fill: #b45309; }
.cspbt-sub.bad { fill: var(--csp-bad); }

.cspbt-dom { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.cspbt-dom th, .cspbt-dom td { padding: 0.3rem 0.4rem; text-align: left; border-bottom: 1px solid var(--border-light); }
.cspbt-dom thead th { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.cspbt-dom tbody th { font-family: 'Outfit', sans-serif; font-weight: 800; color: var(--text-primary); width: 2.6rem; }
.cspbt-dom tbody tr:last-child th, .cspbt-dom tbody tr:last-child td { border-bottom: 0; }
.cspbt-dom tbody tr.focus { background: rgba(245, 158, 11, 0.08); }
.cspbt-val { font-family: 'JetBrains Mono', monospace; font-weight: 800; color: var(--csp-accent); }
.cspbt-val.none { color: var(--text-muted); font-weight: 400; }
.cspbt-left { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-muted); width: 2rem; text-align: center !important; }
.cspbt-left.bad { color: var(--csp-bad); font-weight: 800; }
.cspbt-chips { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.cspbt-chip {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 1.7rem; height: 1.7rem; padding: 0 0.3rem; border-radius: 7px;
  font: 800 0.82rem 'JetBrains Mono', monospace; color: #0f172a;
  background: #ffffff; border: 1.6px solid var(--csp-accent-border);
  transition: all 0.2s ease;
}
.cspbt-chip sub { font-size: 0.55rem; font-weight: 700; color: inherit; opacity: 0.85; }
.cspbt-chip.asg { background: var(--csp-accent); border-color: #0f766e; color: #ffffff; }
.cspbt-chip.try { background: #fffbeb; border: 2px dashed #f59e0b; color: #92400e; }
.cspbt-chip.rej { background: #fef2f2; border-color: rgba(220, 38, 38, 0.45); color: var(--csp-bad); }
.cspbt-chip.rej::after { content: '✗'; position: absolute; top: -7px; right: -5px; font-size: 0.6rem; color: var(--csp-bad); }
.cspbt-chip.gone { background: #f1f5f9; border: 1.6px dashed #cbd5e1; color: #94a3b8; text-decoration: line-through; }
.cspbt-chip.gone.just { background: #fee2e2; border: 2px solid var(--csp-bad); color: var(--csp-bad); animation: cspbt-pulse 0.6s ease; }
.cspbt-chip.rest { background: #ecfdf5; border: 2px solid var(--csp-ok); color: var(--csp-ok); animation: cspbt-pulse 0.6s ease; }
@keyframes cspbt-pulse { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }

.cspbt-queue { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-size: 0.76rem; }
.cspbt-qlabel { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-right: 0.2rem; }
.cspbt-qchip { padding: 0.1rem 0.4rem; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.72rem; background: var(--csp-accent-soft); color: var(--csp-accent); border: 1px solid var(--csp-accent-border); }
.cspbt-qchip.new { background: #fffbeb; color: #b45309; border-color: rgba(245, 158, 11, 0.5); }

.cspbt-msg {
  font-size: 0.8rem; line-height: 1.5; color: var(--text-primary);
  padding: 0.55rem 0.7rem; border-radius: 8px; background: var(--csp-accent-soft); border-left: 3px solid var(--csp-accent);
  min-height: 5.6em;
}
.cspbt-msg.k-reject, .cspbt-msg.k-wipeout { background: #fef2f2; border-left-color: var(--csp-bad); }
.cspbt-msg.k-undo, .cspbt-msg.k-deadend, .cspbt-msg.k-prune { background: #fffbeb; border-left-color: var(--csp-warn); }
.cspbt-msg.k-solution { background: #ecfdf5; border-left-color: var(--csp-ok); font-weight: 600; }
.cspbt-stepno { display: inline-block; margin-right: 0.4rem; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }

.cspbt-log { max-height: 7.6rem; overflow-y: auto; font-size: 0.7rem; gap: 0.1rem; }
.cspbt-logn { display: inline-block; width: 1.6rem; color: var(--text-muted); font-family: 'JetBrains Mono', monospace; }

.cspbt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.cspbt-stats div { display: flex; flex-direction: column; align-items: center; padding: 0.35rem 0.2rem; border-radius: 8px; background: rgba(15, 23, 42, 0.035); }
.cspbt-stats span { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); }
.cspbt-stats b { font-family: 'JetBrains Mono', monospace; font-size: 1rem; color: var(--text-primary); }
.cspbt-stats b.warn { color: var(--csp-warn); }

.cspbt-btns { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; }
.cspbt-count { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); font-family: 'JetBrains Mono', monospace; }

.cspbt-summary .csp-table-wrap { overflow-x: auto; }
.cspbt-summary { min-width: 0; display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.25rem; background: #ffffff; border: 1px solid var(--border-light); border-radius: 14px; }
.cspbt-sum-head { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); }
.cspbt-sum-head i { width: 18px; height: 18px; color: var(--csp-accent); }
.cspbt-sum-head .csp-muted { font-family: inherit; font-weight: 400; margin-left: auto; }
.cspbt-sum-table { font-size: 0.8rem; }
.cspbt-sum-table tbody th { text-align: left; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.cspbt-sum-table thead th { text-align: left; }

@media (max-width: 600px) {
  .cspbt-sum-table tbody th { white-space: normal; }
  .cspbt-summary, .cspbt-setup { padding: 0.85rem; }
}
@media (max-width: 1100px) {
  .cspbt-panels { grid-template-columns: 1fr; }
  .cspbt-setup-ctrl { align-items: flex-start; }
  .cspbt-global { justify-content: flex-start; }
}

/* ==========================================================================
   Topic 06 · Concept 1 · Interactive Text Features Playground (BoW & TF-IDF)
   (demos/learning_demo/text_features_lab.js). Controls live in the concept
   column (#lr-concept-lab); live visualizations fill the illustration column.
   ========================================================================== */
.learning-page { --tfp-cyan: #06b6d4; --tfp-cyan-d: #0e7490; --tfp-cyan-soft: rgba(6, 182, 212, 0.12); }
.learning-page .sl-concept-col:has(.lr-concept-lab) .sl-concept-header p { display: none; }
.learning-page .sl-concept-col, .learning-page .sl-graph-col, .tfp, .tfp-sec, .tfp-docs, .tfp-doc { min-width: 0; }
.learning-page .sl-concept-col:has(.lr-concept-lab) .sl-concept-chips { margin-bottom: 0.2rem !important; }

.lr-lab-concept { background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.lr-lab-def { font-size: 0.86rem; line-height: 1.5; color: var(--text-primary); margin: 0; }
.lr-lab-notation { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; padding: 0.5rem 0.75rem; background: rgba(15, 23, 42, 0.05); border-left: 3px solid #0284c7; border-radius: 6px; color: #334155; word-break: break-word; }
.lr-lab-tip { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.78rem; color: #065f46; line-height: 1.45; }
.lr-lab-tip svg { width: 15px; height: 15px; color: #059669; flex-shrink: 0; margin-top: 1px; }

/* ---- controls ---- */
.tfp { display: flex; flex-direction: column; gap: 0.75rem; }
.tfp-sec { background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; }
.tfp-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.tfp-sec-title { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.86rem; color: var(--text-primary); }
.tfp-sec-title svg { width: 15px; height: 15px; color: var(--tfp-cyan-d); }
.tfp-sub { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 0.72rem; color: var(--text-muted); }

.tfp-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.tfp-preset { display: flex; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.42rem 0.4rem; border-radius: 8px; border: 1px solid var(--border-light); background: rgba(15, 23, 42, 0.03); color: var(--text-secondary); font: 600 0.74rem 'Outfit', sans-serif; cursor: pointer; transition: all 0.15s; line-height: 1.15; text-align: center; }
.tfp-preset svg { width: 14px; height: 14px; flex-shrink: 0; }
.tfp-preset:hover { border-color: var(--tfp-cyan); color: var(--text-primary); }
.tfp-preset.active { background: var(--tfp-cyan-soft); border-color: var(--tfp-cyan); color: var(--tfp-cyan-d); }

.tfp-text { width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.6rem; font: 0.86rem/1.5 'Plus Jakarta Sans', sans-serif; color: var(--text-primary); padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid rgba(15, 23, 42, 0.15); background: #f8fafc; }
.tfp-text:focus { outline: none; border-color: var(--tfp-cyan); box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15); background: #fff; }

.tfp-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.tfp-row.end { justify-content: flex-end; margin-top: 0.6rem; }
.tfp-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.36rem 0.7rem; border-radius: 8px; border: 1px solid rgba(15, 23, 42, 0.14); background: #ffffff; color: var(--text-secondary); font: 600 0.75rem 'Outfit', sans-serif; cursor: pointer; transition: all 0.15s; }
.tfp-btn svg { width: 14px; height: 14px; }
.tfp-btn:hover:not(:disabled) { border-color: var(--tfp-cyan); color: var(--text-primary); }
.tfp-btn:disabled { opacity: 0.45; cursor: default; }
.tfp-btn.on { background: rgba(16, 185, 129, 0.12); border-color: #10b981; color: #047857; }
.tfp-btn.primary { background: #10b981; border-color: #10b981; color: #fff; }
.tfp-btn.primary:hover:not(:disabled) { background: #059669; color: #fff; }
.tfp-btn.ghost { border-style: dashed; }
.tfp-stats { margin-left: auto; font: 500 0.72rem 'JetBrains Mono', monospace; color: var(--text-muted); }
.tfp-stepnav { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.55rem; border-radius: 9px; background: rgba(16, 185, 129, 0.07); border: 1px solid rgba(16, 185, 129, 0.25); }
.tfp-stepnav[hidden] { display: none; }
.tfp-stepnav-lbl { flex: 1; text-align: center; font-size: 0.78rem; color: #065f46; }

.tfp-hint { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.tfp-selword { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.86rem; }
.tfp-pill { font: 600 0.7rem 'JetBrains Mono', monospace; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--tfp-cyan-soft); color: var(--tfp-cyan-d); }
.tfp-link { margin-left: auto; background: none; border: none; color: var(--text-muted); font-size: 0.72rem; text-decoration: underline; cursor: pointer; }
.tfp-formula, .tfp-mono { font: 0.74rem/1.5 'JetBrains Mono', monospace; color: #334155; background: rgba(15, 23, 42, 0.04); border-radius: 6px; padding: 0.4rem 0.6rem; word-break: break-word; }
.tfp-mono { margin-top: 0.5rem; }
.tfp-q { color: var(--tfp-cyan-d); font-weight: 700; }

.tfp-sel-wrap { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; color: var(--text-muted); }
.tfp-select { font: 600 0.78rem 'JetBrains Mono', monospace; padding: 0.2rem 0.4rem; border-radius: 6px; border: 1px solid rgba(15, 23, 42, 0.15); background: #fff; color: var(--text-primary); max-width: 10rem; }
.tfp-calc { display: flex; flex-direction: column; gap: 0.25rem; }
.tfp-calc-line { display: grid; grid-template-columns: 4.2rem 1fr; gap: 0.4rem; font: 0.76rem/1.45 'JetBrains Mono', monospace; color: #334155; padding: 0.22rem 0.5rem; border-radius: 6px; background: rgba(15, 23, 42, 0.035); }
.tfp-calc-line.total { background: rgba(16, 185, 129, 0.1); color: #065f46; }
.tfp-calc-k { font-weight: 700; color: #0284c7; }
.tfp-calc-line.total .tfp-calc-k { color: #047857; }
.tfp-warn { font-size: 0.74rem; color: #9a3412; background: rgba(245, 158, 11, 0.12); border-radius: 6px; padding: 0.35rem 0.55rem; }

.tfp-docs { display: flex; flex-direction: column; gap: 0.3rem; }
.tfp-doc { display: flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.3rem 0.18rem 0.4rem; border-radius: 7px; border: 1px solid transparent; transition: background 0.15s; }
.tfp-doc.has { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.3); }
.tfp-doc.empty .tfp-doc-in { border-style: dashed; }
.tfp-doc-id { font: 700 0.74rem 'JetBrains Mono', monospace; color: var(--text-muted); width: 1.6rem; flex-shrink: 0; }
.tfp-doc.has .tfp-doc-id { color: #047857; }
.tfp-doc-own { flex: 1; min-width: 0; font-size: 0.76rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tfp-doc-tag { font: 600 0.62rem 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: var(--tfp-cyan-d); background: var(--tfp-cyan-soft); padding: 0.1rem 0.4rem; border-radius: 999px; }
.tfp-doc-in { flex: 1; min-width: 0; font: 0.78rem 'Plus Jakarta Sans', sans-serif; padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid rgba(15, 23, 42, 0.14); background: #f8fafc; color: var(--text-primary); }
.tfp-doc-in:focus { outline: none; border-color: var(--tfp-cyan); background: #fff; }
.tfp-doc-x { width: 1.5rem; height: 1.5rem; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer; flex-shrink: 0; }
.tfp-doc-x:hover { background: rgba(244, 63, 94, 0.1); color: #e11d48; }

/* ---- visualization column ---- */
.tfp-viz { display: flex; flex-direction: column; gap: 0.7rem; }
.tfp-viz-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.tfp-viz-head h3 { font-family: 'Outfit', sans-serif; font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.tfp-stat-chips { display: flex; gap: 0.3rem; }
.tfp-stat-chips span { font: 600 0.68rem 'JetBrains Mono', monospace; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(15, 23, 42, 0.05); color: var(--text-secondary); }

.tfp-msg { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.79rem; line-height: 1.5; color: #334155; padding: 0.55rem 0.75rem; border-radius: 10px; background: rgba(6, 182, 212, 0.07); border: 1px solid rgba(6, 182, 212, 0.25); animation: tfpFlash 0.5s ease; }
.tfp-msg-tag { flex-shrink: 0; font: 700 0.62rem 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; border-radius: 999px; background: var(--tfp-cyan); color: #fff; margin-top: 0.12rem; }
.tfp-msg-corpus { background: rgba(139, 92, 246, 0.07); border-color: rgba(139, 92, 246, 0.25); }
.tfp-msg-corpus .tfp-msg-tag { background: #8b5cf6; }
.tfp-msg-step { background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.3); }
.tfp-msg-step .tfp-msg-tag { background: #10b981; }
.tfp-msg-select .tfp-msg-tag { background: #f59e0b; }
.tfp-msg-select { background: rgba(245, 158, 11, 0.07); border-color: rgba(245, 158, 11, 0.3); }
@keyframes tfpFlash { from { opacity: 0.4; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

.tfp-card { background: #ffffff; border: 1px solid var(--border-light); border-radius: 12px; padding: 0.7rem 0.85rem; }
.tfp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.tfp-card-head h4 { font-family: 'Outfit', sans-serif; font-size: 0.86rem; font-weight: 700; color: var(--text-primary); margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.tfp-card-sub { font-size: 0.7rem; color: var(--text-muted); }
.tfp-count { font: 600 0.68rem 'JetBrains Mono', monospace; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--tfp-cyan-soft); color: var(--tfp-cyan-d); }
.tfp-empty { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }
.tfp-more { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.3rem; text-align: right; }
.tfp-lbl { font: 700 0.66rem 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0.3rem 0 0.25rem; }
.tfp-p { font-size: 0.8rem; line-height: 1.55; color: var(--text-secondary); margin: 0.55rem 0 0; }

/* repeated-word colours */
.tfp-c0 { --rc: #0891b2; --rb: rgba(6, 182, 212, 0.16); }
.tfp-c1 { --rc: #b45309; --rb: rgba(245, 158, 11, 0.18); }
.tfp-c2 { --rc: #7c3aed; --rb: rgba(139, 92, 246, 0.15); }
.tfp-c3 { --rc: #be123c; --rb: rgba(244, 63, 94, 0.13); }
.tfp-c4 { --rc: #047857; --rb: rgba(16, 185, 129, 0.15); }
.tfp-c5 { --rc: #1d4ed8; --rb: rgba(59, 130, 246, 0.14); }
.tfp-bg0 { background: #06b6d4 !important; } .tfp-bg1 { background: #f59e0b !important; } .tfp-bg2 { background: #8b5cf6 !important; }
.tfp-bg3 { background: #f43f5e !important; } .tfp-bg4 { background: #10b981 !important; } .tfp-bg5 { background: #3b82f6 !important; }

.tfp-src { font-size: 0.9rem; line-height: 1.9; color: var(--text-primary); padding: 0.4rem 0.6rem; background: #f8fafc; border-radius: 8px; word-break: break-word; }
.tfp-src.small { font-size: 0.82rem; line-height: 1.75; }
.tfp-w { cursor: pointer; border-radius: 4px; padding: 0.05rem 0.08rem; transition: background 0.15s; }
.tfp-w:hover { background: rgba(15, 23, 42, 0.08); }
.tfp-w.rep { background: var(--rb); color: var(--rc); font-weight: 600; }
.tfp-w.drop { cursor: default; color: #94a3b8; text-decoration: line-through; }
.tfp-w.sel { background: #fde68a; color: #78350f; box-shadow: 0 0 0 2px #f59e0b; font-weight: 700; }

.tfp-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tfp-chip { font: 600 0.74rem 'JetBrains Mono', monospace; padding: 0.15rem 0.45rem; border-radius: 6px; background: rgba(15, 23, 42, 0.05); color: #334155; border: 1px solid rgba(15, 23, 42, 0.08); cursor: pointer; }
.tfp-chip.rep { background: var(--rb); color: var(--rc); border-color: transparent; }
.tfp-chip.drop { text-decoration: line-through; color: #94a3b8; background: transparent; border-style: dashed; cursor: default; }
.tfp-chip.sel { box-shadow: 0 0 0 2px #f59e0b; background: #fde68a; color: #78350f; }
.tfp-chip.vocab sub { font-size: 0.6rem; color: var(--text-muted); margin-right: 0.25rem; }

.tfp-bars { display: flex; flex-direction: column; gap: 0.28rem; }
.tfp-bar-row { display: grid; grid-template-columns: 6.5rem 1fr 1.8rem; align-items: center; gap: 0.5rem; cursor: pointer; border-radius: 6px; padding: 0.08rem 0.25rem; }
.tfp-bar-row:hover { background: rgba(15, 23, 42, 0.04); }
.tfp-bar-row.sel { background: rgba(245, 158, 11, 0.14); }
.tfp-bar-lbl { font: 600 0.76rem 'JetBrains Mono', monospace; color: #334155; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfp-bar-track { height: 14px; border-radius: 4px; background: rgba(15, 23, 42, 0.05); overflow: hidden; }
.tfp-bar-fill { display: block; height: 100%; background: #94a3b8; border-radius: 4px; transition: width 0.3s ease; }
.tfp-bar-row.sel .tfp-bar-fill { box-shadow: inset 0 0 0 2px #b45309; }
.tfp-bar-val { font: 700 0.78rem 'JetBrains Mono', monospace; color: var(--tfp-cyan-d); }

.tfp-vec { display: flex; flex-wrap: wrap; gap: 3px; }
.tfp-vcell { display: flex; flex-direction: column; align-items: center; width: 3.4rem; cursor: pointer; }
.tfp-vval { width: 100%; text-align: center; font: 700 0.8rem 'JetBrains Mono', monospace; padding: 0.3rem 0; border-radius: 5px; color: #0f172a; background: rgba(6, 182, 212, var(--a)); border: 1px solid rgba(6, 182, 212, 0.35); }
.tfp-vec.tf .tfp-vval { background: rgba(16, 185, 129, var(--a)); border-color: rgba(16, 185, 129, 0.4); }
.tfp-vidx { font: 0.58rem 'JetBrains Mono', monospace; color: #94a3b8; margin-top: 1px; }
.tfp-vword { font: 0.62rem 'JetBrains Mono', monospace; color: var(--text-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfp-vcell.sel .tfp-vval { box-shadow: 0 0 0 2px #f59e0b; }
.tfp-vcell.sel .tfp-vword { color: #b45309; font-weight: 700; }
.tfp-vec.compact .tfp-vcell { width: 2.9rem; }
.tfp-vec.compact .tfp-vval { font-size: 0.72rem; padding: 0.22rem 0; }
.tfp-vec.compact .tfp-vidx { display: none; }

.tfp-seg { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: 10px; background: rgba(15, 23, 42, 0.05); gap: 2px; }
.tfp-seg button { border: none; background: none; padding: 0.35rem 0.85rem; border-radius: 8px; font: 600 0.76rem 'Outfit', sans-serif; color: var(--text-secondary); cursor: pointer; }
.tfp-seg button.active { background: #ffffff; color: #047857; box-shadow: var(--shadow-sm); }

.tfp-contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.tfp-ct { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.75rem; border-radius: 10px; font-size: 0.92rem; }
.tfp-ct > span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.tfp-ct small { font: 0.68rem 'JetBrains Mono', monospace; color: var(--text-muted); }
.tfp-ct.freq { background: rgba(244, 63, 94, 0.06); border: 1px solid rgba(244, 63, 94, 0.22); }
.tfp-ct.freq .tfp-q { color: #be123c; }
.tfp-ct.dist { background: rgba(16, 185, 129, 0.07); border: 1px solid rgba(16, 185, 129, 0.3); }
.tfp-ct.dist .tfp-q { color: #047857; }

.tfp-dstrip { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tfp-dbox { display: flex; flex-direction: column; align-items: center; min-width: 2.6rem; padding: 0.25rem 0.35rem; border-radius: 7px; border: 1px solid rgba(15, 23, 42, 0.1); background: #f8fafc; font: 0.72rem 'JetBrains Mono', monospace; color: #94a3b8; }
.tfp-dbox b { color: #64748b; font-size: 0.72rem; }
.tfp-dbox.has { background: rgba(16, 185, 129, 0.13); border-color: #10b981; color: #047857; }
.tfp-dbox.has b { color: #047857; }
.tfp-dbox.off { opacity: 0.45; border-style: dashed; }

.tfp-table-wrap { max-height: 22rem; overflow: auto; border-radius: 8px; border: 1px solid var(--border-light); }
.tfp-table { width: 100%; border-collapse: collapse; font: 0.74rem 'JetBrains Mono', monospace; color: #334155; }
.tfp-table th { position: sticky; top: 0; background: #ecfeff; color: var(--tfp-cyan-d); font-weight: 700; padding: 0.35rem 0.4rem; text-align: right; }
.tfp-table th:first-child, .tfp-table td.t { text-align: left; }
.tfp-table td { padding: 0.28rem 0.4rem; text-align: right; border-top: 1px solid rgba(15, 23, 42, 0.05); white-space: nowrap; }
.tfp-table tbody tr { cursor: pointer; }
.tfp-table tbody tr:hover { background: rgba(15, 23, 42, 0.03); }
.tfp-table tr.sel { background: rgba(245, 158, 11, 0.14) !important; }
.tfp-table td.w { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
.tfp-mini { display: inline-block; width: 3.5rem; height: 8px; border-radius: 4px; background: rgba(15, 23, 42, 0.06); overflow: hidden; }
.tfp-mini span { display: block; height: 100%; background: #10b981; }
.tfp-tag { font: 600 0.62rem 'Outfit', sans-serif; padding: 0.05rem 0.35rem; border-radius: 999px; margin-left: 0.2rem; vertical-align: 1px; }
.tfp-tag.every { background: rgba(244, 63, 94, 0.12); color: #be123c; }
.tfp-tag.common { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.tfp-tag.unique { background: rgba(16, 185, 129, 0.14); color: #047857; }

.tfp-cmp { display: flex; flex-direction: column; gap: 0.22rem; }
.tfp-cmp-head, .tfp-cmp-row { display: grid; grid-template-columns: 6rem 1fr 1fr 2.4rem; gap: 0.5rem; align-items: center; }
.tfp-cmp-head span { font: 700 0.64rem 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.tfp-cmp-row { cursor: pointer; border-radius: 6px; padding: 0.08rem 0.2rem; }
.tfp-cmp-row:hover { background: rgba(15, 23, 42, 0.04); }
.tfp-cmp-row.sel { background: rgba(245, 158, 11, 0.14); }
.tfp-cmp-bar { position: relative; height: 15px; border-radius: 4px; background: rgba(15, 23, 42, 0.05); overflow: hidden; }
.tfp-cmp-bar > span { display: block; height: 100%; border-radius: 4px; transition: width 0.3s; }
.tfp-cmp-bar.bow > span { background: #67e8f9; }
.tfp-cmp-bar.tf > span { background: #6ee7b7; }
.tfp-cmp-bar em { position: absolute; left: 0.35rem; top: 0; font: 700 0.66rem/15px 'JetBrains Mono', monospace; font-style: normal; color: #0f172a; }
.tfp-mv { font: 700 0.7rem 'JetBrains Mono', monospace; color: #94a3b8; text-align: center; }
.tfp-mv.up { color: #059669; }
.tfp-mv.dn { color: #e11d48; }

/* step-by-step pipeline */
.tfp-pipe { display: flex; align-items: stretch; gap: 0.25rem; overflow-x: auto; padding-bottom: 0.15rem; }
.tfp-pipe-step { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 5.2rem; flex: 1; padding: 0.4rem 0.3rem; border-radius: 9px; border: 1px solid var(--border-light); background: #f8fafc; cursor: pointer; font-family: 'Outfit', sans-serif; }
.tfp-pipe-n { width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.7rem; font-weight: 700; background: rgba(15, 23, 42, 0.08); color: var(--text-muted); }
.tfp-pipe-name { font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); text-align: center; line-height: 1.15; }
.tfp-pipe-sum { font: 0.6rem 'JetBrains Mono', monospace; color: var(--text-muted); min-height: 0.8rem; }
.tfp-pipe-step.done { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.3); }
.tfp-pipe-step.done .tfp-pipe-n { background: #a7f3d0; color: #065f46; }
.tfp-pipe-step.cur { background: rgba(16, 185, 129, 0.14); border-color: #10b981; box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25); }
.tfp-pipe-step.cur .tfp-pipe-n { background: #10b981; color: #fff; }
.tfp-pipe-step.cur .tfp-pipe-name { color: #065f46; }
.tfp-pipe-arrow { align-self: center; color: #cbd5e1; font-size: 0.8rem; }
.tfp-stepcard { border-color: rgba(16, 185, 129, 0.35); }
.tfp-raw { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-primary); padding: 0.7rem 0.9rem; border-left: 4px solid #10b981; background: #f8fafc; border-radius: 0 8px 8px 0; font-style: italic; word-break: break-word; }
.tfp-rules { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.5rem; }
.tfp-rules span { font: 600 0.68rem 'Outfit', sans-serif; padding: 0.15rem 0.5rem; border-radius: 999px; background: rgba(16, 185, 129, 0.1); color: #047857; }
.tfp-arrow-down { text-align: center; color: #10b981; font: 700 0.74rem 'Outfit', sans-serif; margin: 0.35rem 0; }

.tfp-foot { display: flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; color: var(--text-muted); padding: 0.2rem 0.2rem 0; }
.tfp-foot svg { width: 15px; height: 15px; color: #10b981; flex-shrink: 0; }

@media (max-width: 640px) {
  .tfp-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tfp-contrast { grid-template-columns: 1fr; }
  .tfp-bar-row { grid-template-columns: 5rem 1fr 1.6rem; }
  .tfp-cmp-head, .tfp-cmp-row { grid-template-columns: 4.6rem 1fr 1fr 2rem; gap: 0.3rem; }
}

/* ==========================================================================
   Topic 06 · Tab 0 · Evolution labs (demos/learning_demo/evolution_lab.js)
   Reuses the .tfp-* building blocks of the Text Features playground.
   ========================================================================== */
.evo-viz { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.evo-ctrl input.tfp-doc-in { flex: 1 1 8rem; }
.evo-story.on { border-color: rgba(16, 185, 129, 0.4); }
.evo-dots { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.evo-dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid var(--border-light); background: #f8fafc; color: var(--text-muted); font: 700 0.72rem 'Outfit', sans-serif; cursor: pointer; }
.evo-dot.done { background: #a7f3d0; color: #065f46; border-color: transparent; }
.evo-dot.cur { background: #10b981; color: #fff; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }

/* labels & badges */
.evo-badge { display: inline-block; font: 700 0.62rem 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 999px; }
.evo-badge.spam { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.evo-badge.ham { background: rgba(2, 132, 199, 0.12); color: #0369a1; }
.evo-badge.none { background: rgba(15, 23, 42, 0.05); color: #94a3b8; }
.evo-lbl-toggle { font: 700 0.66rem 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3rem 0.55rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; flex-shrink: 0; min-width: 3.4rem; }
.evo-lbl-toggle.spam { background: rgba(245, 158, 11, 0.16); color: #b45309; border-color: rgba(245, 158, 11, 0.4); }
.evo-lbl-toggle.ham { background: rgba(2, 132, 199, 0.12); color: #0369a1; border-color: rgba(2, 132, 199, 0.35); }
.evo-ok { color: #059669; font-weight: 800; }
.evo-bad { color: #e11d48; font-weight: 800; }
.evo-why { font: 0.62rem 'JetBrains Mono', monospace; color: var(--text-muted); margin-top: 1px; }
.evo-num { font: 700 0.7rem 'JetBrains Mono', monospace; color: var(--text-muted); }

/* rules lab */
.evo-rule-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.evo-rule { display: inline-flex; align-items: center; gap: 0.2rem; font: 600 0.74rem 'JetBrains Mono', monospace; padding: 0.15rem 0.2rem 0.15rem 0.5rem; border-radius: 6px; background: rgba(244, 63, 94, 0.08); color: #be123c; border: 1px solid rgba(244, 63, 94, 0.25); }
.evo-rule.ro { padding-right: 0.5rem; }
.evo-rule button { border: none; background: none; color: inherit; font-size: 0.9rem; line-height: 1; cursor: pointer; padding: 0 0.2rem; opacity: 0.7; }
.evo-rule button:hover { opacity: 1; }
.evo-train { display: flex; flex-direction: column; gap: 0.25rem; max-height: 11.5rem; overflow: auto; }
.evo-train-row { display: flex; align-items: center; gap: 0.4rem; }
.evo-train-t { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.evo-score { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.evo-score-card { border-radius: 12px; padding: 0.65rem 0.8rem; border: 1px solid; display: flex; flex-direction: column; gap: 0.2rem; }
.evo-score-card.rules { background: rgba(244, 63, 94, 0.05); border-color: rgba(244, 63, 94, 0.22); }
.evo-score-card.learned { background: rgba(16, 185, 129, 0.06); border-color: rgba(16, 185, 129, 0.3); }
.evo-score-k { display: flex; align-items: center; gap: 0.35rem; font: 700 0.74rem 'Outfit', sans-serif; color: var(--text-secondary); }
.evo-score-k svg { width: 14px; height: 14px; }
.evo-score-v { font: 700 1.35rem 'Outfit', sans-serif; color: var(--text-primary); }
.evo-score-v small { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.evo-meter { height: 7px; border-radius: 4px; background: rgba(15, 23, 42, 0.07); overflow: hidden; }
.evo-meter span { display: block; height: 100%; border-radius: 4px; transition: width 0.35s; }
.rules .evo-meter span { background: #f43f5e; }
.learned .evo-meter span { background: #10b981; }
.evo-score-s { font-size: 0.7rem; color: var(--text-muted); }
.evo-score-s b { color: var(--text-primary); }

.evo-table td { vertical-align: top; }
.evo-table td.evo-msgtxt { white-space: normal; text-align: left; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.76rem; min-width: 9rem; }
.evo-table td:nth-child(3), .evo-table td:nth-child(4), .evo-table td:nth-child(5) { text-align: left; }
.evo-table th:nth-child(2), .evo-table th:nth-child(3), .evo-table th:nth-child(4), .evo-table th:nth-child(5) { text-align: left; }
.evo-wchips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.3rem; }
.evo-wchip { display: inline-flex; flex-direction: column; align-items: center; font: 600 0.76rem 'JetBrains Mono', monospace; padding: 0.2rem 0.45rem; border-radius: 6px; background: rgba(148, 163, 184, var(--a)); color: #0f172a; }
.evo-wchip[data-sign="spam"] { background: rgba(245, 158, 11, var(--a)); }
.evo-wchip[data-sign="ham"] { background: rgba(2, 132, 199, var(--a)); }
.evo-wchip[data-sign="zero"] { background: rgba(15, 23, 42, 0.05); color: #94a3b8; }
.evo-wchip.rule { text-decoration: underline 2px #e11d48; text-underline-offset: 3px; }
.evo-wchip small { font-size: 0.58rem; color: #475569; }
.evo-knows { display: grid; grid-template-columns: 1fr 1.4fr; gap: 0.8rem; }
.evo-wbar { display: grid; grid-template-columns: 4.6rem 1fr 2.6rem; gap: 0.35rem; align-items: center; font: 0.72rem 'JetBrains Mono', monospace; margin-bottom: 2px; }
.evo-wbar-l { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #334155; }
.evo-wbar-t { height: 9px; background: rgba(15, 23, 42, 0.05); border-radius: 4px; overflow: hidden; }
.evo-wbar-t span { display: block; height: 100%; border-radius: 4px; }
.evo-wbar.spam .evo-wbar-t span { background: #f59e0b; }
.evo-wbar.ham .evo-wbar-t span { background: #0ea5e9; }
.evo-wbar-v { color: var(--text-muted); }

/* paradigms lab */
.evo-para-tabs .tfp-preset.active { background: color-mix(in srgb, var(--pc) 12%, #fff); border-color: var(--pc); color: var(--pc); }
.evo-para-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.35rem; }
.evo-para-info { display: flex; flex-direction: column; gap: 0.25rem; }
.evo-kv { display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.4rem; font-size: 0.78rem; }
.evo-kv span { color: var(--text-muted); }
.evo-kv b { color: var(--text-primary); font-weight: 600; }
.evo-seg-row { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.evo-cls { width: 2rem; height: 1.8rem; border-radius: 7px; border: 2px solid transparent; font: 800 0.8rem 'Outfit', sans-serif; cursor: pointer; opacity: 0.55; }
.evo-cls.A { background: rgba(6, 182, 212, 0.18); color: #0e7490; }
.evo-cls.B { background: rgba(245, 158, 11, 0.2); color: #b45309; }
.evo-cls.on { opacity: 1; border-color: currentColor; }
.evo-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--text-secondary); cursor: pointer; }
.evo-range { flex: 1 1 6rem; accent-color: #10b981; min-width: 5rem; }
.evo-rv { font: 700 0.8rem 'JetBrains Mono', monospace; min-width: 2.2rem; color: var(--text-primary); }
.evo-plot-wrap { display: flex; justify-content: center; }
.evo-plot { width: 100%; max-width: 330px; height: auto; cursor: crosshair; touch-action: manipulation; }
.evo-grid { width: 100%; max-width: 320px; height: auto; }
.evo-svg-ax { font: 9px 'JetBrains Mono', monospace; fill: #94a3b8; }
.evo-svg-hint { font: 12px 'Plus Jakarta Sans', sans-serif; fill: #94a3b8; }
.evo-g-lbl { font: 700 13px 'Outfit', sans-serif; fill: #047857; text-anchor: middle; }
.evo-g-lbl.pit { fill: #be123c; }
.evo-g-arrow { font: 700 17px 'Outfit', sans-serif; fill: #065f46; text-anchor: middle; }
.evo-g-v { font: 8.5px 'JetBrains Mono', monospace; fill: #475569; text-anchor: middle; }
.evo-g-s { font: 700 9px 'Outfit', sans-serif; fill: #0284c7; }
.evo-legend { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; justify-content: center; font-size: 0.7rem; color: var(--text-muted); margin-top: 0.4rem; }
.evo-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.evo-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.evo-legend i.sq { border-radius: 2px; }
.evo-legend i.x { border: 2px solid #475569; background: #fff; }
.evo-legend i.dash { width: 16px; height: 0; border-top: 2px dashed #0f172a; border-radius: 0; }
.evo-data { font-size: 0.72rem; }
.evo-hidden { color: #94a3b8; font-weight: 700; }
.evo-spark { width: 100%; height: auto; }
.evo-pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.45rem; vertical-align: 1px; }
.tfp-viz-head h3 { display: flex; align-items: center; }
.evo-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; }
.evo-glance-c { display: flex; flex-direction: column; gap: 0.2rem; text-align: left; padding: 0.5rem 0.6rem; border-radius: 9px; border: 1px solid var(--border-light); border-top: 3px solid var(--pc); background: #fff; cursor: pointer; font-family: 'Plus Jakarta Sans', sans-serif; }
.evo-glance-c b { font: 700 0.76rem 'Outfit', sans-serif; color: var(--pc); }
.evo-glance-c span { font-size: 0.66rem; color: var(--text-muted); line-height: 1.3; }
.evo-glance-c.on { background: color-mix(in srgb, var(--pc) 8%, #fff); box-shadow: 0 0 0 1px var(--pc); }
.evo-quiz-s { font-size: 0.82rem; line-height: 1.5; color: var(--text-primary); }
.evo-quiz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; margin-top: 0.4rem; }
.evo-quiz-opts .tfp-btn { justify-content: center; }
.evo-quiz-opts .tfp-btn.right { background: rgba(16, 185, 129, 0.15); border-color: #10b981; color: #047857; opacity: 1; }
.evo-quiz-opts .tfp-btn.wrong { background: rgba(244, 63, 94, 0.1); border-color: #f43f5e; color: #be123c; opacity: 1; }
.evo-quiz-fb { font-size: 0.78rem; line-height: 1.45; margin-top: 0.45rem; padding: 0.45rem 0.6rem; border-radius: 8px; }
.evo-quiz-fb.ok { background: rgba(16, 185, 129, 0.08); color: #065f46; }
.evo-quiz-fb.no { background: rgba(244, 63, 94, 0.07); color: #9f1239; }

/* static vs sequential lab */
.evo-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.evo-static .evo-inbox { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.evo-two .tfp-card-head h4 svg { width: 15px; height: 15px; color: var(--tfp-cyan-d); }
.evo-inbox { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.4rem; }
.evo-mail { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.3rem 0.5rem; border-radius: 7px; background: #f8fafc; border: 1px solid var(--border-light); }
.evo-mail-t { font-size: 0.74rem; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evo-corr { width: 100%; height: auto; }
.evo-c-r { font: 800 15px 'Outfit', sans-serif; text-anchor: middle; }
.evo-c-r.coin { fill: #b45309; }
.evo-c-r.gold { fill: #047857; }
.evo-c-sub { font: 9px 'Plus Jakarta Sans', sans-serif; fill: #94a3b8; text-anchor: middle; }
.evo-c-pol { font: 700 14px 'Outfit', sans-serif; fill: #0284c7; text-anchor: middle; }
.evo-c-v { font: 8.5px 'JetBrains Mono', monospace; fill: #64748b; text-anchor: middle; }
.evo-gchart { width: 100%; height: auto; }

@media (max-width: 640px) {
  .evo-score, .evo-knows { grid-template-columns: 1fr; }
  .evo-para-tabs, .evo-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- Text Features · language switch (English / Burmese) ---- */
.tfp-lang { display: inline-flex; padding: 2px; border-radius: 9px; background: rgba(15, 23, 42, 0.06); gap: 2px; }
.tfp-lang button { border: none; background: none; padding: 0.25rem 0.65rem; border-radius: 7px; font: 600 0.74rem 'Outfit', 'Noto Sans Myanmar', 'Myanmar Text', 'Myanmar Sangam MN', sans-serif; color: var(--text-secondary); cursor: pointer; }
.tfp-lang button.active { background: #ffffff; color: var(--tfp-cyan-d); box-shadow: var(--shadow-sm); }
.tfp-langnote { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.74rem; line-height: 1.45; color: #0e7490; background: var(--tfp-cyan-soft); border-radius: 8px; padding: 0.4rem 0.6rem; }
.tfp-langnote svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* Burmese text: Latin glyphs keep the site fonts, Myanmar glyphs fall back to Noto Sans Myanmar.
   Myanmar script stacks vowel signs above and below, so it needs taller lines. */
.tfp-my { --my-font: 'Noto Sans Myanmar', 'Myanmar Text', 'Myanmar Sangam MN', 'Padauk', sans-serif; }
.tfp-my .tfp-text, .tfp-my .tfp-src, .tfp-my .tfp-raw, .tfp-my .tfp-doc-in, .tfp-my .tfp-doc-own,
.tfp-my .tfp-msg, .tfp-my .tfp-p, .tfp-my .tfp-ct, .tfp-my .tfp-q { font-family: 'Plus Jakarta Sans', var(--my-font); }
.tfp-my .tfp-chip, .tfp-my .tfp-bar-lbl, .tfp-my .tfp-vword, .tfp-my .tfp-table, .tfp-my .tfp-select,
.tfp-my .tfp-mono, .tfp-my .tfp-formula, .tfp-my .tfp-calc-line { font-family: 'JetBrains Mono', var(--my-font); }
.tfp-my .tfp-text { line-height: 2; min-height: 6rem; }
.tfp-my .tfp-src { line-height: 2.35; }
.tfp-my .tfp-src.small { line-height: 2.15; }
.tfp-my .tfp-raw { line-height: 2.1; font-style: normal; }
.tfp-my .tfp-chip { padding: 0.2rem 0.5rem; line-height: 1.7; }
.tfp-my .tfp-bar-row { grid-template-columns: 7.5rem 1fr 1.8rem; }
.tfp-my .tfp-bar-lbl { line-height: 1.8; }
.tfp-my .tfp-cmp-head, .tfp-my .tfp-cmp-row { grid-template-columns: 7rem 1fr 1fr 2.4rem; }
.tfp-my .tfp-vcell { width: 4.4rem; }
.tfp-my .tfp-vec.compact .tfp-vcell { width: 3.8rem; }
.tfp-my .tfp-vword { font-size: 0.66rem; line-height: 1.7; }
.tfp-my .tfp-table td { line-height: 1.8; }
.tfp-my .tfp-doc-in { line-height: 1.8; }
@media (max-width: 640px) {
  .tfp-my .tfp-bar-row { grid-template-columns: 5.6rem 1fr 1.6rem; }
  .tfp-my .tfp-cmp-head, .tfp-my .tfp-cmp-row { grid-template-columns: 5.2rem 1fr 1fr 2rem; }
}

/* ==========================================================================
   Topic 06 · Tab 2 · Naive Bayes playground (demos/learning_demo/naive_bayes_lab.js)
   Class colours: spam amber · ham sky · positive emerald · negative rose.
   ========================================================================== */
.nb-viz { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.learning-page { --nb-spam: #f59e0b; --nb-ham: #0ea5e9; --nb-pos: #10b981; --nb-neg: #f43f5e; }
.nb-task { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.nb-task .tfp-btn { justify-content: center; }
.nb-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-alpha-quick { display: inline-flex; gap: 0.3rem; }
.nb-alpha-quick .tfp-btn { padding: 0.22rem 0.55rem; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; }
.tfp-calc-line.zero { background: rgba(244, 63, 94, 0.1); color: #9f1239; }
.nb-ctrl .tfp-calc-line { grid-template-columns: minmax(6.5rem, max-content) 1fr; }
.nb-side-c .tfp-lbl { text-transform: none; letter-spacing: 0; font-size: 0.72rem; }

.nb-lbl { display: inline-block; font: 700 0.64rem 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.22rem 0.5rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; flex-shrink: 0; min-width: 3.6rem; text-align: center; background: rgba(15, 23, 42, 0.05); color: #64748b; }
.nb-lbl.spam { background: rgba(245, 158, 11, 0.16); color: #b45309; border-color: rgba(245, 158, 11, 0.4); }
.nb-lbl.ham { background: rgba(14, 165, 233, 0.13); color: #0369a1; border-color: rgba(14, 165, 233, 0.35); }
.nb-lbl.pos { background: rgba(16, 185, 129, 0.14); color: #047857; border-color: rgba(16, 185, 129, 0.35); }
.nb-lbl.neg { background: rgba(244, 63, 94, 0.12); color: #be123c; border-color: rgba(244, 63, 94, 0.32); }
.nb-lbl.big { font-size: 0.95rem; padding: 0.3rem 0.85rem; cursor: default; }
.nb-lbl.none { background: rgba(15, 23, 42, 0.08); color: #475569; }
.nb-bg-spam { background: var(--nb-spam) !important; } .nb-bg-ham { background: var(--nb-ham) !important; }
.nb-bg-pos { background: var(--nb-pos) !important; } .nb-bg-neg { background: var(--nb-neg) !important; }
.nb-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.nb-dot.spam { background: var(--nb-spam); } .nb-dot.ham { background: var(--nb-ham); }
.nb-dot.pos { background: var(--nb-pos); } .nb-dot.neg { background: var(--nb-neg); }
.nb-dot.unk { background: #fff; border: 1.5px dashed #94a3b8; }

.nb-train { display: flex; flex-direction: column; gap: 0.25rem; max-height: 14rem; overflow: auto; }
.nb-train-row { display: flex; align-items: center; gap: 0.4rem; }
.nb-train-t { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nb-verdict { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.45rem; }
.nb-verdict-p { font: 800 1.5rem 'Outfit', sans-serif; color: var(--text-primary); }
.nb-split { display: flex; height: 22px; border-radius: 7px; overflow: hidden; background: rgba(15, 23, 42, 0.05); }
.nb-split.thin { height: 10px; margin: 0.25rem 0 0.35rem; }
.nb-split span { display: flex; align-items: center; justify-content: center; font: 700 0.66rem 'Outfit', sans-serif; color: #fff; white-space: nowrap; overflow: hidden; transition: width 0.35s ease; }
.nb-split .spam { background: var(--nb-spam); } .nb-split .ham { background: var(--nb-ham); }
.nb-split .pos { background: var(--nb-pos); } .nb-split .neg { background: var(--nb-neg); }
.nb-zero { color: #e11d48; }

.nb-w { cursor: pointer; border-radius: 4px; padding: 0.05rem 0.12rem; font-weight: 600; background: rgba(148, 163, 184, var(--a)); }
.nb-w.spam { background: rgba(245, 158, 11, var(--a)); color: #78350f; }
.nb-w.ham { background: rgba(14, 165, 233, var(--a)); color: #0c4a6e; }
.nb-w.pos { background: rgba(16, 185, 129, var(--a)); color: #064e3b; }
.nb-w.neg { background: rgba(244, 63, 94, var(--a)); color: #881337; }
.nb-w.neu { background: rgba(148, 163, 184, 0.2); }
.nb-w.unk { background: none; color: #94a3b8; font-weight: 400; border-bottom: 1.5px dashed #cbd5e1; border-radius: 0; }
.nb-w.sel { box-shadow: 0 0 0 2px #0f172a; }

.nb-table td { white-space: nowrap; }
.nb-table td.zero { color: #e11d48; font-weight: 800; background: rgba(244, 63, 94, 0.08); }
.nb-table td.fixed { color: #047857; font-weight: 700; background: rgba(16, 185, 129, 0.08); }
.nb-table tr.unk td { color: #94a3b8; }
.nb-table td.nb-skip { text-align: left; font-style: italic; }
.nb-table small { color: var(--text-muted); font-size: 0.62rem; }
.nb-table td.nb-div { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-end; }
.nb-div-h { text-align: center !important; }
.nb-div-track { position: relative; width: 7rem; height: 10px; background: rgba(15, 23, 42, 0.05); border-radius: 4px; flex-shrink: 0; }
.nb-div-bar { position: absolute; top: 0; height: 100%; border-radius: 3px; }
.nb-div-bar.spam { background: var(--nb-spam); } .nb-div-bar.ham { background: var(--nb-ham); }
.nb-div-bar.pos { background: var(--nb-pos); } .nb-div-bar.neg { background: var(--nb-neg); }
.nb-div-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: #475569; }
.nb-zt th { text-align: center !important; }

.nb-race-svg { width: 100%; height: auto; }
.nb-grid { stroke: #eef2f7; }
.nb-race { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.nb-race.spam { stroke: var(--nb-spam); } .nb-race.ham { stroke: var(--nb-ham); }
.nb-race.pos { stroke: var(--nb-pos); } .nb-race.neg { stroke: var(--nb-neg); }
.nb-race.dead { stroke-dasharray: 3 3; }
.nb-race-pt { stroke: #fff; stroke-width: 1.2; }
.nb-race-pt.spam { fill: var(--nb-spam); } .nb-race-pt.ham { fill: var(--nb-ham); }
.nb-race-pt.pos { fill: var(--nb-pos); } .nb-race-pt.neg { fill: var(--nb-neg); }
.nb-race-x { font: 700 9px 'JetBrains Mono', monospace; }
.nb-race-x.spam { fill: #b45309; } .nb-race-x.ham { fill: #0369a1; } .nb-race-x.pos { fill: #047857; } .nb-race-x.neg { fill: #be123c; }
.nb-race-lbl { font: 9px 'JetBrains Mono', 'Noto Sans Myanmar', 'Myanmar Text', 'Myanmar Sangam MN', monospace; fill: #475569; cursor: pointer; }
.nb-race-lbl.sel { fill: #0f172a; font-weight: 700; }

.nb-priors { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.nb-prior { display: flex; flex-direction: column; gap: 0.3rem; }
.nb-prior-h { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; font: 0.74rem 'JetBrains Mono', monospace; color: #334155; }
.nb-prior .evo-meter span { display: block; height: 100%; }

.nb-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.nb-side-c { border-radius: 12px; padding: 0.65rem 0.8rem; border: 1px solid var(--border-light); background: #fff; }
.nb-side-c.bad { background: rgba(244, 63, 94, 0.05); border-color: rgba(244, 63, 94, 0.3); }
.nb-side-c.good { background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.3); }
.nb-mass { display: grid; grid-template-columns: 5.4rem 1fr 3.2rem; gap: 0.5rem; align-items: center; margin-top: 0.3rem; }
.nb-mass-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: rgba(15, 23, 42, 0.05); }
.nb-mass-bar .seen { opacity: 0.75; }
.nb-mass-bar .unseen { background: repeating-linear-gradient(45deg, #94a3b8, #94a3b8 3px, #cbd5e1 3px, #cbd5e1 6px); }
.nb-mass-v { font: 700 0.74rem 'JetBrains Mono', monospace; color: var(--text-primary); text-align: right; }
.nb-mass-s { margin: 0.15rem 0 0.35rem; }
.nb-msg-warn { background: rgba(244, 63, 94, 0.06) !important; border-color: rgba(244, 63, 94, 0.3) !important; }
.nb-msg-warn .tfp-msg-tag { background: #f43f5e; }
.nb-steptrain { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.nb-ex { font-size: 0.76rem; color: var(--text-secondary); padding: 0.2rem 0.45rem; border-radius: 6px; background: #f8fafc; margin-bottom: 0.2rem; }

/* Burmese inside the NB lab */
.tfp-my .nb-train-t, .tfp-my .nb-ex, .tfp-my .nb-src, .tfp-my .evo-wbar-l, .tfp-my .nb-table td.t { font-family: 'Plus Jakarta Sans', var(--my-font); line-height: 1.9; }
.tfp-my .nb-table td.t { font-family: 'JetBrains Mono', var(--my-font); }
.tfp-my .evo-wbar { grid-template-columns: 6.5rem 1fr 2.6rem; }

@media (max-width: 640px) {
  .nb-presets, .nb-task { grid-template-columns: 1fr; }
  .nb-priors, .nb-side, .nb-steptrain { grid-template-columns: 1fr; }
  .nb-div-track { width: 4.5rem; }
}