:root {
  --signature-pill-frame-gutter: 0.75rem;
  --signature-pill-frame-radius: 1.5rem;
  --signature-pill-paper: #f5efe7;
  --signature-pill-ink: #2b241f;
  --signature-pill-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

.signature-pill {
  --signature-pill-inline-inset: calc(
    var(--signature-pill-frame-gutter) + 0.75rem
  );
  position: fixed;
  z-index: 500;
  top: var(--signature-pill-inline-inset);
  left: 50%;
  display: flex;
  width: 4.25rem;
  height: 3.25rem;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 253, 249, 0.36);
  border-radius: var(--signature-pill-frame-radius);
  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 249, 0.19),
      rgba(255, 253, 249, 0.07)
    ),
    rgba(39, 31, 26, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0.75rem 2rem rgba(30, 22, 18, 0.18);
  -webkit-backdrop-filter: blur(22px) saturate(135%) contrast(1.04);
  backdrop-filter: blur(22px) saturate(135%) contrast(1.04);
  isolation: isolate;
  pointer-events: none;
  transform: translateX(-50%);
  transition:
    background 180ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 260ms ease;
}

.signature-pill::before {
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: inherit;
  background: radial-gradient(
    circle at 30% 4%,
    rgba(255, 255, 255, 0.28),
    transparent 48%
  );
  content: "";
  pointer-events: none;
}

.signature-pill__trigger {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.55rem;
  border: 0;
  color: #fffdf9;
  background: transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background 180ms ease,
    transform 180ms ease;
}

.signature-pill__trigger:active {
  transform: scale(0.98);
}

.signature-pill__mark {
  display: block;
  width: 1.9rem;
  height: auto;
}

.signature-pill__menu-label {
  display: none;
}

.signature-pill__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.signature-pill-dialog {
  --signature-pill-origin-x: 50%;
  --signature-pill-origin-y: 3rem;
  width: calc(100% - (2 * var(--signature-pill-frame-gutter)));
  max-width: none;
  height: calc(100% - (2 * var(--signature-pill-frame-gutter)));
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--signature-pill-frame-radius);
  margin: var(--signature-pill-frame-gutter) auto;
  color: var(--signature-pill-ink);
  background:
    radial-gradient(
      circle at var(--signature-pill-origin-x) var(--signature-pill-origin-y),
      rgba(255, 253, 249, 0.2),
      transparent 34%
    ),
    var(--signature-pill-paper);
  box-shadow: var(--signature-pill-shadow);
  clip-path: circle(
    0% at var(--signature-pill-origin-x) var(--signature-pill-origin-y)
  );
  isolation: isolate;
  pointer-events: auto;
}

.signature-pill-dialog[open] {
  display: block;
  min-height: calc(100dvh - (2 * var(--signature-pill-frame-gutter)));
  overflow: hidden;
}

.signature-pill-dialog::backdrop {
  background: rgba(30, 25, 22, 0);
}

.signature-pill-dialog.is-opening {
  animation: signature-pill-overlay-open 780ms
    cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.signature-pill-dialog.is-closing {
  animation: signature-pill-overlay-close 780ms
    cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
  pointer-events: none;
}

.signature-pill-dialog.is-opening::backdrop {
  animation: signature-pill-backdrop-open 480ms ease-out both;
}

.signature-pill-dialog.is-closing::backdrop {
  animation: signature-pill-backdrop-close 480ms ease-in both;
}

.signature-pill-dialog__surface {
  width: 100%;
  height: 100%;
  padding: 4.85rem max(1.25rem, env(safe-area-inset-right))
    max(1.5rem, env(safe-area-inset-bottom))
    max(1.25rem, env(safe-area-inset-left));
  overflow: auto;
  opacity: 0;
  transform: translateY(40px);
}

.signature-pill-dialog.is-opening .signature-pill-dialog__surface {
  animation: signature-pill-content-open 620ms
    cubic-bezier(0.25, 0.46, 0.45, 0.94) 180ms both;
}

.signature-pill-dialog.is-closing .signature-pill-dialog__surface {
  animation: signature-pill-content-close 420ms
    cubic-bezier(0.55, 0.06, 0.68, 0.19) both;
}

.signature-pill-menu-open {
  overflow: hidden;
}

@media (max-width: 47.99rem) and (orientation: portrait) {
  .signature-pill--page {
    height: 3.25rem;
    transform-origin: 50% 0;
    transition:
      height 640ms cubic-bezier(0.22, 1, 0.36, 1),
      border-radius 640ms cubic-bezier(0.22, 1, 0.36, 1),
      background 260ms ease;
  }

  .signature-pill--page .signature-pill__trigger {
    align-items: flex-start;
    padding-top: 0.55rem;
  }

  .signature-pill__menu-label {
    position: absolute;
    top: 3.55rem;
    left: 50%;
    display: block;
    color: rgba(255, 253, 249, 0.92);
    font-size: 0.58rem;
    font-weight: 560;
    letter-spacing: 0.09em;
    line-height: 1;
    opacity: 0;
    text-transform: uppercase;
    transform: translate(-50%, -0.45rem);
    transition:
      opacity 240ms ease,
      transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .signature-pill--page.is-menu-label-visible {
    height: 5.35rem;
    border-radius: 2rem;
    background:
      linear-gradient(
        145deg,
        rgba(255, 253, 249, 0.22),
        rgba(255, 253, 249, 0.08)
      ),
      rgba(39, 31, 26, 0.34);
  }

  .signature-pill--page.is-menu-label-visible .signature-pill__menu-label {
    opacity: 1;
    transform: translate(-50%, 0);
    transition-delay: 220ms;
  }
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .signature-pill {
    background: rgba(39, 31, 26, 0.82);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .signature-pill {
    background: rgba(39, 31, 26, 0.88);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signature-pill--page,
  .signature-pill__menu-label,
  .signature-pill-dialog,
  .signature-pill-dialog__surface {
    animation: none !important;
    transition: none !important;
  }

  .signature-pill-dialog {
    clip-path: none;
  }

  .signature-pill-dialog__surface {
    opacity: 1;
    transform: none;
  }
}

@keyframes signature-pill-overlay-open {
  from {
    clip-path: circle(
      0% at var(--signature-pill-origin-x) var(--signature-pill-origin-y)
    );
  }
  to {
    clip-path: circle(
      150% at var(--signature-pill-origin-x) var(--signature-pill-origin-y)
    );
  }
}

@keyframes signature-pill-overlay-close {
  from {
    clip-path: circle(
      150% at var(--signature-pill-origin-x) var(--signature-pill-origin-y)
    );
  }
  to {
    clip-path: circle(
      0% at var(--signature-pill-origin-x) var(--signature-pill-origin-y)
    );
  }
}

@keyframes signature-pill-content-open {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes signature-pill-content-close {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes signature-pill-backdrop-open {
  from {
    background: rgba(30, 25, 22, 0);
  }
  to {
    background: rgba(30, 25, 22, 0.42);
  }
}

@keyframes signature-pill-backdrop-close {
  from {
    background: rgba(30, 25, 22, 0.42);
  }
  to {
    background: rgba(30, 25, 22, 0);
  }
}