/* Lantern live demo only: style switcher panel. Not included in the buyer's download. */
.demo-switch {
  position: fixed; left: 16px; bottom: 16px; z-index: 90; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #111827; color: #f3f4f6; border-radius: 14px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); width: 250px;
}
.demo-switch > button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.demo-switch .panel { padding: 0 14px 14px; display: grid; gap: 12px; }
.demo-switch[data-collapsed] .panel { display: none; }
.demo-switch .label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #9ca3af; margin-bottom: 6px; }
.demo-switch .seg { display: flex; border: 1px solid #374151; border-radius: 9px; overflow: hidden; }
.demo-switch .seg button { flex: 1; padding: 8px 6px; border: 0; background: none; color: #d1d5db; font: inherit; font-weight: 600; cursor: pointer; }
.demo-switch .seg button + button { border-left: 1px solid #374151; }
.demo-switch .seg button[aria-pressed="true"] { background: #f3f4f6; color: #111827; }
.demo-switch .swatches { display: flex; gap: 8px; }
.demo-switch .swatches button { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.demo-switch .swatches button[aria-pressed="true"] { border-color: #f3f4f6; box-shadow: 0 0 0 2px #111827 inset; }
.demo-switch a { color: #93c5fd; }
.demo-switch .hint { margin: 6px 0 0; font-size: 12px; color: #9ca3af; }
.demo-switch .note { margin: 0; padding-top: 10px; border-top: 1px solid #374151; font-size: 12.5px; color: #d1d5db; }
@media (max-width: 640px) { .demo-switch { bottom: 84px; left: 12px; width: 220px; } }