/* Shared floating variant switcher — deliberately neutral, sits outside
   each page's own design system so it reads consistently on every variant. */
body { padding-bottom: 120px; }

.variant-switch {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(18, 18, 22, 0.55);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  scrollbar-width: none;
}
.variant-switch::-webkit-scrollbar { display: none; }

.variant-switch a {
  flex: 0 0 auto;
  padding: 8px 15px;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.variant-switch a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
}
.variant-switch a.is-active {
  background: rgba(255, 255, 255, 0.94);
  color: #0a0a0c;
  font-weight: 600;
}

@media (max-width: 480px) {
  .variant-switch { bottom: 14px; padding: 4px; }
  .variant-switch a { padding: 7px 12px; font-size: 11.5px; }
}