/* Shared design tokens for Первое слово */
:root {
  --cow-blue: #4CB5C4;
  --cow-blue-deep: #2E8A99;
  --cow-blue-soft: #B8E0E6;
  --cow-blue-pale: #E8F4F6;
  --cow-yellow: #FDD43A;
  --cow-yellow-soft: #FFE77A;
  --cow-pink: #F8B8C8;
  --cow-pink-soft: #FCD9E2;
  --cow-ink: #1A1A1A;
  --cow-ink-soft: #4A4A4A;
  --cow-muted: #8C8C8C;
  --cow-line: #E8E6E2;
  --cow-cream: #FBF7F0;
  --cow-paper: #FFFFFF;

  --font-display: 'Unbounded', 'Manrope', sans-serif;
  --font-body: 'Manrope', 'Inter', sans-serif;
  --font-hand: 'Caveat', cursive;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { pointer-events: none; }
body {
  font-family: var(--font-body);
  color: var(--cow-ink);
  background: var(--cow-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.stage {
  width: 1440px;
  margin: 0 auto;
  background: var(--cow-paper);
  position: relative;
}

/* Reset buttons */
button { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; color: inherit; }

/* Variant switcher */
.switcher {
  position: fixed; top: 16px; right: 16px; z-index: 999;
  background: white; border: 1px solid var(--cow-line);
  border-radius: 999px; padding: 6px; display: flex; gap: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
.switcher button {
  padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--cow-ink-soft); letter-spacing: -0.01em;
}
.switcher button.active {
  background: var(--cow-ink); color: white;
}

/* Page sections */
.variant { display: none; }
.variant.active { display: block; }

/* Utility */
.container { max-width: 1280px; margin: 0 auto; padding: 0 80px; }

/* Tweaks panel */
.tweaks-panel {
  position: fixed; bottom: 16px; right: 16px; z-index: 998;
  background: white; border: 1px solid var(--cow-line);
  border-radius: 16px; padding: 16px; width: 260px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  font-size: 13px;
  display: none;
}
.tweaks-panel.open { display: block; }
.tweaks-panel h4 { margin: 0 0 12px; font-size: 14px; }
.tweaks-panel label { display: block; margin-bottom: 10px; }
.tweaks-panel input[type=color] { margin-left: 8px; vertical-align: middle; }