/* Raised cards and gradient controls inspired by the supplied UI reference. */
.soft-ui {
  --control: linear-gradient(120deg, #ffac70, #e57532 72%, #da6123);
  --lift: 12px 14px 28px #51331b19, -7px -7px 18px #ffffffb8;
}
body.soft-ui, .soft-ui section.tools {background: radial-gradient(ellipse at 10% 0%, #fae5d5, transparent 52%), #efede8}
.soft-ui .panel, .soft-ui .card, .soft-ui .box {
  border: 1px solid #fffc;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff, #f6f3ee);
  box-shadow: var(--lift);
}
.soft-ui .tool-guide {background: linear-gradient(115deg, #fff9f4, #fff0e2)}
.soft-ui button.primary, .soft-ui nav a[aria-current], .soft-ui .button, .soft-ui .box button {
  background: var(--control);
  border: 1px solid #a8441829;
  border-radius: 99px;
  box-shadow: 0 6px 16px #8f38032b;
  color: #272018;
}
.soft-ui nav a {border-radius: 99px; padding-inline: 18px}
.soft-ui .preview {
  border: 1px solid #d9cfc5;
  border-radius: 16px;
  background: #eeeae4;
  box-shadow: inset 2px 3px 8px #563d291a;
}
.soft-ui .panel input:not([type=checkbox]), .soft-ui .box input, .soft-ui .box select {
  background: #fffdfa;
  border-color: #b9aea3;
  border-radius: 12px;
}
.soft-ui .badge {
  background: #f8e2d2;
  color: #783a1d;
  padding: 6px 11px;
  border-radius: 99px;
}
.soft-ui .card a {padding-bottom: 2px; text-underline-offset: 4px}
.soft-ui .tool-guide h2 {font-size: 21px}
.soft-ui .tool-guide li {padding-inline-start: 4px}