.demo-container {
  --demo-bg: #ffffff;
  --demo-text: #333333;
  --demo-primary: #3498db;
  --demo-secondary: #f8f9fa;
  --demo-border: #e2e8f0;
  
  background-color: var(--demo-bg);
  color: var(--demo-text);
  border: 1px solid var(--demo-border);
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  font-family: Arial, sans-serif;
}

.demo-container.dark-theme {
  --demo-bg: #2d3748;
  --demo-text: #e2e8f0;
  --demo-primary: #4fd1c7;
  --demo-secondary: #4a5568;
  --demo-border: #4a5568;
}

.demo-button {
  background-color: var(--demo-primary);
  color: var(--demo-bg);
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  margin: 5px;
  transition: all 0.3s ease;
}

.demo-button:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

.demo-card {
  background-color: var(--demo-secondary);
  border: 1px solid var(--demo-border);
  border-radius: 6px;
  padding: 15px;
  margin: 15px 0;
}