/* Silver, softly lit controls. These rules do not resize or reposition UI. */
body .jelly-control {
  -webkit-tap-highlight-color: transparent;
}

body .jelly-control.jelly-surface:not(.jelly-primary):not(.danger):not(:disabled):not([aria-disabled="true"]):not([aria-pressed="true"]) {
  background-image: linear-gradient(180deg, rgb(255 255 255 / .035), transparent 75%);
  border-color: rgb(231 235 242 / .13);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .035), 0 2px 4px rgb(0 0 0 / .08);
}

body .jelly-control.jelly-primary:is(button, a, .button):not(:disabled):not([aria-disabled="true"]) {
  color: #22262d !important;
  border-color: #e1e5ec !important;
  border-radius: var(--jelly-radius, 12px);
  background: radial-gradient(ellipse at 50% -55%, rgb(255 255 255 / .95), transparent 65%),
    linear-gradient(180deg, #edf0f4 0%, #d9dee6 42%, #bec5d0 100%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .85), inset 0 -2px 1px rgb(93 105 123 / .17),
    0 3px 8px rgb(0 0 0 / .2), 0 0 0 1px rgb(255 255 255 / .025);
  text-shadow: 0 1px 0 rgb(255 255 255 / .38);
}

body .landing-button.jelly-control { --jelly-radius: 999px; border-radius: var(--jelly-radius); }

@media (hover: hover) and (pointer: fine) {
  body .jelly-control.jelly-primary:is(button, a, .button):hover:not(:disabled):not([aria-disabled="true"]) {
    background: radial-gradient(ellipse at 50% -40%, #fff, transparent 70%),
      linear-gradient(180deg, #f4f6f9 0%, #e5e9ef 45%, #cbd2dc 100%) !important;
    border-color: #f2f4f8 !important;
    box-shadow: inset 0 1px 0 #fff, inset 0 -2px 1px rgb(107 118 134 / .16),
      0 4px 16px rgb(0 0 0 / .22), 0 0 18px rgb(209 220 238 / .08);
  }
  body .jelly-control.jelly-surface:not(.jelly-primary):not(.danger):hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: rgb(233 238 247 / .24);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .065), 0 2px 8px rgb(0 0 0 / .12);
  }
}

body .jelly-control.jelly-pressed:not(:disabled):not([aria-disabled="true"]) {
  box-shadow: inset 0 1px 5px rgb(0 0 0 / .18), 0 0 0 2px rgb(216 226 242 / .08);
}
body .jelly-control.jelly-primary.jelly-pressed:is(button, a, .button):not(:disabled):not([aria-disabled="true"]) {
  box-shadow: inset 0 2px 5px rgb(64 75 91 / .2), inset 0 1px 0 rgb(255 255 255 / .55),
    0 1px 3px rgb(0 0 0 / .15);
}
body .jelly-control:focus-visible {
  outline: 2px solid #e0e6f0;
  outline-offset: 4px;
}
body .jelly-control:is(:disabled, [aria-disabled="true"]) {
  box-shadow: none !important;
  text-shadow: none;
}