/* Step1 layout parameters readability and action emphasis. Uses stable slider data-ui anchors; no DOM script. */
:where(div):has([data-ui="ai-slider-tilt"]):has([data-ui="ai-slider-row-spacing"]) .text-\[10px\].text-muted-foreground {
  font-size: clamp(0.72rem, 0.58rem + 0.28vw, 0.84rem) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

:where(div):has([data-ui="ai-slider-tilt"]):has([data-ui="ai-slider-row-spacing"]) > div:first-child button.text-\[10px\] {
  font-size: clamp(0.7rem, 0.56rem + 0.24vw, 0.8rem) !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  padding: 0.34rem 0.62rem !important;
  border-radius: 0.55rem !important;
  border-width: 1px !important;
  box-shadow: 0 8px 18px rgba(124, 58, 237, 0.16) !important;
}

:where(div):has([data-ui="ai-slider-tilt"]):has([data-ui="ai-slider-row-spacing"]) > div:first-child button.text-\[10px\]:first-child {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.20), rgba(168, 85, 247, 0.20)) !important;
  color: rgb(126 34 206) !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
}

:where(.dark) :where(div):has([data-ui="ai-slider-tilt"]):has([data-ui="ai-slider-row-spacing"]) > div:first-child button.text-\[10px\]:first-child {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.24), rgba(168, 85, 247, 0.28)) !important;
  color: rgb(233 213 255) !important;
  border-color: rgba(192, 132, 252, 0.55) !important;
}

:where(div):has([data-ui="ai-slider-tilt"]):has([data-ui="ai-slider-row-spacing"]) > div:first-child button.text-\[10px\]:last-child {
  background: rgba(147, 51, 234, 0.12) !important;
  color: rgb(126 34 206) !important;
  border-color: rgba(147, 51, 234, 0.38) !important;
}

:where(.dark) :where(div):has([data-ui="ai-slider-tilt"]):has([data-ui="ai-slider-row-spacing"]) > div:first-child button.text-\[10px\]:last-child {
  background: rgba(147, 51, 234, 0.24) !important;
  color: rgb(233 213 255) !important;
  border-color: rgba(192, 132, 252, 0.50) !important;
}

@media (max-width: 640px) {
  :where(div):has([data-ui="ai-slider-tilt"]):has([data-ui="ai-slider-row-spacing"]) .text-\[10px\].text-muted-foreground {
    font-size: 0.76rem !important;
  }
  :where(div):has([data-ui="ai-slider-tilt"]):has([data-ui="ai-slider-row-spacing"]) > div:first-child {
    gap: 0.5rem !important;
  }
}