/* DISPENSE IT! — Variant base. Layout primitives + reset only.
   Themes own all color, type, decoration. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #111;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
input { font: inherit; outline: 0; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Variant switcher — sticky reviewer bar above each variant page.
   Styled identically on all 10 so reviewers always have it. */
.variant-switcher {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 14px;
  background: #0b0b0c;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font: 600 12px/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.variant-switcher a {
  display: inline-flex; align-items: center;
  padding: 8px 12px;
  color: #d4d4d8;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.variant-switcher a:hover { background: rgba(255,255,255,.08); color: #fff; }
.variant-switcher__home {
  margin-right: 8px;
  background: rgba(212,160,23,.14);
  color: #f4d784 !important;
  border: 1px solid rgba(212,160,23,.35);
}
.variant-switcher__home:hover { background: rgba(212,160,23,.22) !important; }
body[data-v="v1"]  .variant-switcher a[data-v="v1"],
body[data-v="v2"]  .variant-switcher a[data-v="v2"],
body[data-v="v3"]  .variant-switcher a[data-v="v3"],
body[data-v="v4"]  .variant-switcher a[data-v="v4"],
body[data-v="v5"]  .variant-switcher a[data-v="v5"],
body[data-v="v6"]  .variant-switcher a[data-v="v6"],
body[data-v="v7"]  .variant-switcher a[data-v="v7"],
body[data-v="v8"]  .variant-switcher a[data-v="v8"],
body[data-v="v9"]  .variant-switcher a[data-v="v9"],
body[data-v="v10"] .variant-switcher a[data-v="v10"] {
  background: #fff;
  color: #0b0b0c !important;
}
.variant-switcher__name {
  margin-left: auto;
  padding-left: 16px;
  color: #888;
  font-weight: 500;
  letter-spacing: .12em;
}
@media (max-width: 700px) {
  .variant-switcher { padding: 6px 10px; font-size: 11px; }
  .variant-switcher a { padding: 7px 10px; }
  .variant-switcher__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}