/*
 * The production control is Porcelain in home-hero-split.css. Cloudflare adds
 * this attribute only for the measured Obsidian cohort. Geometry, menu colors
 * and interactions remain identical, so the experiment changes one variable.
 */
html[data-vk-hero-variant="obsidian"] .hero-demo .demo-window {
  background:
    radial-gradient(ellipse 66% 44% at var(--demo-light-x, 76%) var(--demo-light-y, 6%), rgba(105, 154, 218, 0.19), transparent 64%),
    radial-gradient(ellipse 58% 42% at 18% 7%, rgba(255, 255, 255, 0.095), transparent 64%),
    radial-gradient(ellipse 52% 64% at 82% 78%, rgba(20, 69, 118, 0.13), transparent 72%),
    linear-gradient(135deg, #1b1d21 0%, #101115 48%, #090a0c 100%);
  border-color: rgba(255, 255, 255, 0.52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 3px 12px rgba(6, 8, 12, 0.18),
    0 36px 88px rgba(18, 28, 43, 0.24),
    0 92px 170px rgba(13, 15, 20, 0.22);
}

html[data-vk-hero-variant="obsidian"] .hero-demo .demo-window::before {
  right: -12%;
  bottom: -24%;
  width: 74%;
  opacity: 0.76;
  background: rgba(10, 132, 255, 0.12);
}

html[data-vk-hero-variant="obsidian"] .hero-demo .demo-window::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 28px 44px rgba(255, 255, 255, 0.025);
}

html[data-vk-hero-variant="obsidian"] .demo-zone-hardware,
html[data-vk-hero-variant="obsidian"] .demo-zone-software {
  color: rgba(255, 255, 255, 0.34);
}

html[data-vk-hero-variant="obsidian"] .hero-demo .demo-context,
html[data-vk-hero-variant="obsidian"] .hero-demo .actual-ui-label {
  color: rgba(255, 255, 255, 0.94);
}

html[data-vk-hero-variant="obsidian"] .hero-demo .demo-context small,
html[data-vk-hero-variant="obsidian"] .hero-demo .actual-ui-label small {
  color: rgba(255, 255, 255, 0.44);
}

@media (max-width: 780px) {
  html[data-vk-hero-variant="obsidian"] .hero-demo .demo-window {
    background:
      radial-gradient(ellipse 82% 34% at var(--demo-light-x, 70%) var(--demo-light-y, -2%), rgba(105, 154, 218, 0.18), transparent 66%),
      radial-gradient(ellipse 70% 42% at 16% 4%, rgba(255, 255, 255, 0.08), transparent 68%),
      linear-gradient(145deg, #1b1d21 0%, #0a0b0e 100%);
  }
}