.btn-pushable-3d {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  transition: filter 0.25s ease;
}
.btn-pushable-3d-shadow,
.btn-pushable-3d-edge {
  position: absolute;
  inset: 0;
  border-radius: 0.75em;
}
.btn-pushable-3d-shadow {
  background: color-mix(in srgb, #000 22%, transparent);
  filter: blur(0.2em);
  transform: translateY(0.15em);
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.btn-pushable-3d-edge {
  background: linear-gradient(to left,
    color-mix(in srgb, var(--c) 45%, #000) 0%,
    color-mix(in srgb, var(--c) 65%, #000) 8%,
    color-mix(in srgb, var(--c) 65%, #000) 92%,
    color-mix(in srgb, var(--c) 45%, #000) 100%);
}
.btn-pushable-3d-front {
  position: relative;
  display: block;
  padding: 0.75em 2em;
  border-radius: 0.75em;
  background: var(--c);
  color: #fff;
  transform: translateY(-0.3em);
  transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.btn-pushable-3d:is(:hover, :focus-visible) { filter: brightness(1.1); }
.btn-pushable-3d:is(:hover, :focus-visible) .btn-pushable-3d-front {
  transform: translateY(-0.5em);
  transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.btn-pushable-3d:is(:hover, :focus-visible) .btn-pushable-3d-shadow {
  transform: translateY(0.3em);
  transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.btn-pushable-3d:active .btn-pushable-3d-front {
  transform: translateY(-0.1em);
  transition: transform 34ms;
}
.btn-pushable-3d:active .btn-pushable-3d-shadow {
  transform: translateY(0.05em);
  transition: transform 34ms;
}

.btn-neumorphic {
  --c: var(--btn-color, #3b82f6);
  --surface: color-mix(in srgb, var(--c) 6%, #e3e7ee);
  --low: color-mix(in srgb, var(--c) 14%, #a4aec0);
  font-size: var(--btn-size, 18px);
  display: inline-grid;
  place-items: center;
  padding: 1.8em 3em;
  border-radius: 1.25em;
  background: var(--surface);
}
.btn-neumorphic-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.85em 1.8em;
  border: 0;
  border-radius: 0.9em;
  background: var(--surface);
  color: color-mix(in srgb, var(--c) 35%, #5b6475);
  font: 600 1em/1.2 system-ui, sans-serif;
  cursor: pointer;
  box-shadow:
    0.4em 0.4em 0.8em var(--low),
    -0.4em -0.4em 0.8em #fff,
    inset 0 0 0 transparent,
    inset 0 0 0 transparent;
  transition: box-shadow 0.3s ease, color 0.3s ease;
}
.btn-neumorphic-btn svg {
  width: 1em;
  height: 1em;
  transition: transform 0.3s ease;
}
.btn-neumorphic-btn:is(:hover, :focus-visible) {
  color: var(--c);
  box-shadow:
    0 0 0 transparent,
    0 0 0 transparent,
    inset 0.25em 0.25em 0.5em var(--low),
    inset -0.25em -0.25em 0.5em #fff;
}
.btn-neumorphic-btn:is(:hover, :focus-visible) svg { transform: scale(0.9); }

.btn-brutalist {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  padding: 0.75em 1.5em;
  border: 2px solid currentColor;
  border-radius: 0.35em;
  background: var(--c);
  color: inherit;
  box-shadow: 0.3em 0.3em 0 currentColor;
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;}
.btn-brutalist-label {
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.btn-brutalist:is(:hover, :focus-visible) {
  transform: translate(0.3em, 0.3em);
  box-shadow: 0 0 0 currentColor;
}

@property --btn-gradient-border-spin-a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
.btn-gradient-border-spin {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  isolation: isolate;
  padding: 2px;
  border: 0;
  border-radius: 0.7em;
  background: transparent;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.btn-gradient-border-spin::before,
.btn-gradient-border-spin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--btn-gradient-border-spin-a),
    var(--c),
    color-mix(in srgb, var(--c) 35%, #ec4899),
    color-mix(in srgb, var(--c) 35%, #facc15),
    color-mix(in srgb, var(--c) 35%, #22d3ee),
    var(--c));
}
.btn-gradient-border-spin::before {
  filter: blur(0.7em);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.btn-gradient-border-spin-face {
  display: block;
  padding: 0.75em 1.6em;
  border-radius: calc(0.7em - 2px);
  background: color-mix(in srgb, var(--c) 12%, #0b0e14);
  color: #fff;
}
.btn-gradient-border-spin:is(:hover, :focus-visible) {
  animation: btn-gradient-border-spin-turn 2.4s linear infinite;
}
.btn-gradient-border-spin:is(:hover, :focus-visible)::before { opacity: 0.75; }
@keyframes btn-gradient-border-spin-turn {
  to { --btn-gradient-border-spin-a: 360deg; }
}

.btn-glassmorphism {
  --c: var(--btn-color, #3b82f6);
  font-size: var(--btn-size, 18px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-grid;
  place-items: center;
  width: 17em;
  height: 8em;
  border-radius: 1.1em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #0f172a), color-mix(in srgb, var(--c) 30%, #1e1b4b));
}
.btn-glassmorphism-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-glassmorphism-orb:nth-child(1) {
  left: 2.8em;
  top: 0.5em;
  width: 5em;
  height: 5em;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--c) 55%, #fff), var(--c));
}
.btn-glassmorphism-orb:nth-child(2) {
  right: 2.8em;
  bottom: 0.4em;
  width: 4em;
  height: 4em;
  background: radial-gradient(circle at 35% 35%, #fde68a, color-mix(in srgb, var(--c) 30%, #ec4899));
}
.btn-glassmorphism-btn {
  padding: 0.85em 1.9em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.8em;
  background-color: rgba(255, 255, 255, 0.08);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.04));
  -webkit-backdrop-filter: blur(0.6em);
  backdrop-filter: blur(0.6em);
  box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #fff;
  text-shadow: 0 0.05em 0.4em rgba(15, 23, 42, 0.5);
  font: 600 1em/1.2 system-ui, sans-serif;
  cursor: pointer;
  transition: transform 0.35s ease, background-color 0.35s ease, border-color 0.35s ease;
}
.btn-glassmorphism:is(:hover, :focus-within) .btn-glassmorphism-btn {
  transform: translateY(-0.15em);
  border-color: rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.18);
}
.btn-glassmorphism:is(:hover, :focus-within) .btn-glassmorphism-orb:nth-child(1) {
  transform: translate(1.7em, 0.7em) scale(1.08);
}
.btn-glassmorphism:is(:hover, :focus-within) .btn-glassmorphism-orb:nth-child(2) {
  transform: translate(-1.9em, -0.8em);
}

.btn-circle-arrow-expand {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  width: 11.5em;
  height: 3em;
  padding: 0;
  border: 0;
  background: transparent;}
.btn-circle-arrow-expand-circle {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3em;
  border-radius: 1.5em;
  background: var(--c);
  transition: width 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.btn-circle-arrow-expand-circle svg {
  position: absolute;
  top: 50%;
  left: 0.8em;
  width: 1.4em;
  height: 1.4em;
  margin-top: -0.7em;
  color: #fff;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.btn-circle-arrow-expand-label {
  position: relative;
  flex: 1;
  padding-left: 2.6em;
  color: var(--c);
  text-align: center;
  transition: color 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.btn-circle-arrow-expand:is(:hover, :focus-visible) .btn-circle-arrow-expand-circle { width: 100%; }
.btn-circle-arrow-expand:is(:hover, :focus-visible) .btn-circle-arrow-expand-circle svg { transform: translateX(0.45em); }
.btn-circle-arrow-expand:is(:hover, :focus-visible) .btn-circle-arrow-expand-label { color: #fff; }

.btn-icon-slide-in {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0.75em 1.8em;
  border: 0;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  transition: background-color 0.3s ease;}
.btn-icon-slide-in-icon {
  position: absolute;
  top: 50%;
  left: 0.9em;
  width: 1.2em;
  height: 1.2em;
  margin-top: -0.6em;
  transform: translateX(-2.4em);
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.btn-icon-slide-in-label {
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.btn-icon-slide-in:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 85%, #000); }
.btn-icon-slide-in:is(:hover, :focus-visible) .btn-icon-slide-in-icon { transform: translateX(0); }
.btn-icon-slide-in:is(:hover, :focus-visible) .btn-icon-slide-in-label { transform: translateX(0.8em); }

.btn-jelly {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  padding: 0.8em 2em;
  border: 0;
  border-radius: 0.9em;
  background: var(--c);
  color: #fff;
  transition: background-color 0.3s ease;}
.btn-jelly:is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--c) 82%, #fff);
  animation: btn-jelly-wobble 0.9s both;
}
@keyframes btn-jelly-wobble {
  0%, 100% { transform: scale(1, 1); }
  25%      { transform: scale(1.22, 0.78); }
  40%      { transform: scale(0.8, 1.2); }
  55%      { transform: scale(1.12, 0.88); }
  70%      { transform: scale(0.95, 1.05); }
  85%      { transform: scale(1.03, 0.97); }
}

.btn-marching-ants {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  padding: 0.8em 1.7em;
  border: 0;
  border-radius: 0;
  color: var(--c);
  background-color: transparent;
  background-image:
    linear-gradient(90deg, var(--c) 50%, transparent 0),
    linear-gradient(90deg, var(--c) 50%, transparent 0),
    linear-gradient(0deg, var(--c) 50%, transparent 0),
    linear-gradient(0deg, var(--c) 50%, transparent 0);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 0.8em 2px, 0.8em 2px, 2px 0.8em, 2px 0.8em;
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  transition: background-color 0.3s ease;}
.btn-marching-ants:is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--c) 10%, transparent);
  animation: btn-marching-ants-march 0.5s linear infinite;
}
@keyframes btn-marching-ants-march {
  to { background-position: 0.8em 0, -0.8em 100%, 0 -0.8em, 100% 0.8em; }
}

.btn-corner-brackets {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  padding: 0.85em 1.8em;
  border: 0;
  border-radius: 0.2em;
  background-color: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--c);
  transition: background-color 0.3s ease;}
.btn-corner-brackets::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--c) 0 0) top left / 0.75em 2px,
    linear-gradient(var(--c) 0 0) top left / 2px 0.75em,
    linear-gradient(var(--c) 0 0) top right / 0.75em 2px,
    linear-gradient(var(--c) 0 0) top right / 2px 0.75em,
    linear-gradient(var(--c) 0 0) bottom left / 0.75em 2px,
    linear-gradient(var(--c) 0 0) bottom left / 2px 0.75em,
    linear-gradient(var(--c) 0 0) bottom right / 0.75em 2px,
    linear-gradient(var(--c) 0 0) bottom right / 2px 0.75em;
  background-repeat: no-repeat;
  pointer-events: none;
  transition: inset 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-corner-brackets:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 16%, transparent); }
.btn-corner-brackets:is(:hover, :focus-visible)::before { inset: -0.45em -0.6em; }

.btn-double-border-split {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  --c2: color-mix(in srgb, var(--c) 45%, #d946ef);
  position: relative;
  padding: 0.8em 1.8em;
  border: 0;
  border-radius: 0.4em;
  background: transparent;
  color: var(--c);}
.btn-double-border-split::before,
.btn-double-border-split::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--c2);
  border-radius: inherit;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-double-border-split::after { border-color: var(--c); }
.btn-double-border-split:is(:hover, :focus-visible)::before { transform: translate(0.3em, 0.3em); }
.btn-double-border-split:is(:hover, :focus-visible)::after { transform: translate(-0.3em, -0.3em); }

.btn-gradient-shadow {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  padding: 0.8em 1.8em;
  border: 0;
  border-radius: 0.7em;
  background: transparent;
  color: #fff;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);}
.btn-gradient-shadow::before,
.btn-gradient-shadow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #d946ef), color-mix(in srgb, var(--c) 30%, #f43f5e));
}
.btn-gradient-shadow::before {
  filter: blur(0.8em);
  opacity: 0.45;
  transform: translateY(0.3em) scale(0.85, 0.7);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.btn-gradient-shadow:is(:hover, :focus-visible) { transform: translateY(-0.2em); }
.btn-gradient-shadow:is(:hover, :focus-visible)::before {
  opacity: 0.85;
  transform: translateY(0.75em) scale(0.95, 0.9);
}

.btn-breathing-glow {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  padding: 0.8em 1.8em;
  border: 0;
  border-radius: 2em;
  background: transparent;
  color: #fff;}
.btn-breathing-glow::before,
.btn-breathing-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c);
}
.btn-breathing-glow::before {
  filter: blur(0.9em);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.btn-breathing-glow:is(:hover, :focus-visible)::before {
  animation:
    btn-breathing-glow-in 0.5s ease-out both,
    btn-breathing-glow-breathe 2.6s ease-in-out 0.5s infinite;
}
@keyframes btn-breathing-glow-in {
  to { opacity: 0.55; transform: scale(1); }
}
@keyframes btn-breathing-glow-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.15, 1.35); }
}

.btn-gradient-outline {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  --g: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #d946ef), color-mix(in srgb, var(--c) 30%, #f43f5e), color-mix(in srgb, var(--c) 45%, #d946ef), var(--c));
  position: relative;
  padding: 0.8em 1.8em;
  border: 0;
  border-radius: 0.6em;
  background-color: transparent;
  transition: background-color 0.3s ease;}
.btn-gradient-outline::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: var(--g) 0 0 / 200% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.btn-gradient-outline-label {
  background: var(--g) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.btn-gradient-outline:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 8%, transparent); }
.btn-gradient-outline:is(:hover, :focus-visible)::before,
.btn-gradient-outline:is(:hover, :focus-visible) .btn-gradient-outline-label {
  animation: btn-gradient-outline-flow 2.4s linear infinite;
}
@keyframes btn-gradient-outline-flow {
  to { background-position: 200% 0; }
}

.btn-hard-shadow {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  padding: 0.75em 1.7em;
  border: 2px solid var(--c);
  border-radius: 0.4em;
  background-color: transparent;
  color: var(--c);
  box-shadow: 0 0 0 var(--c);
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.3s ease;}
.btn-hard-shadow:is(:hover, :focus-visible) {
  transform: translate(-0.25em, -0.25em);
  background-color: color-mix(in srgb, var(--c) 10%, transparent);
  box-shadow: 0.3em 0.3em 0 var(--c);
}
.btn-hard-shadow:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 var(--c);
  transition-duration: 0.08s;
}

.btn-pixel-8bit {
  --c: var(--btn-color, #3b82f6);
  --px: 0.25em;
  --ink: color-mix(in srgb, var(--c) 35%, #000);
  position: relative;
  padding: 0.75em 1.25em;
  border: 0;
  border-radius: 0;
  background-color: var(--c);
  color: #fff;
  font: 700 var(--btn-size, 18px)/1 ui-monospace, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow:
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 color-mix(in srgb, var(--c) 70%, #000),
    inset var(--px) var(--px) 0 color-mix(in srgb, var(--c) 60%, #fff),
    0 calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink),
    var(--px) 0 0 0 var(--ink);
  transition: transform 0.16s steps(2), background-color 0.16s steps(2);
}
.btn-pixel-8bit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -1.7em;
  width: 0.8em;
  height: 1.4em;
  margin-top: -0.7em;
  background: var(--c);
  clip-path: polygon(0 0, 25% 0, 25% 14.29%, 50% 14.29%, 50% 28.57%, 75% 28.57%, 75% 42.86%, 100% 42.86%, 100% 57.14%, 75% 57.14%, 75% 71.43%, 50% 71.43%, 50% 85.71%, 25% 85.71%, 25% 100%, 0 100%);
  opacity: 0;
}
.btn-pixel-8bit:is(:hover, :focus-visible) {
  transform: translateY(calc(var(--px) * -1));
  background-color: color-mix(in srgb, var(--c) 85%, #fff);
}
.btn-pixel-8bit:is(:hover, :focus-visible)::before {
  animation: btn-pixel-8bit-blink 1s steps(1, end) infinite;
}
.btn-pixel-8bit:active {
  transform: translateY(var(--px));
  box-shadow:
    inset var(--px) var(--px) 0 color-mix(in srgb, var(--c) 70%, #000),
    inset 0 0 0 transparent,
    0 calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink),
    var(--px) 0 0 0 var(--ink);
}
@keyframes btn-pixel-8bit-blink {
  0%        { opacity: 1; }
  60%, 100% { opacity: 0; }
}

.btn-sparkle {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  padding: 0.8em 1.7em;
  border: 0;
  border-radius: 2em;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 45%, #d946ef));
  color: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;}
.btn-sparkle-icon {
  width: 1.1em;
  height: 1.1em;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-sparkle-star {
  position: absolute;
  width: 1.3em;
  height: 1.3em;
  background: color-mix(in srgb, var(--c) 15%, #fbbf24);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  transform: scale(0);
  pointer-events: none;
}
.btn-sparkle-star:nth-child(1) { top: -1.1em; left: 0.5em; }
.btn-sparkle-star:nth-child(2) { top: -0.85em; right: 0; width: 0.85em; height: 0.85em; background: var(--c); }
.btn-sparkle-star:nth-child(3) { bottom: -1.15em; right: 1.2em; }
.btn-sparkle-star:nth-child(4) { bottom: -0.55em; left: -0.8em; width: 0.85em; height: 0.85em; background: var(--c); }
.btn-sparkle:is(:hover, :focus-visible) {
  transform: translateY(-0.1em);
  box-shadow: 0 0.4em 1.2em color-mix(in srgb, var(--c) 40%, transparent);
}
.btn-sparkle:is(:hover, :focus-visible) .btn-sparkle-icon { transform: rotate(90deg) scale(1.2); }
.btn-sparkle:is(:hover, :focus-visible) .btn-sparkle-star {
  animation: btn-sparkle-twinkle 1.2s ease-in-out calc(var(--i) * 0.3s) infinite;
}
@keyframes btn-sparkle-twinkle {
  0%, 100% { transform: scale(0) rotate(0deg); }
  35%      { transform: scale(1) rotate(45deg); }
  65%      { transform: scale(0.85) rotate(90deg); }
}

.btn-cyberpunk-glitch {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  --notch: 0.5em;
  position: relative;
  padding: 0.85em 2.2em;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(135deg, transparent var(--notch), var(--c) 0) left / 51% 100% no-repeat,
    linear-gradient(-45deg, transparent var(--notch), var(--c) 0) right / 51% 100% no-repeat;
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;}
.btn-cyberpunk-glitch::before,
.btn-cyberpunk-glitch::after {
  --tint: color-mix(in srgb, var(--c) 45%, #22d3ee);
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, transparent var(--notch), var(--tint) 0) left / 51% 100% no-repeat,
    linear-gradient(-45deg, transparent var(--notch), var(--tint) 0) right / 51% 100% no-repeat;
  clip-path: inset(50% 0 50% 0);
  pointer-events: none;
}
.btn-cyberpunk-glitch::before { --tint: color-mix(in srgb, var(--c) 40%, #e879f9); }
.btn-cyberpunk-glitch:is(:hover, :focus-visible)::before {
  animation: btn-cyberpunk-glitch-tear-a 1.2s steps(1, end) infinite;
}
.btn-cyberpunk-glitch:is(:hover, :focus-visible)::after {
  animation: btn-cyberpunk-glitch-tear-b 0.9s steps(1, end) infinite;
}
@keyframes btn-cyberpunk-glitch-tear-a {
  0%        { clip-path: inset(10% 0 62% 0); transform: translateX(-0.5em); }
  10%       { clip-path: inset(58% 0 22% 0); transform: translateX(0.4em); }
  20%, 55%  { clip-path: inset(50% 0 50% 0); transform: none; }
  65%       { clip-path: inset(30% 0 48% 0); transform: translateX(0.6em); }
  75%, 100% { clip-path: inset(50% 0 50% 0); transform: none; }
}
@keyframes btn-cyberpunk-glitch-tear-b {
  0%        { clip-path: inset(70% 0 8% 0); transform: translateX(0.45em); }
  12%       { clip-path: inset(22% 0 60% 0); transform: translateX(-0.35em); }
  24%       { clip-path: inset(44% 0 36% 0); transform: translateX(0.25em); }
  36%, 100% { clip-path: inset(50% 0 50% 0); transform: none; }
}

.btn-hand-drawn {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  padding: 0.65em 1.7em;
  border: 2px solid var(--c);
  border-radius: 16em 1.8em 14em 1.8em / 1.8em 14em 1.8em 16em;
  background: transparent;
  color: var(--c);
  font: 700 calc(var(--btn-size, 18px) * 1.15)/1.2 "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  cursor: pointer;
}
.btn-hand-drawn::before,
.btn-hand-drawn::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.btn-hand-drawn::before {
  inset: -0.25em -0.15em -0.1em -0.3em;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 1.8em 15em 1.8em 14em / 14em 1.8em 15em 1.8em;
  transform: rotate(-1.2deg);
}
.btn-hand-drawn::after {
  inset: 0.3em 0.5em;
  border-radius: inherit;
  background: repeating-linear-gradient(-55deg, color-mix(in srgb, var(--c) 30%, transparent) 0 1px, transparent 1px 0.4em);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-hand-drawn:is(:hover, :focus-visible),
.btn-hand-drawn:is(:hover, :focus-visible)::before {
  animation: btn-hand-drawn-boil 0.45s steps(1, end) infinite;
}
.btn-hand-drawn:is(:hover, :focus-visible)::before { animation-delay: -0.15s; }
.btn-hand-drawn:is(:hover, :focus-visible)::after { clip-path: inset(0 0 0 0); }
@keyframes btn-hand-drawn-boil {
  0%   { border-radius: 16em 1.8em 14em 1.8em / 1.8em 14em 1.8em 16em; }
  33%  { border-radius: 1.8em 15em 1.6em 16em / 15em 1.6em 16em 1.8em; }
  66%  { border-radius: 14em 2.2em 16em 1.4em / 1.4em 16em 2.2em 14em; }
}

.btn-confetti-burst {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
}
.btn-confetti-burst-face {
  position: relative;
  display: block;
  padding: 0.8em 1.9em;
  border-radius: 0.6em;
  background: var(--c);
  color: #fff;
}
.btn-confetti-burst-bits i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.45em;
  height: 0.45em;
  margin: -0.225em;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
}
.btn-confetti-burst-bits i:nth-child(3n + 2) {
  width: 0.3em;
  height: 0.6em;
  border-radius: 0.08em;
  background: color-mix(in srgb, var(--c) 30%, #f43f5e);
}
.btn-confetti-burst-bits i:nth-child(3n) { background: color-mix(in srgb, var(--c) 20%, #fbbf24); }
.btn-confetti-burst:is(:hover, :focus-visible) .btn-confetti-burst-face {
  animation: btn-confetti-burst-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-confetti-burst:is(:hover, :focus-visible) .btn-confetti-burst-bits i {
  animation: btn-confetti-burst-fly 1s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.btn-confetti-burst:is(:hover, :focus-visible) .btn-confetti-burst-bits i:nth-child(even) { animation-delay: 0.05s; }
@keyframes btn-confetti-burst-fly {
  0%   { opacity: 1; transform: translate(0, 0) scale(0.4) rotate(0deg); }
  65%  { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(200deg); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 0.9em)) scale(0.8) rotate(280deg); }
}
@keyframes btn-confetti-burst-pop {
  40% { transform: scale(0.93); }
}

.btn-glossy-aqua {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  padding: 0.8em 2.3em;
  border: 1px solid color-mix(in srgb, var(--c) 55%, #000);
  border-radius: 2em;
  background: linear-gradient(color-mix(in srgb, var(--c) 65%, #fff), var(--c) 50%, color-mix(in srgb, var(--c) 82%, #000) 50%, color-mix(in srgb, var(--c) 85%, #fff));
  color: #fff;
  text-shadow: 0 -1px 0 color-mix(in srgb, var(--c) 50%, #000);
  box-shadow: 0 0.15em 0.35em rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.3s ease;}
.btn-glossy-aqua::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 0.8em;
  right: 0.8em;
  height: 48%;
  border-radius: 2em 2em 1em 1em / 1.2em 1.2em 0.5em 0.5em;
  background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.12));
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.btn-glossy-aqua::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(ellipse 60% 75% at 50% 100%, rgba(255, 255, 255, 0.7), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.btn-glossy-aqua-label { position: relative; }
.btn-glossy-aqua:is(:hover, :focus-visible) {
  box-shadow: 0 0.3em 0.8em color-mix(in srgb, var(--c) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.btn-glossy-aqua:is(:hover, :focus-visible)::before { opacity: 1; }
.btn-glossy-aqua:is(:hover, :focus-visible)::after {
  opacity: 1;
  animation: btn-glossy-aqua-throb 1.6s ease-in-out 0.4s infinite;
}
@keyframes btn-glossy-aqua-throb {
  50% { opacity: 0.35; }
}

.btn-sliding-knob {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  justify-content: flex-start;
  width: 11em;
  height: 3em;
  padding: 0 0.3em;
  border: 0;
  border-radius: 1.5em;
  background-color: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  transition: background-color 0.5s cubic-bezier(0.65, 0, 0.35, 1);}
.btn-sliding-knob-knob {
  position: absolute;
  top: 0.3em;
  left: 0.3em;
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.15em 0.4em color-mix(in srgb, var(--c) 45%, transparent);
  transition:
    transform 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.5s ease,
    color 0.5s ease;
}
.btn-sliding-knob-knob svg {
  width: 1.2em;
  height: 1.2em;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-sliding-knob-label {
  flex: 1;
  padding-left: 2.6em;
  text-align: center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), color 0.5s ease;
}
.btn-sliding-knob:is(:hover, :focus-visible) { background-color: var(--c); }
.btn-sliding-knob:is(:hover, :focus-visible) .btn-sliding-knob-knob {
  transform: translateX(8em);
  background-color: #fff;
  color: var(--c);
}
.btn-sliding-knob:is(:hover, :focus-visible) .btn-sliding-knob-knob svg { transform: rotate(360deg); }
.btn-sliding-knob:is(:hover, :focus-visible) .btn-sliding-knob-label {
  transform: translateX(-2.6em);
  color: #fff;
}

.btn-underline-button {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  padding: 0.7em 1.3em;
  border: 0;
  border-radius: 0.5em;
  background-color: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--c);
  transition: background-color 0.3s ease;}
.btn-underline-button-label { position: relative; }
.btn-underline-button-label::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.2em;
  left: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-underline-button:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 14%, transparent); }
.btn-underline-button:is(:hover, :focus-visible) .btn-underline-button-label::after {
  transform: scaleX(1);
  transform-origin: left;
}

.btn-gooey {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  padding: 0.85em 2em;
  border: 0;
  background: transparent;
  color: #fff;}
.btn-gooey-goo {
  position: absolute;
  inset: 0;
  border-radius: 1.5em;
  background: var(--c);
  filter: url(#btn-gooey-filter);
}
.btn-gooey-goo i {
  position: absolute;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--c);
  transition: translate 0.6s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.btn-gooey-goo i:nth-child(1) { top: 0.1em; left: 12%; }
.btn-gooey-goo i:nth-child(2) { top: 0.2em; left: 52%; width: 1.2em; height: 1.2em; }
.btn-gooey-goo i:nth-child(3) { bottom: 0.1em; left: 28%; }
.btn-gooey-goo i:nth-child(4) { bottom: 0.2em; right: 14%; width: 1.3em; height: 1.3em; }
.btn-gooey-goo i:nth-child(5) { top: 0.3em; right: 0; width: 1.2em; height: 1.2em; }
.btn-gooey-label { position: relative; }
.btn-gooey-svg {
  position: absolute;
  width: 0;
  height: 0;
}
.btn-gooey:is(:hover, :focus-visible) .btn-gooey-goo i { animation: btn-gooey-pulse 1.8s ease-in-out 0.6s infinite; }
.btn-gooey:is(:hover, :focus-visible) .btn-gooey-goo i:nth-child(1) { translate: -0.3em -1.1em; }
.btn-gooey:is(:hover, :focus-visible) .btn-gooey-goo i:nth-child(2) { translate: 0 -1em; transition-delay: 0.06s; animation-duration: 2.2s; }
.btn-gooey:is(:hover, :focus-visible) .btn-gooey-goo i:nth-child(3) { translate: 0 1.15em; transition-delay: 0.03s; animation-duration: 1.6s; }
.btn-gooey:is(:hover, :focus-visible) .btn-gooey-goo i:nth-child(4) { translate: 0.2em 1em; transition-delay: 0.09s; animation-duration: 2s; }
.btn-gooey:is(:hover, :focus-visible) .btn-gooey-goo i:nth-child(5) { translate: 1em -0.2em; transition-delay: 0.12s; animation-duration: 2.4s; }
@keyframes btn-gooey-pulse {
  50% { transform: scale(0.5); }
}

.btn-long-shadow {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  --len: 2.6em;
  --shade: color-mix(in srgb, var(--c) 40%, transparent);
  position: relative;
  padding: 0.8em 1.8em;
  border: 0;
  border-radius: 0.2em;
  background: var(--c);
  color: #fff;}
.btn-long-shadow::before,
.btn-long-shadow::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transform-origin: top left;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-long-shadow::before {
  top: 100%;
  left: 0;
  width: 100%;
  height: var(--len);
  background: linear-gradient(var(--shade), transparent);
  transform: skewX(45deg) scaleY(0.3);
}
.btn-long-shadow::after {
  top: 0;
  left: 100%;
  width: var(--len);
  height: 100%;
  background: linear-gradient(to right, var(--shade), transparent);
  transform: skewY(45deg) scaleX(0.3);
}
.btn-long-shadow:is(:hover, :focus-visible)::before { transform: skewX(45deg) scaleY(1); }
.btn-long-shadow:is(:hover, :focus-visible)::after { transform: skewY(45deg) scaleX(1); }

.btn-offset-ring {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  padding: 0.8em 1.7em;
  border: 0;
  border-radius: 0.6em;
  background: var(--c);
  color: #fff;
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition:
    outline-offset 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    outline-color 0.2s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);}
.btn-offset-ring:is(:hover, :focus-visible) {
  outline-color: var(--c);
  outline-offset: 0.25em;
  transform: scale(0.97);
}

.btn-levitate {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  padding: 0.8em 2em;
  border: 0;
  border-radius: 0.7em;
  background: var(--c);
  color: #fff;
  transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1);}
.btn-levitate::after {
  content: "";
  position: absolute;
  top: calc(100% + 0.45em);
  left: 12%;
  right: 12%;
  height: 0.6em;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent);
  pointer-events: none;
  transition: translate 0.45s cubic-bezier(0.22, 1, 0.36, 1), scale 0.45s ease, opacity 0.45s ease;
}
.btn-levitate:is(:hover, :focus-visible) {
  translate: 0 -0.7em;
  animation: btn-levitate-bob 2.4s ease-in-out 0.45s infinite;
}
.btn-levitate:is(:hover, :focus-visible)::after {
  translate: 0 0.7em;
  scale: 0.8;
  opacity: 0.7;
  animation: btn-levitate-ground 2.4s ease-in-out 0.45s infinite;
}
@keyframes btn-levitate-bob {
  50% { transform: translateY(-0.35em); }
}
@keyframes btn-levitate-ground {
  50% { transform: translateY(0.35em) scale(0.8); opacity: 0.45; }
}

.btn-bubbles {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0.85em 2em;
  border: 0;
  border-radius: 0.8em;
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 80%, #000), var(--c));
  color: #fff;
  transition: box-shadow 0.3s ease;}
.btn-bubbles-label { position: relative; }
.btn-bubbles-fizz i {
  position: absolute;
  bottom: -0.9em;
  left: calc(5% + var(--i) * 12%);
  width: 0.65em;
  height: 0.65em;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.9) 0 18%, rgba(255, 255, 255, 0.18) 28%);
  opacity: 0;
}
.btn-bubbles-fizz i:nth-child(odd) { width: 0.45em; height: 0.45em; }
.btn-bubbles-fizz i:nth-child(3n) { width: 0.85em; height: 0.85em; }
.btn-bubbles:is(:hover, :focus-visible) { box-shadow: 0 0.4em 1em color-mix(in srgb, var(--c) 35%, transparent); }
.btn-bubbles:is(:hover, :focus-visible) .btn-bubbles-fizz i {
  animation: btn-bubbles-rise 1.5s cubic-bezier(0.4, 0, 0.8, 0.6) calc(var(--i) * 0.13s) infinite;
}
.btn-bubbles:is(:hover, :focus-visible) .btn-bubbles-fizz i:nth-child(even) { animation-duration: 1.8s; }
@keyframes btn-bubbles-rise {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.6); }
  15%  { opacity: 1; }
  45%  { transform: translate(0.3em, -1.5em) scale(0.85); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-0.15em, -3.8em) scale(1.15); }
}

.btn-circle-text-spin {
  --c: var(--btn-color, #3b82f6);
  font-size: var(--btn-size, 18px);
  display: grid;
  place-items: center;
  width: 7em;
  height: 7em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
  font-family: system-ui, sans-serif;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.btn-circle-text-spin > svg { grid-area: 1 / 1; }
.btn-circle-text-spin-ring {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.btn-circle-text-spin-arrow {
  width: 2.6em;
  height: 2.6em;
  padding: 0.65em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-circle-text-spin:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 16%, transparent); }
.btn-circle-text-spin:is(:hover, :focus-visible) .btn-circle-text-spin-ring {
  animation: btn-circle-text-spin-turn 8s linear infinite;
}
.btn-circle-text-spin:is(:hover, :focus-visible) .btn-circle-text-spin-arrow { transform: scale(1.15) rotate(45deg); }
@keyframes btn-circle-text-spin-turn {
  to { transform: rotate(360deg); }
}

.btn-swinging-sign {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font: 600 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  margin-top: 1.8em;
  padding: 0.75em 1.7em;
  border: 2px solid color-mix(in srgb, var(--c) 70%, #000);
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  transform-origin: 50% -1.5em;
  transition: transform 0.3s ease;}
.btn-swinging-sign::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 22%;
  right: 22%;
  height: 1.5em;
  background:
    linear-gradient(to bottom right, transparent calc(50% - 1px), color-mix(in srgb, var(--c) 70%, transparent) 0 calc(50% + 1px), transparent 0) left / 50% 100% no-repeat,
    linear-gradient(to bottom left, transparent calc(50% - 1px), color-mix(in srgb, var(--c) 70%, transparent) 0 calc(50% + 1px), transparent 0) right / 50% 100% no-repeat;
}
.btn-swinging-sign::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 1.3em);
  left: 50%;
  width: 0.45em;
  height: 0.45em;
  margin-left: -0.225em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 60%, #000);
}
.btn-swinging-sign:is(:hover, :focus-visible) {
  animation:
    btn-swinging-sign-swing 1.4s ease-in-out both,
    btn-swinging-sign-sway 2.4s ease-in-out 1.4s infinite;
}
@keyframes btn-swinging-sign-swing {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(11deg); }
  35%  { transform: rotate(-8deg); }
  55%  { transform: rotate(5deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(1.5deg); }
}
@keyframes btn-swinging-sign-sway {
  0%, 100% { transform: rotate(1.5deg); }
  50%      { transform: rotate(-1.5deg); }
}

.btn-submit-loading-success {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  --ok: #16a34a;
  width: 8.5em;
  height: 2.9em;}
.btn-submit-loading-success-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-submit-loading-success-face {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 1.45em;
  background-color: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.4em var(--c);
  transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.4);
}
.btn-submit-loading-success-label,
.btn-submit-loading-success-done {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
}
.btn-submit-loading-success-done { opacity: 0; }
.btn-submit-loading-success-done svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
}
.btn-submit-loading-success-ring {
  position: absolute;
  inset: 0;
  width: 2.9em;
  height: 2.9em;
  margin: auto;
  box-sizing: border-box;
  border: 0.24em solid color-mix(in srgb, var(--c) 22%, transparent);
  border-top-color: var(--c);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.btn-submit-loading-success:active .btn-submit-loading-success-face { transform: scale(0.95); }
.btn-submit-loading-success-input:focus-visible ~ .btn-submit-loading-success-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-face {
  animation: btn-submit-loading-success-morph 2.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-face .btn-submit-loading-success-label {
  animation: btn-submit-loading-success-out 0.25s ease-in forwards;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-face .btn-submit-loading-success-done {
  animation: btn-submit-loading-success-in 0.4s cubic-bezier(0.3, 0.7, 0.4, 1.4) 2.1s forwards;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-face svg {
  animation: btn-submit-loading-success-draw 0.35s ease-out 2.3s forwards;
}
.btn-submit-loading-success-input:checked ~ .btn-submit-loading-success-ring {
  animation:
    btn-submit-loading-success-spin 0.6s linear 0.25s 3,
    btn-submit-loading-success-show 1.85s linear 0.25s forwards;
}
@keyframes btn-submit-loading-success-morph {
  0% { width: 100%; background-color: var(--c); box-shadow: 0 0.4em 1em -0.4em var(--c); }
  14%, 77% { width: 2.9em; background-color: transparent; box-shadow: 0 0 0 transparent; }
  92%, 100% { width: 100%; background-color: var(--ok); box-shadow: 0 0.4em 1em -0.4em var(--ok); }
}
@keyframes btn-submit-loading-success-out {
  to { opacity: 0; transform: scale(0.6); }
}
@keyframes btn-submit-loading-success-in {
  from { opacity: 0; transform: translateY(0.5em); }
  to { opacity: 1; transform: none; }
}
@keyframes btn-submit-loading-success-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes btn-submit-loading-success-spin {
  to { transform: rotate(1turn); }
}
@keyframes btn-submit-loading-success-show {
  0%, 100% { opacity: 0; }
  8%, 88% { opacity: 1; }
}

.btn-ripple-click {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.35em 0.8em -0.3em var(--c);
  transition: box-shadow 0.25s ease, transform 0.25s ease;}
.btn-ripple-click::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 160%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.16));
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  transition: transform 0s 0.5s, opacity 0.5s ease;
}
.btn-ripple-click:active {
  transform: scale(0.98);
  box-shadow: 0 0.15em 0.35em -0.15em var(--c);
}
.btn-ripple-click:active::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0s;
}
.btn-ripple-click:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.btn-heart-like {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  --like: #f43f5e;}
.btn-heart-like-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-heart-like-face {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.65em 1.35em 0.65em 1.05em;
  border: 2px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 2em;
  background-color: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--c);
  transition:
    transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1.5),
    color 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.btn-heart-like-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.3em;
  height: 1.3em;
}
.btn-heart-like-icon svg {
  position: relative;
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  overflow: visible;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.btn-heart-like-ring {
  position: absolute;
  inset: -0.35em;
  border-radius: 50%;
  opacity: 0;
}
.btn-heart-like-dots {
  position: absolute;
  inset: 0;
}
.btn-heart-like-dots i {
  --r: 1.55em;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.26em;
  height: 0.26em;
  margin: -0.13em;
  border-radius: 50%;
  background: var(--like);
  opacity: 0;
}
.btn-heart-like-dots i:nth-child(even) {
  --r: 1.25em;
  background: var(--c);
}
.btn-heart-like:active .btn-heart-like-face { transform: scale(0.93); }
.btn-heart-like-input:focus-visible ~ .btn-heart-like-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-heart-like-input:checked ~ .btn-heart-like-face {
  border-color: color-mix(in srgb, var(--like) 45%, transparent);
  background-color: color-mix(in srgb, var(--like) 10%, transparent);
  color: var(--like);
}
.btn-heart-like-input:checked ~ .btn-heart-like-face svg {
  fill: var(--like);
  stroke: var(--like);
  animation: btn-heart-like-pop 0.75s cubic-bezier(0.17, 0.89, 0.32, 1.3);
}
.btn-heart-like-input:checked ~ .btn-heart-like-face .btn-heart-like-ring {
  animation: btn-heart-like-ring 0.5s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.btn-heart-like-input:checked ~ .btn-heart-like-face .btn-heart-like-dots i {
  animation: btn-heart-like-dots 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.22s forwards;
}
@keyframes btn-heart-like-pop {
  0% { transform: scale(1); }
  15%, 35% { transform: scale(0); }
  70% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes btn-heart-like-ring {
  0% { opacity: 1; transform: scale(0.1); box-shadow: inset 0 0 0 1em color-mix(in srgb, var(--c) 50%, var(--like)); }
  55% { opacity: 1; transform: scale(1); box-shadow: inset 0 0 0 0.3em var(--like); }
  100% { opacity: 0; transform: scale(1.1); box-shadow: inset 0 0 0 0 var(--like); }
}
@keyframes btn-heart-like-dots {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-0.75em) scale(1.3); }
  100% { opacity: 1; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) scale(0); }
}

@property --btn-download-progress-p {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.btn-download-progress {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-download-progress-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-download-progress-face {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  width: 9.4em;
  box-sizing: border-box;
  padding: 0.8em 1.25em;
  border-radius: 0.7em;
  background-color: var(--c);
  color: #fff;
  transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn-download-progress-fill {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
}
.btn-download-progress-icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.btn-download-progress-check {
  stroke-dasharray: 17;
  stroke-dashoffset: 17;
}
.btn-download-progress-text {
  display: grid;
  flex: 1;
  justify-items: center;
}
.btn-download-progress-text > span { grid-area: 1 / 1; }
.btn-download-progress-busy,
.btn-download-progress-done { opacity: 0; }
.btn-download-progress-busy {
  counter-reset: btn-download-progress-n var(--btn-download-progress-p);
  font-variant-numeric: tabular-nums;
}
.btn-download-progress-busy::after { content: counter(btn-download-progress-n) "%"; }
.btn-download-progress:active .btn-download-progress-face { transform: scale(0.96); }
.btn-download-progress-input:focus-visible ~ .btn-download-progress-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-download-progress-input:checked ~ .btn-download-progress-face {
  background-color: color-mix(in srgb, var(--c) 35%, #0b1120);
}
.btn-download-progress-input:checked ~ .btn-download-progress-face .btn-download-progress-fill {
  animation: btn-download-progress-fill 2.4s linear forwards;
}
.btn-download-progress-input:checked ~ .btn-download-progress-face .btn-download-progress-busy {
  animation:
    btn-download-progress-count 2.4s linear forwards,
    btn-download-progress-busy 2.6s ease forwards;
}
.btn-download-progress-input:checked ~ .btn-download-progress-face .btn-download-progress-idle {
  animation: btn-download-progress-out 0.15s ease-in forwards;
}
.btn-download-progress-input:checked ~ .btn-download-progress-face .btn-download-progress-done {
  animation: btn-download-progress-in 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.4) 2.5s forwards;
}
.btn-download-progress-input:checked ~ .btn-download-progress-face .btn-download-progress-arrow {
  transform-box: fill-box;
  animation:
    btn-download-progress-bob 0.6s ease-in-out 4,
    btn-download-progress-out 0.2s ease-in 2.4s forwards;
}
.btn-download-progress-input:checked ~ .btn-download-progress-face .btn-download-progress-check {
  animation: btn-download-progress-draw 0.35s ease-out 2.5s forwards;
}
@keyframes btn-download-progress-fill {
  0% { transform: scaleX(0); }
  20% { transform: scaleX(0.22); }
  38% { transform: scaleX(0.3); }
  60% { transform: scaleX(0.66); }
  75% { transform: scaleX(0.72); }
  92%, 100% { transform: scaleX(1); }
}
@keyframes btn-download-progress-count {
  0% { --btn-download-progress-p: 0; }
  20% { --btn-download-progress-p: 22; }
  38% { --btn-download-progress-p: 30; }
  60% { --btn-download-progress-p: 66; }
  75% { --btn-download-progress-p: 72; }
  92%, 100% { --btn-download-progress-p: 100; }
}
@keyframes btn-download-progress-busy {
  0%, 6%, 100% { opacity: 0; }
  13%, 90% { opacity: 1; }
}
@keyframes btn-download-progress-out {
  to { opacity: 0; transform: translateY(-0.4em); }
}
@keyframes btn-download-progress-in {
  from { opacity: 0; transform: translateY(0.5em); }
  to { opacity: 1; transform: none; }
}
@keyframes btn-download-progress-bob {
  50% { transform: translateY(18%); }
}
@keyframes btn-download-progress-draw {
  to { stroke-dashoffset: 0; }
}

.btn-add-to-cart {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-add-to-cart-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-add-to-cart-face {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 10.5em;
  height: 3em;
  border-radius: 0.75em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 0.9em -0.4em var(--c);
  transition: transform 0.2s ease;
}
.btn-add-to-cart-label,
.btn-add-to-cart-added {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.btn-add-to-cart-added { opacity: 0; }
.btn-add-to-cart-added svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-add-to-cart-cart {
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.8em;
  height: 1.8em;
  margin-top: -0.95em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(-2.2em);
}
.btn-add-to-cart-box {
  position: absolute;
  top: 50%;
  left: 5em;
  width: 0.6em;
  height: 0.6em;
  margin-top: -0.7em;
  border-radius: 0.12em;
  background: #fff;
  box-shadow: inset 0 -0.14em 0 color-mix(in srgb, var(--c) 35%, transparent);
  transform: translateY(-2.6em);
}
.btn-add-to-cart:active .btn-add-to-cart-face { transform: scale(0.95); }
.btn-add-to-cart-input:focus-visible ~ .btn-add-to-cart-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-add-to-cart-input:checked ~ .btn-add-to-cart-face .btn-add-to-cart-label {
  animation: btn-add-to-cart-out 0.25s ease-in forwards;
}
.btn-add-to-cart-input:checked ~ .btn-add-to-cart-face .btn-add-to-cart-cart {
  animation: btn-add-to-cart-drive 1.6s forwards;
}
.btn-add-to-cart-input:checked ~ .btn-add-to-cart-face .btn-add-to-cart-box {
  animation: btn-add-to-cart-drop 1.6s forwards;
}
.btn-add-to-cart-input:checked ~ .btn-add-to-cart-face .btn-add-to-cart-added {
  animation: btn-add-to-cart-in 0.4s cubic-bezier(0.3, 0.7, 0.4, 1.4) 1.3s forwards;
}
@keyframes btn-add-to-cart-drive {
  0% { transform: translateX(-2.2em); animation-timing-function: cubic-bezier(0.25, 0.8, 0.4, 1); }
  28% { transform: translateX(4.35em) rotate(0deg); }
  36% { transform: translateX(4.35em) rotate(-7deg); }
  44%, 54% { transform: translateX(4.35em) rotate(0deg); animation-timing-function: ease-out; }
  60% { transform: translateX(4.1em) rotate(-8deg); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  86%, 100% { transform: translateX(11.5em) rotate(0deg); }
}
@keyframes btn-add-to-cart-drop {
  0%, 20% { transform: translateY(-2.6em); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  34% { transform: translateY(0) scale(1.2, 0.8); }
  42%, 54% { transform: translateY(0); animation-timing-function: ease-out; }
  60% { transform: translateX(-0.25em); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  86%, 100% { transform: translateX(7.15em); }
}
@keyframes btn-add-to-cart-out {
  to { opacity: 0; transform: translateY(1em); }
}
@keyframes btn-add-to-cart-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

.btn-hold-to-confirm {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  padding: 0.8em 1.7em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 35%, transparent);
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1.5);}
.btn-hold-to-confirm-fill,
.btn-hold-to-confirm-done {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  background: var(--c);
  color: #fff;
}
.btn-hold-to-confirm-fill {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-hold-to-confirm-done {
  opacity: 0;
  transform: scale(1.15);
  transition: opacity 0.3s ease 0.9s, transform 0.3s ease 0.9s;
}
.btn-hold-to-confirm-done svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-hold-to-confirm:active { transform: scale(0.97); }
.btn-hold-to-confirm:active .btn-hold-to-confirm-fill {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.4s linear;
}
.btn-hold-to-confirm:active .btn-hold-to-confirm-done {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease 1.4s, transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.5) 1.4s;
}
.btn-hold-to-confirm:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.btn-copy-clipboard {
  --c: var(--btn-color, #3b82f6);
  font-size: var(--btn-size, 18px);
  display: inline-flex;
  align-items: center;
  gap: 1.1em;
  padding: 0.4em 0.4em 0.4em 1.1em;
  border-radius: 0.75em;
  background: color-mix(in srgb, var(--c) 12%, #0f172a);
  color: #e2e8f0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0.5em 1.2em -0.6em rgba(2, 6, 23, 0.6);
}
.btn-copy-clipboard-code {
  font: 500 0.9em/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.btn-copy-clipboard-prompt { color: color-mix(in srgb, var(--c) 60%, #fff); }
.btn-copy-clipboard-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6em 0.85em;
  border: 0;
  border-radius: 0.5em;
  background-color: rgba(255, 255, 255, 0.09);
  color: #fff;
  font: 600 0.85em/1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.3s ease 1.2s, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.btn-copy-clipboard-icons {
  position: relative;
  width: 1.15em;
  height: 1.15em;
}
.btn-copy-clipboard-icons svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s ease 1.2s, opacity 0.3s ease 1.2s;
}
.btn-copy-clipboard-icons svg:last-child {
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.3) rotate(-30deg);
}
.btn-copy-clipboard-text {
  display: grid;
  overflow: hidden;
}
.btn-copy-clipboard-text span {
  grid-area: 1 / 1;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1) 1.2s, opacity 0.3s ease 1.2s;
}
.btn-copy-clipboard-text span:last-child {
  opacity: 0;
  transform: translateY(100%);
}
.btn-copy-clipboard-btn:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.15em;
}
.btn-copy-clipboard-btn:active {
  background-color: var(--c);
  transform: scale(0.94);
  transition-delay: 0s;
}
.btn-copy-clipboard-btn:active .btn-copy-clipboard-icons svg {
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.5), opacity 0.15s ease;
}
.btn-copy-clipboard-btn:active .btn-copy-clipboard-icons svg:first-child {
  opacity: 0;
  transform: scale(0.3) rotate(30deg);
}
.btn-copy-clipboard-btn:active .btn-copy-clipboard-icons svg:last-child {
  opacity: 1;
  transform: none;
}
.btn-copy-clipboard-btn:active .btn-copy-clipboard-text span {
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.2s ease;
}
.btn-copy-clipboard-btn:active .btn-copy-clipboard-text span:first-child {
  opacity: 0;
  transform: translateY(-100%);
}
.btn-copy-clipboard-btn:active .btn-copy-clipboard-text span:last-child {
  opacity: 1;
  transform: none;
}

.btn-keycap {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --edge: color-mix(in srgb, var(--c) 55%, #000);
  display: block;
  width: 6.4em;
  height: 3.5em;
  padding: 0.16em 0.3em 0.55em;
  border-radius: 0.6em;
  background: linear-gradient(color-mix(in srgb, var(--c) 80%, #fff), color-mix(in srgb, var(--c) 72%, #000));
  color: #fff;
  box-shadow:
    0 0.32em 0 var(--edge),
    0 0.6em 0.8em -0.2em rgba(0, 0, 0, 0.45);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out;}
.btn-keycap-top {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  box-sizing: border-box;
  padding: 0.35em 0.55em 0.4em;
  border-radius: 0.42em;
  background: radial-gradient(130% 100% at 50% 15%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 75%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -0.1em 0.2em color-mix(in srgb, var(--c) 70%, #000),
    0 0.06em 0.12em rgba(0, 0, 0, 0.3);
  font-size: 0.8em;
  transition: transform 0.12s ease-out;
}
.btn-keycap-glyph {
  align-self: flex-end;
  font-size: 1.3em;
  line-height: 1;
}
.btn-keycap:active {
  transform: translateY(0.24em);
  box-shadow:
    0 0.08em 0 var(--edge),
    0 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.45);
  transition-duration: 0.05s;
}
.btn-keycap:active .btn-keycap-top {
  transform: scale(0.985);
  transition-duration: 0.05s;
}
.btn-keycap:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.3em;
}

.btn-pressed-sink {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: linear-gradient(color-mix(in srgb, var(--c) 82%, #fff), var(--c));
  color: #fff;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--c) 70%, #000);
  box-shadow:
    0 0.1em 0.15em rgba(0, 0, 0, 0.15),
    0 0.5em 1em -0.35em color-mix(in srgb, var(--c) 75%, #000),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 transparent;
  transition:
    transform 0.4s cubic-bezier(0.3, 1.8, 0.6, 1),
    box-shadow 0.3s ease,
    filter 0.3s ease;}
.btn-pressed-sink:active {
  transform: translateY(0.12em) scale(0.97);
  filter: brightness(0.94);
  box-shadow:
    0 0 0 transparent,
    0 0.1em 0.2em -0.1em color-mix(in srgb, var(--c) 75%, #000),
    inset 0 1px 0 transparent,
    inset 0 0.2em 0.45em rgba(0, 0, 0, 0.35);
  transition-duration: 0.08s;
  transition-timing-function: ease-out;
}
.btn-pressed-sink:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.btn-trash-delete {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-trash-delete-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-trash-delete-face {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.75em 1.5em 0.75em 1.2em;
  border-radius: 0.7em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 0.9em -0.4em var(--c);
  transition: transform 0.2s ease;
}
.btn-trash-delete-can {
  width: 1.35em;
  height: 1.35em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  transform-origin: 50% 100%;
}
.btn-trash-delete-can * { transform-box: fill-box; }
.btn-trash-delete-body { fill: var(--c); }
.btn-trash-delete-paper {
  fill: #fff;
  stroke: none;
  opacity: 0;
}
.btn-trash-delete-lid { transform-origin: 100% 100%; }
.btn-trash-delete-text {
  display: grid;
  overflow: hidden;
}
.btn-trash-delete-text span { grid-area: 1 / 1; }
.btn-trash-delete-text span:last-child {
  opacity: 0;
  transform: translateY(100%);
}
.btn-trash-delete:active .btn-trash-delete-face { transform: scale(0.95); }
.btn-trash-delete-input:focus-visible ~ .btn-trash-delete-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-trash-delete-input:checked ~ .btn-trash-delete-face .btn-trash-delete-lid {
  animation: btn-trash-delete-lid 1.2s cubic-bezier(0.3, 0.7, 0.4, 1) forwards;
}
.btn-trash-delete-input:checked ~ .btn-trash-delete-face .btn-trash-delete-paper {
  animation: btn-trash-delete-paper 1.2s forwards;
}
.btn-trash-delete-input:checked ~ .btn-trash-delete-face .btn-trash-delete-can {
  animation: btn-trash-delete-squash 1.2s forwards;
}
.btn-trash-delete-input:checked ~ .btn-trash-delete-face .btn-trash-delete-text span:first-child {
  animation: btn-trash-delete-out 0.3s ease-in 0.85s forwards;
}
.btn-trash-delete-input:checked ~ .btn-trash-delete-face .btn-trash-delete-text span:last-child {
  animation: btn-trash-delete-in 0.35s cubic-bezier(0.3, 0.7, 0.4, 1.3) 0.9s forwards;
}
@keyframes btn-trash-delete-lid {
  0% { transform: rotate(0deg); }
  20%, 52% { transform: rotate(32deg); }
  64% { transform: rotate(-4deg); }
  72%, 100% { transform: rotate(0deg); }
}
@keyframes btn-trash-delete-paper {
  0%, 12% { opacity: 0; transform: translateY(-70%); }
  22% { opacity: 1; transform: translateY(-70%); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  48% { opacity: 1; transform: translateY(170%); }
  49%, 100% { opacity: 0; transform: translateY(170%); }
}
@keyframes btn-trash-delete-squash {
  0%, 62% { transform: none; }
  70% { transform: scale(1.12, 0.86); }
  80% { transform: scale(0.95, 1.06); }
  90%, 100% { transform: none; }
}
@keyframes btn-trash-delete-out {
  to { opacity: 0; transform: translateY(-100%); }
}
@keyframes btn-trash-delete-in {
  to { opacity: 1; transform: none; }
}

.btn-spring-press {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0.85em 2em;
  border-radius: 1em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.45em 1em -0.45em var(--c);
  transition: transform 0.7s cubic-bezier(0.3, 1.8, 0.5, 1);
  transition: transform 0.9s linear(0, 0.135, 0.451, 0.812, 1.113, 1.294, 1.346, 1.294, 1.182, 1.058, 0.956, 0.896, 0.881, 0.9, 0.94, 0.983, 1.017, 1.037, 1.041, 1.034, 1.02, 1.005, 0.993, 0.987, 0.986, 0.989, 0.993, 0.999, 1.002, 1.005, 1.005, 1.004, 1.002, 1);}
.btn-spring-press:active {
  transform: scale(1.1, 0.8);
  transition: transform 0.15s cubic-bezier(0.3, 0, 0.6, 1);
}
.btn-spring-press:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.btn-press-tilt {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  padding: 0;
  border: 0;
  background: none;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-press-tilt i {
  position: absolute;
  z-index: 1;
  width: 33.34%;
  height: 33.34%;
}
.btn-press-tilt i:nth-child(3n + 1) { left: 0; }
.btn-press-tilt i:nth-child(3n + 2) { left: 33.33%; }
.btn-press-tilt i:nth-child(3n) { left: 66.66%; }
.btn-press-tilt i:nth-child(-n + 3) { top: 0; }
.btn-press-tilt i:nth-child(n + 4):nth-child(-n + 6) { top: 33.33%; }
.btn-press-tilt i:nth-child(n + 7) { top: 66.66%; }
.btn-press-tilt-face {
  --x: 0;
  --y: 0;
  --z: 1;
  display: block;
  padding: 1.1em 2.2em;
  border-radius: 0.9em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 80%, #000));
  color: #fff;
  box-shadow: calc(var(--x) * -0.25em) calc(0.5em - var(--y) * 0.25em) 1.1em -0.4em color-mix(in srgb, var(--c) 70%, #000);
  transform: perspective(16em) rotateX(calc(var(--y) * -14deg)) rotateY(calc(var(--x) * 14deg)) scale(var(--z));
  transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.5s ease;
}
.btn-press-tilt:active .btn-press-tilt-face {
  --z: 0.97;
  transition-duration: 0.12s;
  transition-timing-function: ease-out;
}
.btn-press-tilt i:nth-child(1):active ~ .btn-press-tilt-face { --x: -1; --y: -1; }
.btn-press-tilt i:nth-child(2):active ~ .btn-press-tilt-face { --x: 0; --y: -1; }
.btn-press-tilt i:nth-child(3):active ~ .btn-press-tilt-face { --x: 1; --y: -1; }
.btn-press-tilt i:nth-child(4):active ~ .btn-press-tilt-face { --x: -1; --y: 0; }
.btn-press-tilt i:nth-child(5):active ~ .btn-press-tilt-face { --x: 0; --y: 0; --z: 0.94; }
.btn-press-tilt i:nth-child(6):active ~ .btn-press-tilt-face { --x: 1; --y: 0; }
.btn-press-tilt i:nth-child(7):active ~ .btn-press-tilt-face { --x: -1; --y: 1; }
.btn-press-tilt i:nth-child(8):active ~ .btn-press-tilt-face { --x: 0; --y: 1; }
.btn-press-tilt i:nth-child(9):active ~ .btn-press-tilt-face { --x: 1; --y: 1; }
.btn-press-tilt:focus-visible { outline: none; }
.btn-press-tilt:focus-visible .btn-press-tilt-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.btn-clap {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  padding: 0;
  border: 2px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--c);
  font: 700 var(--btn-size, 18px)/1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1), background-color 0.3s ease;
}
.btn-clap-hand {
  width: 1.6em;
  height: 1.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.btn-clap-lines i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.16em;
  height: 0.55em;
  margin: -0.275em 0 0 -0.08em;
  border-radius: 0.1em;
  background: var(--c);
  opacity: 0;
  transform: rotate(var(--a)) translateY(-2.7em) scaleY(0.6);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.5s cubic-bezier(0.7, 0, 0.9, 0.6);
}
.btn-clap-lines { position: absolute; inset: 0; }
.btn-clap-plus {
  position: absolute;
  top: -0.2em;
  left: 50%;
  padding: 0.3em 0.5em;
  border-radius: 1em;
  background: var(--c);
  color: #fff;
  font-size: 0.75em;
  opacity: 0;
  transform: translate(-50%, -2.4em);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.8s cubic-bezier(0.7, 0, 0.9, 0.6);
}
.btn-clap:active {
  transform: scale(0.92);
  background-color: color-mix(in srgb, var(--c) 16%, transparent);
  transition-duration: 0.1s;
}
.btn-clap:active .btn-clap-hand {
  transform: rotate(-14deg) scale(0.9);
  transition-duration: 0.1s;
}
.btn-clap:active .btn-clap-lines i {
  opacity: 1;
  transform: rotate(var(--a)) translateY(-1.9em) scaleY(0);
  transition: none;
}
.btn-clap:active .btn-clap-plus {
  opacity: 1;
  transform: translate(-50%, 0) scale(0.6);
  transition: none;
}
.btn-clap:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}

.btn-subscribe-bell {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-subscribe-bell-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-subscribe-bell-face {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.6em;
  height: 2.8em;
  border-radius: 1.4em;
  background-color: var(--c);
  color: #fff;
  transition: background-color 0.35s ease, color 0.35s ease, transform 0.2s ease;
}
.btn-subscribe-bell-bell {
  position: absolute;
  top: 50%;
  left: 1em;
  width: 1.25em;
  height: 1.25em;
  margin-top: -0.625em;
  opacity: 0;
  transform: scale(0);
  transform-origin: 50% 10%;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-subscribe-bell-bell svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.btn-subscribe-bell-badge {
  position: absolute;
  top: -0.1em;
  right: -0.15em;
  width: 0.5em;
  height: 0.5em;
  border: 0.1em solid color-mix(in srgb, var(--c) 14%, #f4f5f7);
  border-radius: 50%;
  background: #ef4444;
  transform: scale(0);
}
.btn-subscribe-bell-text {
  display: grid;
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.btn-subscribe-bell-text span {
  grid-area: 1 / 1;
  text-align: center;
  transition: opacity 0.25s ease;
}
.btn-subscribe-bell-text span:last-child { opacity: 0; }
.btn-subscribe-bell:active .btn-subscribe-bell-face { transform: scale(0.95); }
.btn-subscribe-bell-input:focus-visible ~ .btn-subscribe-bell-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face {
  background-color: color-mix(in srgb, var(--c) 14%, #f4f5f7);
  color: color-mix(in srgb, var(--c) 30%, #111827);
}
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-text { transform: translateX(0.8em); }
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-text span:first-child { opacity: 0; }
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-text span:last-child { opacity: 1; }
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-bell {
  opacity: 1;
  transform: scale(1);
  animation: btn-subscribe-bell-ring 1s ease-in-out 0.25s;
}
.btn-subscribe-bell-input:checked ~ .btn-subscribe-bell-face .btn-subscribe-bell-badge {
  animation: btn-subscribe-bell-pop 0.4s cubic-bezier(0.3, 0.7, 0.4, 1.6) 0.9s forwards;
}
@keyframes btn-subscribe-bell-ring {
  0%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(24deg); }
  25% { transform: rotate(-20deg); }
  40% { transform: rotate(14deg); }
  55% { transform: rotate(-9deg); }
  70% { transform: rotate(5deg); }
  85% { transform: rotate(-2deg); }
}
@keyframes btn-subscribe-bell-pop {
  to { transform: scale(1); }
}

.btn-follow {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-follow-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-follow-face {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.35em 0.7em 1.1em;
  border-radius: 2em;
  background-color: var(--c);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--c);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.btn-follow-icon {
  position: relative;
  width: 1em;
  height: 1em;
}
.btn-follow-icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.8em;
  height: 0.16em;
  margin: -0.08em 0 0 -0.4em;
  border-radius: 0.1em;
  background: currentColor;
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.btn-follow-icon i:first-child { transform: rotate(90deg); }
.btn-follow-text { display: grid; }
.btn-follow-text span {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.btn-follow-text span:last-child {
  opacity: 0;
  transform: translateY(0.6em);
}
.btn-follow:active .btn-follow-face { transform: scale(0.95); }
.btn-follow-input:focus-visible ~ .btn-follow-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-follow-input:checked ~ .btn-follow-face {
  background-color: transparent;
  color: var(--c);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 40%, transparent);
}
.btn-follow-input:checked ~ .btn-follow-face .btn-follow-icon i:first-child {
  transform: translate(-0.24em, 0.14em) rotate(45deg) scaleX(0.45);
}
.btn-follow-input:checked ~ .btn-follow-face .btn-follow-icon i:last-child {
  transform: translate(0.1em, -0.02em) rotate(-50deg) scaleX(0.95);
}
.btn-follow-input:checked ~ .btn-follow-face .btn-follow-text span:first-child {
  opacity: 0;
  transform: translateY(-0.6em);
}
.btn-follow-input:checked ~ .btn-follow-face .btn-follow-text span:last-child {
  opacity: 1;
  transform: none;
}

.btn-bookmark {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-bookmark-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-bookmark-face {
  position: relative;
  display: flex;
  align-items: center;
  width: 7.4em;
  height: 2.8em;
  box-sizing: border-box;
  padding-left: 1.3em;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform 0.2s ease;
}
.btn-bookmark-text { display: grid; }
.btn-bookmark-text span {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease 0.1s;
}
.btn-bookmark-text span:last-child { opacity: 0; }
.btn-bookmark-ribbon {
  position: absolute;
  top: -0.15em;
  right: 1.1em;
  width: 1em;
  height: 2.5em;
  background: color-mix(in srgb, var(--c) 35%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transform: scaleY(0.4);
  transform-origin: 50% 0;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
.btn-bookmark:active .btn-bookmark-face { transform: scale(0.96); }
.btn-bookmark-input:focus-visible ~ .btn-bookmark-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-bookmark-input:checked ~ .btn-bookmark-face .btn-bookmark-text span:first-child { opacity: 0; }
.btn-bookmark-input:checked ~ .btn-bookmark-face .btn-bookmark-text span:last-child { opacity: 1; }
.btn-bookmark-input:checked ~ .btn-bookmark-face .btn-bookmark-ribbon {
  background-color: var(--c);
  transform: scaleY(1);
  animation: btn-bookmark-drop 0.9s cubic-bezier(0.3, 0.7, 0.4, 1);
}
@keyframes btn-bookmark-drop {
  0% { transform: scaleY(0.4) rotate(0deg); }
  35% { transform: scaleY(1.12) rotate(0deg); }
  50% { transform: scaleY(0.96) rotate(7deg); }
  68% { transform: scaleY(1.02) rotate(-4deg); }
  84% { transform: scaleY(1) rotate(1.5deg); }
  100% { transform: scaleY(1) rotate(0deg); }
}

.btn-star-favorite {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  --star: #f59e0b;}
.btn-star-favorite-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: 50%;
}
.btn-star-favorite-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.btn-star-favorite-face svg {
  width: 1.55em;
  height: 1.55em;
  fill: transparent;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  transition: fill 0.2s ease, stroke 0.2s ease;
}
.btn-star-favorite-sparks {
  position: absolute;
  inset: 0;
}
.btn-star-favorite-sparks i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.14em;
  height: 0.5em;
  margin: -0.25em 0 0 -0.07em;
  border-radius: 0.1em;
  background: var(--star);
  opacity: 0;
}
.btn-star-favorite:active .btn-star-favorite-face { transform: scale(0.9); }
.btn-star-favorite-input:focus-visible ~ .btn-star-favorite-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-star-favorite-input:checked ~ .btn-star-favorite-face {
  background-color: color-mix(in srgb, var(--star) 16%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--star) 55%, transparent);
}
.btn-star-favorite-input:checked ~ .btn-star-favorite-face svg {
  fill: var(--star);
  stroke: var(--star);
  animation: btn-star-favorite-spin 0.7s cubic-bezier(0.3, 0.7, 0.4, 1.3);
}
.btn-star-favorite-input:checked ~ .btn-star-favorite-face .btn-star-favorite-sparks i {
  animation: btn-star-favorite-spark 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) 0.3s;
}
@keyframes btn-star-favorite-spin {
  0% { transform: rotate(0deg) scale(0.4); }
  70% { transform: rotate(230deg) scale(1.25); }
  100% { transform: rotate(216deg) scale(1); }
}
@keyframes btn-star-favorite-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateY(-1.1em) scaleY(1); }
  100% { opacity: 1; transform: rotate(var(--a)) translateY(-2.1em) scaleY(0); }
}

.btn-play-pause {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;}
.btn-play-pause-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: 50%;
}
.btn-play-pause-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.4em var(--c);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.btn-play-pause-face::before,
.btn-play-pause-face::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--c);
  opacity: 0;
}
.btn-play-pause-icon {
  display: flex;
  width: 1.15em;
  height: 1.3em;
  transform: translateX(0.12em);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-play-pause-icon i {
  flex: 1;
  background: currentColor;
  transition: clip-path 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-play-pause-icon i:first-child { clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%); }
.btn-play-pause-icon i:last-child { clip-path: polygon(0 25%, 100% 50%, 100% 50%, 0 75%); }
.btn-play-pause:active .btn-play-pause-face { transform: scale(0.92); }
.btn-play-pause-input:focus-visible ~ .btn-play-pause-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-play-pause-input:checked ~ .btn-play-pause-face .btn-play-pause-icon { transform: none; }
.btn-play-pause-input:checked ~ .btn-play-pause-face .btn-play-pause-icon i:first-child { clip-path: polygon(0 0, 68% 0, 68% 100%, 0 100%); }
.btn-play-pause-input:checked ~ .btn-play-pause-face .btn-play-pause-icon i:last-child { clip-path: polygon(32% 0, 100% 0, 100% 100%, 32% 100%); }
.btn-play-pause-input:checked ~ .btn-play-pause-face::before,
.btn-play-pause-input:checked ~ .btn-play-pause-face::after {
  animation: btn-play-pause-wave 2s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.btn-play-pause-input:checked ~ .btn-play-pause-face::after { animation-delay: 1s; }
@keyframes btn-play-pause-wave {
  0% { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.7); }
}

.btn-upvote-counter {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-upvote-counter-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-upvote-counter-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  width: 3.6em;
  height: 4.2em;
  border-radius: 0.75em;
  background-color: color-mix(in srgb, var(--c) 6%, transparent);
  color: var(--c);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 30%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.btn-upvote-counter-arrow {
  overflow: hidden;
  width: 1.1em;
  height: 1.1em;
}
.btn-upvote-counter-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}
.btn-upvote-counter-count {
  display: flex;
  font-variant-numeric: tabular-nums;
}
.btn-upvote-counter-digit {
  overflow: hidden;
  height: 1.1em;
}
.btn-upvote-counter-reel {
  display: flex;
  flex-direction: column;
  transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.1s;
}
.btn-upvote-counter:active .btn-upvote-counter-face { transform: scale(0.93); }
.btn-upvote-counter-input:focus-visible ~ .btn-upvote-counter-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-upvote-counter-input:checked ~ .btn-upvote-counter-face {
  background-color: var(--c);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--c), 0 0.5em 1em -0.5em var(--c);
}
.btn-upvote-counter-input:checked ~ .btn-upvote-counter-face .btn-upvote-counter-reel { transform: translateY(-50%); }
.btn-upvote-counter-input:checked ~ .btn-upvote-counter-face .btn-upvote-counter-arrow svg {
  animation: btn-upvote-counter-shoot 0.6s cubic-bezier(0.5, 0, 0.3, 1);
}
@keyframes btn-upvote-counter-shoot {
  0% { transform: translateY(0); }
  40% { transform: translateY(-110%); animation-timing-function: step-end; }
  41% { transform: translateY(110%); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1.3); }
  100% { transform: translateY(0); }
}

.btn-speed-dial {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: grid;
  width: 3.4em;
  height: 3.4em;
  margin-top: 3em;
  font-size: var(--btn-size, 18px);
}
.btn-speed-dial-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: 50%;
}
.btn-speed-dial-fab {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: var(--c);
  color: #fff;
  box-shadow: 0 0.45em 1em -0.35em var(--c);
  transition: background-color 0.3s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.btn-speed-dial-fab i {
  grid-area: 1 / 1;
  width: 1.3em;
  height: 0.18em;
  border-radius: 0.1em;
  background: currentColor;
  transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.btn-speed-dial-fab i:last-child { transform: rotate(90deg); }
.btn-speed-dial-action {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  margin: -1.25em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  color: var(--c);
  box-shadow: 0 0.3em 0.7em -0.2em rgba(15, 23, 42, 0.35), inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: rotate(var(--a)) translate(0) rotate(calc(-1 * var(--a))) scale(0.4);
  transition:
    transform 0.3s cubic-bezier(0.5, 0, 0.75, 0) calc((2 - var(--i)) * 0.04s),
    opacity 0.2s ease calc((2 - var(--i)) * 0.04s),
    visibility 0s 0.4s;
}
.btn-speed-dial-action svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-speed-dial:active .btn-speed-dial-fab { transform: scale(0.92); }
.btn-speed-dial-input:focus-visible ~ .btn-speed-dial-fab,
.btn-speed-dial-action:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-speed-dial-input:checked ~ .btn-speed-dial-fab { background-color: color-mix(in srgb, var(--c) 75%, #0f172a); }
.btn-speed-dial-input:checked ~ .btn-speed-dial-fab i:first-child { transform: rotate(135deg); }
.btn-speed-dial-input:checked ~ .btn-speed-dial-fab i:last-child { transform: rotate(225deg); }
.btn-speed-dial-input:checked ~ .btn-speed-dial-action {
  opacity: 1;
  visibility: visible;
  transform: rotate(var(--a)) translate(3.6em) rotate(calc(-1 * var(--a))) scale(1);
  transition:
    transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i) * 0.06s),
    opacity 0.2s ease calc(var(--i) * 0.06s),
    visibility 0s;
}

.btn-mute-unmute {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-mute-unmute-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: 50%;
}
.btn-mute-unmute-face {
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  border-radius: 50%;
  background-color: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.4em var(--c);
  transition: background-color 0.3s ease, transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.btn-mute-unmute-face svg {
  width: 1.55em;
  height: 1.55em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.btn-mute-unmute-speaker { fill: currentColor; }
.btn-mute-unmute-wave {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), opacity 0.25s ease;
}
.btn-mute-unmute-wave:nth-child(3) { transition-delay: 0.08s; }
.btn-mute-unmute-cut,
.btn-mute-unmute-slash {
  stroke-dasharray: 23;
  stroke-dashoffset: 23;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-mute-unmute-cut {
  stroke: var(--c);
  stroke-width: 5;
  transition-property: stroke-dashoffset, stroke;
}
.btn-mute-unmute:active .btn-mute-unmute-face { transform: scale(0.9); }
.btn-mute-unmute-input:focus-visible ~ .btn-mute-unmute-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-mute-unmute-input:checked ~ .btn-mute-unmute-face { background-color: color-mix(in srgb, var(--c) 55%, #334155); }
.btn-mute-unmute-input:checked ~ .btn-mute-unmute-face .btn-mute-unmute-cut { stroke: color-mix(in srgb, var(--c) 55%, #334155); }
.btn-mute-unmute-input:checked ~ .btn-mute-unmute-face .btn-mute-unmute-wave {
  opacity: 0;
  transform: translateX(-60%) scale(0.3);
  transition-duration: 0.25s;
}
.btn-mute-unmute-input:checked ~ .btn-mute-unmute-face .btn-mute-unmute-wave:nth-child(2) { transition-delay: 0.08s; }
.btn-mute-unmute-input:checked ~ .btn-mute-unmute-face .btn-mute-unmute-wave:nth-child(3) { transition-delay: 0s; }
.btn-mute-unmute-input:checked ~ .btn-mute-unmute-face :is(.btn-mute-unmute-cut, .btn-mute-unmute-slash) {
  stroke-dashoffset: 0;
  transition-delay: 0.12s;
}

.btn-paper-plane-send {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-paper-plane-send-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-paper-plane-send-face {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55em;
  width: 7.6em;
  height: 2.9em;
  box-sizing: border-box;
  padding-left: 1.4em;
  overflow: hidden;
  border-radius: 1.45em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.4em var(--c);
  transition: transform 0.2s ease;
}
.btn-paper-plane-send-face svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-paper-plane-send-plane {
  flex: none;
  width: 1.3em;
  height: 1.3em;
}
.btn-paper-plane-send-sent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  opacity: 0;
}
.btn-paper-plane-send-sent svg {
  width: 1.15em;
  height: 1.15em;
  stroke-width: 3;
}
.btn-paper-plane-send:active .btn-paper-plane-send-face { transform: scale(0.95); }
.btn-paper-plane-send-input:focus-visible ~ .btn-paper-plane-send-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-paper-plane-send-input:checked ~ .btn-paper-plane-send-face .btn-paper-plane-send-plane {
  animation: btn-paper-plane-send-fly 1s forwards;
}
.btn-paper-plane-send-input:checked ~ .btn-paper-plane-send-face .btn-paper-plane-send-label {
  animation: btn-paper-plane-send-label 0.4s cubic-bezier(0.5, 0, 0.75, 0) 0.1s forwards;
}
.btn-paper-plane-send-input:checked ~ .btn-paper-plane-send-face .btn-paper-plane-send-sent {
  animation: btn-paper-plane-send-in 0.4s cubic-bezier(0.3, 0.7, 0.4, 1.4) 0.85s forwards;
}
@keyframes btn-paper-plane-send-fly {
  0% { transform: none; }
  18% { transform: translate(-0.35em, 0.15em) rotate(-12deg) scale(0.9); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.3); }
  70%, 100% { transform: translate(7.4em, -0.9em) rotate(-20deg) scale(1); }
}
@keyframes btn-paper-plane-send-label {
  to { opacity: 0; transform: translateX(3em); }
}
@keyframes btn-paper-plane-send-in {
  from { opacity: 0; transform: translateY(0.6em); }
  to { opacity: 1; transform: none; }
}

.btn-toggle-group {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  gap: 0.25em;
  padding: 0.3em;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--c) 7%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 20%, transparent);
  font: 600 var(--btn-size, 18px)/1 Georgia, "Times New Roman", serif;
}
.btn-toggle-group-key {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn-toggle-group-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-toggle-group-key > :not(input) {
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 0.55em;
  color: color-mix(in srgb, var(--c) 40%, currentColor);
  font-size: 1.1em;
  text-underline-offset: 0.15em;
  transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.btn-toggle-group-key b { font-weight: 800; }
.btn-toggle-group-key em { font-style: italic; }
.btn-toggle-group-key:active > :not(input) {
  transform: scale(0.86);
  transition-duration: 0.1s;
}
.btn-toggle-group-input:focus-visible + * {
  outline: 2px solid var(--c);
  outline-offset: 0.1em;
}
.btn-toggle-group-input:checked + * {
  background-color: var(--c);
  color: #fff;
  box-shadow: inset 0 0.12em 0.25em rgba(0, 0, 0, 0.25), 0 0.2em 0.5em -0.2em var(--c);
  animation: btn-toggle-group-pop 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes btn-toggle-group-pop {
  0% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

@property --btn-record-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
.btn-record {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-record-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-record-face {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 1.3em 0.45em 0.45em;
  border-radius: 2em;
  background-color: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 28%, transparent);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.3s ease;
}
.btn-record-dot {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.14em color-mix(in srgb, var(--c) 45%, transparent);
}
.btn-record-dot::before,
.btn-record-dot::after {
  content: "";
  grid-area: 1 / 1;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: var(--c);
  transition: transform 0.4s cubic-bezier(0.3, 1.5, 0.5, 1), border-radius 0.4s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.btn-record-dot::after {
  z-index: -1;
  opacity: 0;
  transition: none;
}
.btn-record-text {
  display: grid;
  font-variant-numeric: tabular-nums;
}
.btn-record-text > span {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.btn-record-time {
  opacity: 0;
  transform: translateY(0.6em);
  counter-reset: btn-record-s var(--btn-record-s);
}
.btn-record-time::before { content: "00:" counter(btn-record-s, decimal-leading-zero); }
.btn-record:active .btn-record-face { transform: scale(0.95); }
.btn-record-input:focus-visible ~ .btn-record-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-record-input:checked ~ .btn-record-face { box-shadow: inset 0 0 0 2px var(--c); }
.btn-record-input:checked ~ .btn-record-face .btn-record-dot::before {
  border-radius: 0.2em;
  transform: scale(0.62);
}
.btn-record-input:checked ~ .btn-record-face .btn-record-dot::after {
  animation: btn-record-halo 1.4s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.btn-record-input:checked ~ .btn-record-face .btn-record-text > span:first-child {
  opacity: 0;
  transform: translateY(-0.6em);
}
.btn-record-input:checked ~ .btn-record-face .btn-record-time {
  opacity: 1;
  transform: none;
  animation: btn-record-count 60s steps(60) infinite;
}
@keyframes btn-record-halo {
  0% { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes btn-record-count {
  from { --btn-record-s: 0; }
  to { --btn-record-s: 60; }
}

.btn-lock-unlock {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  --ok: #16a34a;}
.btn-lock-unlock-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-lock-unlock-face {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  width: 8.6em;
  box-sizing: border-box;
  padding: 0.75em 1.3em;
  border-radius: 0.7em;
  background-color: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.4em var(--c);
  transition: background-color 0.35s ease 0.25s, box-shadow 0.35s ease 0.25s, transform 0.2s ease;
}
.btn-lock-unlock-face svg {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.btn-lock-unlock-face svg * { transform-box: fill-box; }
.btn-lock-unlock-shackle {
  transform-origin: 0 100%;
  transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.btn-lock-unlock-hole {
  transform-origin: 50% 0;
  transition: transform 0.25s ease;
}
.btn-lock-unlock-text { display: grid; }
.btn-lock-unlock-text span {
  grid-area: 1 / 1;
  transition: opacity 0.25s ease 0.2s, transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1) 0.2s;
}
.btn-lock-unlock-text span:last-child {
  opacity: 0;
  transform: translateY(0.6em);
}
.btn-lock-unlock:active .btn-lock-unlock-face { transform: scale(0.95); }
.btn-lock-unlock-input:focus-visible ~ .btn-lock-unlock-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face {
  background-color: var(--ok);
  box-shadow: 0 0.4em 1em -0.4em var(--ok);
}
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face .btn-lock-unlock-hole { transform: rotate(-90deg); }
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face .btn-lock-unlock-shackle {
  transform: translateY(-28%) scaleX(-1);
  animation: btn-lock-unlock-open 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) 0.1s both;
}
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face .btn-lock-unlock-text span:first-child {
  opacity: 0;
  transform: translateY(-0.6em);
}
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face .btn-lock-unlock-text span:last-child {
  opacity: 1;
  transform: none;
}
@keyframes btn-lock-unlock-open {
  0% { transform: none; }
  35% { transform: translateY(-34%); }
  100% { transform: translateY(-28%) scaleX(-1); }
}

@property --btn-resend-cooldown-n {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
.btn-resend-cooldown {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  font-size: var(--btn-size, 18px);
}
.btn-resend-cooldown-btn {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  width: 11em;
  padding: 0.8em 1em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.4em var(--c);
  font-size: 1em;
  transition: transform 0.2s ease;}
.btn-resend-cooldown-btn:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-resend-cooldown-wait {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 12%, #eef1f5);
  color: color-mix(in srgb, var(--c) 45%, #64748b);
  font: 600 1em/1.1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  cursor: not-allowed;
  counter-reset: btn-resend-cooldown-n calc(var(--btn-resend-cooldown-n) + 0.49);
  opacity: 0;
  visibility: hidden;
  transition:
    --btn-resend-cooldown-n 6s linear,
    opacity 0.25s ease 6s,
    visibility 0s 6.25s;
}
.btn-resend-cooldown-wait::before { content: "Resend in " counter(btn-resend-cooldown-n) "s"; }
.btn-resend-cooldown-wait::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.2em;
  background: var(--c);
  opacity: 0.6;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 6s linear;
}
.btn-resend-cooldown-btn:active { transform: scale(0.96); }
.btn-resend-cooldown-btn:active + .btn-resend-cooldown-wait {
  --btn-resend-cooldown-n: 6;
  opacity: 1;
  visibility: visible;
  transition: none;
}
.btn-resend-cooldown-btn:active + .btn-resend-cooldown-wait::after {
  transform: scaleX(1);
  transition: none;
}

.btn-expand-email {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  width: 8.6em;
  height: 3em;
  border-radius: 1.5em;
  background-color: var(--c);
  box-shadow: 0 0.4em 1em -0.4em var(--c), inset 0 0 0 2px var(--c);
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  transition:
    width 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    background-color 0.3s ease 0.1s,
    transform 0.2s ease;
}
.btn-expand-email-field {
  position: absolute;
  inset: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 3.4em 0 1.3em;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: #0f172a;
  font: 500 0.95em/1 system-ui, sans-serif;
  outline: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.btn-expand-email-field::placeholder { color: #94a3b8; }
.btn-expand-email-cover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.2s ease 0.15s;
}
.btn-expand-email-send {
  position: absolute;
  top: 0.35em;
  right: 0.35em;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.4) rotate(-90deg);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s 0.2s;
}
.btn-expand-email-send svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-expand-email:not(:focus-within):active { transform: scale(0.95); }
.btn-expand-email:is(:focus-within, :has(.btn-expand-email-field:not(:placeholder-shown))) {
  width: 17em;
  background-color: color-mix(in srgb, var(--c) 5%, #fff);
}
.btn-expand-email:focus-within { box-shadow: 0 0.4em 1em -0.4em var(--c), inset 0 0 0 2px var(--c), 0 0 0 0.25em color-mix(in srgb, var(--c) 25%, transparent); }
.btn-expand-email:is(:focus-within, :has(.btn-expand-email-field:not(:placeholder-shown))) .btn-expand-email-field {
  opacity: 1;
  transition-delay: 0.25s;
}
.btn-expand-email:is(:focus-within, :has(.btn-expand-email-field:not(:placeholder-shown))) .btn-expand-email-cover {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}
.btn-expand-email:is(:focus-within, :has(.btn-expand-email-field:not(:placeholder-shown))) .btn-expand-email-send {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.2s ease 0.3s, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.3s, visibility 0s 0.3s;
}

.btn-disabled-state {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9em;
  font: 500 var(--btn-size, 18px)/1.2 system-ui, sans-serif;
}
.btn-disabled-state-terms {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.9em;
  cursor: pointer;
}
.btn-disabled-state-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-disabled-state-box {
  position: relative;
  width: 1.15em;
  height: 1.15em;
  border-radius: 0.3em;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 55%, transparent);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-disabled-state-box::after {
  content: "";
  position: absolute;
  left: 0.38em;
  top: 0.16em;
  width: 0.3em;
  height: 0.58em;
  border: solid #fff;
  border-width: 0 0.13em 0.13em 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.btn-disabled-state-btn {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 9.5em;
  font-size: 1em;
  background-color: color-mix(in srgb, var(--c) 10%, #e5e7eb);
  color: color-mix(in srgb, var(--c) 25%, #6b7280);
  cursor: not-allowed;
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease;}
.btn-disabled-state-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(-45deg, transparent 0 0.45em, color-mix(in srgb, var(--c) 10%, rgba(107, 114, 128, 0.18)) 0.45em 0.9em);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.5s ease;
}
.btn-disabled-state-btn svg {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-disabled-state-arrow {
  opacity: 0;
  transform: translateX(-30%);
  transform-box: fill-box;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.btn-disabled-state-lock { transition: opacity 0.2s ease; }
.btn-disabled-state-input:focus-visible + .btn-disabled-state-box,
.btn-disabled-state-btn:focus-visible {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-disabled-state:has(.btn-disabled-state-btn:active) .btn-disabled-state-input:not(:checked) + .btn-disabled-state-box {
  animation: btn-disabled-state-nudge 0.6s ease-out;
}
.btn-disabled-state-input:checked + .btn-disabled-state-box {
  background-color: var(--c);
  box-shadow: inset 0 0 0 2px var(--c);
}
.btn-disabled-state-input:checked + .btn-disabled-state-box::after { transform: rotate(45deg) scale(1); }
.btn-disabled-state:has(.btn-disabled-state-input:checked) .btn-disabled-state-btn {
  background-color: var(--c);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0.4em 1em -0.4em var(--c);
}
.btn-disabled-state:has(.btn-disabled-state-input:checked) .btn-disabled-state-btn::before {
  transform: translateX(100%);
  opacity: 0;
}
.btn-disabled-state:has(.btn-disabled-state-input:checked) .btn-disabled-state-lock { opacity: 0; }
.btn-disabled-state:has(.btn-disabled-state-input:checked) .btn-disabled-state-arrow {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}
.btn-disabled-state:has(.btn-disabled-state-input:checked) .btn-disabled-state-btn:active { transform: scale(0.96); }
@keyframes btn-disabled-state-nudge {
  0% { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); }
  100% { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 0.6em transparent; }
}

.btn-flip-confirm {
  --c: var(--btn-color, #3b82f6);
  --no: #e11d48;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  perspective: 30em;
}
.btn-flip-confirm-card {
  position: relative;
  display: grid;
  width: 12em;
  height: 3em;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.btn-flip-confirm-front,
.btn-flip-confirm-back {
  grid-area: 1 / 1;
  border-radius: 0.7em;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.btn-flip-confirm-front {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.4em var(--c);
  cursor: pointer;
}
.btn-flip-confirm-front svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-flip-confirm-arm,
.btn-flip-confirm-done {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.btn-flip-confirm-back {
  display: flex;
  gap: 0.3em;
  padding: 0.3em;
  box-sizing: border-box;
  background: color-mix(in srgb, var(--no) 8%, #fff);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--no) 30%, transparent), 0 0.4em 1em -0.5em var(--no);
  transform: rotateX(180deg);
  pointer-events: none;
}
.btn-flip-confirm-cancel,
.btn-flip-confirm-yes {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  place-items: center;
  border-radius: 0.5em;
  cursor: pointer;
  font-size: 0.9em;
  transition: flex-grow 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease, background-color 0.3s ease;
}
.btn-flip-confirm-cancel {
  flex: 1 1 0;
  color: #475569;
}
.btn-flip-confirm-yes {
  flex: 1.3 1 0;
  background: var(--no);
  color: #fff;
}
.btn-flip-confirm-ask,
.btn-flip-confirm-ok {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  white-space: nowrap;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.btn-flip-confirm-ok {
  opacity: 0;
  transform: scale(0.6);
}
.btn-flip-confirm-ok svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn-flip-confirm-front:active,
.btn-flip-confirm-cancel:active,
.btn-flip-confirm-yes:active { filter: brightness(0.92); }
.btn-flip-confirm-front:has(.btn-flip-confirm-arm:focus-visible),
.btn-flip-confirm-yes:has(.btn-flip-confirm-done:focus-visible) {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-flip-confirm:has(.btn-flip-confirm-arm:checked) .btn-flip-confirm-card { transform: rotateX(180deg); }
.btn-flip-confirm:has(.btn-flip-confirm-arm:checked) .btn-flip-confirm-front { pointer-events: none; }
.btn-flip-confirm:has(.btn-flip-confirm-arm:checked) .btn-flip-confirm-back { pointer-events: auto; }
.btn-flip-confirm:has(.btn-flip-confirm-done:checked) .btn-flip-confirm-cancel {
  flex-grow: 0.0001;
  opacity: 0;
  pointer-events: none;
}
.btn-flip-confirm:has(.btn-flip-confirm-done:checked) .btn-flip-confirm-yes {
  flex-grow: 1;
  background-color: #16a34a;
}
.btn-flip-confirm:has(.btn-flip-confirm-done:checked) .btn-flip-confirm-ask {
  opacity: 0;
  transform: scale(0.6);
}
.btn-flip-confirm:has(.btn-flip-confirm-done:checked) .btn-flip-confirm-ok {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}

.btn-power {
  --c: var(--btn-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.btn-power-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border-radius: 50%;
}
.btn-power-face {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.8em;
  height: 3.8em;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 14%, #2a3140), color-mix(in srgb, var(--c) 10%, #0d1117));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px rgba(148, 163, 184, 0.14),
    0 0.35em 0.8em -0.2em rgba(2, 6, 23, 0.55),
    0 0 0 0 transparent;
  transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), box-shadow 0.5s ease;
}
.btn-power-ring {
  position: absolute;
  inset: 0.18em;
  width: calc(100% - 0.36em);
  height: calc(100% - 0.36em);
  fill: none;
  stroke: var(--c);
  stroke-width: 2.5;
  stroke-linecap: round;
  transform: rotate(-90deg);
}
.btn-power-ring circle:first-child { stroke: rgba(148, 163, 184, 0.16); }
.btn-power-ring circle:last-child {
  stroke-dasharray: 139;
  stroke-dashoffset: 139;
  transition: stroke-dashoffset 0.3s ease;
}
.btn-power-icon {
  width: 1.5em;
  height: 1.5em;
  fill: none;
  stroke: #64748b;
  stroke-width: 2.4;
  stroke-linecap: round;
  transition: stroke 0.3s ease;
}
.btn-power:active .btn-power-face { transform: scale(0.93); }
.btn-power-input:focus-visible ~ .btn-power-face {
  outline: 2px solid var(--c);
  outline-offset: 0.2em;
}
.btn-power-input:checked ~ .btn-power-face {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent),
    0 0.35em 0.8em -0.2em rgba(2, 6, 23, 0.55),
    0 0 1.2em 0.1em color-mix(in srgb, var(--c) 45%, transparent);
  animation: btn-power-breathe 2.4s ease-in-out 0.8s infinite;
}
.btn-power-input:checked ~ .btn-power-face .btn-power-ring circle:last-child {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-power-input:checked ~ .btn-power-face .btn-power-icon {
  stroke: color-mix(in srgb, var(--c) 70%, #fff);
  animation: btn-power-flicker 0.6s steps(1) 0.1s;
}
@keyframes btn-power-breathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent),
      0 0.35em 0.8em -0.2em rgba(2, 6, 23, 0.55),
      0 0 1.2em 0.1em color-mix(in srgb, var(--c) 45%, transparent);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent),
      0 0.35em 0.8em -0.2em rgba(2, 6, 23, 0.55),
      0 0 0.6em 0 color-mix(in srgb, var(--c) 25%, transparent);
  }
}
@keyframes btn-power-flicker {
  0%, 30%, 60% { opacity: 1; }
  15%, 45% { opacity: 0.35; }
}

.btn-animated-gradient {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0.85em 1.9em;
  border-radius: 2em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.55em 1.2em -0.55em color-mix(in srgb, var(--c) 80%, transparent);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;}
.btn-animated-gradient::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: calc(100% + 12em);
  background: linear-gradient(90deg,
    var(--c),
    color-mix(in srgb, var(--c) 45%, #a855f7),
    color-mix(in srgb, var(--c) 35%, #ec4899),
    var(--c)) 0 0 / 12em 100%;
  animation: btn-animated-gradient-flow 4s linear infinite;
}
.btn-animated-gradient:is(:hover, :focus-visible) {
  box-shadow: 0 0.8em 1.6em -0.6em color-mix(in srgb, var(--c) 90%, transparent);
}
.btn-animated-gradient:active { transform: scale(0.96); }
@keyframes btn-animated-gradient-flow {
  to { transform: translateX(-12em); }
}

.btn-shimmer {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  padding: 0.85em 1.9em;
  border-radius: 0.7em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 88%, #fff), color-mix(in srgb, var(--c) 80%, #000));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0.45em 1em -0.4em color-mix(in srgb, var(--c) 85%, transparent);
  transition: transform 0.15s ease;}
.btn-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, 0.25) 44%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.25) 56%, transparent 64%);
  transform: translateX(-100%);
  animation: btn-shimmer-sweep 3.2s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  pointer-events: none;
}
.btn-shimmer:active { transform: scale(0.97); }
@keyframes btn-shimmer-sweep {
  0%        { transform: translateX(-100%); }
  40%, 100% { transform: translateX(100%); }
}

.btn-pulse-cta {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  padding: 0.85em 1.9em;
  border-radius: 2em;
  background: var(--c);
  color: #fff;
  transition: transform 0.2s ease;}
.btn-pulse-cta::before,
.btn-pulse-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--c);
  opacity: 0;
  animation: btn-pulse-cta-ring 2.4s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
  pointer-events: none;
}
.btn-pulse-cta::after { animation-delay: 1.2s; }
.btn-pulse-cta:active { transform: scale(0.96); }
@keyframes btn-pulse-cta-ring {
  0%   { opacity: 0.45; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22, 1.75); }
}

.btn-rainbow-border {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --rgb: linear-gradient(90deg, #ff3d6e, #ff9f1c, #ffe14d, #3ddc84, #2ec5ff, #7c5cff, #ff3d6e);
  position: relative;
  isolation: isolate;
  padding: 0;
  border-radius: 0.75em;
  background: transparent;
  color: #fff;
  transition: transform 0.2s ease;}
.btn-rainbow-border::before {
  content: "";
  position: absolute;
  top: 45%;
  right: 10%;
  bottom: -0.3em;
  left: 10%;
  z-index: -1;
  background: var(--rgb) 0 0 / 14em 100%;
  filter: blur(0.8em);
  opacity: 0.7;
  animation: btn-rainbow-border-glow 3s linear infinite;
  transition: opacity 0.3s ease;
}
.btn-rainbow-border-face {
  display: block;
  padding: 0.8em 1.8em;
  border: 2px solid transparent;
  border-radius: inherit;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 16%, #0c0f16), color-mix(in srgb, var(--c) 16%, #0c0f16)) padding-box,
    var(--rgb) 0 0 / 14em 100% border-box;
  animation: btn-rainbow-border-flow 3s linear infinite;
}
.btn-rainbow-border:is(:hover, :focus-visible)::before { opacity: 1; }
.btn-rainbow-border:active { transform: scale(0.97); }
@keyframes btn-rainbow-border-flow {
  to { background-position: 0 0, 14em 0; }
}
@keyframes btn-rainbow-border-glow {
  to { background-position: 14em 0; }
}

.btn-border-beam {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --w: 12em;
  --h: 3em;
  position: relative;
  width: var(--w);
  height: var(--h);
  padding: 0;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent);
  transition: background-color 0.25s ease, transform 0.2s ease;}
.btn-border-beam-ring {
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.btn-border-beam-ring i {
  position: absolute;
  top: -3em;
  left: -3em;
  width: 6em;
  height: 6em;
  background: radial-gradient(closest-side, var(--c) 15%, transparent);
  animation: btn-border-beam-orbit 4s linear infinite;
}
.btn-border-beam-ring i:nth-child(2) {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 35%, #ec4899) 15%, transparent);
  animation-delay: -2s;
}
.btn-border-beam:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 14%, transparent); }
.btn-border-beam:active { transform: scale(0.97); }
@keyframes btn-border-beam-orbit {
  0%, 100% { transform: translate(0, 0); }
  40%      { transform: translate(var(--w), 0); }
  50%      { transform: translate(var(--w), var(--h)); }
  90%      { transform: translate(0, var(--h)); }
}

.btn-aurora {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0.85em 1.9em 0.85em 1.6em;
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 16%, #070912);
  color: #fff;
  text-shadow: 0 0.05em 0.3em rgba(7, 9, 18, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0.5em 1.4em -0.5em color-mix(in srgb, var(--c) 70%, transparent);
  transition: transform 0.2s ease, box-shadow 0.3s ease;}
.btn-aurora-lights {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.btn-aurora-lights i {
  position: absolute;
  width: 7em;
  height: 4.5em;
  background: radial-gradient(closest-side, var(--l), transparent);
  animation: btn-aurora-drift 6s ease-in-out infinite alternate;
}
.btn-aurora-lights i:nth-child(1) { --l: var(--c); --dx: 4em; --dy: 0.8em; top: -2em; left: -2.5em; }
.btn-aurora-lights i:nth-child(2) { --l: color-mix(in srgb, var(--c) 30%, #ec4899); --dx: -4.5em; --dy: -1em; right: -3em; bottom: -2.2em; animation-duration: 7s; animation-delay: -3s; }
.btn-aurora-lights i:nth-child(3) { --l: color-mix(in srgb, var(--c) 30%, #22d3ee); --dx: 3em; --dy: -1.2em; left: 10%; bottom: -3em; animation-duration: 5s; animation-delay: -1.5s; }
.btn-aurora-icon {
  width: 1.2em;
  height: 1.2em;
  animation: btn-aurora-twinkle 2.4s ease-in-out infinite;
}
.btn-aurora:is(:hover, :focus-visible) {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 0.6em 1.8em -0.5em color-mix(in srgb, var(--c) 85%, transparent);
}
.btn-aurora:active { transform: scale(0.97); }
@keyframes btn-aurora-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.25, 0.9); }
}
@keyframes btn-aurora-twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50%      { transform: scale(1.15) rotate(20deg); opacity: 1; }
}

.btn-bounce {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  padding: 0 0 0.8em;
  background: transparent;
  color: #fff;}
.btn-bounce::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 0;
  left: 12%;
  height: 0.55em;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent);
  animation: btn-bounce-shadow 2.2s infinite;
}
.btn-bounce-face {
  display: block;
  padding: 0.8em 1.8em;
  border-radius: 0.75em;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: btn-bounce-hop 2.2s infinite;
}
.btn-bounce:active .btn-bounce-face { animation-play-state: paused; }
@keyframes btn-bounce-hop {
  0%   { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  8%   { transform: translateY(0) scale(1.1, 0.88); animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1); }
  30%  { transform: translateY(-1.5em) scale(0.95, 1.06); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.4); }
  46%  { transform: translateY(0) scale(1.12, 0.86); animation-timing-function: ease-out; }
  56%  { transform: translateY(-0.35em) scale(0.98, 1.03); animation-timing-function: ease-in; }
  64%  { transform: translateY(0) scale(1.04, 0.96); animation-timing-function: ease-out; }
  72%, 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes btn-bounce-shadow {
  0%, 8%, 46%, 64%, 72%, 100% { transform: scale(1); opacity: 1; }
  30% { transform: scale(0.6); opacity: 0.45; }
  56% { transform: scale(0.9); opacity: 0.85; }
}

.btn-shake {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0.8em 1.6em 0.8em 1.4em;
  border-radius: 0.6em;
  background: var(--c);
  color: #fff;
  animation: btn-shake-shake 3.6s ease-in-out infinite;}
.btn-shake-icon {
  width: 1.2em;
  height: 1.2em;
  transform-origin: 50% 20%;
  animation: btn-shake-swing 3.6s ease-in-out 0.06s infinite;
}
.btn-shake:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 85%, #000);
  animation-play-state: paused;
}
.btn-shake:active { scale: 0.96; }
@keyframes btn-shake-shake {
  0%, 26%, 100% { transform: translateX(0) rotate(0deg); }
  3%  { transform: translateX(-0.3em) rotate(-3deg); }
  7%  { transform: translateX(0.3em) rotate(3deg); }
  11% { transform: translateX(-0.22em) rotate(-2deg); }
  15% { transform: translateX(0.16em) rotate(1.2deg); }
  19% { transform: translateX(-0.08em) rotate(-0.5deg); }
  23% { transform: translateX(0.03em) rotate(0.2deg); }
}
@keyframes btn-shake-swing {
  0%, 28%, 100% { transform: rotate(0deg); }
  5%  { transform: rotate(14deg); }
  10% { transform: rotate(-12deg); }
  15% { transform: rotate(8deg); }
  20% { transform: rotate(-4deg); }
  24% { transform: rotate(2deg); }
}

.btn-arrow-loop {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.9em;
  padding: 0.35em 0.35em 0.35em 1.4em;
  border-radius: 2em;
  background: var(--c);
  color: #fff;
  transition: transform 0.2s ease, background-color 0.25s ease;}
.btn-arrow-loop-chip {
  display: block;
  overflow: hidden;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: #fff;
  color: var(--c);
}
.btn-arrow-loop-track {
  display: flex;
  width: 4.6em;
  transform: translateX(-2.3em);
  animation: btn-arrow-loop-go 2.8s infinite;
}
.btn-arrow-loop-track svg {
  display: block;
  flex: none;
  width: 2.3em;
  height: 2.3em;
  padding: 0.6em;
}
.btn-arrow-loop:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 85%, #000); }
.btn-arrow-loop:active { transform: scale(0.96); }
@keyframes btn-arrow-loop-go {
  0%        { transform: translateX(-2.3em); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
  10%       { transform: translateX(-2.6em); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  38%, 100% { transform: translateX(0); }
}

.btn-chevrons {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.6em;
  padding: 0.75em 1.3em 0.75em 1.6em;
  border: 2px solid var(--c);
  border-radius: 0.6em;
  background: transparent;
  color: var(--c);
  transition: background-color 0.25s ease, transform 0.2s ease;}
.btn-chevrons-arrows { display: inline-flex; }
.btn-chevrons-arrows svg {
  display: block;
  width: 0.55em;
  height: 1.1em;
  margin-left: -0.08em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.2;
  animation: btn-chevrons-run 1.4s ease-in-out calc(var(--i) * 0.18s) infinite;
}
.btn-chevrons:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 10%, transparent); }
.btn-chevrons:active { transform: scale(0.97); }
@keyframes btn-chevrons-run {
  0%, 70%, 100% { opacity: 0.2; transform: translateX(0); }
  30%           { opacity: 1; transform: translateX(0.18em); }
}

.btn-announcement-pill {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.6em;
  padding: 0.3em 0.8em 0.3em 0.3em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: inherit;
  font-weight: 500;
  transition: border-color 0.25s ease, background-color 0.25s ease;}
.btn-announcement-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 0.75em 0.4em 0.65em;
  border-radius: 2em;
  background: var(--c);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-announcement-pill-dot {
  position: relative;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #fff;
}
.btn-announcement-pill-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  animation: btn-announcement-pill-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.btn-announcement-pill-chev {
  width: 1em;
  height: 1em;
  color: var(--c);
  transition: transform 0.25s ease;
}
.btn-announcement-pill:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  background: color-mix(in srgb, var(--c) 14%, transparent);
}
.btn-announcement-pill:is(:hover, :focus-visible) .btn-announcement-pill-chev { transform: translateX(0.2em); }
@keyframes btn-announcement-pill-ping {
  75%, 100% { transform: scale(2.6); opacity: 0; }
}

.btn-app-download {
  --c: var(--btn-color, #3b82f6);
  font-size: var(--btn-size, 18px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;}
.btn-app-download-badge {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.6em;
  padding: 0.45em 1.1em 0.45em 0.8em;
  border: 1px solid color-mix(in srgb, var(--c) 25%, rgba(255, 255, 255, 0.28));
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 12%, #0a0c11);
  color: #fff;
  text-align: left;
  transition: transform 0.2s ease, border-color 0.25s ease, box-shadow 0.25s ease;}
.btn-app-download-glyph {
  position: relative;
  width: 1.7em;
  height: 1.7em;
}
.btn-app-download-glyph svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.btn-app-download-arrow {
  color: color-mix(in srgb, var(--c) 70%, #fff);
  opacity: 0;
  animation: btn-app-download-drop 2.4s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.btn-app-download-badge + .btn-app-download-badge .btn-app-download-arrow { animation-delay: 0.5s; }
.btn-app-download-text {
  display: grid;
  font-size: 1.05em;
  line-height: 1.1;
}
.btn-app-download-text small {
  font-size: 0.64em;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.75;
}
.btn-app-download-badge:is(:hover, :focus-visible) {
  border-color: var(--c);
  box-shadow: 0 0.4em 1em -0.4em color-mix(in srgb, var(--c) 70%, transparent);
}
.btn-app-download-badge:active { transform: scale(0.96); }
@keyframes btn-app-download-drop {
  0%   { opacity: 0; transform: translateY(-0.35em); }
  25%  { opacity: 1; }
  55%  { opacity: 1; transform: translateY(0.05em); }
  75%, 100% { opacity: 0; transform: translateY(0.15em); }
}

.btn-social-login {
  --c: var(--btn-color, #3b82f6);
  font-size: var(--btn-size, 18px);
  display: grid;
  gap: 0.45em;
  width: 15em;}
.btn-social-login-btn {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  justify-content: flex-start;
  gap: 0.75em;
  padding: 0.6em 1em;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  background: color-mix(in srgb, var(--c) 6%, transparent);
  color: inherit;
  font-size: 0.9em;
  font-weight: 500;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;}
.btn-social-login-btn svg {
  flex: none;
  width: 1.2em;
  height: 1.2em;
  color: var(--c);
}
.btn-social-login-btn:first-child {
  border-color: var(--c);
  background: var(--c);
  color: #fff;
  font-weight: 600;
}
.btn-social-login-btn:first-child svg { color: inherit; }
.btn-social-login-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--c) 28%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: btn-social-login-glint 4s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--i) * 0.16s) infinite;
  pointer-events: none;
}
.btn-social-login-btn:first-child::after {
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.4) 50%, transparent 65%);
}
.btn-social-login-btn:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--c) 55%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.btn-social-login-btn:first-child:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 88%, #000); }
.btn-social-login-btn:active { transform: scale(0.98); }
@keyframes btn-social-login-glint {
  0%        { transform: translateX(-100%); }
  30%, 100% { transform: translateX(100%); }
}

.btn-chat-fab {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;
  padding: 0;
  border-radius: 2em;
  background: transparent;
  color: inherit;
  font-weight: 500;}
.btn-chat-fab-circle {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.3em color-mix(in srgb, var(--c) 60%, transparent);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-chat-fab-circle::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: var(--c);
  animation: btn-chat-fab-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.btn-chat-fab-circle svg {
  width: 1.55em;
  height: 1.55em;
}
.btn-chat-fab-bubble {
  padding: 0.6em 0.9em;
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  border-radius: 1em 1em 0.25em 1em;
  background: color-mix(in srgb, var(--c) 6%, #fff);
  color: color-mix(in srgb, var(--c) 25%, #111827);
  box-shadow: 0 0.35em 1em -0.3em rgba(15, 23, 42, 0.3);
  font-size: 0.85em;
  white-space: nowrap;
  transform-origin: 100% 100%;
  animation: btn-chat-fab-greet 6s infinite;
}
.btn-chat-fab:is(:hover, :focus-visible) .btn-chat-fab-circle { transform: scale(1.08); }
.btn-chat-fab:active .btn-chat-fab-circle { transform: scale(0.94); }
@keyframes btn-chat-fab-ping {
  0%        { transform: scale(1); opacity: 0.55; }
  80%, 100% { transform: scale(1.7); opacity: 0; }
}
@keyframes btn-chat-fab-greet {
  0%, 5%    { opacity: 0; transform: translateX(0.8em) scale(0.6); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  14%, 72%  { opacity: 1; transform: none; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  80%, 100% { opacity: 0; transform: translateX(0.8em) scale(0.6); }
}

.btn-file-upload {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  gap: 0.8em;
  padding: 0.75em 1.3em 0.75em 0.8em;
  border: 2px dashed color-mix(in srgb, var(--c) 45%, transparent);
  border-radius: 0.9em;
  background: color-mix(in srgb, var(--c) 5%, transparent);
  color: inherit;
  text-align: left;
  transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.15s ease;}
.btn-file-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}
.btn-file-upload-icon {
  position: relative;
  flex: none;
  overflow: hidden;
  width: 2.5em;
  height: 2.5em;
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
}
.btn-file-upload-icon svg {
  position: absolute;
  inset: 0.45em;
  width: 1.6em;
  height: 1.6em;
}
.btn-file-upload-arrow { animation: btn-file-upload-rise 2s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.btn-file-upload-text {
  display: grid;
  gap: 0.2em;
}
.btn-file-upload-text small {
  font-size: 0.72em;
  font-weight: 400;
  opacity: 0.65;
}
.btn-file-upload:is(:hover, :focus-within) {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.btn-file-upload:focus-within {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
.btn-file-upload:active { transform: scale(0.98); }
@keyframes btn-file-upload-rise {
  0%        { opacity: 0; transform: translateY(0.9em); }
  20%, 55%  { opacity: 1; transform: translateY(0); }
  80%, 100% { opacity: 0; transform: translateY(-0.9em); }
}

.btn-audio-play {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.7em;
  padding: 0.4em 1.2em 0.4em 0.4em;
  border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: inherit;
  transition: background-color 0.25s ease, transform 0.15s ease;}
.btn-audio-play-icon {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
}
.btn-audio-play-icon svg {
  width: 1em;
  height: 1em;
  margin-left: 0.1em;
}
.btn-audio-play-bars {
  display: flex;
  align-items: flex-end;
  gap: 0.16em;
  height: 1.1em;
}
.btn-audio-play-bars i {
  width: 0.2em;
  height: 100%;
  border-radius: 0.1em;
  background: var(--c);
  transform-origin: 50% 100%;
  animation: btn-audio-play-eq 0.9s ease-in-out infinite alternate;
}
.btn-audio-play-bars i:nth-child(2) { animation-duration: 0.62s; animation-delay: -0.3s; }
.btn-audio-play-bars i:nth-child(3) { animation-duration: 0.78s; animation-delay: -0.5s; }
.btn-audio-play-bars i:nth-child(4) { animation-duration: 0.55s; animation-delay: -0.2s; }
.btn-audio-play-bars i:nth-child(5) { animation-duration: 0.84s; animation-delay: -0.65s; }
.btn-audio-play:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 16%, transparent); }
.btn-audio-play:active { transform: scale(0.97); }
@keyframes btn-audio-play-eq {
  from { transform: scaleY(0.2); }
  to   { transform: scaleY(1); }
}

.btn-donate-heart {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.55em;
  padding: 0.7em 1.4em 0.7em 1.15em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 7%, transparent);
  color: inherit;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease;}
.btn-donate-heart-icon {
  width: 1.2em;
  height: 1.2em;
  color: color-mix(in srgb, var(--c) 30%, #ec4899);
  filter: drop-shadow(0 0.1em 0.25em color-mix(in srgb, var(--c) 30%, rgba(236, 72, 153, 0.5)));
  animation: btn-donate-heart-beat 1.4s ease-in-out infinite;
}
.btn-donate-heart:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--c) 30%, #ec4899);
  background: color-mix(in srgb, color-mix(in srgb, var(--c) 30%, #ec4899) 10%, transparent);
}
.btn-donate-heart:active { transform: scale(0.96); }
@keyframes btn-donate-heart-beat {
  0%, 44%, 100% { transform: scale(1); }
  10% { transform: scale(1.28); }
  20% { transform: scale(0.96); }
  30% { transform: scale(1.18); }
}

.btn-scroll-down {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-direction: column;
  gap: 0.3em;
  padding: 0.7em 1.1em 0.6em;
  border-radius: 1em;
  background: transparent;
  color: var(--c);
  transition: background-color 0.25s ease, transform 0.2s ease;}
.btn-scroll-down-mouse {
  position: relative;
  width: 1.75em;
  height: 2.75em;
  border: 2px solid currentColor;
  border-radius: 0.9em;
}
.btn-scroll-down-mouse::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 50%;
  width: 0.26em;
  height: 0.55em;
  margin-left: -0.13em;
  border-radius: 0.2em;
  background: currentColor;
  animation: btn-scroll-down-wheel 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.btn-scroll-down-chevrons {
  display: grid;
  margin-bottom: 0.1em;
}
.btn-scroll-down-chevrons svg {
  display: block;
  width: 1.1em;
  height: 0.55em;
  margin-top: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: btn-scroll-down-blink 1.8s ease-in-out calc(var(--i) * 0.2s + 0.4s) infinite;
}
.btn-scroll-down-label {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.25em;
  margin-right: -0.25em;
  text-transform: uppercase;
}
.btn-scroll-down:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 10%, transparent); }
.btn-scroll-down:active { transform: translateY(0.15em); }
@keyframes btn-scroll-down-wheel {
  0%        { opacity: 0; transform: translateY(0); }
  15%       { opacity: 1; transform: translateY(0); }
  70%, 100% { opacity: 0; transform: translateY(0.85em); }
}
@keyframes btn-scroll-down-blink {
  0%, 60%, 100% { opacity: 0.2; }
  25%           { opacity: 1; }
}

.btn-go-live {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.55em;
  padding: 0.75em 1.5em 0.75em 1.05em;
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--c) 18%, #0b0d13);
  color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent);
  transition: box-shadow 0.25s ease, transform 0.15s ease;}
.btn-go-live-signal {
  --red: color-mix(in srgb, var(--c) 12%, #ff3b47);
  position: relative;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.3em;
  color: color-mix(in srgb, var(--c) 55%, #fff);
}
.btn-go-live-signal i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0.45em var(--red);
  animation: btn-go-live-dot 1.6s ease-in-out infinite;
}
.btn-go-live-signal::before,
.btn-go-live-signal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.15em;
  height: 1.15em;
  margin: -0.575em;
  border: 2px solid transparent;
  border-right-color: currentColor;
  border-left-color: currentColor;
  border-radius: 50%;
  opacity: 0.15;
  animation: btn-go-live-wave 1.6s ease-out infinite;
}
.btn-go-live-signal::after {
  width: 1.9em;
  height: 1.9em;
  margin: -0.95em;
  animation-delay: 0.2s;
}
.btn-go-live:is(:hover, :focus-visible) { box-shadow: inset 0 0 0 1px var(--c), 0 0.4em 1.2em -0.4em color-mix(in srgb, var(--c) 80%, transparent); }
.btn-go-live:active { transform: scale(0.96); }
@keyframes btn-go-live-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@keyframes btn-go-live-wave {
  0%, 100% { opacity: 0.15; }
  25%      { opacity: 1; }
}

@property --btn-countdown-timer-m {
  syntax: "<integer>";
  inherits: false;
  initial-value: 4;
}
@property --btn-countdown-timer-s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 59;
}
.btn-countdown-timer {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0.8em;
  padding: 0.4em 0.4em 0.4em 1.3em;
  border-radius: 0.7em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.45em 1em -0.45em color-mix(in srgb, var(--c) 85%, transparent);
  transition: transform 0.15s ease, background-color 0.25s ease;}
.btn-countdown-timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.45em 0.6em;
  border-radius: 0.45em;
  background: color-mix(in srgb, var(--c) 60%, #000);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}
.btn-countdown-timer-chip svg {
  width: 1.1em;
  height: 1.1em;
}
.btn-countdown-timer-hand {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: btn-countdown-timer-tick 60s steps(60, end) infinite;
}
.btn-countdown-timer-time::before {
  counter-reset: m var(--btn-countdown-timer-m) s var(--btn-countdown-timer-s);
  content: counter(m, decimal-leading-zero) ":" counter(s, decimal-leading-zero);
  animation:
    btn-countdown-timer-sec 60s steps(60, end) infinite,
    btn-countdown-timer-min 300s steps(5, end) infinite;
}
.btn-countdown-timer:is(:hover, :focus-visible) { background-color: color-mix(in srgb, var(--c) 88%, #000); }
.btn-countdown-timer:active { transform: scale(0.97); }
@keyframes btn-countdown-timer-sec {
  from { --btn-countdown-timer-s: 59; }
  to   { --btn-countdown-timer-s: -1; }
}
@keyframes btn-countdown-timer-min {
  from { --btn-countdown-timer-m: 4; }
  to   { --btn-countdown-timer-m: -1; }
}
@keyframes btn-countdown-timer-tick {
  to { transform: rotate(360deg); }
}

.btn-brushed-metal {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  gap: 0.7em;
  padding: 0.8em 1.7em 0.8em 1.35em;
  border: 1px solid color-mix(in srgb, var(--c) 22%, #6b7280);
  border-radius: 0.6em;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0 1px, transparent 1px 0.09em, rgba(0, 0, 0, 0.04) 0.09em calc(0.09em + 1px), transparent calc(0.09em + 1px) 0.17em),
    repeating-linear-gradient(90deg, transparent 0 0.9em, rgba(255, 255, 255, 0.08) 0.9em 1.6em, transparent 1.6em 2.1em, rgba(0, 0, 0, 0.025) 2.1em 3.3em),
    linear-gradient(180deg,
      color-mix(in srgb, var(--c) 10%, #f8fafc),
      color-mix(in srgb, var(--c) 18%, #d1d5db) 48%,
      color-mix(in srgb, var(--c) 22%, #b4bac5) 52%,
      color-mix(in srgb, var(--c) 12%, #e5e7eb));
  color: color-mix(in srgb, var(--c) 40%, #1f2937);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 0.12em 0.25em rgba(0, 0, 0, 0.28),
    0 0 0 0.25em color-mix(in srgb, var(--c) 10%, #cfd4db),
    0 0 0 calc(0.25em + 1px) color-mix(in srgb, var(--c) 20%, #8b939e);
  transition: box-shadow 0.08s ease-out;}
.btn-brushed-metal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 22%, #aeb4bf), color-mix(in srgb, var(--c) 12%, #dfe3e8));
  opacity: 0;
  transition: opacity 0.08s ease-out;
}
.btn-brushed-metal-led {
  position: relative;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 35%, #4b5563);
  box-shadow: inset 0 0.05em 0.1em rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.8);
}
.btn-brushed-metal-led::after {
  content: "";
  position: absolute;
  inset: 0.08em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 65%, #fff);
  box-shadow: 0 0 0.45em 0.08em var(--c);
  animation: btn-brushed-metal-breathe 3.2s ease-in-out infinite;
}
.btn-brushed-metal-label,
.btn-brushed-metal-led { transition: transform 0.08s ease-out; }
.btn-brushed-metal:active {
  box-shadow:
    inset 0 0.1em 0.25em rgba(0, 0, 0, 0.3),
    inset 0 -1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 transparent,
    0 0 0 0.25em color-mix(in srgb, var(--c) 10%, #cfd4db),
    0 0 0 calc(0.25em + 1px) color-mix(in srgb, var(--c) 20%, #8b939e);
}
.btn-brushed-metal:active::before { opacity: 1; }
.btn-brushed-metal:active .btn-brushed-metal-label { transform: translateY(0.06em); }
.btn-brushed-metal:active .btn-brushed-metal-led { transform: translateY(0.06em); }
.btn-brushed-metal:active .btn-brushed-metal-led::after {
  animation: none;
  opacity: 1;
}
@keyframes btn-brushed-metal-breathe {
  0%, 100% { opacity: 0.15; }
  50%      { opacity: 1; }
}

.btn-win95 {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6.5em;
  padding: 0.4em 0.9em;
  border: 0;
  border-radius: 0;
  background: color-mix(in srgb, var(--c) 5%, #c0c0c0);
  color: #000;
  font: 400 var(--btn-size, 18px)/1.2 Tahoma, "MS Sans Serif", Geneva, "Segoe UI", sans-serif;
  cursor: pointer;
  box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  -webkit-tap-highlight-color: transparent;
}
.btn-win95-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.1em 0.35em;
  outline: 1px dotted transparent;
  transition: transform 0.03s linear;
}
.btn-win95-icon {
  width: 1em;
  height: 1em;
  color: color-mix(in srgb, var(--c) 70%, #000080);
}
.btn-win95:focus-visible { outline: none; }
.btn-win95:focus-visible .btn-win95-label { outline-color: #000; }
.btn-win95:active {
  box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff, inset 2px 2px #808080, inset -2px -2px #dfdfdf;
}
.btn-win95:active .btn-win95-label { transform: translate(1px, 1px); }

.btn-ticket {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  filter: drop-shadow(0 0.3em 0.4em color-mix(in srgb, var(--c) 30%, transparent));
  transition: transform 0.2s ease;}
.btn-ticket-main,
.btn-ticket-stub {
  --notch:
    radial-gradient(circle at var(--x) 0, transparent 0.42em, #000 calc(0.42em + 1px)),
    radial-gradient(circle at var(--x) 100%, transparent 0.42em, #000 calc(0.42em + 1px));
  display: flex;
  align-items: center;
  height: 3em;
  background: var(--c);
  -webkit-mask: var(--notch);
  -webkit-mask-composite: source-in;
  mask: var(--notch);
  mask-composite: intersect;
}
.btn-ticket-main {
  --x: 100%;
  padding: 0 1.25em 0 1.5em;
  border-radius: 0.55em 0 0 0.55em;
}
.btn-ticket-stub {
  --x: 0;
  padding: 0 1.15em 0 1em;
  border-left: 2px dashed rgba(255, 255, 255, 0.6);
  border-radius: 0 0.55em 0.55em 0;
  background: color-mix(in srgb, var(--c) 78%, #000);
  font-weight: 800;
  transform-origin: 0 100%;
  animation: btn-ticket-wobble 3.6s ease-in-out infinite;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-ticket:is(:hover, :focus-visible) .btn-ticket-main { background: color-mix(in srgb, var(--c) 88%, #fff); }
.btn-ticket:active .btn-ticket-stub {
  animation: none;
  transform: translateX(0.25em) rotate(12deg);
}
@keyframes btn-ticket-wobble {
  0%, 32%, 100% { transform: rotate(0deg); }
  7%  { transform: rotate(7deg); }
  14% { transform: rotate(0.5deg); }
  20% { transform: rotate(3.5deg); }
  26% { transform: rotate(0.3deg); }
}

.btn-starburst-badge {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  width: 6.6em;
  height: 6.6em;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);}
.btn-starburst-badge::before,
.btn-starburst-badge::after {
  content: "";
  position: absolute;
  z-index: -1;
  animation: btn-starburst-badge-turn 16s linear infinite;
}
.btn-starburst-badge::before {
  inset: 0;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 80%, #fff), var(--c) 60%);
  clip-path: polygon(50.00% 0.00%, 57.47% 7.65%, 67.10% 3.02%, 71.50% 12.76%, 82.14% 11.70%, 82.94% 22.36%, 93.30% 25.00%, 90.41% 35.29%, 99.24% 41.32%, 93.00% 50.00%, 99.24% 58.68%, 90.41% 64.71%, 93.30% 75.00%, 82.94% 77.64%, 82.14% 88.30%, 71.50% 87.24%, 67.10% 96.98%, 57.47% 92.35%, 50.00% 100.00%, 42.53% 92.35%, 32.90% 96.98%, 28.50% 87.24%, 17.86% 88.30%, 17.06% 77.64%, 6.70% 75.00%, 9.59% 64.71%, 0.76% 58.68%, 7.00% 50.00%, 0.76% 41.32%, 9.59% 35.29%, 6.70% 25.00%, 17.06% 22.36%, 17.86% 11.70%, 28.50% 12.76%, 32.90% 3.02%, 42.53% 7.65%);
}
.btn-starburst-badge::after {
  inset: 0.85em;
  border: 2px dashed rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  animation-duration: 24s;
  animation-direction: reverse;
}
.btn-starburst-badge-text {
  display: grid;
  font-size: 1.45em;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0.06em 0 color-mix(in srgb, var(--c) 55%, #000);
  transform: rotate(-10deg);
}
.btn-starburst-badge-text small {
  font-size: 0.42em;
  font-weight: 800;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
  text-transform: uppercase;
}
.btn-starburst-badge:is(:hover, :focus-visible) { transform: scale(1.06) rotate(-4deg); }
.btn-starburst-badge:active { transform: scale(0.94); }
@keyframes btn-starburst-badge-turn {
  to { transform: rotate(360deg); }
}

.btn-candy-stripe {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0.85em 2em;
  border-radius: 2em;
  background: var(--c);
  color: #fff;
  text-shadow: 0 0.06em 0.15em color-mix(in srgb, var(--c) 55%, #000);
  box-shadow:
    inset 0 -0.22em 0 color-mix(in srgb, var(--c) 72%, #000),
    0 0.35em 0.8em -0.25em color-mix(in srgb, var(--c) 60%, transparent);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);}
.btn-candy-stripe::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.6em;
  z-index: -1;
  width: calc(100% + 1.6em);
  background: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25% 50%, rgba(255, 255, 255, 0.3) 50% 75%, transparent 75%) 0 0 / 1.6em 1.6em;
  animation: btn-candy-stripe-roll 0.9s linear infinite;
}
.btn-candy-stripe::after {
  content: "";
  position: absolute;
  top: 0.18em;
  right: 1em;
  left: 1em;
  z-index: -1;
  height: 42%;
  border-radius: 2em;
  background: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
}
.btn-candy-stripe:active { transform: scale(0.95); }
@keyframes btn-candy-stripe-roll {
  to { transform: translateX(1.6em); }
}

.btn-starfield {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0.9em 2em;
  border-radius: 2em;
  background:
    radial-gradient(ellipse 60% 100% at 30% 140%, color-mix(in srgb, var(--c) 75%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 90% at 85% -40%, color-mix(in srgb, color-mix(in srgb, var(--c) 40%, #d946ef) 45%, transparent), transparent 70%),
    color-mix(in srgb, var(--c) 14%, #04050c);
  color: #fff;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 0.45em 1.2em -0.4em color-mix(in srgb, var(--c) 60%, transparent);
  transition: transform 0.2s ease, box-shadow 0.3s ease;}
.btn-starfield::before,
.btn-starfield::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: calc(100% + var(--tile));
  background-size: var(--tile) 100%;
  animation: btn-starfield-drift 14s linear infinite;
}
.btn-starfield::before {
  --tile: 8em;
  background-image:
    radial-gradient(circle at 6% 24%, rgba(255, 255, 255, 0.85) 0.06em, transparent 0.11em),
    radial-gradient(circle at 19% 72%, rgba(255, 255, 255, 0.6) 0.06em, transparent 0.11em),
    radial-gradient(circle at 33% 40%, rgba(255, 255, 255, 0.8) 0.06em, transparent 0.11em),
    radial-gradient(circle at 47% 86%, rgba(255, 255, 255, 0.55) 0.06em, transparent 0.11em),
    radial-gradient(circle at 58% 16%, rgba(255, 255, 255, 0.7) 0.06em, transparent 0.11em),
    radial-gradient(circle at 72% 58%, rgba(255, 255, 255, 0.8) 0.06em, transparent 0.11em),
    radial-gradient(circle at 88% 30%, rgba(255, 255, 255, 0.6) 0.06em, transparent 0.11em);
}
.btn-starfield::after {
  --tile: 11em;
  background-image:
    radial-gradient(circle at 12% 62%, #fff 0.08em, rgba(255, 255, 255, 0.35) 0.12em, transparent 0.24em),
    radial-gradient(circle at 41% 22%, #fff 0.08em, rgba(255, 255, 255, 0.35) 0.12em, transparent 0.24em),
    radial-gradient(circle at 69% 78%, #fff 0.08em, rgba(255, 255, 255, 0.35) 0.12em, transparent 0.24em),
    radial-gradient(circle at 90% 44%, #fff 0.07em, rgba(255, 255, 255, 0.3) 0.1em, transparent 0.2em);
  animation:
    btn-starfield-drift 8s linear infinite,
    btn-starfield-twinkle 1.8s ease-in-out infinite alternate;
}
.btn-starfield:is(:hover, :focus-visible) {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 0.55em 1.6em -0.4em color-mix(in srgb, var(--c) 80%, transparent);
}
.btn-starfield:active { transform: scale(0.97); }
@keyframes btn-starfield-drift {
  to { transform: translateX(calc(var(--tile) * -1)); }
}
@keyframes btn-starfield-twinkle {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}

.btn-holographic {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0.85em 2em;
  border-radius: 0.8em;
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--c) 30%, #ffc4ee),
    color-mix(in srgb, var(--c) 25%, #b9f3ff),
    color-mix(in srgb, var(--c) 20%, #fff3b0),
    color-mix(in srgb, var(--c) 30%, #d4c6ff),
    color-mix(in srgb, var(--c) 30%, #ffc4ee),
    color-mix(in srgb, var(--c) 25%, #b9f3ff)) 0 50% / 300% 100%;
  color: color-mix(in srgb, var(--c) 40%, #1e1b4b);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.75),
    0 0.35em 0.9em -0.3em color-mix(in srgb, var(--c) 40%, rgba(76, 29, 149, 0.5));
  animation: btn-holographic-shift 5s ease-in-out infinite alternate;
  transition: transform 0.2s ease;}
.btn-holographic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 0.3em),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 0 1px, transparent 1px 0.3em);
}
.btn-holographic::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -30%;
  z-index: -1;
  width: 160%;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%);
  transform: translateX(-25%);
  animation: btn-holographic-glare 5s ease-in-out infinite alternate;
}
.btn-holographic:active { transform: scale(0.97); }
@keyframes btn-holographic-shift {
  to { background-position: 100% 50%; }
}
@keyframes btn-holographic-glare {
  to { transform: translateX(25%); }
}

.btn-liquid {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 11.5em;
  height: 3.2em;
  padding: 0;
  border: 2px solid var(--c);
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 22%, #0a0f1d);
  color: #fff;
  text-shadow: 0 0.05em 0.25em color-mix(in srgb, var(--c) 40%, #000);
  transition: transform 0.2s ease;}
.btn-liquid-wave {
  position: absolute;
  bottom: -0.3em;
  left: 0;
  z-index: -1;
  width: 200%;
  height: calc(80% + 0.3em);
  fill: var(--c);
  animation:
    btn-liquid-roll 2.8s linear infinite,
    btn-liquid-bob 2.2s ease-in-out infinite alternate;
}
.btn-liquid-wave:first-child {
  height: calc(96% + 0.3em);
  fill: color-mix(in srgb, var(--c) 45%, transparent);
  animation-duration: 4.2s, 2.8s;
  animation-direction: reverse, alternate;
}
.btn-liquid:active { transform: scale(0.97); }
@keyframes btn-liquid-roll {
  to { transform: translateX(-50%); }
}
@keyframes btn-liquid-bob {
  from { translate: 0 0.12em; }
  to   { translate: 0 -0.12em; }
}

.btn-morphing-blob {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  width: 4.6em;
  height: 4.6em;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}
.btn-morphing-blob::before,
.btn-morphing-blob::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 42% 58% 62% 38% / 45% 42% 58% 55%;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 35%, #ec4899));
  animation:
    btn-morphing-blob-morph 6s ease-in-out infinite,
    btn-morphing-blob-turn 12s linear infinite;
}
.btn-morphing-blob::before {
  inset: -0.55em;
  opacity: 0.3;
  animation-duration: 7s, 16s;
  animation-direction: alternate, reverse;
}
.btn-morphing-blob svg {
  width: 1.7em;
  height: 1.7em;
}
.btn-morphing-blob:is(:hover, :focus-visible) { transform: scale(1.06); }
.btn-morphing-blob:active { transform: scale(0.92); }
@keyframes btn-morphing-blob-morph {
  0%, 100% { border-radius: 42% 58% 62% 38% / 45% 42% 58% 55%; }
  33%      { border-radius: 60% 40% 38% 62% / 55% 60% 40% 45%; }
  66%      { border-radius: 38% 62% 55% 45% / 62% 38% 62% 38%; }
}
@keyframes btn-morphing-blob-turn {
  to { transform: rotate(360deg); }
}

.btn-marquee {
  --c: var(--btn-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border: 0;
  border-radius: 0.6em;
  font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  --ink: color-mix(in srgb, var(--c) 45%, #000);
  width: 12em;
  padding: 0.8em 0;
  border: 2px solid var(--ink);
  border-radius: 0.35em;
  background: var(--c);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0.22em 0.22em 0 var(--ink);
  transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;}
.btn-marquee-window {
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent);
  mask: linear-gradient(90deg, transparent, #000 1.2em, #000 calc(100% - 1.2em), transparent);
}
.btn-marquee-track {
  display: flex;
  flex: none;
  animation: btn-marquee-scroll 6s linear infinite;
}
.btn-marquee-run {
  display: flex;
  flex: none;
  align-items: center;
  white-space: nowrap;
}
.btn-marquee-run i {
  margin: 0 0.6em;
  font-style: normal;
  opacity: 0.75;
}
.btn-marquee:is(:hover, :focus-visible) .btn-marquee-track { animation-play-state: paused; }
.btn-marquee:active {
  transform: translate(0.22em, 0.22em);
  box-shadow: 0 0 0 var(--ink);
}
@keyframes btn-marquee-scroll {
  to { transform: translateX(-50%); }
}