html[data-theme="light"] .beoe-dark {
  display: none;
}

html[data-theme="dark"] .beoe-light {
  display: none;
}

/* Smooth theme transitions */
html, body {
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

header {
  transition: background-color 0.3s ease-out, backdrop-filter 0.3s ease-out;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(8px);
}

[data-theme="dark"] header {
  background: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(8px);
}

/* Starlight component transitions */
nav, .sidebar, .main-frame, .content-panel {
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}

a, button {
  transition: color 0.3s ease-out, background-color 0.3s ease-out, border-color 0.3s ease-out;
}

.hero h1, .hero p, .hero .tagline {
  transition: color 0.3s ease-out;
}

[data-has-hero][data-theme="dark"] html,
[data-has-hero][data-theme="dark"] body {
  background-image: url('../assets/splash.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

[data-has-hero][data-theme="dark"] header {
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
}

[data-has-hero] footer .kudos {
  display: none;
}

[data-has-hero] .hero .tagline .xs {
  font-family: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono",
    "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
    "Courier New", monospace;
  font-style: italic;
}

/* Title styling */
[data-has-hero] .cross {
  color: #4a5568;
}

[data-has-hero][data-theme="dark"] .cross {
  color: #e2e8f0;
}

[data-has-hero] .dot {
  color: #4a5568;
}

[data-has-hero][data-theme="dark"] .dot {
  color: #cbd5e0;
}

[data-has-hero] .stream {
  color: #0284c7;
}

/* Top nav title styling - remove flex gap and use simpler approach */
.site-title {
  gap: 0 !important;
  display: inline !important;
  font-size: 0;
}

.site-title::before {
  content: "cross.";
  color: #4a5568;
  font-size: 1rem;
}

[data-theme="dark"] .site-title::before {
  color: #e2e8f0;
}

.site-title::after {
  content: "stream";
  color: #0284c7;
  font-size: 1rem;
}

/* Topic Suffixes table row highlighting */
.suffix-user {
  background-color: rgba(59, 130, 246, 0.08); /* Light blue for user-emitted */
}

.suffix-lifecycle {
  background-color: rgba(234, 179, 8, 0.08); /* Light yellow for system lifecycle */
}

.suffix-output {
  background-color: rgba(34, 197, 94, 0.08); /* Light green for system output */
}

[data-theme="dark"] .suffix-user {
  background-color: rgba(59, 130, 246, 0.15); /* Slightly stronger blue for dark mode */
}

[data-theme="dark"] .suffix-lifecycle {
  background-color: rgba(234, 179, 8, 0.15); /* Slightly stronger yellow for dark mode */
}

[data-theme="dark"] .suffix-output {
  background-color: rgba(34, 197, 94, 0.15); /* Slightly stronger green for dark mode */
}

/* Make topic suffixes tables use full width */
.sl-markdown-content table,
.content table,
.main-frame table,
article table {
  width: 100% !important;
  table-layout: auto !important;
  display: table !important;
  margin: 0 !important;
}

/* Force all tables to be full width */
table {
  width: 100% !important;
  max-width: none !important;
  min-width: 100% !important;
}

