/* The jelly button: a block of strawberry jelly on a white page. The jelly, its shine, the words inside it and the
   light it throws on the table are drawn by the script on a canvas larger than the button, so it has room to jump
   and wobble; the button itself is transparent and lies over the jelly at rest.
   For mint jelly: --jelly-top #9ff5d6, --jelly #37d6a3, --jelly-deep #0f9c76, --jelly-glow #d6fff0, --jelly-ink #ffffff,
   --jelly-shade #045c45. */
:root {
  --page: #ffffff;          /* the page: the table the jelly stands on */
  --text: #2a1d22;          /* the ring of the keyboard focus */
  --muted: #8d8187;         /* the line under the button */
  --jelly-top: #ff8aa2;     /* the jelly at the top, where the light comes in */
  --jelly: #f43a62;         /* the jelly in the middle */
  --jelly-deep: #c2103e;    /* the jelly where it is thickest, near the bottom */
  --jelly-glow: #ffd3dc;    /* the light caught inside the jelly, and on the table */
  --jelly-ink: #fff6f8;     /* the words inside the jelly */
  --jelly-shade: #7a0526;   /* the darkest edge, and the shadow under the jelly */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--text);
  font-family: 'Fredoka Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 96px 16px 72px;
}

.jelly {
  display: grid;
  justify-items: center;
  gap: 54px;
}

/* ---------------------------------------------------------------- the jelly and the button */
/* the pot is the size of the jelly at rest; the canvas spills round it */
.jelly__pot {
  position: relative;
  width: 300px;
  height: 96px;
}

.jelly__canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.jelly__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 44px;
  background: transparent;
  color: transparent;
  font: inherit;
  cursor: pointer;
  /* the finger pulls the jelly instead of scrolling the page */
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* the ring of the focus is drawn round the jelly itself, by the script */
.jelly__btn:focus-visible {
  outline: none;
}

.jelly__btn[aria-disabled='true'] {
  cursor: progress;
}

.jelly__hint {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 450;
  letter-spacing: 0.01em;
  text-align: center;
}

.jelly__hint span {
  display: inline-block;
}