/* Soft white molded controls with a faint single gray perimeter. UI only. */
.button-theme {
  --button-face: linear-gradient(145deg, #ffffff, #fafbfc);
  --button-raised: 3px 4px 10px #cdd2d65c, -3px -3px 9px #ffffff,
    inset 1px 1px 2px #ffffff;
}
.button-theme button {
  position: relative;
  isolation: isolate;
  min-height: 36px;
  border: 1px solid #e3e6e8;
  border-radius: 11px;
  background: var(--button-face);
  color: #626970;
  box-shadow: var(--button-raised);
  font-weight: 500;
  transition: background .14s, border-color .14s, box-shadow .14s;
  -webkit-tap-highlight-color: transparent;
}
.button-theme button:hover:not(:disabled) {
  background: linear-gradient(145deg, #ffffff, #f7f8f9);
  border-color: #cdd2d6;
}
.button-theme button.active,
.button-theme button[aria-pressed="true"],
.button-theme button.active:hover:not(:disabled),
.button-theme button[aria-pressed="true"]:hover:not(:disabled),
.button-theme button:active:not(:disabled) {
  background: linear-gradient(145deg, #f2f4f5, #fcfcfd);
  border-color: #bfc6cc;
  color: #515960;
  box-shadow: inset 2px 2px 5px #cdd2d65c, inset -2px -2px 5px #ffffff;
}
.button-theme button:focus-visible {
  outline: 2px solid #858e96;
  outline-offset: 3px;
}
.button-theme button:disabled {
  opacity: 1;
  background: #fafbfb;
  color: #959ca2;
  border-color: #edf0f1;
  box-shadow: none;
  cursor: default;
}
.button-theme button.primary {
  font-weight: 500;
}
.button-theme nav { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
.button-theme nav button { height: 44px; min-width: 0; }
.button-theme nav button.active { border-bottom: 1px solid #bfc6cc; }
.button-theme .pattern-grid { gap: 14px; }
.button-theme .pattern-grid button { border-radius: 17px; }
.button-theme .pattern-grid svg { color: #7d858c; }
.button-theme .pattern-grid button.active svg { color: #596269; }
.button-theme .presets { gap: 12px; padding: 3px 0; }
.button-theme .presets button { width: 46px; height: 46px; padding: 0; border-radius: 50%; }
.button-theme .directions { gap: 8px; }
.button-theme .directions button { min-height: 40px; }
.button-theme .text-button, .button-theme .help { padding: 8px 12px; }
.button-theme .help { letter-spacing: .7px; }
@media (max-width: 600px) {
  .button-theme nav { gap: 5px; }
  .button-theme nav button { padding-left: 5px; padding-right: 5px; }
  .button-theme .help { padding: 8px; font-size: 9px; }
  .button-theme footer button { border-radius: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .button-theme button { transition: none; }
}
@media (forced-colors: active) {
  .button-theme button { border: 1px solid ButtonText; box-shadow: none; }
  .button-theme button.active, .button-theme button[aria-pressed="true"] { outline: 2px solid Highlight; }
  .button-theme button:disabled { color: GrayText; border-color: GrayText; }
}