.theme-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 40;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--theme-toggle-border, #3a4248);
  border-radius: 999px;
  background: var(--theme-toggle-bg, #2c3337);
  color: var(--theme-toggle-fg, #d3c6aa);
  font: 600 0.85rem/1 Arial, sans-serif;
  cursor: pointer;
  pointer-events: auto;
}

.theme-toggle:hover {
  border-color: var(--theme-toggle-accent, #a7c080);
}

.demo-title {
  position: fixed;
  top: 14px;
  left: 50%;
  z-index: 40;
  margin: 0;
  transform: translateX(-50%);
  padding: 0 7rem;
  max-width: min(72vw, 42rem);
  color: var(--theme-toggle-accent, #a7c080);
  font: 600 1.15rem/1.2 Arial, sans-serif;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 2px var(--theme-toggle-bg, #2c3337);
}

.theme-toggle:hover {
  border-color: var(--theme-toggle-accent, #a7c080);
}

html[data-theme="dark"] {
  --theme-toggle-bg: #2c3337;
  --theme-toggle-fg: #d3c6aa;
  --theme-toggle-border: #3a4248;
  --theme-toggle-accent: #a7c080;
}

html[data-theme="light"] {
  --theme-toggle-bg: #f4f0d9;
  --theme-toggle-fg: #5c6a72;
  --theme-toggle-border: #e6e2cc;
  --theme-toggle-accent: #8da101;
}

html[data-theme="dark"] .lil-gui {
  --background-color: #2c3337;
  --text-color: #d3c6aa;
  --title-background-color: #232a2e;
  --title-text-color: #d3c6aa;
  --widget-color: #3a4248;
  --hover-color: #454d53;
  --focus-color: #4f575e;
  --number-color: #7fbbb3;
  --string-color: #a7c080;
}

html[data-theme="light"] .lil-gui {
  --background-color: #efebd4;
  --text-color: #5c6a72;
  --title-background-color: #e6e2cc;
  --title-text-color: #5c6a72;
  --widget-color: #fdf6e3;
  --hover-color: #e6e2cc;
  --focus-color: #d8d4be;
  --number-color: #3a94c5;
  --string-color: #8da101;
}