html[data-accent="blue"] { --vz2-accent: #3b82f6; --vz2-accent-700: #2563eb; }
html[data-accent="emerald"] { --vz2-accent: #10b981; --vz2-accent-700: #047857; --vz2-chart-1: #34d399; }
html[data-accent="violet"] { --vz2-accent: #8b5cf6; --vz2-accent-700: #6d28d9; --vz2-chart-1: #a78bfa; }
html[data-accent="amber"] { --vz2-accent: #f59e0b; --vz2-accent-700: #b45309; --vz2-chart-1: #fbbf24; }
html[data-accent="cyan"] { --vz2-accent: #06b6d4; --vz2-accent-700: #0e7490; --vz2-chart-1: #22d3ee; }
html[data-contrast="high"] {
  --vz2-bg: #05070b;
  --vz2-card: #101827;
  --vz2-line: rgba(226,232,240,.42);
  --vz2-muted: #cbd5e1;
}
html[data-density="compact"] { --vz2-grid-gap: 10px; --vz2-control-h: 38px; }
html[data-density="comfortable"] { --vz2-grid-gap: 20px; --vz2-control-h: 48px; }
html[data-scale="large"] { font-size: 18px; }
.vz2-app-bg {
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--vz2-accent) 24%, transparent), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(34,211,238,.10), transparent 30%),
    var(--vz2-bg);
  color: var(--vz2-txt);
  color-scheme: dark;
}
.vz2-surface {
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), var(--vz2-card);
  border: 1px solid var(--vz2-border-1);
  border-radius: var(--vz2-radius);
  box-shadow: var(--vz2-shadow-1);
}
.vz2-surface[data-level="2"] { background-color: var(--vz2-surface-2); box-shadow: var(--vz2-shadow-2); }
.vz2-surface[data-level="3"] { background-color: var(--vz2-surface-3); box-shadow: var(--vz2-shadow-3); }
.vz2-sunken { background: rgba(0,0,0,.18); border: 1px inset var(--vz2-border-1); }
.vz2-raised { box-shadow: var(--vz2-shadow-2); border-color: var(--vz2-border-2); }
.vz2-hairline { position: relative; }
.vz2-hairline::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.vz2-swatch {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--vz2-border-2);
  background: var(--swatch, var(--vz2-accent));
  cursor: pointer;
}
.vz2-swatch:focus-visible, .vz2-focus :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--vz2-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--vz2-accent) 32%, transparent);
}
@media (forced-colors: active) {
  .vz2-surface, .vz2-btn, .vz2-chip { border: 1px solid CanvasText; }
}