/* Surrounding controls only: the illustrated stage and pendulum stay intact. */
#app .pendulum-world {
  background: radial-gradient(ellipse at 0 0, #66346a66, transparent 58%), linear-gradient(125deg, #291139, #160b27);
  border-color: #bd8aaf;
  box-shadow: inset 0 1px 10px #e9b7dc20, 0 18px 50px #10051f66;
}
#app .pendulum-intro {
  background: radial-gradient(ellipse at 50% 0, #743c7740, transparent 75%), linear-gradient(125deg, #2e153f, #190b2c);
}
#app .pendulum-intro .eyebrow { color: #d8aceb; }
#app .pendulum-intro h1 { color: #ffe4ae; text-shadow: 0 2px 12px #c3936130; }
#app .pendulum-intro p { color: #e5d7ec; }
#app .pendulum-form-area label { color: #f4dba6; }
#app .pendulum-price-pill {
  background: linear-gradient(135deg, #57315e99, #30163f);
  border-color: #b88d74;
  color: #ffe2ab;
}
#app .pendulum-form-area textarea {
  background: #1b0e2de6;
  border-color: #aa75aa;
  color: #fff0fb;
  caret-color: #f5d68f;
}
#app .pendulum-form-area textarea::placeholder { color: #cdb9d8; opacity: 1; }
#app .pendulum-form-area textarea:focus-visible {
  border-color: #f2d294;
  outline-color: #e4bbf0;
  box-shadow: 0 0 16px #c47ed82b;
}
#app .pendulum-ask {
  background: linear-gradient(145deg, #9255ab, #613078 60%, #3b1b54);
  border-color: #efcb88;
  color: #fff0d0;
  box-shadow: 0 0 15px #dbab6c45, inset 0 1px 8px #efb6f32b;
}
#app .pendulum-ask:focus-visible { outline-color: #ffe2a4; }
#app .pendulum-small, #app .pendulum-footnote { color: #d0bcd9; }
#app .pendulum-message { border-color: #edca82; color: #f5debd; }
#app .pendulum-result {
  background: radial-gradient(at 50% 0, #74417c55, transparent 65%), linear-gradient(125deg, #31173f, #1b0c2c);
  border-color: #bd8aaf;
  box-shadow: inset 0 1px 10px #e9b7dc20, 0 0 18px #c7926b18;
}
#app .pendulum-result .eyebrow { color: #dbb5ef; }
#app .pendulum-result h2, #app .pendulum-result.oui h2, #app .pendulum-result.non h2 { color: #ffe1a2; }
#app .pendulum-result p { color: #e5d7ec; }
#app .pendulum-result .pendulum-result-question { color: #ffe9bf; }
#app .pendulum-result button.soft,
.pendulum-confirm > button,
.pendulum-confirm > button.soft {
  background: linear-gradient(145deg, #724283, #3c1b50);
  border: 1px solid #cfaa79;
  color: #ffe9bf;
  box-shadow: inset 0 1px 6px #ecc2f027;
}
.pendulum-confirm { color: #eee0f3; }
.pendulum-confirm h2, .pendulum-confirm-price { color: #ffe1a2; }
.pendulum-confirm-price span { color: #d7bddf; }
.pendulum-confirm > button:focus-visible { outline-color: #ffe2a4; }