/* Shared styles for all three variants */
:root {
  --ink: #14110d;
  --ink-2: #2a261f;
  --muted: #6b6357;
  --line: rgba(20, 17, 13, 0.12);
  --line-2: rgba(20, 17, 13, 0.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.ao-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}
.ao-btn:hover { transform: translateY(-1px); }

.ao-lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  font-size: 12px;
  font-weight: 500;
}
.ao-lang button {
  border: 0; background: transparent;
  padding: 5px 12px; border-radius: 999px;
  cursor: pointer; font: inherit; color: var(--muted);
  transition: all 0.2s;
}
.ao-lang button.active { background: var(--ink); color: #fff; }

/* Tweaks panel */
.tweaks-panel {
  position: fixed; right: 16px; bottom: 16px;
  width: 280px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15);
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: 13px;
  display: none;
}
.tweaks-panel.open { display: block; }
.tweaks-panel h4 {
  margin: 0 0 12px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #888;
}
.tweaks-panel .row { margin-bottom: 12px; }
.tweaks-panel label {
  display: block; font-size: 11px; font-weight: 500;
  color: #555; margin-bottom: 6px;
}
.tweaks-panel .swatches {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tweaks-panel .swatch {
  width: 24px; height: 24px; border-radius: 50%;
  cursor: pointer; border: 2px solid transparent;
  transition: transform 0.15s;
}
.tweaks-panel .swatch:hover { transform: scale(1.1); }
.tweaks-panel .swatch.active { border-color: #000; }
.tweaks-panel select, .tweaks-panel input[type=range] {
  width: 100%; font: inherit;
}