/* ON / IN palette and fixed switch, adapted to the approved preview layout. */
:root[data-theme="in"] {
  --g1: #4b0d18;
  --g2: #5c1114;
  --g3: #6b2727;
  --g4: #c44545;
  --g5: #ff2929;
  --g1-rgb: 75, 13, 24;
  --g3-rgb: 107, 39, 39;
  --g5-rgb: 255, 41, 41;
  --dark: #400307;
  --dark-2: #490e12;
  --dark-3: #531c20;
  --dark-4: #5f2b2f;
  --dark-rgb: 64, 3, 7;
  --bg: var(--dark);
  --panel: var(--dark-3);
  --lime: var(--g5);
  --line: rgba(var(--g5-rgb), .16);
  --glow-sm: 0 0 16px rgba(var(--g5-rgb), .3);
  --glow-md: 0 0 32px rgba(var(--g5-rgb), .4);
  --glow-lg: 0 0 60px rgba(var(--g5-rgb), .35);
}

.hero-bg-on { background-image: url('/theme/green-nebula.jpg'); }
.hero-bg-in { background-image: url('/theme/red-nebula.jpg'); opacity: 0; }
.hero-bg-layer { transition: opacity 1.1s ease; }
html[data-theme="in"] .hero-bg-on { opacity: 0; }
html[data-theme="in"] .hero-bg-in { opacity: 1; }
html[data-theme="in"] .btn:hover { background: #ff5656; }
html[data-theme="in"] .research-note { border-left-color: var(--g4); }
html[data-theme="in"] .device:not(.red) { border-color: rgba(255, 255, 255, .08); }
html[data-theme="in"] .device.red { border-color: rgba(var(--g5-rgb), .4); box-shadow: var(--glow-sm); }

.theme-toggle-wrap {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(var(--dark-rgb), .82);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px #0007, var(--glow-sm);
}
.theme-toggle-label {
  padding: 0 10px;
  color: var(--text);
  font: 700 10px var(--sans);
  letter-spacing: .14em;
  transition: color .4s ease;
  user-select: none;
}
.theme-toggle-label.active-on,
html[data-theme="in"] .theme-toggle-label.active-in { color: var(--g5); }
html[data-theme="in"] .theme-toggle-label.active-on { color: var(--text); }
.theme-switch {
  position: relative;
  width: 56px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--dark-4);
  cursor: pointer;
}
.theme-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--g5);
  box-shadow: 0 0 10px rgba(var(--g5-rgb), .7), 0 2px 4px #0005;
  transition: transform .5s cubic-bezier(.65, 0, .35, 1), background-color .6s ease, box-shadow .6s ease;
}
html[data-theme="in"] .theme-switch-knob { transform: translateX(26px); }
.theme-toggle-teaser {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: rgba(var(--dark-rgb), .88);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px #0006;
  color: var(--text);
  font: italic 500 15px var(--serif);
  white-space: nowrap;
  cursor: pointer;
  animation: teaserBob 2.6s ease-in-out infinite;
}
.theme-toggle-teaser em { color: var(--g5); }
.theme-toggle-teaser:hover { border-color: rgba(var(--g5-rgb), .4); }
.theme-switch:focus-visible,
.theme-toggle-teaser:focus-visible { outline: 2px solid var(--g5); outline-offset: 4px; }
@keyframes teaserBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 720px) {
  .theme-toggle-wrap { right: 16px; bottom: 16px; }
  .theme-toggle-label { display: none; }
  .theme-toggle-teaser { padding: 7px 14px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-teaser { animation: none; }
  .hero-bg-layer, .theme-switch-knob { transition: none; }
}