/* Ported from the reference build by tools/port/css.mjs. Do not edit; edit the generator or override in assets/css/theme/. */
.btn[data-c-ui-button] {
  --bg: var(--grad-warm);
  --fg: var(--ink);
  --icon-bg: var(--ink);
  --icon-fg: var(--white);
  --fill: var(--ink);
  border-radius: var(--radius-pill);
  background: var(--bg);
  min-height: 50px;
  color: var(--fg);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  isolation: isolate;
  translate: var(--mx, 0) var(--my, 0);
  transition:
    translate 0.4s var(--ease-spring),
    scale 0.3s var(--ease-spring),
    background-position 0.7s var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    color var(--dur) var(--ease-out);
  background-position: 0%;
  background-size: 160% 100%;
  align-items: center;
  gap: 0.8rem;
  padding: 0.4rem 0.4rem 0.4rem 1.4rem;
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}
.btn--l[data-c-ui-button] {
  min-height: 58px;
  padding-left: 1.65rem;
  font-size: 1.03rem;
}
.btn[data-c-ui-button]:not(:has(.btn__icon)) {
  padding-right: 1.4rem;
}
.btn[data-c-ui-button]:after {
  content: "";
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(105deg, #0000 30%, #ffffff8c 48%, #0000 62%);
  position: absolute;
  inset: 0;
  transform: translate(-120%);
}
.btn[data-c-ui-button]:hover:after {
  transition: transform 0.9s var(--ease-out);
  transform: translate(120%);
}
.btn__fill[data-c-ui-button] {
  z-index: -2;
  border-radius: inherit;
  background: var(--fill);
  clip-path: circle(0% at 50% 120%);
  transition: clip-path 0.55s var(--ease-out);
  position: absolute;
  inset: 0;
}
.btn__label[data-c-ui-button] {
  position: relative;
}
.btn__icon[data-c-ui-button] {
  background: var(--icon-bg);
  width: 40px;
  height: 40px;
  color: var(--icon-fg);
  transition:
    transform 0.45s var(--ease-spring),
    background-color var(--dur);
  border-radius: 50%;
  flex: none;
  place-items: center;
  display: grid;
  overflow: hidden;
}
.btn--l[data-c-ui-button] .btn__icon[data-c-ui-button] {
  width: 46px;
  height: 46px;
}
.btn__arrows[data-c-ui-button] {
  display: grid;
}
.btn__arrows[data-c-ui-button] svg {
  transition: transform 0.45s var(--ease-out);
  grid-area: 1/1;
}
.btn__arrows[data-c-ui-button] svg:last-child {
  transform: translate(-150%, 150%);
}
.btn[data-c-ui-button]:hover .btn__arrows[data-c-ui-button] svg:first-child,
.btn[data-c-ui-button]:focus-visible .btn__arrows[data-c-ui-button] svg:first-child {
  transform: translate(150%, -150%);
}
.btn[data-c-ui-button]:hover .btn__arrows[data-c-ui-button] svg:last-child,
.btn[data-c-ui-button]:focus-visible .btn__arrows[data-c-ui-button] svg:last-child {
  transform: none;
}
.btn[data-c-ui-button]:hover .btn__icon[data-c-ui-button] {
  transform: scale(1.08);
}
.btn[data-c-ui-button]:hover {
  box-shadow: var(--shadow-glow);
  background-position: 100%;
}
.btn[data-c-ui-button]:active {
  scale: 0.96;
}
.btn--dark[data-c-ui-button] {
  --bg: var(--ink);
  --fg: var(--white);
  --icon-bg: var(--tangerine);
  --icon-fg: var(--ink);
}
.btn--dark[data-c-ui-button]:hover {
  box-shadow: 0 18px 40px -16px #16131b99;
}
.btn--glass[data-c-ui-button] {
  --bg: var(--glass);
  --fg: var(--ink);
  --icon-bg: var(--ink);
  --icon-fg: var(--white);
  box-shadow:
    inset 0 0 0 1.5px var(--line-strong),
    var(--shadow-s);
  backdrop-filter: blur(12px);
}
.btn--glass[data-c-ui-button]:hover {
  --fg: var(--white);
  --icon-bg: var(--tangerine);
  --icon-fg: var(--ink);
  box-shadow: var(--shadow-m);
}
.btn--glass[data-c-ui-button]:hover .btn__fill[data-c-ui-button] {
  clip-path: circle(150% at 50% 120%);
}
.btn--light[data-c-ui-button] {
  --bg: var(--white);
  --fg: var(--ink);
  --icon-fg: var(--ink);
}
.btn--light[data-c-ui-button] .btn__icon[data-c-ui-button] {
  background: var(--grad-warm);
}
.btn--light[data-c-ui-button]:hover {
  box-shadow: 0 18px 40px -14px #ffffff59;
}
@media (prefers-reduced-motion: reduce) {
  .btn[data-c-ui-button],
  .btn[data-c-ui-button]:after,
  .btn__fill[data-c-ui-button],
  .btn__arrows[data-c-ui-button] svg {
    transition: none;
  }
}