.hfx-fill-slide {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.3s ease;}
.hfx-fill-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  transform: translateX(-101%);
  transition: transform 0.3s ease;
}
.hfx-fill-slide:hover { color: #fff; }
.hfx-fill-slide:hover::before { transform: translateX(0); }

.hfx-fill-up {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.3s ease;}
.hfx-fill-up::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  transform: translateY(101%);
  transition: transform 0.3s ease;
}
.hfx-fill-up:hover { color: #fff; }
.hfx-fill-up:hover::before { transform: translateY(0); }

.hfx-skew-fill {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.35s ease;}
.hfx-skew-fill::before {
  content: "";
  position: absolute;
  inset: 0 -20%;
  z-index: -1;
  background: var(--c);
  transform: skewX(-20deg) translateX(-120%);
  transition: transform 0.35s ease;
}
.hfx-skew-fill:hover { color: #fff; }
.hfx-skew-fill:hover::before { transform: skewX(-20deg) translateX(0); }

.hfx-shine-sweep {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--c);
  color: #fff;}
.hfx-shine-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.hfx-shine-sweep:hover::after { transform: translateX(100%); }

.hfx-glow {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent);
  transition: box-shadow 0.3s ease, transform 0.3s ease;}
.hfx-glow:hover {
  box-shadow: 0 0 1.4em color-mix(in srgb, var(--c) 65%, transparent);
  transform: translateY(-1px);
}

.hfx-lift {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;}
.hfx-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 0.6em 1.2em color-mix(in srgb, var(--c) 35%, transparent);
}
.hfx-lift:active {
  transform: translateY(-1px);
  box-shadow: 0 0.3em 0.6em color-mix(in srgb, var(--c) 35%, transparent);
}

.hfx-border-draw {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c);}
.hfx-border-draw::before,
.hfx-border-draw::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 0 solid var(--c);
  /* hidden while idle: a zero-size box still paints a 2px corner dot */
  opacity: 0;
  transition: width 0.25s ease 0.25s, height 0.25s ease, opacity 0s 0.5s;
}
.hfx-border-draw::before {
  top: 0;
  left: 0;
  border-top-width: 2px;
  border-right-width: 2px;
}
.hfx-border-draw::after {
  bottom: 0;
  right: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
}
.hfx-border-draw:hover::before,
.hfx-border-draw:hover::after {
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: width 0.25s ease, height 0.25s ease 0.25s, opacity 0s;
}

.hfx-gradient-shift {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  color: #fff;
  background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 55%, #ec4899), var(--c));
  background-size: 200% 100%;
  background-position: 0% 50%;
  transition: background-position 0.5s ease;}
.hfx-gradient-shift:hover { background-position: 100% 50%; }

.hfx-pulse-ring {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  border: 0;
  background: var(--c);
  color: #fff;}
.hfx-pulse-ring::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 70%, transparent);
  pointer-events: none;
}
.hfx-pulse-ring:hover::after {
  animation: hfx-pulse-ring-ping 1s ease-out infinite;
}
@keyframes hfx-pulse-ring-ping {
  to { box-shadow: 0 0 0 0.9em transparent; }
}

.hfx-icon-slide {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;}
.hfx-icon-slide span {
  display: inline-block;
  transition: transform 0.25s ease;
}
.hfx-icon-slide:hover span { transform: translateX(0.3em); }

.hfx-swap-text {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--c);
  color: #fff;}
.hfx-swap-text span {
  display: block;
  transition: transform 0.35s ease;
}
.hfx-swap-text::after {
  content: attr(data-hover);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.hfx-swap-text:hover span { transform: translateY(-300%); }
.hfx-swap-text:hover::after { transform: translateY(0); }

.hfx-outline-fill {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: background-color 0.2s ease, color 0.2s ease;}
.hfx-outline-fill:hover {
  background: var(--c);
  color: #fff;
}

.hfx-squish {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);}
.hfx-squish:hover  { transform: scale(1.08); }
.hfx-squish:active { transform: scale(0.92); }

.hfx-neon {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: box-shadow 0.3s ease, text-shadow 0.3s ease, background-color 0.3s ease;}
.hfx-neon:hover {
  background: color-mix(in srgb, var(--c) 10%, transparent);
  text-shadow: 0 0 0.5em var(--c);
  box-shadow: 0 0 0.5em var(--c), 0 0 1.5em color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 0.8em color-mix(in srgb, var(--c) 30%, transparent);
}

.hfx-card-lift {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  transition: transform 0.25s ease, box-shadow 0.25s ease;}
.hfx-card-lift:hover {
  transform: translateY(-0.4em);
  box-shadow: 0 1em 2em color-mix(in srgb, #000 15%, transparent);
}
.hfx-card-lift-image {
  height: 7em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
}
.hfx-card-lift-body {
  padding: 0.9em 1em 1.1em;
}
.hfx-card-lift h3 {
  margin: 0 0 0.25em;
  font-weight: 600;
  font-size: 1.05em;
}
.hfx-card-lift p {
  margin: 0;
  font-size: 0.85em;
  color: #6b7280;
  line-height: 1.4;
}

.hfx-card-tilt {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  transform: perspective(40em) rotateX(0) rotateY(0);}
.hfx-card-tilt:hover {
  transform: perspective(40em) rotateX(6deg) rotateY(-8deg) translateY(-0.3em);
  box-shadow: -0.6em 1em 2em color-mix(in srgb, #000 18%, transparent);
}
.hfx-card-tilt-image {
  height: 7em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
}
.hfx-card-tilt-body {
  padding: 0.9em 1em 1.1em;
}
.hfx-card-tilt h3 {
  margin: 0 0 0.25em;
  font-weight: 600;
  font-size: 1.05em;
}
.hfx-card-tilt p {
  margin: 0;
  font-size: 0.85em;
  color: #6b7280;
  line-height: 1.4;
}

.hfx-card-image-zoom {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
}
.hfx-card-image-zoom-image {
  height: 7em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  transition: transform 0.5s ease;
}
.hfx-card-image-zoom:hover .hfx-card-image-zoom-image {
  transform: scale(1.12);
}
.hfx-card-image-zoom-body {
  padding: 0.9em 1em 1.1em;
}
.hfx-card-image-zoom h3 {
  margin: 0 0 0.25em;
  font-weight: 600;
  font-size: 1.05em;
}
.hfx-card-image-zoom p {
  margin: 0;
  font-size: 0.85em;
  color: #6b7280;
  line-height: 1.4;
}

.hfx-card-reveal {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;}
.hfx-card-reveal-image {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  transition: transform 0.5s ease;
}
.hfx-card-reveal figcaption {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 0.2em;
  padding: 0.9em 1em;
  background: color-mix(in srgb, #000 65%, transparent);
  color: #fff;
  transform: translateY(100%);
  transition: transform 0.35s ease;
}
.hfx-card-reveal figcaption span {
  font-size: 0.8em;
  opacity: 0.8;
}
.hfx-card-reveal:hover figcaption { transform: translateY(0); }
.hfx-card-reveal:hover .hfx-card-reveal-image { transform: scale(1.06); }

@property --hfx-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.hfx-card-gradient-border {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  overflow: visible;}
.hfx-card-gradient-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--hfx-angle), var(--c), transparent 35%, transparent 65%, var(--c));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hfx-card-gradient-border:hover::before {
  opacity: 1;
  animation: hfx-card-gradient-border-spin 2.5s linear infinite;
}
.hfx-card-gradient-border-body {
  padding: 0.9em 1em 1.1em;
}
.hfx-card-gradient-border h3 {
  margin: 0 0 0.25em;
  font-weight: 600;
  font-size: 1.05em;
}
.hfx-card-gradient-border p {
  margin: 0;
  font-size: 0.85em;
  color: #6b7280;
  line-height: 1.4;
}
@keyframes hfx-card-gradient-border-spin {
  to { --hfx-angle: 360deg; }
}

.hfx-card-flip {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 12em;
  height: 8em;
  perspective: 40em;
  font-family: system-ui, sans-serif;
}
.hfx-card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}
.hfx-card-flip:hover .hfx-card-flip-inner { transform: rotateY(180deg); }
.hfx-card-flip-front,
.hfx-card-flip-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 0.75em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hfx-card-flip-front {
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--c);
}
.hfx-card-flip-back {
  background: var(--c);
  color: #fff;
  transform: rotateY(180deg);
}
.hfx-card-flip h3 { margin: 0 0 0.2em; font-size: 1.1em; }
.hfx-card-flip p  { margin: 0; font-size: 0.85em; opacity: 0.85; }

.hfx-card-shine {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;}
.hfx-card-shine::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--c) 35%, transparent) 50%, transparent 65%);
  transform: translateX(-100%);
  transition: transform 0.7s ease;
  pointer-events: none;
}
.hfx-card-shine:hover::after { transform: translateX(100%); }
.hfx-card-shine-body {
  padding: 0.9em 1em 1.1em;
}
.hfx-card-shine h3 {
  margin: 0 0 0.25em;
  font-weight: 600;
  font-size: 1.05em;
}
.hfx-card-shine p {
  margin: 0;
  font-size: 0.85em;
  color: #6b7280;
  line-height: 1.4;
}

.hfx-card-content-rise {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;}
.hfx-card-content-rise-image {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
}
.hfx-card-content-rise figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 1em;
  background: linear-gradient(to top, color-mix(in srgb, #000 70%, transparent), transparent);
  color: #fff;
  transform: translateY(1.8em);
  transition: transform 0.35s ease;
}
.hfx-card-content-rise h3 { margin: 0; font-size: 1.05em; }
.hfx-card-content-rise p {
  margin: 0.3em 0 0;
  font-size: 0.8em;
  line-height: 1.4;
  opacity: 0;
  transition: opacity 0.35s ease 0.1s;
}
.hfx-card-content-rise:hover figcaption { transform: translateY(0); }
.hfx-card-content-rise:hover p { opacity: 1; }

.hfx-card-glass {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  padding: 1.2em 1.3em;
  border-radius: 0.9em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--c);
  font-family: system-ui, sans-serif;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.hfx-card-glass:hover {
  background: color-mix(in srgb, var(--c) 18%, transparent);
  border-color: color-mix(in srgb, var(--c) 60%, transparent);
  transform: translateY(-0.2em);
}
.hfx-card-glass h3 { margin: 0 0 0.3em; font-size: 1.1em; }
.hfx-card-glass p  { margin: 0; font-size: 0.85em; opacity: 0.8; }

.hfx-link-underline-left {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  text-decoration: none;
}
.hfx-link-underline-left::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 2px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.hfx-link-underline-left:hover::after { transform: scaleX(1); }

.hfx-link-underline-center {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  text-decoration: none;
}
.hfx-link-underline-center::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15em;
  width: 100%;
  height: 2px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}
.hfx-link-underline-center:hover::after { transform: scaleX(1); }

.hfx-link-highlight {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(color-mix(in srgb, var(--c) 40%, transparent), color-mix(in srgb, var(--c) 40%, transparent)) no-repeat 0 100%;
  background-size: 0% 45%;
  transition: background-size 0.35s ease;}
.hfx-link-highlight:hover { background-size: 100% 45%; }

.hfx-link-slide-text {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  text-decoration: none;
  overflow: hidden;
  color: inherit;
  line-height: 1.2;}
.hfx-link-slide-text span {
  display: block;
  transition: transform 0.3s ease;
}
.hfx-link-slide-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--c);
  transition: transform 0.3s ease;
}
.hfx-link-slide-text:hover span,
.hfx-link-slide-text:hover::after { transform: translateY(-100%); }

.hfx-link-arrow {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;}
.hfx-link-arrow span {
  transition: transform 0.25s ease;
}
.hfx-link-arrow:hover span { transform: translateX(0.3em); }

.hfx-link-strike {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;}
.hfx-link-strike::after {
  content: "";
  position: absolute;
  left: 0;
  top: 55%;
  width: 100%;
  height: 2px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.hfx-link-strike:hover { color: #9ca3af; }
.hfx-link-strike:hover::after { transform: scaleX(1); }

.hfx-link-bracket {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  text-decoration: none;
  padding: 0 0.6em;}
.hfx-link-bracket::before,
.hfx-link-bracket::after {
  position: absolute;
  top: 0;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hfx-link-bracket::before { content: "["; left: 0;  transform: translateX(-0.4em); }
.hfx-link-bracket::after  { content: "]"; right: 0; transform: translateX(0.4em); }
.hfx-link-bracket:hover::before,
.hfx-link-bracket:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.hfx-image-grayscale {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 12em;
  aspect-ratio: 4 / 3;
  border-radius: 0.75em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  filter: grayscale(1);
  transition: filter 0.4s ease, transform 0.4s ease;
}
.hfx-image-grayscale:hover {
  filter: grayscale(0);
  transform: scale(1.03);
}

.hfx-image-overlay-zoom {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 12em;
  aspect-ratio: 4 / 3;
  border-radius: 0.75em;
  overflow: hidden;
  display: grid;
  place-items: center;
  font: 600 1em system-ui, sans-serif;
}
.hfx-image-overlay-zoom-image {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  transition: transform 0.5s ease, filter 0.5s ease;
}
.hfx-image-overlay-zoom span {
  position: relative;
  color: #fff;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hfx-image-overlay-zoom:hover .hfx-image-overlay-zoom-image {
  transform: scale(1.1);
  filter: brightness(0.55);
}
.hfx-image-overlay-zoom:hover span {
  opacity: 1;
  transform: translateY(0);
}

.hfx-icon-wiggle {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.hfx-icon-wiggle svg {
  width: 1.4em;
  height: 1.4em;
  transform-origin: 50% 0;
}
.hfx-icon-wiggle:hover { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-icon-wiggle:hover svg { animation: hfx-icon-wiggle-ring 0.7s ease-in-out; }
@keyframes hfx-icon-wiggle-ring {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(14deg); }
  40%      { transform: rotate(-12deg); }
  60%      { transform: rotate(8deg); }
  80%      { transform: rotate(-5deg); }
}

.hfx-icon-spin {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 0.6em;
  background: transparent;
  color: var(--c);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.hfx-icon-spin svg {
  width: 1.4em;
  height: 1.4em;
  transition: transform 0.5s ease;
}
.hfx-icon-spin:hover { border-color: var(--c); }
.hfx-icon-spin:hover svg { transform: rotate(180deg); }

.hfx-circle-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.3s ease 0.05s;
}
.hfx-circle-fill::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-circle-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.3s ease 0.05s, background-color 0s 0.5s;
}
.hfx-circle-fill:is(:hover, :focus-visible)::before {
  transform: translate(-50%, -50%) scale(1);
}

.hfx-shutter-in {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.12s;
}
.hfx-shutter-in::before,
.hfx-shutter-in::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 51%;
  background: var(--c);
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}
.hfx-shutter-in::before {
  left: 0;
  transform: translateX(-100%);
}
.hfx-shutter-in::after {
  right: 0;
  transform: translateX(100%);
}
.hfx-shutter-in:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.12s, background-color 0s 0.4s;
}
.hfx-shutter-in:is(:hover, :focus-visible)::before,
.hfx-shutter-in:is(:hover, :focus-visible)::after {
  transform: translateX(0);
}

.hfx-liquid-wave-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.3s ease 0.25s;
}
/* one wave = a crest arc above the midline, a trough cut below it, solid under both */
.hfx-liquid-wave-fill::before,
.hfx-liquid-wave-fill::after {
  content: "";
  position: absolute;
  inset: 0.16em -2px -2px;
  z-index: -1;
  background:
    radial-gradient(0.65em at 0.45em 0.65em, var(--tint) 97%, transparent) 0 0 / 1.8em 0.18em repeat-x,
    radial-gradient(0.65em at 1.35em -0.47em, transparent 97%, var(--tint)) 0 0.18em / 1.8em 0.18em repeat-x,
    linear-gradient(var(--tint) 0 0) 0 0.36em / 100% 100% no-repeat;
  transform: translateY(104%);
  transition: transform 0.7s cubic-bezier(0.3, 0.6, 0.3, 1);
}
.hfx-liquid-wave-fill::before { --tint: var(--c); }
.hfx-liquid-wave-fill::after {
  --tint: color-mix(in srgb, var(--c) 40%, transparent);
  top: 0;
  z-index: -2;
  background-position: 0.9em 0, 0.9em 0.18em, 0 0.36em;
}
.hfx-liquid-wave-fill:is(:hover, :focus-visible) { color: #fff; }
.hfx-liquid-wave-fill:is(:hover, :focus-visible)::before,
.hfx-liquid-wave-fill:is(:hover, :focus-visible)::after {
  transform: translateY(0);
  animation: hfx-liquid-wave-fill-flow 1.1s linear infinite;
}
.hfx-liquid-wave-fill:is(:hover, :focus-visible)::after {
  transition-delay: 0.05s;
  animation-name: hfx-liquid-wave-fill-back;
  animation-duration: 1.6s;
}
@keyframes hfx-liquid-wave-fill-flow {
  to { background-position: 1.8em 0, 1.8em 0.18em, 0 0.36em; }
}
@keyframes hfx-liquid-wave-fill-back {
  to { background-position: -0.9em 0, -0.9em 0.18em, 0 0.36em; }
}

.hfx-clip-path-wipe {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
}
.hfx-clip-path-wipe-fill {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--c);
  color: #fff;
  clip-path: polygon(0 0, 0 0, -30% 100%, 0 100%);
  transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-clip-path-wipe:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  transition: background-color 0s 0.55s;
}
.hfx-clip-path-wipe:is(:hover, :focus-visible) .hfx-clip-path-wipe-fill {
  clip-path: polygon(0 0, 135% 0, 105% 100%, 0 100%);
}

.hfx-paint-drip {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.3s ease 0.15s;
}
.hfx-paint-drip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: calc(100% + 1em);
  background:
    linear-gradient(var(--c) 0 0) 0 0 / 100% calc(100% - 1em),
    radial-gradient(closest-side, var(--c) 96%, transparent) left 24% bottom 0.82em / 2em 0.36em,
    radial-gradient(closest-side, var(--c) 96%, transparent) left 52% bottom 0.87em / 1.3em 0.26em,
    radial-gradient(closest-side, var(--c) 96%, transparent) left 76% bottom 0.8em / 2.2em 0.4em,
    linear-gradient(var(--c) 0 0) 7% 0 / 0.5em calc(100% - 0.4em),
    radial-gradient(closest-side, var(--c) 96%, transparent) left 7% bottom 0.15em / 0.5em 0.5em,
    linear-gradient(var(--c) 0 0) 38% 0 / 0.34em calc(100% - 0.79em),
    radial-gradient(closest-side, var(--c) 96%, transparent) left 38% bottom 0.62em / 0.34em 0.34em,
    linear-gradient(var(--c) 0 0) 92% 0 / 0.42em calc(100% - 0.61em),
    radial-gradient(closest-side, var(--c) 96%, transparent) left 92% bottom 0.4em / 0.42em 0.42em;
  background-repeat: no-repeat;
  transform: translateY(calc(-100% + 1.3em));
  transition: transform 0.6s cubic-bezier(0.55, 0, 0.25, 1);
}
.hfx-paint-drip:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.3s ease 0.15s, background-color 0s 0.6s;
}
.hfx-paint-drip:is(:hover, :focus-visible)::before { transform: translateY(0); }

.hfx-staircase-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.25s;
}
.hfx-staircase-fill-steps {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
}
.hfx-staircase-fill-steps i {
  flex: 1;
  margin-right: -1px;
  background: var(--c);
  transform: translateY(101%);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1) calc((3 - var(--i)) * 0.05s);
}
.hfx-staircase-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.25s, background-color 0s 0.6s;
}
.hfx-staircase-fill:is(:hover, :focus-visible) .hfx-staircase-fill-steps i {
  transform: translateY(0);
  transition-delay: calc(var(--i) * 0.07s);
}

.hfx-cross-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.2s ease 0.1s;
}
.hfx-cross-fill::before,
.hfx-cross-fill::after {
  content: "";
  position: absolute;
  left: -15%;
  top: -15%;
  z-index: -1;
  width: 130%;
  height: 130%;
  background: var(--c);
  rotate: 17deg;
  scale: 1 0.07;
  transform: scaleX(0);
  transition: scale 0.25s cubic-bezier(0.33, 1, 0.68, 1), transform 0.2s cubic-bezier(0.5, 0, 0.75, 0) 0.2s;
}
.hfx-cross-fill::after { rotate: -17deg; }
.hfx-cross-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.2s ease 0.32s, background-color 0s 0.65s;
}
.hfx-cross-fill:is(:hover, :focus-visible)::before,
.hfx-cross-fill:is(:hover, :focus-visible)::after {
  scale: 1 1;
  transform: scaleX(1);
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), scale 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.24s;
}
.hfx-cross-fill:is(:hover, :focus-visible)::after { transition-delay: 0.08s, 0.3s; }

.hfx-dot-expand-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65em;
  padding: 0.75em 1.6em 0.75em 1.25em;
  border-radius: 999em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background: transparent;
  color: var(--c);
  transition: color 0.3s ease 0.1s, border-color 0.3s ease;
}
.hfx-dot-expand-fill-dot {
  position: relative;
  z-index: -1;
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--c);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-dot-expand-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  border-color: var(--c);
  color: #fff;
  transition: color 0.3s ease 0.1s, border-color 0.3s ease, background-color 0s 0.55s;
}
.hfx-dot-expand-fill-label { transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1); }
.hfx-dot-expand-fill:is(:hover, :focus-visible) .hfx-dot-expand-fill-dot { transform: scale(44); }
/* the dot is gone once it fills, so nudge the label back to the true center */
.hfx-dot-expand-fill:is(:hover, :focus-visible) .hfx-dot-expand-fill-label { transform: translateX(-0.4em); }

.hfx-inset-shadow-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 999em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--c);
  box-shadow: inset 0 0 0 2px var(--c);
  transition: box-shadow 0.45s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s ease 0.12s;
}
.hfx-inset-shadow-fill:is(:hover, :focus-visible) {
  box-shadow: inset 0 0 0 1.5em var(--c);
  color: #fff;
}

.hfx-curtain-drop {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.2s ease 0.15s;
}
.hfx-curtain-drop::before {
  content: "";
  position: absolute;
  inset: -40% 0 0;
  z-index: -1;
  background:
    linear-gradient(to top, color-mix(in srgb, #000 18%, var(--c)) 0 0.14em, transparent 0),
    repeating-linear-gradient(90deg, color-mix(in srgb, #fff 10%, transparent), color-mix(in srgb, #000 10%, transparent) 0.7em, color-mix(in srgb, #fff 10%, transparent) 1.4em),
    var(--c);
  transform: translateY(-100%);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.75, 0);
}
.hfx-curtain-drop:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.2s ease 0.2s, background-color 0s 0.8s;
}
.hfx-curtain-drop:is(:hover, :focus-visible)::before {
  transform: translateY(0);
  transition: transform 0.8s linear(0, 0.06 8.75%, 0.25 17.5%, 0.56 26.25%, 1 35%, 0.925 41%, 0.9 47%, 0.925 53%, 1 59%, 0.98 65%, 1 71%);
}

.hfx-corner-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.12s;
}
.hfx-corner-fill::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 250%;
  aspect-ratio: 1;
  background: var(--c);
  transform: translate(-50%, 50%) rotate(45deg) scale(0);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-corner-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.12s, background-color 0s 0.5s;
}
.hfx-corner-fill:is(:hover, :focus-visible)::before {
  transform: translate(-50%, 50%) rotate(45deg) scale(1);
}

.hfx-double-layer-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.3s;
}
.hfx-double-layer-fill::before,
.hfx-double-layer-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.hfx-double-layer-fill::before {
  background: color-mix(in srgb, var(--c) 40%, #fff);
  transition-delay: 0.1s;
}
.hfx-double-layer-fill::after { background: var(--c); }
.hfx-double-layer-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.3s, background-color 0s 0.6s;
}
.hfx-double-layer-fill:is(:hover, :focus-visible)::before,
.hfx-double-layer-fill:is(:hover, :focus-visible)::after {
  transform: translateX(0);
}
.hfx-double-layer-fill:is(:hover, :focus-visible)::before { transition-delay: 0s; }
.hfx-double-layer-fill:is(:hover, :focus-visible)::after { transition-delay: 0.12s; }

@property --hfx-stripe-fill-w {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.hfx-stripe-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.2s;
}
.hfx-stripe-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(-45deg, var(--c) 0 var(--hfx-stripe-fill-w), transparent 0 0.9em);
  transition: --hfx-stripe-fill-w 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-stripe-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.2s, background-color 0s 0.5s;
}
.hfx-stripe-fill:is(:hover, :focus-visible)::before { --hfx-stripe-fill-w: 0.9em; }

.hfx-arrow-sweep {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.1s;
}
.hfx-arrow-sweep::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  width: calc(100% + 1.4em);
  background: var(--c);
  clip-path: polygon(0 0, calc(100% - 1.4em) 0, 100% 50%, calc(100% - 1.4em) 100%, 0 100%);
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-arrow-sweep:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.1s, background-color 0s 0.45s;
}
.hfx-arrow-sweep:is(:hover, :focus-visible)::before { transform: translateX(0); }

@property --hfx-clock-wipe-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.hfx-clock-wipe {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.3s;
}
.hfx-clock-wipe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: conic-gradient(var(--c) var(--hfx-clock-wipe-a), transparent 0);
  transition: --hfx-clock-wipe-a 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-clock-wipe:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.3s, background-color 0s 0.6s;
}
.hfx-clock-wipe:is(:hover, :focus-visible)::before { --hfx-clock-wipe-a: 360deg; }

.hfx-rotating-square-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.3s ease 0.1s;
}
.hfx-rotating-square-fill::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 110%;
  aspect-ratio: 1;
  background: var(--c);
  transform: translate(-50%, -50%) rotate(-135deg) scale(0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-rotating-square-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.3s ease 0.1s, background-color 0s 0.6s;
}
.hfx-rotating-square-fill:is(:hover, :focus-visible)::before {
  transform: translate(-50%, -50%) rotate(0) scale(1);
}

@property --hfx-pixel-fill-a { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --hfx-pixel-fill-b { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --hfx-pixel-fill-c { syntax: "<color>"; inherits: false; initial-value: transparent; }
@property --hfx-pixel-fill-d { syntax: "<color>"; inherits: false; initial-value: transparent; }
.hfx-pixel-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.2em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.01s linear 0.2s;
}
/* a 2x2 ordered dither: each layer paints one cell of every 2x2 block */
.hfx-pixel-fill::before {
  --p: 0.5em;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    conic-gradient(at var(--p) var(--p), transparent 75%, var(--hfx-pixel-fill-a) 0) 0 0,
    conic-gradient(at var(--p) var(--p), transparent 75%, var(--hfx-pixel-fill-b) 0) var(--p) var(--p),
    conic-gradient(at var(--p) var(--p), transparent 75%, var(--hfx-pixel-fill-c) 0) var(--p) 0,
    conic-gradient(at var(--p) var(--p), transparent 75%, var(--hfx-pixel-fill-d) 0) 0 var(--p);
  background-size: calc(2 * var(--p)) calc(2 * var(--p));
  transition: --hfx-pixel-fill-a 0.01s 0.3s, --hfx-pixel-fill-b 0.01s 0.2s, --hfx-pixel-fill-c 0.01s 0.1s, --hfx-pixel-fill-d 0.01s;
}
.hfx-pixel-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.01s linear 0.2s, background-color 0s 0.35s;
}
.hfx-pixel-fill:is(:hover, :focus-visible)::before {
  --hfx-pixel-fill-a: var(--c);
  --hfx-pixel-fill-b: var(--c);
  --hfx-pixel-fill-c: var(--c);
  --hfx-pixel-fill-d: var(--c);
  transition: --hfx-pixel-fill-a 0.01s, --hfx-pixel-fill-b 0.01s 0.1s, --hfx-pixel-fill-c 0.01s 0.2s, --hfx-pixel-fill-d 0.01s 0.3s;
}

.hfx-price-reveal-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
}
.hfx-price-reveal-fill-label,
.hfx-price-reveal-fill-panel {
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-price-reveal-fill-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--c);
  color: #fff;
  transform: translateX(-101%);
}
.hfx-price-reveal-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  transition: background-color 0s 0.45s;
}
.hfx-price-reveal-fill:is(:hover, :focus-visible) .hfx-price-reveal-fill-label {
  transform: translateX(calc(100% + 1.8em));
}
.hfx-price-reveal-fill:is(:hover, :focus-visible) .hfx-price-reveal-fill-panel {
  transform: translateX(0);
}

.hfx-ink-bleed {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.2s ease 0.3s;
}
.hfx-ink-bleed-defs {
  position: absolute;
  width: 0;
  height: 0;
}
/* oversized so the displaced edge never pulls in blank pixels at the border */
.hfx-ink-bleed-ink {
  position: absolute;
  inset: -0.8em;
  z-index: -1;
  filter: url(#hfx-ink-bleed-edge);
}
.hfx-ink-bleed-ink::before,
.hfx-ink-bleed-ink::after {
  content: "";
  position: absolute;
  width: 140%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.45s cubic-bezier(0.55, 0, 1, 0.45);
}
.hfx-ink-bleed-ink::before {
  left: 0.8em;
  top: calc(100% - 0.8em);
}
.hfx-ink-bleed-ink::after {
  left: calc(100% - 0.8em);
  top: 0.8em;
}
.hfx-ink-bleed:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.2s ease 0.35s, background-color 0s 1s;
}
.hfx-ink-bleed:is(:hover, :focus-visible) .hfx-ink-bleed-ink::before,
.hfx-ink-bleed:is(:hover, :focus-visible) .hfx-ink-bleed-ink::after {
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.9s cubic-bezier(0.45, 0, 0.25, 1);
}
.hfx-ink-bleed:is(:hover, :focus-visible) .hfx-ink-bleed-ink::after { transition-delay: 0.12s; }

.hfx-elastic-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.2s ease;
}
/* width and height spring on separate curves, out of phase, which reads as jelly */
.hfx-elastic-fill::before {
  content: "";
  position: absolute;
  inset: 0.24em;
  z-index: -1;
  border-radius: 0.28em;
  background: var(--c);
  scale: 1 0;
  transform: scaleX(0.2);
  transition: scale 0.25s cubic-bezier(0.5, 0, 0.75, 0), transform 0.25s cubic-bezier(0.5, 0, 0.75, 0);
}
.hfx-elastic-fill:is(:hover, :focus-visible) {
  color: #fff;
  transition-delay: 0.1s;
}
.hfx-elastic-fill:is(:hover, :focus-visible)::before {
  scale: 1 1;
  transform: scaleX(1);
  transition:
    scale 0.7s linear(0, 0.5 12%, 0.78 24%, 0.86 36%, 1.07 58%, 0.97 80%, 1.01 90%, 1),
    transform 0.7s linear(0, 0.6 12%, 0.92 24%, 1.04 38%, 0.97 60%, 1.015 80%, 1);
}

.hfx-two-way-sweep {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.2s;
}
.hfx-two-way-sweep::before,
.hfx-two-way-sweep::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  height: 51%;
  background: var(--c);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-two-way-sweep::before {
  top: 0;
  transform: translateX(-101%);
}
.hfx-two-way-sweep::after {
  bottom: 0;
  transform: translateX(101%);
  transition-delay: 0.07s;
}
.hfx-two-way-sweep:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.2s, background-color 0s 0.55s;
}
.hfx-two-way-sweep:is(:hover, :focus-visible)::before,
.hfx-two-way-sweep:is(:hover, :focus-visible)::after {
  transform: translateX(0);
}

.hfx-diagonal-split-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.15s;
}
.hfx-diagonal-split-fill::before,
.hfx-diagonal-split-fill::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: var(--c);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-diagonal-split-fill::before {
  clip-path: polygon(0 0, 104% 0, 0 108%);
  transform: translate(-100%, -100%);
}
.hfx-diagonal-split-fill::after {
  clip-path: polygon(100% -8%, 100% 100%, -4% 100%);
  transform: translate(100%, 100%);
}
.hfx-diagonal-split-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.15s, background-color 0s 0.45s;
}
.hfx-diagonal-split-fill:is(:hover, :focus-visible)::before,
.hfx-diagonal-split-fill:is(:hover, :focus-visible)::after {
  transform: translate(0, 0);
}

@property --hfx-halftone-fill-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.hfx-halftone-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.25s;
}
.hfx-halftone-fill::before {
  --hfx-halftone-fill-r: 0.035em;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, var(--c) var(--hfx-halftone-fill-r), transparent calc(var(--hfx-halftone-fill-r) + 0.03em)) 50% 50% / 0.5em 0.5em;
  transition: --hfx-halftone-fill-r 0.55s cubic-bezier(0.5, 0, 0.3, 1);
}
.hfx-halftone-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.25s, background-color 0s 0.55s;
}
.hfx-halftone-fill:is(:hover, :focus-visible)::before { --hfx-halftone-fill-r: 0.4em; }

.hfx-flip-down-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.2s ease 0.2s;
}
.hfx-flip-down-fill::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  background: var(--c);
  transform-origin: 50% 0;
  transform: perspective(10em) rotateX(90deg);
  transition: transform 0.35s cubic-bezier(0.5, 0, 0.75, 0);
}
.hfx-flip-down-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.2s ease 0.2s, background-color 0s 0.8s;
}
.hfx-flip-down-fill:is(:hover, :focus-visible)::before {
  transform: perspective(10em) rotateX(0deg);
  transition: transform 0.8s linear(0, 0.2 12%, 0.55 24%, 1 36%, 1.1 45%, 1.12 50%, 1.1 55%, 1 64%, 0.97 72%, 0.975 76%, 1 86%, 1);
}

.hfx-corner-brackets-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.3em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.12s;
}
.hfx-corner-brackets-fill::before {
  --arm: 0.9em;
  --t: 0.16em;
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--c) 0 0) 0 0,
    linear-gradient(var(--c) 0 0) 0 0,
    linear-gradient(var(--c) 0 0) 100% 0,
    linear-gradient(var(--c) 0 0) 100% 0,
    linear-gradient(var(--c) 0 0) 0 100%,
    linear-gradient(var(--c) 0 0) 0 100%,
    linear-gradient(var(--c) 0 0) 100% 100%,
    linear-gradient(var(--c) 0 0) 100% 100%;
  background-repeat: no-repeat;
  background-size:
    var(--arm) var(--t), var(--t) var(--arm),
    var(--arm) var(--t), var(--t) var(--arm),
    var(--arm) var(--t), var(--t) var(--arm),
    var(--arm) var(--t), var(--t) var(--arm);
  transition: background-size 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-corner-brackets-fill:is(:hover, :focus-visible) { color: #fff; }
.hfx-corner-brackets-fill:is(:hover, :focus-visible)::before {
  background-size: 51% 51%;
}

.hfx-scribble-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.2s ease, background-color 0.15s ease;
}
.hfx-scribble-fill-svg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--c);
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1.1;
  stroke-dashoffset: 1.02;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.5, 0, 0.75, 0);
}
/* once the scribble is done, the button's own background fills the gaps */
.hfx-scribble-fill:is(:hover, :focus-visible) {
  background-color: var(--c);
  color: #fff;
  transition: color 0.2s ease 0.45s, background-color 0.25s ease 0.6s;
}
.hfx-scribble-fill:is(:hover, :focus-visible) .hfx-scribble-fill-svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.45, 0, 0.3, 1);
}

.hfx-underline-to-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.12s;
}
.hfx-underline-to-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  clip-path: inset(calc(100% - 0.62em) 1.75em 0.42em round 0.1em);
  transition: clip-path 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-underline-to-fill:is(:hover, :focus-visible) { color: #fff; }
.hfx-underline-to-fill:is(:hover, :focus-visible)::before {
  clip-path: inset(0 round 0.5em);
}

.hfx-bubble-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.2s;
}
.hfx-bubble-fill-bubbles {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hfx-bubble-fill-bubbles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: max(48%, 3.8em);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--c);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s cubic-bezier(0.5, 0, 0.75, 0) calc((4 - var(--i)) * 0.03s);
}
.hfx-bubble-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.2s, background-color 0s 0.75s;
}
.hfx-bubble-fill:is(:hover, :focus-visible) .hfx-bubble-fill-bubbles i {
  transform: translate(-50%, -50%) scale(1);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--i) * 0.06s);
}

.hfx-offset-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.2s ease 0.05s;
}
.hfx-offset-fill::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  transform: translate(0.35em, 0.35em);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease;
}
.hfx-offset-fill:is(:hover, :focus-visible) { color: #fff; }
.hfx-offset-fill:is(:hover, :focus-visible)::before {
  background: var(--c);
  transform: translate(0, 0);
}

@property --hfx-radial-glow-fill-r {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
.hfx-radial-glow-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.75em 1.75em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: color 0.25s ease 0.2s;
}
.hfx-radial-glow-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle at 50% 130%,
    color-mix(in srgb, var(--c) 45%, #fff) 0,
    var(--c) calc(var(--hfx-radial-glow-fill-r) * 0.5),
    var(--c) calc(var(--hfx-radial-glow-fill-r) * 0.75),
    transparent var(--hfx-radial-glow-fill-r)
  );
  transition: --hfx-radial-glow-fill-r 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hfx-radial-glow-fill:is(:hover, :focus-visible) {
  background-color: var(--c); /* hides the hairline where the fill meets the border */
  color: #fff;
  transition: color 0.25s ease 0.2s, background-color 0s 0.6s;
}
.hfx-radial-glow-fill:is(:hover, :focus-visible)::before { --hfx-radial-glow-fill-r: 150%; }

.hfx-card-pricing-tier {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  box-sizing: border-box;
  width: 11.5em;
  padding: 1em 1.1em 1.1em;
  border-radius: 0.9em;
  background: #fff;
  color: #1f2937;
  font-family: system-ui, sans-serif;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 10%, transparent), 0 0.3em 0.6em -0.4em color-mix(in srgb, #000 20%, transparent);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.hfx-card-pricing-tier:hover {
  transform: translateY(-0.35em);
  box-shadow: 0 0 0 0.125em var(--c), 0 1em 1.4em -0.9em color-mix(in srgb, var(--c) 80%, transparent);
}
.hfx-card-pricing-tier h3 {
  font-weight: 700;
  margin: 0;
  font-size: 0.75em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c);
}
.hfx-card-pricing-tier-price {
  margin: 0.35em 0 0.7em;
  font-size: 0.8em;
  line-height: 1;
  color: #6b7280;
}
.hfx-card-pricing-tier-price strong {
  font-size: 2.3em;
  letter-spacing: -0.03em;
  color: #111827;
}
.hfx-card-pricing-tier ul {
  display: grid;
  gap: 0.4em;
  margin: 0 0 1.1em;
  padding: 0;
  list-style: none;
  font-size: 0.78em;
  color: #4b5563;
}
.hfx-card-pricing-tier li {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.hfx-card-pricing-tier li::before {
  content: "";
  width: 0.35em;
  height: 0.65em;
  margin-left: 0.15em;
  border: solid color-mix(in srgb, var(--c) 45%, transparent);
  border-width: 0 0.15em 0.15em 0;
  transform: translateY(-0.1em) rotate(45deg);
  transition: border-color 0.3s ease;
}
.hfx-card-pricing-tier:hover li::before { border-color: var(--c); }
.hfx-card-pricing-tier-cta {
  display: block;
  padding: 0.6em;
  border-radius: 0.55em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  font-size: 0.8em;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hfx-card-pricing-tier:hover .hfx-card-pricing-tier-cta {
  background: var(--c);
  color: #fff;
}
.hfx-card-pricing-tier-badge {
  position: absolute;
  top: 1.35em;
  right: 1.35em;
  padding: 0.3em 0.7em;
  border-radius: 99em;
  background: var(--c);
  color: #fff;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0;
  transform: translateY(0.5em) scale(0.7);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-pricing-tier:hover .hfx-card-pricing-tier-badge {
  opacity: 1;
  transform: none;
}

.hfx-card-profile-social {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
  width: 12em;
  padding: 1.2em 1em 0.9em;
  text-align: center;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;}
.hfx-card-profile-social:is(:hover, :focus-within) {
  transform: translateY(-0.25em);
  box-shadow: 0 0.9em 1.4em -0.9em color-mix(in srgb, #000 35%, transparent);
}
.hfx-card-profile-social-avatar {
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  margin: 0 auto 0.65em;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.2em color-mix(in srgb, var(--c) 0%, transparent);
  transition: box-shadow 0.35s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-profile-social:is(:hover, :focus-within) .hfx-card-profile-social-avatar {
  transform: scale(1.06);
  box-shadow: 0 0 0 0.2em #fff, 0 0 0 0.36em var(--c);
}
.hfx-card-profile-social h3 {
  font-weight: 600;
  margin: 0;
  font-size: 1em;
}
.hfx-card-profile-social-swap {
  display: grid;
  height: 2.3em;
  margin-top: 0.3em;
  overflow: hidden;
}
.hfx-card-profile-social-swap > * { grid-area: 1 / 1; }
.hfx-card-profile-social-swap p {
  align-self: center;
  margin: 0;
  font-size: 0.8em;
  color: #6b7280;
  transition: transform 0.3s ease, opacity 0.25s ease;
}
.hfx-card-profile-social:is(:hover, :focus-within) .hfx-card-profile-social-swap p {
  transform: translateY(-1.6em);
  opacity: 0;
}
.hfx-card-profile-social-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.hfx-card-profile-social-links a {
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  opacity: 0;
  transform: translateY(1.6em);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}
.hfx-card-profile-social:is(:hover, :focus-within) .hfx-card-profile-social-links a {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 70ms + 60ms);
}
.hfx-card-profile-social-links a:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
}
.hfx-card-profile-social-links svg {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hfx-card-add-to-cart {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  width: 12em;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;}
.hfx-card-add-to-cart:is(:hover, :focus-within) {
  transform: translateY(-0.25em);
  box-shadow: 0 0.9em 1.4em -0.9em color-mix(in srgb, #000 35%, transparent);
}
.hfx-card-add-to-cart-media {
  position: relative;
  display: grid;
  place-items: center;
  height: 6.6em;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fff 0 22%, transparent 60%), color-mix(in srgb, var(--c) 16%, transparent);
}
.hfx-card-add-to-cart-mug {
  width: 3.6em;
  height: 3.6em;
  fill: var(--c);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-add-to-cart:is(:hover, :focus-within) .hfx-card-add-to-cart-mug {
  transform: translateY(-0.7em) rotate(-8deg);
}
.hfx-card-add-to-cart-handle {
  fill: none;
  stroke: var(--c);
  stroke-width: 3.5;
}
.hfx-card-add-to-cart-steam {
  fill: none;
  stroke: color-mix(in srgb, var(--c) 55%, transparent);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0;
  transform: translateY(0.25em);
  transition: opacity 0.3s ease, transform 0.6s ease;
}
.hfx-card-add-to-cart:is(:hover, :focus-within) .hfx-card-add-to-cart-steam {
  opacity: 1;
  transform: none;
}
.hfx-card-add-to-cart-add {
  position: absolute;
  inset: auto 0.7em 0.7em;
  padding: 0.65em;
  border: 0;
  border-radius: 0.6em;
  background: var(--c);
  color: #fff;
  font: 600 0.8em system-ui, sans-serif;
  cursor: pointer;
  transform: translateY(calc(100% + 1em));
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s ease;
}
.hfx-card-add-to-cart:is(:hover, :focus-within) .hfx-card-add-to-cart-add { transform: none; }
.hfx-card-add-to-cart-add:hover { background: color-mix(in srgb, var(--c) 85%, #000); }
.hfx-card-add-to-cart-body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.75em 0.9em 0.85em;
}
.hfx-card-add-to-cart h3 {
  font-weight: 600;
  margin: 0;
  font-size: 0.9em;
}
.hfx-card-add-to-cart p {
  margin: 0;
  font-size: 0.9em;
  font-weight: 700;
  color: var(--c);
}

.hfx-card-blog-post {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  width: 21em;
  height: 7.4em;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  border-radius: 0.8em;
  background: #fff;
  color: #1f2937;
  font-family: system-ui, sans-serif;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}
.hfx-card-blog-post:is(:hover, :focus-visible) {
  transform: translateY(-0.2em);
  box-shadow: 0 0.9em 1.4em -0.9em color-mix(in srgb, #000 35%, transparent);
}
.hfx-card-blog-post-thumb {
  position: relative;
  flex: 0 0 7.4em;
  overflow: hidden;
}
.hfx-card-blog-post-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 18% 100%, color-mix(in srgb, var(--c) 75%, #000) 0 50%, transparent 51%),
    radial-gradient(140% 80% at 88% 100%, color-mix(in srgb, var(--c) 50%, #fff) 0 50%, transparent 51%),
    radial-gradient(circle at 70% 38%, #fff7d6 0 12%, transparent 13%),
    linear-gradient(to bottom, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 55%, #fff));
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-blog-post:is(:hover, :focus-visible) .hfx-card-blog-post-thumb::before {
  transform: scale(1.12) rotate(-1.5deg);
}
.hfx-card-blog-post-body {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  min-width: 0;
  padding: 0.85em 1em;
}
.hfx-card-blog-post-tag {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c);
}
.hfx-card-blog-post h3 {
  font-weight: 600;
  margin: 0;
  font-size: 0.95em;
  line-height: 1.35;
}
.hfx-card-blog-post h3 span {
  padding-bottom: 0.1em;
  background: linear-gradient(var(--c), var(--c)) 0 100% / 0 0.1em no-repeat;
  transition: background-size 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-blog-post:is(:hover, :focus-visible) h3 span { background-size: 100% 0.1em; }
.hfx-card-blog-post-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-top: auto;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--c);
}
.hfx-card-blog-post-more svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-blog-post:is(:hover, :focus-visible) .hfx-card-blog-post-more svg { transform: translateX(0.35em); }

.hfx-card-expand-details {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
  width: 17em;
  padding: 0.9em 1em;
  transition: box-shadow 0.35s ease, border-color 0.35s ease;}
.hfx-card-expand-details:hover {
  border-color: color-mix(in srgb, var(--c) 35%, transparent);
  box-shadow: 0 0.8em 1.4em -0.9em color-mix(in srgb, #000 30%, transparent);
}
.hfx-card-expand-details-head {
  display: flex;
  align-items: center;
  gap: 0.75em;
}
.hfx-card-expand-details-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
}
.hfx-card-expand-details svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hfx-card-expand-details h3 {
  font-weight: 600;
  margin: 0;
  font-size: 0.95em;
}
.hfx-card-expand-details p {
  margin: 0.1em 0 0;
  font-size: 0.78em;
  line-height: 1.45;
  color: #6b7280;
}
.hfx-card-expand-details-chevron {
  margin-left: auto;
  color: #9ca3af;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.3s ease;
}
.hfx-card-expand-details:hover .hfx-card-expand-details-chevron {
  color: var(--c);
  transform: rotate(180deg);
}
.hfx-card-expand-details-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-expand-details:hover .hfx-card-expand-details-more { grid-template-rows: 1fr; }
.hfx-card-expand-details-more > div {
  min-height: 0;
  overflow: hidden;
}
.hfx-card-expand-details-more p {
  margin: 0;
  padding: 0.75em 0 0.1em 3.95em;
  opacity: 0;
  transform: translateY(-0.4em);
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-expand-details:hover .hfx-card-expand-details-more p {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

.hfx-card-stack-fan {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 7.2em;
  height: 8.8em;
  font-family: system-ui, sans-serif;
}
.hfx-card-stack-fan-card {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0.45em 0.45em 0;
  border-radius: 0.35em;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 8%, transparent), 0 0.4em 0.9em -0.4em color-mix(in srgb, #000 35%, transparent);
  transform-origin: 50% 115%;
  transform: rotate(calc(var(--i) * 5deg));
  transition: transform 0.5s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.hfx-card-stack-fan:hover .hfx-card-stack-fan-card {
  transform: translateX(calc(var(--i) * 4em)) rotate(calc(var(--i) * 13deg));
}
.hfx-card-stack-fan:hover .hfx-card-stack-fan-top {
  transform: translateY(-0.35em) scale(1.04);
}
.hfx-card-stack-fan-photo {
  height: 6.3em;
  border-radius: 0.15em;
  background: radial-gradient(120% 70% at 18% 100%, color-mix(in srgb, var(--c) 75%, #000) 0 50%, transparent 51%),
    radial-gradient(140% 80% at 88% 100%, color-mix(in srgb, var(--c) 50%, #fff) 0 50%, transparent 51%),
    radial-gradient(circle at 70% 38%, #fff7d6 0 12%, transparent 13%),
    linear-gradient(to bottom, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 55%, #fff));
}
.hfx-card-stack-fan-card:not(.hfx-card-stack-fan-top) .hfx-card-stack-fan-photo {
  filter: hue-rotate(calc(var(--i) * 55deg)) saturate(0.85);
}
.hfx-card-stack-fan figcaption {
  padding: 0.55em 0 0;
  font-family: Georgia, serif;
  font-size: 0.7em;
  font-style: italic;
  text-align: center;
  color: #4b5563;
}

.hfx-card-glow-backdrop {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 13em;
  font-family: system-ui, sans-serif;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-glow-backdrop:hover { transform: translateY(-0.2em); }
.hfx-card-glow-backdrop::before {
  content: "";
  position: absolute;
  inset: 0.35em 0.2em;
  border-radius: 1em;
  background: linear-gradient(110deg, var(--c), color-mix(in oklch, var(--c), #ec4899 55%), color-mix(in oklch, var(--c), #22d3ee 55%), var(--c)) 0 0 / 300% 100%;
  filter: blur(1em);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-glow-backdrop:hover::before {
  opacity: 0.95;
  transform: translateY(0.15em) scale(1.03);
  animation: hfx-card-glow-backdrop-drift 4s ease-in-out infinite alternate;
}
.hfx-card-glow-backdrop-inner {
  position: relative;
  box-sizing: border-box;
  padding: 1.1em 1.2em 1.2em;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  border-radius: 0.9em;
  background: #fff;
  color: #1f2937;
}
.hfx-card-glow-backdrop-icon {
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  margin-bottom: 0.7em;
  border-radius: 0.6em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
}
.hfx-card-glow-backdrop-icon svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
}
.hfx-card-glow-backdrop h3 {
  font-weight: 600;
  margin: 0 0 0.25em;
  font-size: 1em;
}
.hfx-card-glow-backdrop p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  color: #6b7280;
}
@keyframes hfx-card-glow-backdrop-drift {
  to { background-position: 100% 0; }
}

.hfx-card-border-beam {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  box-sizing: border-box;
  width: 15em;
  padding: 1.15em 1.25em 1.25em;
  border-radius: 0.85em;
  background: color-mix(in srgb, var(--c) 10%, #0b0f19);
  color: #f3f4f6;
  font-family: system-ui, sans-serif;
}
.hfx-card-border-beam-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  transition: filter 0.4s ease;
}
.hfx-card-border-beam:hover .hfx-card-border-beam-frame { filter: drop-shadow(0 0 0.3em var(--c)); }
.hfx-card-border-beam-frame rect {
  rx: 0.85em;
  fill: none;
  stroke-width: 1.5;
}
.hfx-card-border-beam-track { stroke: color-mix(in srgb, #fff 14%, transparent); }
.hfx-card-border-beam-beam {
  stroke: color-mix(in srgb, var(--c) 70%, #fff);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 18 32;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hfx-card-border-beam:hover .hfx-card-border-beam-beam {
  opacity: 1;
  animation: hfx-card-border-beam-run 3s linear infinite;
}
.hfx-card-border-beam-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-bottom: 0.75em;
  padding: 0.25em 0.6em;
  border-radius: 99em;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  color: color-mix(in srgb, var(--c) 45%, #fff);
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hfx-card-border-beam-chip::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
.hfx-card-border-beam h3 {
  font-weight: 600;
  margin: 0 0 0.3em;
  font-size: 1em;
}
.hfx-card-border-beam p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  color: color-mix(in srgb, #fff 62%, transparent);
}
@keyframes hfx-card-border-beam-run {
  to { stroke-dashoffset: -100; }
}

.hfx-card-corner-ribbon {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  width: 13em;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;}
.hfx-card-corner-ribbon:hover {
  transform: translateY(-0.25em);
  box-shadow: 0 0.9em 1.4em -0.9em color-mix(in srgb, #000 35%, transparent);
}
.hfx-card-corner-ribbon-image {
  height: 5.6em;
  background: radial-gradient(120% 70% at 18% 100%, color-mix(in srgb, var(--c) 75%, #000) 0 50%, transparent 51%),
    radial-gradient(140% 80% at 88% 100%, color-mix(in srgb, var(--c) 50%, #fff) 0 50%, transparent 51%),
    radial-gradient(circle at 70% 38%, #fff7d6 0 12%, transparent 13%),
    linear-gradient(to bottom, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 55%, #fff));
}
.hfx-card-corner-ribbon-body { padding: 0.75em 0.95em 0.85em; }
.hfx-card-corner-ribbon h3 {
  font-weight: 600;
  margin: 0 0 0.25em;
  font-size: 0.95em;
}
.hfx-card-corner-ribbon p {
  margin: 0;
  font-size: 0.85em;
  color: #9ca3af;
}
.hfx-card-corner-ribbon strong {
  margin-left: 0.2em;
  color: var(--c);
}
.hfx-card-corner-ribbon-ribbon {
  position: absolute;
  z-index: 1;
  top: 1.05em;
  right: -2.35em;
  width: 8em;
  padding: 0.35em 0;
  background: var(--c);
  box-shadow: 0 0.2em 0.5em color-mix(in srgb, #000 25%, transparent);
  color: #fff;
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  transform: translate(3em, -3em) rotate(45deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-corner-ribbon:hover .hfx-card-corner-ribbon-ribbon { transform: rotate(45deg); }

@property --hfx-card-spotlight-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: -30%;
}
@property --hfx-card-spotlight-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: -60%;
}
.hfx-card-spotlight {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  --hfx-card-spotlight-x: -30%;
  --hfx-card-spotlight-y: -60%;
  position: relative;
  box-sizing: border-box;
  width: 15em;
  padding: 1.25em 1.3em 1.35em;
  overflow: hidden;
  border-radius: 0.9em;
  background: #0d0f14;
  color: #f3f4f6;
  font-family: system-ui, sans-serif;
  transition: --hfx-card-spotlight-x 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), --hfx-card-spotlight-y 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-spotlight:hover {
  --hfx-card-spotlight-x: 62%;
  --hfx-card-spotlight-y: 0%;
}
.hfx-card-spotlight::before,
.hfx-card-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.hfx-card-spotlight::before {
  background: radial-gradient(circle 11em at var(--hfx-card-spotlight-x) var(--hfx-card-spotlight-y), color-mix(in srgb, var(--c) 55%, transparent), transparent 70%);
}
.hfx-card-spotlight::after {
  padding: 1px;
  background: radial-gradient(circle 9em at var(--hfx-card-spotlight-x) var(--hfx-card-spotlight-y), var(--c), color-mix(in srgb, #fff 12%, transparent) 75%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.hfx-card-spotlight > * { position: relative; }
.hfx-card-spotlight-eyebrow {
  font-size: 0.65em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 55%, #fff);
}
.hfx-card-spotlight h3 {
  font-weight: 600;
  margin: 0.45em 0 0.3em;
  font-size: 1.05em;
}
.hfx-card-spotlight p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  color: color-mix(in srgb, #fff 60%, transparent);
}

.hfx-card-icon-bounce {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
  width: 13em;
  padding: 1.2em 1.2em 1.25em;
  transition: border-color 0.3s ease, box-shadow 0.35s ease;}
.hfx-card-icon-bounce:hover {
  border-color: color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: 0 0.8em 1.4em -0.9em color-mix(in srgb, var(--c) 60%, transparent);
}
.hfx-card-icon-bounce-icon {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  margin-bottom: 0.8em;
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transform-origin: 50% 100%;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hfx-card-icon-bounce:hover .hfx-card-icon-bounce-icon {
  background: var(--c);
  color: #fff;
  animation: hfx-card-icon-bounce-hop 0.8s both;
}
.hfx-card-icon-bounce-icon svg {
  width: 1.25em;
  height: 1.25em;
  fill: currentColor;
}
.hfx-card-icon-bounce h3 {
  font-weight: 600;
  margin: 0 0 0.25em;
  font-size: 1em;
}
.hfx-card-icon-bounce p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  color: #6b7280;
}
@keyframes hfx-card-icon-bounce-hop {
  0% { transform: none; animation-timing-function: ease-out; }
  14% { transform: scale(1.18, 0.8); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  42% { transform: translateY(-0.75em) scale(0.9, 1.1); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  62% { transform: scale(1.14, 0.84); animation-timing-function: ease-out; }
  80% { transform: translateY(-0.12em) scale(0.97, 1.03); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}

.hfx-card-testimonial {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  box-sizing: border-box;
  width: 16em;
  margin: 0;
  padding: 1.1em 1.2em 1.1em;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;}
.hfx-card-testimonial:hover {
  transform: translateY(-0.2em);
  box-shadow: 0 0.9em 1.4em -0.9em color-mix(in srgb, #000 35%, transparent);
}
.hfx-card-testimonial-quote {
  position: absolute;
  top: 0.85em;
  right: 1.1em;
  width: 1.8em;
  fill: color-mix(in srgb, var(--c) 20%, transparent);
  transform-origin: 50% 60%;
  transition: fill 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-testimonial:hover .hfx-card-testimonial-quote {
  fill: var(--c);
  transform: translate(-0.1em, -0.05em) rotate(-10deg) scale(1.15);
}
.hfx-card-testimonial-stars {
  display: flex;
  gap: 0.18em;
  margin-bottom: 0.7em;
}
.hfx-card-testimonial-stars span {
  width: 0.85em;
  height: 0.85em;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.hfx-card-testimonial:hover .hfx-card-testimonial-stars span {
  background: var(--c);
  animation: hfx-card-testimonial-pop 0.45s calc(var(--i) * 70ms) cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.hfx-card-testimonial blockquote {
  margin: 0;
  font-size: 0.85em;
  line-height: 1.45;
  color: #374151;
}
.hfx-card-testimonial figcaption {
  display: flex;
  padding: 0;
  font-family: inherit;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.8em;
  font-size: 0.72em;
  color: #6b7280;
}
.hfx-card-testimonial figcaption strong {
  display: block;
  color: #111827;
}
.hfx-card-testimonial-avatar {
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
}
@keyframes hfx-card-testimonial-pop {
  from { transform: scale(0.4) rotate(-40deg); background: color-mix(in srgb, var(--c) 22%, transparent); }
  to { transform: none; background: var(--c); }
}

.hfx-card-pop-out {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 13em;
  margin-top: 1.8em;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  transition: box-shadow 0.4s ease;
}
.hfx-card-pop-out:hover { box-shadow: 0 0 0 1px color-mix(in srgb, #000 10%, transparent), 0 0.9em 1.4em -0.9em color-mix(in srgb, #000 35%, transparent); }
.hfx-card-pop-out-scene {
  position: relative;
  height: 5.6em;
  overflow: hidden;
  border-radius: 0.8em 0.8em 0 0;
  background:
    radial-gradient(circle at 50% 118%, #fde68a 0 22%, transparent 23%),
    linear-gradient(to bottom, color-mix(in srgb, var(--c) 40%, #fff), #fde7d3);
}
.hfx-card-pop-out-scene::before {
  content: "";
  position: absolute;
  inset: 0 -2em;
  background:
    radial-gradient(ellipse 1.4em 0.45em at 22% 30%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 1em 0.35em at 30% 36%, #fff 60%, transparent 62%),
    radial-gradient(ellipse 1.6em 0.5em at 76% 62%, #fff 60%, transparent 62%),
    radial-gradient(circle at 84% 22%, color-mix(in srgb, var(--c) 70%, #f97316) 0 0.3em, transparent 0.32em);
  opacity: 0.9;
  transition: transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-pop-out:hover .hfx-card-pop-out-scene::before { transform: translateX(-1.2em); }
.hfx-card-pop-out-balloon {
  position: absolute;
  top: 1.1em;
  left: 50%;
  width: 2.5em;
  fill: var(--c);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 0.3em 0.3em color-mix(in srgb, #000 20%, transparent));
  transition: transform 0.7s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.hfx-card-pop-out:hover .hfx-card-pop-out-balloon { transform: translate(-50%, -2.6em) scale(1.3) rotate(-4deg); }
.hfx-card-pop-out-stripe { fill: color-mix(in srgb, var(--c) 45%, #fff); }
.hfx-card-pop-out-rope {
  fill: none;
  stroke: #78350f;
  stroke-width: 1.2;
}
.hfx-card-pop-out-basket { fill: #92400e; }
.hfx-card-pop-out-body { padding: 0.75em 0.95em 0.85em; }
.hfx-card-pop-out h3 {
  font-weight: 600;
  margin: 0 0 0.2em;
  font-size: 0.95em;
}
.hfx-card-pop-out p {
  margin: 0;
  font-size: 0.78em;
  color: #6b7280;
}

.hfx-card-slide-panel {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  width: 14em;
  height: 9em;
  border: 0;}
.hfx-card-slide-panel-image {
  position: absolute;
  inset: 0 -1.5em 0 0;
  background: radial-gradient(120% 70% at 18% 100%, color-mix(in srgb, var(--c) 75%, #000) 0 50%, transparent 51%),
    radial-gradient(140% 80% at 88% 100%, color-mix(in srgb, var(--c) 50%, #fff) 0 50%, transparent 51%),
    radial-gradient(circle at 70% 38%, #fff7d6 0 12%, transparent 13%),
    linear-gradient(to bottom, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 55%, #fff));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-slide-panel:is(:hover, :focus-within) .hfx-card-slide-panel-image { transform: translateX(-1.5em); }
.hfx-card-slide-panel-title {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: 1.6em 1em 0.8em;
  background: linear-gradient(to top, color-mix(in srgb, #000 55%, transparent), transparent);
  color: #fff;
  font-size: 1em;
  font-weight: 600;
  transition: opacity 0.3s ease;
}
.hfx-card-slide-panel:is(:hover, :focus-within) .hfx-card-slide-panel-title { opacity: 0; }
.hfx-card-slide-panel-panel {
  position: absolute;
  inset: 0 34% 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45em;
  box-sizing: border-box;
  padding: 1em;
  background: var(--c);
  color: #fff;
  transform: translateX(-101%);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.hfx-card-slide-panel:is(:hover, :focus-within) .hfx-card-slide-panel-panel { transform: none; }
.hfx-card-slide-panel-panel > * {
  margin: 0;
  opacity: 0;
  transform: translateX(-0.8em);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-slide-panel:is(:hover, :focus-within) .hfx-card-slide-panel-panel > * {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.25s + var(--i) * 70ms);
}
.hfx-card-slide-panel-panel h3 {
  font-size: 1em;
  font-weight: 600;
}
.hfx-card-slide-panel-panel p {
  font-size: 0.76em;
  line-height: 1.4;
  color: color-mix(in srgb, #fff 85%, transparent);
}
.hfx-card-slide-panel-panel a {
  margin-top: auto;
  padding: 0.45em 0.8em;
  border-radius: 0.45em;
  background: #fff;
  color: var(--c);
  font-size: 0.72em;
  font-weight: 700;
  text-decoration: none;
}

.hfx-card-parallax-layers {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  width: 13em;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;}
.hfx-card-parallax-layers:hover {
  transform: translateY(-0.2em);
  box-shadow: 0 0.9em 1.4em -0.9em color-mix(in srgb, #000 35%, transparent);
}
.hfx-card-parallax-layers-scene {
  position: relative;
  height: 6.2em;
  overflow: hidden;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed));
}
.hfx-card-parallax-layers-scene > span {
  position: absolute;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-parallax-layers-sun {
  top: 2.3em;
  left: 58%;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: #fde68a;
  box-shadow: 0 0 1em #fde68a;
}
.hfx-card-parallax-layers-far {
  inset: 1.2em -2em 0;
  background: color-mix(in srgb, var(--c) 45%, #fff);
  clip-path: polygon(0 62%, 14% 40%, 26% 55%, 42% 22%, 56% 48%, 70% 30%, 86% 52%, 100% 38%, 100% 100%, 0 100%);
}
.hfx-card-parallax-layers-near {
  inset: 3em -3em 0;
  background: color-mix(in srgb, var(--c) 80%, #000);
  clip-path: polygon(0 55%, 20% 30%, 38% 60%, 60% 20%, 80% 58%, 100% 35%, 100% 100%, 0 100%);
}
.hfx-card-parallax-layers:hover .hfx-card-parallax-layers-sun { transform: translateY(-1.2em); }
.hfx-card-parallax-layers:hover .hfx-card-parallax-layers-far { transform: translateX(-0.6em); }
.hfx-card-parallax-layers:hover .hfx-card-parallax-layers-near { transform: translateX(-2em); }
.hfx-card-parallax-layers-body { padding: 0.75em 0.95em 0.85em; }
.hfx-card-parallax-layers h3 {
  font-weight: 600;
  margin: 0 0 0.2em;
  font-size: 0.95em;
  transition: color 0.3s ease;
}
.hfx-card-parallax-layers:hover h3 { color: var(--c); }
.hfx-card-parallax-layers p {
  margin: 0;
  font-size: 0.78em;
  color: #6b7280;
}

.hfx-card-bottom-bar {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  box-sizing: border-box;
  width: 14em;
  padding: 1.1em 1.2em 1.25em;
  transition: background-color 0.35s ease;}
.hfx-card-bottom-bar:hover { background: color-mix(in srgb, var(--c) 5%, #fff); }
.hfx-card-bottom-bar::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 0.22em;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-card-bottom-bar:hover::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}
.hfx-card-bottom-bar-eyebrow {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c);
}
.hfx-card-bottom-bar h3 {
  margin: 0.35em 0 0.3em;
  font-size: 1em;
  font-weight: 600;
  transition: color 0.3s ease;
}
.hfx-card-bottom-bar:hover h3 { color: var(--c); }
.hfx-card-bottom-bar p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  color: #6b7280;
}

.hfx-card-dot-pattern {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 14em;
  padding: 1.2em 1.2em 1.25em;
  transition: border-color 0.35s ease;}
.hfx-card-dot-pattern:hover { border-color: color-mix(in srgb, var(--c) 40%, transparent); }
.hfx-card-dot-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent) 0.08em, transparent 0.1em) 0 0 / 0.9em 0.9em;
  -webkit-mask: radial-gradient(circle at 100% 0, #000, transparent 70%) 100% 0 / 60% 80% no-repeat;
  mask: radial-gradient(circle at 100% 0, #000, transparent 70%) 100% 0 / 60% 80% no-repeat;
  opacity: 0.6;
  transition: -webkit-mask-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), mask-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
}
.hfx-card-dot-pattern:hover::before {
  -webkit-mask-size: 160% 190%;
  mask-size: 160% 190%;
  opacity: 1;
  animation: hfx-card-dot-pattern-drift 1.8s linear infinite;
}
.hfx-card-dot-pattern-icon {
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  margin-bottom: 0.8em;
  border-radius: 0.6em;
  background: #fff;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent), 0 0.3em 0.6em -0.3em color-mix(in srgb, var(--c) 50%, transparent);
  color: var(--c);
}
.hfx-card-dot-pattern-icon svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.hfx-card-dot-pattern h3 {
  margin: 0 0 0.25em;
  font-size: 1em;
  font-weight: 600;
}
.hfx-card-dot-pattern p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  color: #6b7280;
}
@keyframes hfx-card-dot-pattern-drift {
  to { background-position: 0.9em -0.9em; }
}

.hfx-card-arrow-corner {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 15em;
  padding: 1.1em 1.2em 1.2em;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  border-radius: 0.8em;
  background: #fff;
  color: #1f2937;
  font-family: system-ui, sans-serif;
  text-decoration: none;
  transition: border-color 0.3s ease, box-shadow 0.35s ease;
}
.hfx-card-arrow-corner:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 0.8em 1.4em -0.9em color-mix(in srgb, var(--c) 55%, transparent);
}
.hfx-card-arrow-corner-arrow {
  position: absolute;
  top: 0.9em;
  right: 0.9em;
  width: 2.1em;
  height: 2.1em;
  overflow: hidden;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hfx-card-arrow-corner:is(:hover, :focus-visible) .hfx-card-arrow-corner-arrow {
  background: var(--c);
  color: #fff;
}
.hfx-card-arrow-corner-arrow svg {
  position: absolute;
  inset: 0;
  width: 1.05em;
  height: 1.05em;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
.hfx-card-arrow-corner-arrow svg:nth-child(2) { transform: translate(-1.6em, 1.6em); }
.hfx-card-arrow-corner:is(:hover, :focus-visible) .hfx-card-arrow-corner-arrow svg:nth-child(1) { transform: translate(1.6em, -1.6em); }
.hfx-card-arrow-corner:is(:hover, :focus-visible) .hfx-card-arrow-corner-arrow svg:nth-child(2) { transform: none; }
.hfx-card-arrow-corner-eyebrow {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c);
}
.hfx-card-arrow-corner h3 {
  margin: 1.1em 0 0.3em;
  font-size: 1em;
  font-weight: 600;
}
.hfx-card-arrow-corner p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  color: #6b7280;
}

.hfx-card-neon-sign {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  --hfx-card-neon-sign-lit: color-mix(in srgb, var(--c) 35%, #fff);
  position: relative;
  box-sizing: border-box;
  width: 14em;
  padding: 1.2em 1.3em 1.3em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 0.9em;
  background: #0a0a10;
  color: color-mix(in srgb, #fff 55%, transparent);
  font-family: system-ui, sans-serif;
}
.hfx-card-neon-sign::before {
  content: "";
  position: absolute;
  inset: -1px;
  border: 0.12em solid var(--hfx-card-neon-sign-lit);
  border-radius: inherit;
  box-shadow: 0 0 0.4em var(--c), 0 0 1.2em color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 0.5em color-mix(in srgb, var(--c) 45%, transparent);
  opacity: 0;
  pointer-events: none;
}
.hfx-card-neon-sign h3 {
  margin: 0 0 0.3em;
  font-size: 1.35em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--c) 45%, transparent);
}
.hfx-card-neon-sign p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
}
.hfx-card-neon-sign:hover::before { animation: hfx-card-neon-sign-flicker 0.9s linear both; }
.hfx-card-neon-sign:hover h3 {
  color: var(--hfx-card-neon-sign-lit);
  text-shadow: 0 0 0.2em var(--c), 0 0 0.6em var(--c);
  animation: hfx-card-neon-sign-flicker 0.9s linear both;
}
@keyframes hfx-card-neon-sign-flicker {
  0% { opacity: 0.2; }
  8% { opacity: 1; }
  12% { opacity: 0.25; }
  22% { opacity: 1; }
  26% { opacity: 0.4; }
  30% { opacity: 0.3; }
  38% { opacity: 1; }
  44% { opacity: 0.6; }
  52%, 100% { opacity: 1; }
}

.hfx-card-brutalist {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  --hfx-card-brutalist-ink: color-mix(in srgb, var(--c) 20%, #111);
  display: block;
  box-sizing: border-box;
  width: 13em;
  padding: 1em 1.1em 1.1em;
  border: 2px solid var(--hfx-card-brutalist-ink);
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0.3em 0.3em 0 var(--hfx-card-brutalist-ink);
  color: #111;
  font-family: system-ui, sans-serif;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.4), box-shadow 0.2s cubic-bezier(0.3, 0.7, 0.4, 1.4);
}
.hfx-card-brutalist:is(:hover, :focus-visible) {
  transform: translate(-0.25em, -0.25em);
  box-shadow: 0.6em 0.6em 0 var(--c);
}
.hfx-card-brutalist:active {
  transform: translate(0.3em, 0.3em);
  box-shadow: 0 0 0 var(--c);
}
.hfx-card-brutalist-tag {
  display: inline-block;
  padding: 0.15em 0.55em;
  border: 2px solid var(--hfx-card-brutalist-ink);
  border-radius: 0.3em;
  background: var(--c);
  color: #fff;
  font-size: 0.68em;
  font-weight: 800;
  text-transform: uppercase;
  transform: rotate(-4deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.hfx-card-brutalist:is(:hover, :focus-visible) .hfx-card-brutalist-tag { transform: rotate(4deg) scale(1.1); }
.hfx-card-brutalist h3 {
  margin: 0.6em 0 0.25em;
  font-size: 1.05em;
  font-weight: 800;
}
.hfx-card-brutalist p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  color: #374151;
}

.hfx-card-corner-brackets {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  box-sizing: border-box;
  width: 14em;
  padding: 1.2em 1.3em 1.3em;
  background: color-mix(in srgb, var(--c) 0%, transparent);
  font-family: system-ui, sans-serif;
  transition: background-color 0.4s ease;
}
.hfx-card-corner-brackets:hover { background: color-mix(in srgb, var(--c) 7%, transparent); }
.hfx-card-corner-brackets::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / 1.2em 2px no-repeat,
    linear-gradient(var(--c) 0 0) 0 0 / 2px 1.2em no-repeat,
    linear-gradient(var(--c) 0 0) 100% 0 / 1.2em 2px no-repeat,
    linear-gradient(var(--c) 0 0) 100% 0 / 2px 1.2em no-repeat,
    linear-gradient(var(--c) 0 0) 0 100% / 1.2em 2px no-repeat,
    linear-gradient(var(--c) 0 0) 0 100% / 2px 1.2em no-repeat,
    linear-gradient(var(--c) 0 0) 100% 100% / 1.2em 2px no-repeat,
    linear-gradient(var(--c) 0 0) 100% 100% / 2px 1.2em no-repeat;
  transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-card-corner-brackets:hover::before {
  background-size: 50.5% 2px, 2px 50.5%, 50.5% 2px, 2px 50.5%, 50.5% 2px, 2px 50.5%, 50.5% 2px, 2px 50.5%;
}
.hfx-card-corner-brackets-num {
  display: inline-block;
  font: 700 0.75em ui-monospace, monospace;
  color: var(--c);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-corner-brackets:hover .hfx-card-corner-brackets-num { transform: translateX(0.4em); }
.hfx-card-corner-brackets h3 {
  margin: 0.4em 0 0.3em;
  font-size: 1.05em;
  font-weight: 600;
}
.hfx-card-corner-brackets p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  opacity: 0.7;
}

.hfx-card-notification {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: 0.8em;
  box-sizing: border-box;
  width: 17em;
  padding: 0.8em 0.9em;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;}
.hfx-card-notification:is(:hover, :focus-within) {
  transform: translateX(0.35em);
  box-shadow: -0.35em 0.7em 1.2em -0.8em color-mix(in srgb, #000 35%, transparent);
}
.hfx-card-notification-bell {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
}
.hfx-card-notification-bell::after {
  content: "";
  position: absolute;
  top: 0.15em;
  right: 0.15em;
  width: 0.5em;
  height: 0.5em;
  border: 0.12em solid #fff;
  border-radius: 50%;
  background: var(--c);
}
.hfx-card-notification svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hfx-card-notification-bell svg { transform-origin: 50% 12%; }
.hfx-card-notification:is(:hover, :focus-within) .hfx-card-notification-bell svg {
  animation: hfx-card-notification-ring 0.9s ease-in-out both;
}
.hfx-card-notification-text {
  flex: 1;
  min-width: 0;
}
.hfx-card-notification h3 {
  margin: 0;
  font-size: 0.9em;
  font-weight: 600;
}
.hfx-card-notification p {
  margin: 0.1em 0 0;
  font-size: 0.76em;
  color: #6b7280;
}
.hfx-card-notification-side {
  display: grid;
  place-items: center;
}
.hfx-card-notification-side > * { grid-area: 1 / 1; }
.hfx-card-notification-time {
  font-size: 0.72em;
  color: #9ca3af;
  transition: opacity 0.2s ease, transform 0.3s ease;
}
.hfx-card-notification-close {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, #000 6%, transparent);
  color: #4b5563;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.5) rotate(-90deg);
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}
.hfx-card-notification-close svg {
  width: 0.9em;
  height: 0.9em;
}
.hfx-card-notification:is(:hover, :focus-within) .hfx-card-notification-time {
  opacity: 0;
  transform: scale(0.6);
}
.hfx-card-notification:is(:hover, :focus-within) .hfx-card-notification-close {
  opacity: 1;
  transform: none;
}
.hfx-card-notification-close:hover { background: color-mix(in srgb, #000 12%, transparent); }
@keyframes hfx-card-notification-ring {
  0%, 100% { transform: none; }
  12% { transform: rotate(22deg); }
  26% { transform: rotate(-18deg); }
  40% { transform: rotate(13deg); }
  54% { transform: rotate(-8deg); }
  68% { transform: rotate(4deg); }
  82% { transform: rotate(-1.5deg); }
}

.hfx-card-stat-sparkline {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
  width: 13em;
  padding: 1em 1.1em 0.9em;
  transition: box-shadow 0.35s ease;}
.hfx-card-stat-sparkline:hover { box-shadow: 0 0.8em 1.4em -0.9em color-mix(in srgb, #000 30%, transparent); }
.hfx-card-stat-sparkline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72em;
  color: #6b7280;
}
.hfx-card-stat-sparkline-delta {
  padding: 0.2em 0.55em;
  border-radius: 99em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  font-weight: 700;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hfx-card-stat-sparkline:hover .hfx-card-stat-sparkline-delta {
  background: var(--c);
  color: #fff;
}
.hfx-card-stat-sparkline strong {
  display: block;
  margin: 0.2em 0 0.35em;
  font-size: 1.75em;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111827;
  transform-origin: 0 50%;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.hfx-card-stat-sparkline:hover strong {
  color: var(--c);
  transform: scale(1.06);
}
.hfx-card-stat-sparkline-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.hfx-card-stat-sparkline-chart path:not(.hfx-card-stat-sparkline-area) {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hfx-card-stat-sparkline-base { stroke: color-mix(in srgb, #000 12%, transparent); }
.hfx-card-stat-sparkline-line {
  stroke: var(--c);
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-card-stat-sparkline:hover .hfx-card-stat-sparkline-line { stroke-dashoffset: 0; }
.hfx-card-stat-sparkline-area {
  fill: color-mix(in srgb, var(--c) 14%, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hfx-card-stat-sparkline:hover .hfx-card-stat-sparkline-area {
  opacity: 1;
  transition-delay: 0.5s;
}
.hfx-card-stat-sparkline-dot {
  fill: var(--c);
  stroke: #fff;
  stroke-width: 1.5;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.hfx-card-stat-sparkline:hover .hfx-card-stat-sparkline-dot {
  transform: scale(1);
  transition-delay: 0.8s;
}

.hfx-card-circle-fill {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 13em;
  padding: 1.2em 1.2em 1.1em;
  transition: color 0.35s ease;}
.hfx-card-circle-fill::before {
  content: "";
  position: absolute;
  top: 1.2em;
  left: 1.2em;
  z-index: -1;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #fff), color-mix(in srgb, var(--c) 80%, #000));
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-card-circle-fill:hover { color: #fff; }
.hfx-card-circle-fill:hover::before { transform: scale(11); }
.hfx-card-circle-fill-icon {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  margin-bottom: 0.8em;
  border-radius: 50%;
  color: #fff;
  transition: box-shadow 0.4s ease 0.2s;
}
.hfx-card-circle-fill:hover .hfx-card-circle-fill-icon { box-shadow: inset 0 0 0 0.12em color-mix(in srgb, #fff 55%, transparent); }
.hfx-card-circle-fill-icon svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hfx-card-circle-fill h3 {
  margin: 0 0 0.25em;
  font-size: 1em;
  font-weight: 600;
}
.hfx-card-circle-fill p {
  margin: 0;
  font-size: 0.8em;
  line-height: 1.45;
  color: #6b7280;
  transition: color 0.35s ease;
}
.hfx-card-circle-fill:hover p { color: color-mix(in srgb, #fff 85%, transparent); }
.hfx-card-circle-fill-more {
  display: inline-block;
  margin-top: 0.8em;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--c);
  transition: color 0.35s ease;
}
.hfx-card-circle-fill-more::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.3em;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-circle-fill:hover .hfx-card-circle-fill-more { color: #fff; }
.hfx-card-circle-fill:hover .hfx-card-circle-fill-more::after { transform: translateX(0.3em); }

.hfx-card-ticket-stub {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  color: #1f2937;
  font-family: system-ui, sans-serif;
  filter: drop-shadow(0 0.25em 0.35em color-mix(in srgb, #000 18%, transparent));
}
.hfx-card-ticket-stub > div {
  --hfx-card-ticket-stub-notch: radial-gradient(circle 0.6em at var(--hfx-card-ticket-stub-side) 0, #0000 97%, #000) top / 100% 51% no-repeat,
    radial-gradient(circle 0.6em at var(--hfx-card-ticket-stub-side) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
  -webkit-mask: var(--hfx-card-ticket-stub-notch);
  mask: var(--hfx-card-ticket-stub-notch);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-ticket-stub-main {
  --hfx-card-ticket-stub-side: 100%;
  box-sizing: border-box;
  width: 12em;
  padding: 0.95em 1.1em 1em;
  border-radius: 0.7em 0 0 0.7em;
  background: #fff;
  transform-origin: 100% 100%;
}
.hfx-card-ticket-stub-stub {
  --hfx-card-ticket-stub-side: 0%;
  display: grid;
  place-items: center;
  width: 3.6em;
  border-left: 2px dashed color-mix(in srgb, #fff 60%, transparent);
  border-radius: 0 0.7em 0.7em 0;
  background: var(--c);
  color: #fff;
  transform-origin: 0 100%;
}
.hfx-card-ticket-stub:hover .hfx-card-ticket-stub-main { transform: rotate(-1.5deg); }
.hfx-card-ticket-stub:hover .hfx-card-ticket-stub-stub { transform: translateX(0.3em) rotate(9deg); }
.hfx-card-ticket-stub-main span {
  font-size: 0.7em;
  font-weight: 600;
  color: var(--c);
}
.hfx-card-ticket-stub h3 {
  margin: 0.3em 0 0.35em;
  font-size: 1.05em;
  font-weight: 700;
}
.hfx-card-ticket-stub p {
  margin: 0;
  font-size: 0.75em;
  color: #6b7280;
}
.hfx-card-ticket-stub strong {
  font-size: 0.62em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.hfx-card-music-play {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: 0.85em;
  box-sizing: border-box;
  width: 16em;
  padding: 0.65em 1em 0.65em 0.65em;
  transition: background-color 0.3s ease, box-shadow 0.35s ease;}
.hfx-card-music-play:is(:hover, :focus-within) {
  background: color-mix(in srgb, var(--c) 6%, #fff);
  box-shadow: 0 0.8em 1.3em -0.9em color-mix(in srgb, #000 30%, transparent);
}
.hfx-card-music-play-art {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 4em;
  height: 4em;
  overflow: hidden;
  border-radius: 0.55em;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 6%, transparent 7%),
    repeating-radial-gradient(circle at 50% 50%, color-mix(in srgb, #000 0%, transparent) 0 0.18em, color-mix(in srgb, #000 18%, transparent) 0.2em 0.22em),
    conic-gradient(from 210deg, var(--c), color-mix(in oklch, var(--c), #ec4899 60%), color-mix(in oklch, var(--c), #fde047 45%), var(--c));
}
.hfx-card-music-play-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, #000 40%, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hfx-card-music-play:is(:hover, :focus-within) .hfx-card-music-play-art::after { opacity: 1; }
.hfx-card-music-play-btn {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.2em 0.6em color-mix(in srgb, #000 30%, transparent);
  color: var(--c);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-music-play:is(:hover, :focus-within) .hfx-card-music-play-btn {
  opacity: 1;
  transform: none;
}
.hfx-card-music-play-btn svg {
  width: 1em;
  height: 1em;
  margin-left: 0.1em;
  fill: currentColor;
}
.hfx-card-music-play-info {
  flex: 1;
  min-width: 0;
}
.hfx-card-music-play h3 {
  margin: 0;
  font-size: 0.95em;
  font-weight: 600;
  transition: color 0.3s ease;
}
.hfx-card-music-play:is(:hover, :focus-within) h3 { color: var(--c); }
.hfx-card-music-play p {
  margin: 0.15em 0 0;
  font-size: 0.78em;
  color: #6b7280;
}
.hfx-card-music-play-eq {
  display: flex;
  align-items: flex-end;
  gap: 0.16em;
  height: 1.1em;
}
.hfx-card-music-play-eq i {
  width: 0.22em;
  height: 100%;
  border-radius: 0.1em;
  background: color-mix(in srgb, var(--c) 30%, transparent);
  transform-origin: 50% 100%;
  transform: scaleY(var(--h));
  transition: background-color 0.3s ease;
}
.hfx-card-music-play:is(:hover, :focus-within) .hfx-card-music-play-eq i {
  background: var(--c);
  animation: hfx-card-music-play-eq calc(0.55s + var(--i) * 0.12s) ease-in-out calc(var(--i) * -0.2s) infinite alternate;
}
@keyframes hfx-card-music-play-eq {
  from { transform: scaleY(0.2); }
  to { transform: scaleY(1); }
}

.hfx-card-job-apply {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8em;
  box-sizing: border-box;
  width: 20em;
  padding: 0.85em 1em;
  transition: border-color 0.3s ease, box-shadow 0.35s ease;}
.hfx-card-job-apply:is(:hover, :focus-within) {
  border-color: color-mix(in srgb, var(--c) 35%, transparent);
  box-shadow: 0 0.8em 1.3em -0.9em color-mix(in srgb, var(--c) 60%, transparent);
}
.hfx-card-job-apply::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.2em;
  background: var(--c);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-card-job-apply:is(:hover, :focus-within)::before { transform: scaleY(1); }
.hfx-card-job-apply-logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 0.6em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  color: #fff;
  font-weight: 800;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-job-apply:is(:hover, :focus-within) .hfx-card-job-apply-logo { transform: rotate(-10deg) scale(1.06); }
.hfx-card-job-apply-info {
  flex: 1;
  min-width: 0;
}
.hfx-card-job-apply h3 {
  margin: 0;
  overflow: hidden;
  font-size: 0.88em;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hfx-card-job-apply p {
  margin: 0.15em 0 0;
  font-size: 0.74em;
  color: #6b7280;
}
.hfx-card-job-apply-side {
  display: grid;
  place-items: center end;
}
.hfx-card-job-apply-side > * { grid-area: 1 / 1; }
.hfx-card-job-apply-pay {
  font-size: 0.82em;
  font-weight: 700;
  color: #111827;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hfx-card-job-apply-btn {
  padding: 0.5em 0.95em;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  text-decoration: none;
  opacity: 0;
  transform: translateX(1.5em);
  transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-job-apply:is(:hover, :focus-within) .hfx-card-job-apply-pay {
  opacity: 0;
  transform: translateX(-1em);
}
.hfx-card-job-apply:is(:hover, :focus-within) .hfx-card-job-apply-btn {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s;
}

.hfx-card-dashed-upload {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.3em;
  box-sizing: border-box;
  width: 15em;
  padding: 1.3em 1em 1.4em;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--c) 3%, transparent);
  font-family: system-ui, sans-serif;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.hfx-card-dashed-upload:hover { background: color-mix(in srgb, var(--c) 10%, transparent); }
.hfx-card-dashed-upload-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hfx-card-dashed-upload-frame rect {
  rx: 0.8em;
  fill: none;
  stroke: color-mix(in srgb, var(--c) 50%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 1.5 1;
  transition: stroke 0.3s ease;
}
.hfx-card-dashed-upload:hover .hfx-card-dashed-upload-frame rect {
  stroke: var(--c);
  animation: hfx-card-dashed-upload-march 1s linear infinite;
}
.hfx-card-dashed-upload-icon {
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  margin-bottom: 0.35em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hfx-card-dashed-upload:hover .hfx-card-dashed-upload-icon {
  background: var(--c);
  color: #fff;
}
.hfx-card-dashed-upload-icon svg {
  width: 1.25em;
  height: 1.25em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hfx-card-dashed-upload:hover .hfx-card-dashed-upload-arrow {
  animation: hfx-card-dashed-upload-bob 0.6s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.hfx-card-dashed-upload strong {
  font-size: 0.9em;
  font-weight: 600;
}
.hfx-card-dashed-upload-hint {
  font-size: 0.75em;
  opacity: 0.65;
}
.hfx-card-dashed-upload u {
  color: var(--c);
  font-weight: 600;
  text-underline-offset: 0.2em;
}
@keyframes hfx-card-dashed-upload-march {
  to { stroke-dashoffset: -2.5; }
}
@keyframes hfx-card-dashed-upload-bob {
  from { transform: translateY(0.1em); }
  to { transform: translateY(-0.2em); }
}

.hfx-card-wallet-peek {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 12em;
  height: 9.6em;
  font-family: system-ui, sans-serif;
}
.hfx-card-wallet-peek-card {
  position: absolute;
  top: 2.6em;
  left: 0.9em;
  right: 0.9em;
  box-sizing: border-box;
  height: 5.6em;
  padding: 0.55em 0.7em;
  border-radius: 0.55em;
  box-shadow: 0 -0.2em 0.5em color-mix(in srgb, #000 18%, transparent);
  color: #fff;
  transform: translateY(calc(var(--i) * 0.5em));
  transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
  transition-delay: calc((2 - var(--i)) * 40ms);
}
.hfx-card-wallet-peek-card:nth-child(1) { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #1f2937), #111827); }
.hfx-card-wallet-peek-card:nth-child(2) { background: linear-gradient(135deg, color-mix(in oklch, var(--c), #ec4899 55%), color-mix(in oklch, var(--c), #f97316 45%)); }
.hfx-card-wallet-peek-card:nth-child(3) { background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); }
.hfx-card-wallet-peek-card::after {
  content: "";
  position: absolute;
  top: 0.55em;
  right: 0.7em;
  width: 1.3em;
  height: 0.95em;
  border-radius: 0.2em;
  background: linear-gradient(135deg, #fde68a, #d97706);
}
.hfx-card-wallet-peek-card span {
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hfx-card-wallet-peek:hover .hfx-card-wallet-peek-card {
  transform: translateY(calc(-2.3em + var(--i) * 0.75em)) rotate(calc((var(--i) - 1) * -3deg));
  transition-delay: calc(var(--i) * 50ms);
}
.hfx-card-wallet-peek-pocket {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  height: 5.4em;
  padding: 0.8em 1em;
  border-radius: 0.5em 0.5em 0.9em 0.9em;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--c) 18%, #3f3f46), color-mix(in srgb, var(--c) 12%, #27272a));
  box-shadow: 0 -0.15em 0.4em color-mix(in srgb, #000 25%, transparent), 0 0.5em 1em -0.5em color-mix(in srgb, #000 40%, transparent);
  color: #fff;
}
.hfx-card-wallet-peek-pocket::before {
  content: "";
  position: absolute;
  inset: 0.35em;
  border: 1px dashed color-mix(in srgb, #fff 25%, transparent);
  border-radius: 0.3em 0.3em 0.65em 0.65em;
}
.hfx-card-wallet-peek-pocket strong {
  font-size: 0.85em;
  font-weight: 700;
}
.hfx-card-wallet-peek-pocket span {
  font-size: 0.7em;
  opacity: 0.65;
}

.hfx-card-team-avatars {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  color: #1f2937;
  font-family: system-ui, sans-serif;
  box-sizing: border-box;
  width: 14em;
  padding: 1em 1.1em 1.1em;
  transition: box-shadow 0.35s ease;}
.hfx-card-team-avatars:hover { box-shadow: 0 0.8em 1.3em -0.9em color-mix(in srgb, #000 30%, transparent); }
.hfx-card-team-avatars h3 {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
}
.hfx-card-team-avatars p {
  margin: 0.15em 0 0;
  font-size: 0.78em;
  color: #6b7280;
}
.hfx-card-team-avatars-row {
  display: flex;
  margin-top: 0.85em;
  padding-left: 0.2em;
}
.hfx-card-team-avatars-row span {
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  margin-right: -1em;
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
  box-shadow: 0 0 0 0.25em #fff;
  color: #fff;
  font-size: 0.68em;
  font-weight: 700;
  filter: hue-rotate(calc(var(--i) * 40deg));
  transition: translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-card-team-avatars:hover .hfx-card-team-avatars-row span {
  translate: calc(var(--i) * 0.85em) 0;
  animation: hfx-card-team-avatars-hop 0.45s calc(0.15s + var(--i) * 60ms) cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
.hfx-card-team-avatars-row .hfx-card-team-avatars-more {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  filter: none;
  transition: translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, color 0.3s ease;
}
.hfx-card-team-avatars:hover .hfx-card-team-avatars-row .hfx-card-team-avatars-more {
  background: var(--c);
  color: #fff;
}
@keyframes hfx-card-team-avatars-hop {
  0%, 100% { transform: none; }
  45% { transform: translateY(-0.45em); }
}

.hfx-image-parallax-layers {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
}
.hfx-image-parallax-layers span {
  position: absolute;
  inset: -0.6em -2.4em -0.6em -0.6em;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-parallax-layers-sky {
  background:
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
}
.hfx-image-parallax-layers-ridge {
  background:
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg);
}
.hfx-image-parallax-layers-hills {
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent);
}
.hfx-image-parallax-layers:hover .hfx-image-parallax-layers-sky {
  transform: translate(-0.3em, 0.1em);
}
.hfx-image-parallax-layers:hover .hfx-image-parallax-layers-ridge {
  transform: translate(-1em, 0.15em) scale(1.02);
}
.hfx-image-parallax-layers:hover .hfx-image-parallax-layers-hills {
  transform: translate(-2.4em, -0.3em) scale(1.07);
}

.hfx-image-accordion-gallery {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  gap: 0.35em;
  width: 22em;
  height: 9.5em;
  font-family: system-ui, sans-serif;
}
.hfx-image-accordion-gallery-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 0.6em;
  overflow: hidden;
  background-size: 16em 100%;
  background-position: 50% 0;
  color: #fff;
  text-decoration: none;
  transition: flex-grow 0.55s cubic-bezier(0.25, 1, 0.5, 1);
}
.hfx-image-accordion-gallery-panel:nth-child(1) {
  background-image:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
}
.hfx-image-accordion-gallery-panel:nth-child(2) {
  background-image:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
}
.hfx-image-accordion-gallery-panel:nth-child(3) {
  background-image:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
}
.hfx-image-accordion-gallery-panel:nth-child(4) {
  background-image:
    radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
    radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
    conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
    conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
    linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
}
.hfx-image-accordion-gallery-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 50%, rgb(2 6 23 / 0.6));
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hfx-image-accordion-gallery-panel span {
  position: absolute;
  z-index: 1;
  left: 0.8em;
  bottom: 0.7em;
  font-weight: 600;
  font-size: 0.9em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-accordion-gallery-panel:is(:hover, :focus-visible) {
  flex-grow: 4;
}
.hfx-image-accordion-gallery-panel:is(:hover, :focus-visible)::after {
  opacity: 1;
}
.hfx-image-accordion-gallery-panel:is(:hover, :focus-visible) span {
  opacity: 1;
  transform: none;
  transition-delay: 0.15s;
}

.hfx-image-split-reveal {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 9.5em;
  margin: 0;
  border-radius: 0.75em;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 30%, #0f172a);
  color: #fff;
  font-family: system-ui, sans-serif;
  text-align: center;
}
.hfx-image-split-reveal figcaption {
  display: grid;
  padding: 0;
  color: inherit;
  font: inherit;
  gap: 0.2em;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-image-split-reveal strong {
  font-size: 1.2em;
}
.hfx-image-split-reveal span {
  font-size: 0.8em;
  opacity: 0.75;
}
.hfx-image-split-reveal-half {
  position: absolute;
  inset: 0 50% 0 0;
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
  background-size: 200% 100%;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-image-split-reveal-half + .hfx-image-split-reveal-half {
  inset: 0 0 0 50%;
  background-position: 100% 0;
}
.hfx-image-split-reveal:hover .hfx-image-split-reveal-half {
  transform: translateX(-76%);
}
.hfx-image-split-reveal:hover .hfx-image-split-reveal-half + .hfx-image-split-reveal-half {
  transform: translateX(76%);
}
.hfx-image-split-reveal:hover figcaption {
  opacity: 1;
  transform: none;
  transition-delay: 0.18s;
}

.hfx-image-shutter-blinds {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 9.5em;
  margin: 0;
  border-radius: 0.75em;
  overflow: hidden;
  background:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
  color: #fff;
  font-family: system-ui, sans-serif;
}
.hfx-image-shutter-blinds-slat {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--i) * 20%);
  height: calc(20% + 1px);
  background: color-mix(in srgb, var(--c) 82%, #0f172a);
  opacity: 0.94;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i) * 0.05s);
}
.hfx-image-shutter-blinds-slat:nth-child(even) {
  transform-origin: 100% 50%;
}
.hfx-image-shutter-blinds figcaption {
  position: relative;
  padding: 0;
  color: inherit;
  font-family: inherit;
  display: grid;
  gap: 0.25em;
  text-align: center;
  font-weight: 700;
  font-size: 1.1em;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hfx-image-shutter-blinds small {
  font-weight: 500;
  font-size: 0.7em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hfx-image-shutter-blinds:hover .hfx-image-shutter-blinds-slat {
  transform: scaleX(1);
}
.hfx-image-shutter-blinds:hover figcaption {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease 0.4s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}

.hfx-image-circle-reveal {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: block;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
  background:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
  color: #fff;
  font-family: system-ui, sans-serif;
  text-decoration: none;
}
.hfx-image-circle-reveal-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.35em;
  text-align: center;
  background: color-mix(in srgb, var(--c) 86%, transparent);
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-image-circle-reveal strong {
  font-size: 1.25em;
  transform: translateY(0.4em);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-circle-reveal em {
  justify-self: center;
  padding: 0.3em 0.8em;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 99em;
  font-size: 0.75em;
  font-style: normal;
  letter-spacing: 0.06em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hfx-image-circle-reveal:is(:hover, :focus-visible) .hfx-image-circle-reveal-overlay {
  clip-path: circle(75% at 50% 50%);
}
.hfx-image-circle-reveal:is(:hover, :focus-visible) strong {
  transform: none;
}
.hfx-image-circle-reveal:is(:hover, :focus-visible) em {
  opacity: 1;
  transition-delay: 0.25s;
}

.hfx-image-frame-draw {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 9.5em;
  margin: 0;
  border-radius: 0.75em;
  overflow: hidden;
  color: #fff;
  font-family: system-ui, sans-serif;
}
.hfx-image-frame-draw-photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
  transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-frame-draw::before,
.hfx-image-frame-draw::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0.8em;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-image-frame-draw::before {
  border-top: 0.125em solid #fff;
  border-bottom: 0.125em solid #fff;
  transform: scaleX(0);
}
.hfx-image-frame-draw::after {
  border-left: 0.125em solid #fff;
  border-right: 0.125em solid #fff;
  transform: scaleY(0);
}
.hfx-image-frame-draw figcaption {
  position: relative;
  padding: 0;
  color: inherit;
  font-family: inherit;
  z-index: 1;
  display: grid;
  text-align: center;
  font-size: 0.75em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hfx-image-frame-draw b {
  font-size: 2em;
  letter-spacing: 0.04em;
  text-transform: none;
}
.hfx-image-frame-draw:hover .hfx-image-frame-draw-photo {
  filter: brightness(0.62) saturate(1.2);
  transform: scale(1.05);
}
.hfx-image-frame-draw:hover::before {
  transform: scaleX(1);
}
.hfx-image-frame-draw:hover::after {
  transform: scaleY(1);
  transition-delay: 0.2s;
}
.hfx-image-frame-draw:hover figcaption {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease 0.3s, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.hfx-image-polaroid {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 10.5em;
  margin: 0;
  padding: 0.6em 0.6em 0;
  border-radius: 0.2em;
  background: #fff;
  box-shadow: 0 0.2em 0.5em rgb(15 23 42 / 0.18), 0 0 0 1px rgb(15 23 42 / 0.06);
  transform: rotate(-5deg);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
.hfx-image-polaroid-photo {
  height: 7em;
  background:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
  filter: sepia(0.35) saturate(0.85) brightness(1.05);
  transition: filter 0.45s ease;
}
.hfx-image-polaroid figcaption {
  padding: 0.5em 0 0.65em;
  color: #334155;
  font: italic 0.9em/1.2 "Bradley Hand", "Segoe Print", "Marker Felt", cursive;
  text-align: center;
}
.hfx-image-polaroid:hover {
  transform: translateY(-0.3em) rotate(2deg) scale(1.05);
  box-shadow: 0 1em 1.4em -0.5em rgb(15 23 42 / 0.4), 0 0 0 1px rgb(15 23 42 / 0.06);
}
.hfx-image-polaroid:hover .hfx-image-polaroid-photo {
  filter: none;
}

.hfx-image-ken-burns {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 15em;
  height: 9.5em;
  margin: 0;
  border-radius: 0.75em;
  overflow: hidden;
}
.hfx-image-ken-burns-photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
  transform-origin: 70% 40%;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.hfx-image-ken-burns::before,
.hfx-image-ken-burns::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: 0.9em;
  background: #05060f;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-ken-burns::before {
  top: 0;
  transform: translateY(-100%);
}
.hfx-image-ken-burns::after {
  bottom: 0;
  transform: translateY(100%);
}
.hfx-image-ken-burns:hover .hfx-image-ken-burns-photo {
  transform: scale(1.3) translate(-4%, 2%);
  transition: transform 8s cubic-bezier(0.2, 0, 0.3, 1);
}
.hfx-image-ken-burns:hover::before,
.hfx-image-ken-burns:hover::after {
  transform: none;
}

.hfx-image-duotone {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  isolation: isolate;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
}
.hfx-image-duotone-photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
  filter: grayscale(1) contrast(1.25);
  transition: filter 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-duotone::before,
.hfx-image-duotone::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  transition: opacity 0.5s ease;
}
.hfx-image-duotone::before {
  background: color-mix(in srgb, var(--c) 75%, #fff);
  mix-blend-mode: multiply;
}
.hfx-image-duotone::after {
  background: color-mix(in srgb, var(--c) 20%, #4a0d3a);
  mix-blend-mode: lighten;
}
.hfx-image-duotone:hover .hfx-image-duotone-photo {
  filter: none;
  transform: scale(1.04);
}
.hfx-image-duotone:hover::before,
.hfx-image-duotone:hover::after {
  opacity: 0;
}

.hfx-image-blur-focus {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 15em;
  height: 9.5em;
  margin: 0;
  border-radius: 0.75em;
  overflow: hidden;
}
.hfx-image-blur-focus-photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
  filter: blur(0.3em) saturate(0.8);
  transform: scale(1.1);
  transition: filter 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-blur-focus-af {
  --arm: 0.7em;
  --line: 0.14em;
  position: absolute;
  inset: 0;
  width: 4.4em;
  height: 2.8em;
  margin: auto;
  background:
    linear-gradient(#fff 0 0) 0 0 / var(--arm) var(--line),
    linear-gradient(#fff 0 0) 0 0 / var(--line) var(--arm),
    linear-gradient(#fff 0 0) 100% 0 / var(--arm) var(--line),
    linear-gradient(#fff 0 0) 100% 0 / var(--line) var(--arm),
    linear-gradient(#fff 0 0) 0 100% / var(--arm) var(--line),
    linear-gradient(#fff 0 0) 0 100% / var(--line) var(--arm),
    linear-gradient(#fff 0 0) 100% 100% / var(--arm) var(--line),
    linear-gradient(#fff 0 0) 100% 100% / var(--line) var(--arm);
  background-repeat: no-repeat;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.hfx-image-blur-focus:hover .hfx-image-blur-focus-photo {
  filter: none;
  transform: none;
}
.hfx-image-blur-focus:hover .hfx-image-blur-focus-af {
  transform: scale(0.75);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease 0.35s;
}

.hfx-image-zoom-rotate {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
}
.hfx-image-zoom-rotate-photo {
  height: 100%;
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-zoom-rotate:hover .hfx-image-zoom-rotate-photo {
  transform: scale(1.25) rotate(-6deg);
}

.hfx-image-caption-push {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: block;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
  color: #fff;
  font-family: system-ui, sans-serif;
  text-decoration: none;
}
.hfx-image-caption-push-photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
    radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
    conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
    conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
    linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-caption-push::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(transparent 30%, rgb(2 6 23 / 0.85));
  opacity: 0.75;
  transition: opacity 0.4s ease;
}
.hfx-image-caption-push-caption {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 0.35em;
  padding: 0 1em 0.9em;
  transform: translateY(1.35em);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-caption-push-caption::before {
  content: "";
  width: 1.6em;
  height: 0.18em;
  border-radius: 1em;
  background: var(--c);
  transform-origin: 0 50%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-caption-push strong {
  font-size: 1.05em;
  line-height: 1.2;
}
.hfx-image-caption-push small {
  font-size: 0.75em;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hfx-image-caption-push:is(:hover, :focus-visible) .hfx-image-caption-push-photo {
  transform: scale(1.06);
}
.hfx-image-caption-push:is(:hover, :focus-visible)::after {
  opacity: 1;
}
.hfx-image-caption-push:is(:hover, :focus-visible) .hfx-image-caption-push-caption {
  transform: none;
}
.hfx-image-caption-push:is(:hover, :focus-visible) .hfx-image-caption-push-caption::before {
  transform: scaleX(2);
}
.hfx-image-caption-push:is(:hover, :focus-visible) small {
  opacity: 0.8;
  transition-delay: 0.12s;
}

.hfx-image-overlay-icon {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
}
.hfx-image-overlay-icon-photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-overlay-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--c) 55%, transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hfx-image-overlay-icon-button {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  background: #fff;
  color: var(--c);
  box-shadow: 0 0.4em 1em rgb(2 6 23 / 0.3);
  opacity: 0;
  transform: scale(0.4) rotate(-90deg);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-image-overlay-icon svg {
  width: 1.35em;
  height: 1.35em;
}
.hfx-image-overlay-icon:is(:hover, :focus-visible) .hfx-image-overlay-icon-photo {
  transform: scale(1.05);
}
.hfx-image-overlay-icon:is(:hover, :focus-visible)::after {
  opacity: 1;
}
.hfx-image-overlay-icon:is(:hover, :focus-visible) .hfx-image-overlay-icon-button {
  opacity: 1;
  transform: none;
}

.hfx-image-reflection {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  gap: 0.2em;
  width: 12em;
  margin: 0;
}
.hfx-image-reflection-photo,
.hfx-image-reflection-mirror {
  border-radius: 0.6em;
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
  background-size: 12em 7.5em;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.hfx-image-reflection-photo {
  height: 7.5em;
}
.hfx-image-reflection-mirror {
  height: 3.6em;
  background-position: 0 100%;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.15) 60%, transparent);
  mask-image: linear-gradient(to top, rgb(0 0 0 / 0.55), rgb(0 0 0 / 0.15) 60%, transparent);
}
.hfx-image-reflection:hover .hfx-image-reflection-photo {
  transform: translateY(-0.45em);
}
.hfx-image-reflection:hover .hfx-image-reflection-mirror {
  transform: translateY(0.45em) scaleY(-1);
  opacity: 0.6;
}

.hfx-image-diagonal-wipe {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: block;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
  background:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
  color: #fff;
  font-family: system-ui, sans-serif;
  text-decoration: none;
}
.hfx-image-diagonal-wipe::before,
.hfx-image-diagonal-wipe-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 76% 100%, 0 100%);
  transform: translateX(-101%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-image-diagonal-wipe::before {
  content: "";
  right: 30%;
  background: color-mix(in srgb, var(--c) 40%, #fff);
}
.hfx-image-diagonal-wipe-panel {
  right: 38%;
  display: grid;
  align-content: center;
  gap: 0.3em;
  padding: 0 2.4em 0 1em;
  background: color-mix(in srgb, var(--c) 88%, #0f172a);
  transition-delay: 0.06s;
}
.hfx-image-diagonal-wipe small {
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hfx-image-diagonal-wipe strong {
  font-size: 1.1em;
  line-height: 1.15;
}
.hfx-image-diagonal-wipe-panel > * {
  opacity: 0;
  transform: translateX(-0.6em);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-diagonal-wipe:is(:hover, :focus-visible)::before,
.hfx-image-diagonal-wipe:is(:hover, :focus-visible) .hfx-image-diagonal-wipe-panel {
  transform: none;
}
.hfx-image-diagonal-wipe:is(:hover, :focus-visible) .hfx-image-diagonal-wipe-panel > * {
  opacity: 1;
  transform: none;
  transition-delay: 0.3s;
}

.hfx-image-spotlight {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
  background:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
}
.hfx-image-spotlight::after {
  content: "";
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle at 50% 50%, transparent 2.4em, rgb(2 6 23 / 0.86) 4.8em);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-spotlight:hover::after {
  transform: scale(4.5);
}

.hfx-image-stack-fan {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 10em;
  height: 7.2em;
}
.hfx-image-stack-fan-photo {
  position: absolute;
  inset: 0;
  border: 0.3em solid #fff;
  border-radius: 0.4em;
  box-shadow: 0 0.25em 0.6em rgb(15 23 42 / 0.22), 0 0 0 1px rgb(15 23 42 / 0.08);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.hfx-image-stack-fan-photo:nth-child(1) {
  background:
    radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
    radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
    conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
    conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
    linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
  transform: rotate(-7deg);
}
.hfx-image-stack-fan-photo:nth-child(2) {
  background:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
  transform: rotate(5deg);
}
.hfx-image-stack-fan-photo:nth-child(3) {
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
}
.hfx-image-stack-fan:hover .hfx-image-stack-fan-photo:nth-child(1) {
  transform: translate(-4.2em, 0.3em) rotate(-12deg);
}
.hfx-image-stack-fan:hover .hfx-image-stack-fan-photo:nth-child(2) {
  transform: translate(4.2em, 0.3em) rotate(12deg);
  transition-delay: 0.04s;
}
.hfx-image-stack-fan:hover .hfx-image-stack-fan-photo:nth-child(3) {
  transform: translateY(-0.4em) scale(1.04);
}

.hfx-image-page-curl {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: block;
  width: 15em;
  height: 9.5em;
}
.hfx-image-page-curl::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 0.75em;
  background:
    radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
    radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
    conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
    conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
    linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
}
.hfx-image-page-curl-photo {
  position: absolute;
  inset: 0;
  border-radius: 0.75em;
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1em), calc(100% - 1em) 100%, 0 100%);
  transition: clip-path 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-page-curl::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 4em;
  height: 4em;
  background: linear-gradient(135deg, #f8fafc 10%, #e2e8f0 34%, #94a3b8 49.5%, transparent 50%);
  filter: drop-shadow(-0.15em -0.15em 0.25em rgb(2 6 23 / 0.35));
  transform: scale(0.25);
  transform-origin: 100% 100%;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-page-curl:is(:hover, :focus-visible) .hfx-image-page-curl-photo {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4em), calc(100% - 4em) 100%, 0 100%);
}
.hfx-image-page-curl:is(:hover, :focus-visible)::after {
  transform: none;
}

.hfx-image-slide-aside {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08);
  color: #1f2937;
  font-family: system-ui, sans-serif;
}
.hfx-image-slide-aside-text {
  display: grid;
  align-content: center;
  gap: 0.4em;
  width: 7.4em;
  height: 100%;
  padding: 0 0.9em;
  box-sizing: border-box;
}
.hfx-image-slide-aside-text > * {
  opacity: 0;
  transform: translateX(-0.8em);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hfx-image-slide-aside strong {
  font-size: 1.05em;
}
.hfx-image-slide-aside p {
  margin: 0;
  color: #6b7280;
  font-size: 0.75em;
  line-height: 1.4;
}
.hfx-image-slide-aside span {
  color: var(--c);
  font-size: 0.75em;
  font-weight: 600;
}
.hfx-image-slide-aside-photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
  box-shadow: -0.5em 0 1.2em rgb(15 23 42 / 0.25);
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-image-slide-aside:hover .hfx-image-slide-aside-photo {
  transform: translateX(52%);
}
.hfx-image-slide-aside:hover .hfx-image-slide-aside-text > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease 0.2s, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}
.hfx-image-slide-aside:hover .hfx-image-slide-aside-text > :nth-child(2) {
  transition-delay: 0.27s;
}
.hfx-image-slide-aside:hover .hfx-image-slide-aside-text > :nth-child(3) {
  transition-delay: 0.34s;
}

.hfx-image-gallery-focus {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  gap: 0.5em;
}
.hfx-image-gallery-focus-item {
  width: 5em;
  height: 8em;
  border-radius: 0.6em;
  background-size: 13em 100%;
  background-position: 50% 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease, filter 0.4s ease, box-shadow 0.4s ease;
}
.hfx-image-gallery-focus-item:nth-child(1) {
  background-image:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
}
.hfx-image-gallery-focus-item:nth-child(2) {
  background-image:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
}
.hfx-image-gallery-focus-item:nth-child(3) {
  background-image:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
}
.hfx-image-gallery-focus-item:nth-child(4) {
  background-image:
    radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
    radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
    conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
    conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
    linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
}
.hfx-image-gallery-focus:has(.hfx-image-gallery-focus-item:is(:hover, :focus-visible)) .hfx-image-gallery-focus-item:not(:is(:hover, :focus-visible)) {
  opacity: 0.45;
  filter: grayscale(0.8);
  transform: scale(0.94);
}
.hfx-image-gallery-focus-item:is(:hover, :focus-visible) {
  transform: scale(1.08);
  box-shadow: 0 0.6em 1.2em -0.4em rgb(15 23 42 / 0.45);
}

.hfx-image-circle-morph {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 8.5em;
  height: 8.5em;
}
.hfx-image-circle-morph-frame {
  height: 100%;
  border-radius: 1em;
  overflow: hidden;
  transition: border-radius 0.6s cubic-bezier(0.65, 0, 0.35, 1), transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-image-circle-morph-photo {
  height: 100%;
  background:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-image-circle-morph:hover .hfx-image-circle-morph-frame {
  border-radius: 50%;
  transform: rotate(45deg);
}
.hfx-image-circle-morph:hover .hfx-image-circle-morph-photo {
  transform: rotate(-45deg) scale(1.25);
}

.hfx-image-corner-brackets {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 15em;
  height: 9.5em;
  margin: 0;
  border-radius: 0.75em;
  overflow: hidden;
  color: #fff;
  font-family: system-ui, sans-serif;
}
.hfx-image-corner-brackets-photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
    radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
    conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
    conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
    linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
  transition: filter 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-corner-brackets-corner {
  --x: 1;
  --y: 1;
  position: absolute;
  top: 0.7em;
  left: 0.7em;
  width: 1.1em;
  height: 1.1em;
  border: 0 solid #fff;
  border-width: 0.14em 0 0 0.14em;
  opacity: 0.85;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
}
.hfx-image-corner-brackets-corner:nth-of-type(2) {
  --x: -1;
  left: auto;
  right: 0.7em;
  border-width: 0.14em 0.14em 0 0;
}
.hfx-image-corner-brackets-corner:nth-of-type(3) {
  --y: -1;
  top: auto;
  bottom: 0.7em;
  border-width: 0 0 0.14em 0.14em;
}
.hfx-image-corner-brackets-corner:nth-of-type(4) {
  --x: -1;
  --y: -1;
  inset: auto 0.7em 0.7em auto;
  border-width: 0 0.14em 0.14em 0;
}
.hfx-image-corner-brackets figcaption {
  position: relative;
  display: grid;
  gap: 0.3em;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: 1.15em;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.25s ease, transform 0.3s ease;
}
.hfx-image-corner-brackets small {
  font-size: 0.55em;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hfx-image-corner-brackets:hover .hfx-image-corner-brackets-photo {
  filter: brightness(0.6);
  transform: scale(1.04);
}
.hfx-image-corner-brackets:hover .hfx-image-corner-brackets-corner {
  opacity: 1;
  transform: translate(calc(var(--x) * 2.2em), calc(var(--y) * 1.95em));
}
.hfx-image-corner-brackets:hover figcaption {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease 0.25s, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}

.hfx-image-outline-ring {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: block;
  width: 14em;
  height: 8.75em;
  border-radius: 0.75em;
  overflow: hidden;
  outline: 0.15em solid transparent;
  outline-offset: 0;
  transition: outline-offset 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), outline-color 0.25s ease;
}
.hfx-image-outline-ring-photo {
  display: block;
  height: 100%;
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-outline-ring:is(:hover, :focus-visible) {
  outline-color: var(--c);
  outline-offset: 0.35em;
}
.hfx-image-outline-ring:is(:hover, :focus-visible) .hfx-image-outline-ring-photo {
  transform: scale(1.06);
}

.hfx-image-ambient-glow {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  isolation: isolate;
  width: 13em;
  height: 8em;
}
.hfx-image-ambient-glow::before,
.hfx-image-ambient-glow-photo {
  border-radius: 0.75em;
  background:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
}
.hfx-image-ambient-glow::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0.5em;
  filter: blur(0.9em) saturate(1.8);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-ambient-glow-photo {
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-ambient-glow:hover::before {
  opacity: 0.9;
  transform: translateY(0.6em);
}
.hfx-image-ambient-glow:hover .hfx-image-ambient-glow-photo {
  transform: translateY(-0.3em);
}

.hfx-image-glitch {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
}
.hfx-image-glitch,
.hfx-image-glitch::before,
.hfx-image-glitch::after {
  background:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
}
.hfx-image-glitch::before,
.hfx-image-glitch::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
}
.hfx-image-glitch::before {
  filter: hue-rotate(-45deg) saturate(1.8) brightness(1.15);
}
.hfx-image-glitch::after {
  filter: hue-rotate(70deg) saturate(1.5);
}
.hfx-image-glitch:hover {
  animation: hfx-image-glitch-shake 0.8s steps(1, end) infinite;
}
.hfx-image-glitch:hover::before {
  opacity: 1;
  animation: hfx-image-glitch-a 0.8s steps(1, end) infinite;
}
.hfx-image-glitch:hover::after {
  opacity: 1;
  animation: hfx-image-glitch-b 0.8s steps(1, end) infinite;
}
@keyframes hfx-image-glitch-a {
  0%, 100% { clip-path: inset(30% 0 60% 0); transform: translateX(-0.6em); }
  20%      { clip-path: inset(58% 0 30% 0); transform: translateX(0.45em); }
  40%      { clip-path: inset(40% 0 52% 0); transform: translateX(-0.35em); }
  60%      { clip-path: inset(74% 0 12% 0); transform: translateX(0.6em); }
  80%      { clip-path: inset(18% 0 74% 0); transform: translateX(-0.4em); }
}
@keyframes hfx-image-glitch-b {
  0%, 100% { clip-path: inset(48% 0 42% 0); transform: translateX(0.5em); }
  25%      { clip-path: inset(24% 0 70% 0); transform: translateX(-0.6em); }
  50%      { clip-path: inset(64% 0 26% 0); transform: translateX(0.35em); }
  75%      { clip-path: inset(36% 0 58% 0); transform: translateX(-0.45em); }
}
@keyframes hfx-image-glitch-shake {
  0%, 100% { transform: none; }
  30%      { transform: translate(0.06em, -0.04em); }
  55%      { transform: translate(-0.06em, 0.04em); }
  80%      { transform: translate(0.04em, 0.06em); }
}

.hfx-image-before-after {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 15em;
  height: 9.5em;
  margin: 0;
  border-radius: 0.75em;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}
.hfx-image-before-after::before,
.hfx-image-before-after-after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 40% at 16% 110%, color-mix(in srgb, var(--c) 18%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 38% at 88% 108%, color-mix(in srgb, var(--c) 24%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 68% 44%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 119deg at 90% 52%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 121.6deg, transparent 122deg),
    conic-gradient(from 123deg at 24% 40%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 113.6deg, transparent 114deg),
    conic-gradient(from 125deg at 46% 54%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 109.6deg, transparent 110deg),
    radial-gradient(circle at 38% 58%, #fef3c7 0 1em, rgb(254 215 170 / 0.55) 1.1em, transparent 4.2em),
    linear-gradient(color-mix(in srgb, var(--c) 58%, #1e1b4b), color-mix(in srgb, var(--c) 34%, #f472b6) 52%, color-mix(in srgb, var(--c) 12%, #fdba74) 76%);
}
.hfx-image-before-after::before {
  filter: saturate(0.15) contrast(0.8) brightness(1.1);
}
.hfx-image-before-after-after {
  clip-path: inset(0 0 0 50%);
  transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-image-before-after-handle {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0.14em;
  margin-left: -0.07em;
  background: #fff;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease 0.3s;
}
.hfx-image-before-after-handle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.9em;
  height: 1.9em;
  padding: 0.35em;
  box-sizing: border-box;
  border-radius: 50%;
  background: #fff;
  color: var(--c);
  box-shadow: 0 0.2em 0.6em rgb(2 6 23 / 0.35);
  transform: translate(-50%, -50%);
}
.hfx-image-before-after-label {
  position: absolute;
  z-index: 1;
  top: 0.6em;
  left: 0.6em;
  padding: 0.25em 0.55em;
  border-radius: 99em;
  background: rgb(2 6 23 / 0.5);
  color: #fff;
  font-size: 0.65em;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: opacity 0.3s ease;
}
.hfx-image-before-after-label:last-child {
  left: auto;
  right: 0.6em;
}
.hfx-image-before-after:hover .hfx-image-before-after-after {
  clip-path: inset(0 0 0 0);
}
.hfx-image-before-after:hover .hfx-image-before-after-handle {
  transform: translateX(-7.5em);
  opacity: 0;
}
.hfx-image-before-after:hover .hfx-image-before-after-label:not(:last-child) {
  opacity: 0;
}

.hfx-image-tiles {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  grid-template-columns: repeat(3, 5em);
  grid-template-rows: repeat(3, 3em);
}
.hfx-image-tiles-tile {
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
  background-size: 15em 9em;
  background-position: calc(var(--x) * -5em) calc(var(--y) * -3em);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), border-radius 0.4s ease;
  transition-delay: calc(var(--d) * 0.05s);
}
.hfx-image-tiles-tile:nth-child(1) { border-top-left-radius: 0.75em; }
.hfx-image-tiles-tile:nth-child(3) { border-top-right-radius: 0.75em; }
.hfx-image-tiles-tile:nth-child(7) { border-bottom-left-radius: 0.75em; }
.hfx-image-tiles-tile:nth-child(9) { border-bottom-right-radius: 0.75em; }
.hfx-image-tiles:hover .hfx-image-tiles-tile {
  border-radius: 0.4em;
  transform: translate(calc((var(--x) - 1) * 0.5em), calc((var(--y) - 1) * 0.5em)) scale(0.94);
}

.hfx-image-swap {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 15em;
  height: 9.5em;
  border-radius: 0.75em;
  overflow: hidden;
  background:
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
}
.hfx-image-swap-alt {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(72% 42% at 22% 110%, color-mix(in srgb, var(--c) 10%, #020617) 99%, transparent),
    radial-gradient(64% 36% at 86% 107%, color-mix(in srgb, var(--c) 14%, #020617) 99%, transparent),
    conic-gradient(from 129deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 101.6deg, transparent 102deg),
    conic-gradient(from 118deg at 92% 54%, transparent 0, color-mix(in srgb, var(--c) 22%, #0b1026) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 36%, #111a3a) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 24% 30%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 38% 12%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 46% 26%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 62% 16%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 88% 22%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 84% 40%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 8% 42%, #fff 0 0.05em, transparent 0.09em),
    radial-gradient(circle at 76% 24%, #f8fafc 0 0.65em, rgb(248 250 252 / 0.3) 0.75em, transparent 2.6em),
    linear-gradient(color-mix(in srgb, var(--c) 20%, #020617), color-mix(in srgb, var(--c) 52%, #1e1b4b) 82%);
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.45s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-swap-dots {
  position: absolute;
  left: 50%;
  bottom: 0.6em;
  width: 1.3em;
  height: 0.45em;
  margin-left: -0.65em;
  background:
    radial-gradient(circle at 0.225em 50%, rgb(255 255 255 / 0.5) 0.2em, transparent 0.23em),
    radial-gradient(circle at calc(100% - 0.225em) 50%, rgb(255 255 255 / 0.5) 0.2em, transparent 0.23em);
}
.hfx-image-swap-dots::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0.45em;
  height: 0.45em;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-image-swap:hover .hfx-image-swap-alt {
  opacity: 1;
  transform: none;
}
.hfx-image-swap:hover .hfx-image-swap-dots::after {
  transform: translateX(0.85em);
}

.hfx-image-scroll-page {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 15em;
  border-radius: 0.6em;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(15 23 42 / 0.12), 0 0.4em 1em -0.3em rgb(15 23 42 / 0.25);
}
.hfx-image-scroll-page-bar {
  height: 1.1em;
  background:
    radial-gradient(circle at 0.65em 50%, #f87171 0.17em, transparent 0.2em),
    radial-gradient(circle at 1.2em 50%, #fbbf24 0.17em, transparent 0.2em),
    radial-gradient(circle at 1.75em 50%, #34d399 0.17em, transparent 0.2em),
    #e5e7eb;
}
.hfx-image-scroll-page-view {
  height: 8.4em;
  overflow: hidden;
}
.hfx-image-scroll-page-page {
  height: 22em;
  background:
    linear-gradient(#fff 0 0) 1.8em 16.25em / 3em 0.7em,
    linear-gradient(#fff 0 0) 1.8em 15.3em / 6.5em 0.45em,
    linear-gradient(var(--c) 0 0) 1em 14.6em / 13em 3.2em,
    linear-gradient(color-mix(in srgb, var(--c) 30%, #fff) 0 0) 1em 10.4em / 3.9em 1.8em,
    linear-gradient(color-mix(in srgb, var(--c) 30%, #fff) 0 0) 5.55em 10.4em / 3.9em 1.8em,
    linear-gradient(color-mix(in srgb, var(--c) 30%, #fff) 0 0) 10.1em 10.4em / 3.9em 1.8em,
    linear-gradient(#f1f5f9 0 0) 1em 10.4em / 3.9em 3.4em,
    linear-gradient(#f1f5f9 0 0) 5.55em 10.4em / 3.9em 3.4em,
    linear-gradient(#f1f5f9 0 0) 10.1em 10.4em / 3.9em 3.4em,
    linear-gradient(#cbd5e1 0 0) 1em 9.1em / 9em 0.28em,
    linear-gradient(#cbd5e1 0 0) 1em 8.5em / 11.5em 0.28em,
    linear-gradient(#1f2937 0 0) 1em 7.6em / 5em 0.5em,
    linear-gradient(#1f2937 0 0) 0 19.4em / 100% 2.6em,
    #fff;
  background-repeat: no-repeat;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.hfx-image-scroll-page-hero {
  height: 6.6em;
  background:
    linear-gradient(#fff 0 0) 1em 0.7em / 1.4em 0.35em no-repeat,
    linear-gradient(rgb(255 255 255 / 0.8) 0 0) 10.4em 0.72em / 3.6em 0.3em no-repeat,
    linear-gradient(#fff 0 0) 1em 2.2em / 5.6em 0.6em no-repeat,
    linear-gradient(rgb(255 255 255 / 0.8) 0 0) 1em 3.2em / 4.8em 0.3em no-repeat,
    linear-gradient(#fff 0 0) 1em 4.1em / 2.8em 0.85em no-repeat,
    radial-gradient(74% 44% at 20% 110%, color-mix(in srgb, var(--c) 42%, #0f172a) 99%, transparent),
    radial-gradient(62% 36% at 90% 107%, color-mix(in srgb, var(--c) 56%, #0f172a) 99%, transparent),
    conic-gradient(from 130deg at 72% 40%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 99.6deg, transparent 100deg),
    conic-gradient(from 118deg at 94% 55%, transparent 0, color-mix(in srgb, var(--c) 80%, #1e293b) 0.4deg 123.6deg, transparent 124deg),
    conic-gradient(from 124deg at 30% 36%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 52% 50%, transparent 0, color-mix(in srgb, var(--c) 48%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 55% 27%, #fff 0 0.85em, rgb(255 255 255 / 0.45) 0.95em, transparent 3.2em),
    linear-gradient(color-mix(in srgb, var(--c) 64%, #fff), color-mix(in srgb, var(--c) 12%, #fff7ed) 72%);
}
.hfx-image-scroll-page:hover .hfx-image-scroll-page-page {
  transform: translateY(calc(-100% + 8.4em));
  transition: transform 3s cubic-bezier(0.45, 0, 0.55, 1);
}

.hfx-image-offset-frame {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: block;
  width: 13em;
  height: 8.25em;
}
.hfx-image-offset-frame-photo,
.hfx-image-offset-frame::after {
  position: absolute;
  inset: 0;
  border-radius: 0.6em;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-image-offset-frame-photo {
  background:
    radial-gradient(9% 30% at 50% 74%, rgb(255 255 255 / 0.55), transparent),
    linear-gradient(transparent 62%, color-mix(in srgb, var(--c) 78%, #0f172a) 62%, color-mix(in srgb, var(--c) 62%, #0f172a) 74%, color-mix(in srgb, var(--c) 40%, #020617)),
    radial-gradient(34% 16% at 6% 63%, color-mix(in srgb, var(--c) 36%, #0f172a) 99%, transparent),
    radial-gradient(20% 9% at 92% 62%, color-mix(in srgb, var(--c) 48%, #1e293b) 99%, transparent),
    radial-gradient(circle at 50% 50%, #fffbeb 0 0.9em, rgb(254 243 199 / 0.5) 1em, transparent 3.6em),
    linear-gradient(color-mix(in srgb, var(--c) 56%, #fff), color-mix(in srgb, var(--c) 18%, #fed7aa) 62%);
  transform: translate(-0.35em, -0.35em);
}
.hfx-image-offset-frame::after {
  content: "";
  border: 0.14em solid var(--c);
  transform: translate(0.35em, 0.35em);
}
.hfx-image-offset-frame:is(:hover, :focus-visible) .hfx-image-offset-frame-photo,
.hfx-image-offset-frame:is(:hover, :focus-visible)::after {
  transform: none;
}

.hfx-link-wavy-underline {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  padding-bottom: 0.4em;}
.hfx-link-wavy-underline::before,
.hfx-link-wavy-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
}
.hfx-link-wavy-underline::before {
  bottom: 0.18em;
  height: 0.09em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--c) 45%, transparent);
  transform-origin: right;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-link-wavy-underline::after {
  bottom: 0;
  height: 0.45em;
  background: var(--c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5Q5-1 10 5T20 5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") 0 0 / 0.9em 0.45em repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5Q5-1 10 5T20 5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") 0 0 / 0.9em 0.45em repeat-x;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  animation: hfx-link-wavy-underline-flow 0.9s linear infinite paused;
}
.hfx-link-wavy-underline:is(:hover, :focus-visible)::before { transform: scaleX(0); }
.hfx-link-wavy-underline:is(:hover, :focus-visible)::after {
  clip-path: inset(0);
  animation-play-state: running;
}
@keyframes hfx-link-wavy-underline-flow {
  to {
    -webkit-mask-position: 0.9em 0;
    mask-position: 0.9em 0;
  }
}

.hfx-link-gradient-underline {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  padding-bottom: 0.3em;}
.hfx-link-gradient-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.26em;
  border-radius: 1em;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 35%, #fff), var(--c)) 0 0 / 200% 100%;
  background-image: linear-gradient(90deg, var(--c), oklch(from var(--c) l c calc(h + 70)), var(--c));
  transform: scaleY(0.4);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: hfx-link-gradient-underline-run 1.6s linear infinite paused;
}
.hfx-link-gradient-underline:is(:hover, :focus-visible)::after {
  transform: scaleY(1);
  animation-play-state: running;
}
@keyframes hfx-link-gradient-underline-run {
  to { background-position: 200% 0; }
}

.hfx-link-double-underline {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  color: inherit;
  padding-bottom: 0.45em;
  transition: color 0.3s ease;}
.hfx-link-double-underline::before,
.hfx-link-double-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.3em;
  height: 0.09em;
  border-radius: 1em;
  background: var(--c);
}
.hfx-link-double-underline::after {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.hfx-link-double-underline:is(:hover, :focus-visible) { color: var(--c); }
.hfx-link-double-underline:is(:hover, :focus-visible)::after {
  transform: translateY(0.24em);
  opacity: 0.5;
}

.hfx-link-underline-fill {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  isolation: isolate;
  padding: 0 0.2em;
  color: inherit;
  transition: color 0.3s ease;}
.hfx-link-underline-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 0.15em;
  background: var(--c);
  transform: scaleY(0.08);
  transform-origin: bottom;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-link-underline-fill:is(:hover, :focus-visible) { color: #fff; }
.hfx-link-underline-fill:is(:hover, :focus-visible)::before { transform: scaleY(1); }

@property --hfx-link-dotted-underline-dash {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 35%;
}
.hfx-link-dotted-underline {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  --hfx-link-dotted-underline-dash: 35%;
  color: inherit;
  padding-bottom: 0.25em;
  background: linear-gradient(90deg, var(--c) var(--hfx-link-dotted-underline-dash), transparent 0) 0 100% / 0.32em 0.11em repeat-x;
  transition: --hfx-link-dotted-underline-dash 0.45s cubic-bezier(0.65, 0, 0.35, 1), color 0.3s ease;}
.hfx-link-dotted-underline:is(:hover, :focus-visible) {
  --hfx-link-dotted-underline-dash: 100%;
  color: var(--c);
}

.hfx-link-underline-slide {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  color: inherit;
  padding-bottom: 0.2em;
  transition: color 0.3s ease;}
.hfx-link-underline-slide::before,
.hfx-link-underline-slide::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.1em;
  background: var(--c);
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-link-underline-slide::before {
  transform-origin: left;
  transition-delay: 0.2s;
}
.hfx-link-underline-slide::after {
  transform: scaleX(0);
  transform-origin: right;
}
.hfx-link-underline-slide:is(:hover, :focus-visible) { color: var(--c); }
.hfx-link-underline-slide:is(:hover, :focus-visible)::before {
  transform: scaleX(0);
  transform-origin: right;
  transition-delay: 0s;
}
.hfx-link-underline-slide:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  transform-origin: left;
  transition-delay: 0.2s;
}

.hfx-link-overline-underline {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  padding: 0.3em 0.1em;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 22%, transparent) 0 0) top / 100% 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--c) 22%, transparent) 0 0) bottom / 100% 1px no-repeat;}
.hfx-link-overline-underline::before,
.hfx-link-overline-underline::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0.1em;
  background: var(--c);
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-link-overline-underline::before { top: 0; transform-origin: left; }
.hfx-link-overline-underline::after { bottom: 0; transform-origin: right; transition-delay: 0.08s; }
.hfx-link-overline-underline:is(:hover, :focus-visible)::before,
.hfx-link-overline-underline:is(:hover, :focus-visible)::after { transform: scaleX(1); }

.hfx-link-dot-underline {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  padding-bottom: 0.5em;}
.hfx-link-dot-underline::after {
  content: "";
  position: absolute;
  left: -0.25em;
  right: -0.25em;
  bottom: 0.1em;
  height: 0.28em;
  background: var(--c);
  clip-path: inset(0 calc(50% - 0.14em) round 1em);
  transform-origin: bottom;
  transition: clip-path 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s ease;
}
.hfx-link-dot-underline:is(:hover, :focus-visible)::after {
  clip-path: inset(0 0.25em round 1em);
  transform: scaleY(0.45);
}

.hfx-link-scribble-underline {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  padding-bottom: 0.1em;}
.hfx-link-scribble-underline-line {
  position: absolute;
  left: -0.15em;
  top: 88%;
  width: calc(100% + 0.3em);
  overflow: visible;
  pointer-events: none;
}
.hfx-link-scribble-underline-line path {
  fill: none;
  stroke: var(--c);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-link-scribble-underline:is(:hover, :focus-visible) .hfx-link-scribble-underline-line path { stroke-dashoffset: 0; }

.hfx-link-corner-border {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  padding: 0.4em 0.75em;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / 0.7em 0.1em,
    linear-gradient(var(--c) 0 0) 0 0 / 0.1em 0.7em,
    linear-gradient(var(--c) 0 0) 100% 100% / 0.7em 0.1em,
    linear-gradient(var(--c) 0 0) 100% 100% / 0.1em 0.7em;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.65, 0, 0.35, 1);}
.hfx-link-corner-border:is(:hover, :focus-visible) {
  background-size: 100% 0.1em, 0.1em 100%, 100% 0.1em, 0.1em 100%;
}

.hfx-link-external-arrow {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;}
.hfx-link-external-arrow-badge {
  position: relative;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.hfx-link-external-arrow-badge svg {
  position: absolute;
  inset: 0.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-link-external-arrow-badge svg + svg { transform: translate(-1.2em, 1.2em); }
.hfx-link-external-arrow:is(:hover, :focus-visible) .hfx-link-external-arrow-badge {
  background: var(--c);
  color: #fff;
}
.hfx-link-external-arrow:is(:hover, :focus-visible) .hfx-link-external-arrow-badge svg { transform: translate(1.2em, -1.2em); }
.hfx-link-external-arrow:is(:hover, :focus-visible) .hfx-link-external-arrow-badge svg + svg { transform: translate(0, 0); }

.hfx-link-arrow-reveal {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35em;
  font: 500 calc(var(--hfx-size, 16px) * 1.15)/1.4 system-ui, sans-serif;
}
.hfx-link-arrow-reveal a {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-right: 1.1em;
  color: inherit;
  opacity: 0.65;
  text-decoration: none;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.hfx-link-arrow-reveal svg {
  position: absolute;
  left: 0;
  width: 0.85em;
  height: 0.85em;
  fill: none;
  stroke: var(--c);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateX(-0.6em);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-link-arrow-reveal span { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hfx-link-arrow-reveal a:is(:hover, :focus-visible) {
  opacity: 1;
  color: var(--c);
}
.hfx-link-arrow-reveal a:is(:hover, :focus-visible) svg {
  opacity: 1;
  transform: translateX(0);
}
.hfx-link-arrow-reveal a:is(:hover, :focus-visible) span { transform: translateX(1.1em); }

.hfx-link-preview-tooltip {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  text-decoration: underline 0.08em color-mix(in srgb, var(--c) 40%, transparent);
  text-underline-offset: 0.22em;
  transition: text-decoration-color 0.25s ease;}
.hfx-link-preview-tooltip::before,
.hfx-link-preview-tooltip::after {
  position: absolute;
  left: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-link-preview-tooltip::before {
  content: "";
  bottom: calc(100% + 0.3em);
  width: 0.55em;
  height: 0.55em;
  margin-left: -0.275em;
  background: color-mix(in srgb, var(--c) 20%, #111827);
  transform: translateY(0.4em) rotate(45deg);
}
.hfx-link-preview-tooltip::after {
  content: attr(data-url);
  bottom: calc(100% + 0.6em);
  padding: 0.55em 0.85em 0.55em 2em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 0.6em;
  background:
    radial-gradient(circle at 1.05em 50%, var(--c) 0.3em, transparent 0.34em),
    color-mix(in srgb, var(--c) 20%, #111827);
  box-shadow: 0 0.5em 1.2em -0.4em rgb(0 0 0 / 0.45);
  color: #fff;
  font-size: 0.62em;
  font-weight: 500;
  white-space: nowrap;
  transform: translate(-50%, 0.6em) scale(0.94);
  transform-origin: 50% 100%;
}
.hfx-link-preview-tooltip:is(:hover, :focus-visible) { text-decoration-color: var(--c); }
.hfx-link-preview-tooltip:is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: translateY(0) rotate(45deg);
}
.hfx-link-preview-tooltip:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.hfx-link-thick-underline {
  --c: var(--hfx-color, #3b82f6);
  color: inherit;
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: underline color-mix(in srgb, var(--c) 50%, transparent);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.3em;
  text-decoration-skip-ink: none;
  transition: text-decoration-thickness 0.3s ease, text-underline-offset 0.3s ease, text-decoration-color 0.3s ease;
}
.hfx-link-thick-underline:is(:hover, :focus-visible) {
  text-decoration-color: var(--c);
  text-decoration-thickness: 0.3em;
  text-underline-offset: 0.08em;
}

.hfx-link-arrow-underline {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  margin-right: 1.1em;
  padding-bottom: 0.3em;}
.hfx-link-arrow-underline::before,
.hfx-link-arrow-underline::after {
  content: "";
  position: absolute;
}
.hfx-link-arrow-underline::before {
  left: 0;
  bottom: 0.1em;
  width: calc(100% + 0.95em);
  height: 0.09em;
  border-radius: 1em;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-link-arrow-underline::after {
  left: calc(100% + 0.55em);
  bottom: -0.035em;
  width: 0.36em;
  height: 0.36em;
  border-top: 0.09em solid var(--c);
  border-right: 0.09em solid var(--c);
  border-radius: 0 0.05em 0 0;
  opacity: 0;
  transform: translateX(-0.35em) rotate(45deg);
  transition: opacity 0.15s ease, transform 0.25s ease;
}
.hfx-link-arrow-underline:is(:hover, :focus-visible)::before { transform: scaleX(1); }
.hfx-link-arrow-underline:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translateX(0) rotate(45deg);
  transition: opacity 0.15s ease 0.28s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s;
}

.hfx-link-block-swipe {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  color: inherit;
  transition: color 0.3s ease;}
.hfx-link-block-swipe::before {
  content: "";
  position: absolute;
  inset: -0.05em -0.15em;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
}
.hfx-link-block-swipe:is(:hover, :focus-visible) {
  color: var(--c);
  transition: color 0s 0.3s;
}
.hfx-link-block-swipe:is(:hover, :focus-visible)::before {
  animation: hfx-link-block-swipe-pass 0.65s cubic-bezier(0.7, 0, 0.3, 1);
}
@keyframes hfx-link-block-swipe-pass {
  0%   { transform: scaleX(0); transform-origin: left; }
  45%  { transform: scaleX(1); transform-origin: left; }
  55%  { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.hfx-link-multiline-underline {
  --c: var(--hfx-color, #3b82f6);
  max-width: 17em;
  margin: 0;
  font: 400 calc(var(--hfx-size, 16px) * 1.1)/1.6 system-ui, sans-serif;
}
.hfx-link-multiline-underline a {
  color: var(--c);
  font-weight: 600;
  text-decoration: none;
  background:
    linear-gradient(var(--c) 0 0) 0 100% / 0 0.1em no-repeat,
    linear-gradient(color-mix(in srgb, var(--c) 28%, transparent) 0 0) 0 100% / 100% 0.1em no-repeat;
  transition: background-size 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-link-multiline-underline a:is(:hover, :focus-visible) {
  background-size: 100% 0.1em, 100% 0.1em;
}

.hfx-link-emoji-wave {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  color: var(--c);
  font: 600 calc(var(--hfx-size, 16px) * 1.25)/1.3 system-ui, sans-serif;
  text-decoration: none;
  margin-right: 1.3em;}
.hfx-link-emoji-wave-hand {
  position: absolute;
  left: 100%;
  top: 0;
  opacity: 0;
  transform: translate(-0.7em, 0.3em) scale(0.3) rotate(-40deg);
  transform-origin: 70% 85%;
  transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: hfx-link-emoji-wave-wave 1.4s ease-in-out infinite paused;
}
.hfx-link-emoji-wave:is(:hover, :focus-visible) .hfx-link-emoji-wave-hand {
  opacity: 1;
  transform: translate(0.3em, 0) scale(1) rotate(0);
  animation-play-state: running;
}
@keyframes hfx-link-emoji-wave-wave {
  0%, 60%, 100% { rotate: 0deg; }
  10%           { rotate: 16deg; }
  20%           { rotate: -8deg; }
  30%           { rotate: 16deg; }
  40%           { rotate: -4deg; }
  50%           { rotate: 10deg; }
}

.hfx-nav-sliding-pill {
  --c: var(--hfx-color, #3b82f6);
  --pos: 0;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 0.3em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 12%, #111827);
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
}
.hfx-nav-sliding-pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0.3em;
  bottom: 0.3em;
  left: 0.3em;
  width: calc((100% - 0.6em) / 4);
  border-radius: 2em;
  background: var(--c);
  box-shadow: 0 0.3em 0.9em -0.2em color-mix(in srgb, var(--c) 70%, transparent);
  transform: translateX(calc(var(--pos) * 100%));
  transition: transform 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.hfx-nav-sliding-pill a {
  padding: 0.6em 1.1em;
  border-radius: 2em;
  color: rgb(255 255 255 / 0.6);
  text-align: center;
  text-decoration: none;
  transition: color 0.3s ease;
}
.hfx-nav-sliding-pill a[aria-current="page"],
.hfx-nav-sliding-pill a:is(:hover, :focus-visible) { color: #fff; }
.hfx-nav-sliding-pill:has(a:is(:hover, :focus-visible)) a[aria-current="page"]:not(:hover, :focus-visible) { color: rgb(255 255 255 / 0.6); }
.hfx-nav-sliding-pill:has(a:nth-child(1):is(:hover, :focus-visible)) { --pos: 0; }
.hfx-nav-sliding-pill:has(a:nth-child(2):is(:hover, :focus-visible)) { --pos: 1; }
.hfx-nav-sliding-pill:has(a:nth-child(3):is(:hover, :focus-visible)) { --pos: 2; }
.hfx-nav-sliding-pill:has(a:nth-child(4):is(:hover, :focus-visible)) { --pos: 3; }

.hfx-nav-underline-follow {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
}
.hfx-nav-underline-follow a {
  position: relative;
  padding: 0.6em 0.9em;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.hfx-nav-underline-follow a[aria-current="page"] { color: var(--c); }
.hfx-nav-underline-follow a::after {
  content: "";
  position: absolute;
  left: 0.9em;
  right: 0.9em;
  bottom: 0.2em;
  height: 0.14em;
  border-radius: 1em;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-nav-underline-follow a:is(:hover, :focus-visible) ~ a::after { transform-origin: left; }
.hfx-nav-underline-follow a:is(:hover, :focus-visible) { color: var(--c); }
.hfx-nav-underline-follow a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1), transform-origin 0s 0.3s;
}

.hfx-nav-lift-dot {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
}
.hfx-nav-lift-dot a {
  position: relative;
  padding: 0.6em 0.9em 0.9em;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
}
.hfx-nav-lift-dot a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.25em;
  width: 0.36em;
  height: 0.36em;
  margin-left: -0.18em;
  border-radius: 50%;
  background: var(--c);
  transform: scale(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.hfx-nav-lift-dot a[aria-current="page"] { color: var(--c); }
.hfx-nav-lift-dot a[aria-current="page"]::after { transform: scale(1); }
.hfx-nav-lift-dot a:is(:hover, :focus-visible) {
  color: var(--c);
  transform: translateY(-0.25em);
}
.hfx-nav-lift-dot a:is(:hover, :focus-visible)::after { transform: translateY(0.25em) scale(1); }

.hfx-nav-vertical-bar {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  flex-direction: column;
  align-items: stretch;
  width: 11em;
  border-left: 1px solid color-mix(in srgb, var(--c) 25%, transparent);}
.hfx-nav-vertical-bar a {
  position: relative;
  padding: 0.55em 1em;
  border-radius: 0 0.5em 0.5em 0;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent), color-mix(in srgb, var(--c) 4%, transparent)) no-repeat 0 0 / 0 100%;
  transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1), color 0.25s ease;
}
.hfx-nav-vertical-bar a::before {
  content: "";
  position: absolute;
  left: -0.1em;
  top: 0.3em;
  bottom: 0.3em;
  width: 0.2em;
  border-radius: 1em;
  background: var(--c);
  transform: scaleY(0);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-nav-vertical-bar a:is([aria-current="page"], :hover, :focus-visible) { color: var(--c); }
.hfx-nav-vertical-bar a:is([aria-current="page"], :hover, :focus-visible)::before { transform: scaleY(1); }
.hfx-nav-vertical-bar a:is(:hover, :focus-visible) { background-size: 100% 100%; }

.hfx-nav-strike-others {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
}
.hfx-nav-strike-others a {
  position: relative;
  padding: 0.6em 0.9em;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease, opacity 0.3s ease;
}
.hfx-nav-strike-others a::after {
  content: "";
  position: absolute;
  left: 0.7em;
  right: 0.7em;
  top: 50%;
  height: 0.12em;
  border-radius: 1em;
  background: var(--c);
  transform: rotate(-5deg) scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-nav-strike-others a:nth-child(2)::after { transition-delay: 0.04s; }
.hfx-nav-strike-others a:nth-child(3)::after { transition-delay: 0.08s; }
.hfx-nav-strike-others a:nth-child(4)::after { transition-delay: 0.12s; }
.hfx-nav-strike-others a:is(:hover, :focus-visible) { color: var(--c); }
.hfx-nav-strike-others:has(a:is(:hover, :focus-visible)) a:not(:hover, :focus-visible) { opacity: 0.45; }
.hfx-nav-strike-others:has(a:is(:hover, :focus-visible)) a:not(:hover, :focus-visible)::after { transform: rotate(-5deg) scaleX(1); }

.hfx-nav-skew-fill {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.04em;}
.hfx-nav-skew-fill a {
  position: relative;
  isolation: isolate;
  padding: 0.6em 1em;
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}
.hfx-nav-skew-fill a::before {
  content: "";
  position: absolute;
  inset: 0.15em 0;
  z-index: -1;
  background: var(--c);
  transform: skewX(-14deg) scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-nav-skew-fill a:is(:hover, :focus-visible) { color: #fff; }
.hfx-nav-skew-fill a:is(:hover, :focus-visible)::before {
  transform: skewX(-14deg) scaleX(1);
  transform-origin: left;
}

.hfx-nav-glide-underline {
  --c: var(--hfx-color, #3b82f6);
  --pos: 0;
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
}
.hfx-nav-glide-underline::before,
.hfx-nav-glide-underline::after {
  content: "";
  position: absolute;
  left: 0.8em;
  bottom: 0;
  width: calc(25% - 1.6em);
  height: 0.16em;
  border-radius: 1em;
  transform: translateX(calc(var(--pos) * (100% + 1.6em)));
}
.hfx-nav-glide-underline::before {
  background: color-mix(in srgb, var(--c) 35%, transparent);
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-nav-glide-underline::after {
  background: var(--c);
  transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.hfx-nav-glide-underline a {
  padding: 0.6em 1em 0.8em;
  color: inherit;
  text-align: center;
  text-decoration: none;
  transition: color 0.25s ease;
}
.hfx-nav-glide-underline a[aria-current="page"],
.hfx-nav-glide-underline a:is(:hover, :focus-visible) { color: var(--c); }
.hfx-nav-glide-underline:has(a:is(:hover, :focus-visible)) a[aria-current="page"]:not(:hover, :focus-visible) { color: inherit; }
.hfx-nav-glide-underline:has(a:nth-child(1):is(:hover, :focus-visible)) { --pos: 0; }
.hfx-nav-glide-underline:has(a:nth-child(2):is(:hover, :focus-visible)) { --pos: 1; }
.hfx-nav-glide-underline:has(a:nth-child(3):is(:hover, :focus-visible)) { --pos: 2; }
.hfx-nav-glide-underline:has(a:nth-child(4):is(:hover, :focus-visible)) { --pos: 3; }

.hfx-nav-icon-pop {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
}
.hfx-nav-icon-pop a {
  position: relative;
  padding: 1.9em 0.9em 0.6em;
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}
.hfx-nav-icon-pop svg {
  position: absolute;
  left: 50%;
  top: 0.35em;
  width: 1.3em;
  height: 1.3em;
  margin-left: -0.65em;
  fill: none;
  stroke: var(--c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateY(0.8em) scale(0.2);
  transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.hfx-nav-icon-pop a:is(:hover, :focus-visible) { color: var(--c); }
.hfx-nav-icon-pop a:is(:hover, :focus-visible) svg {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@property --hfx-nav-pagination-ring-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.hfx-nav-pagination-ring {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  gap: 0.35em;}
.hfx-nav-pagination-ring a {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  color: inherit;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: color 0.25s ease;
}
.hfx-nav-pagination-ring a::before {
  --hfx-nav-pagination-ring-sweep: 0deg;
  content: "";
  position: absolute;
  inset: 0;
  border: 0.12em solid var(--c);
  border-radius: 50%;
  -webkit-mask: conic-gradient(#000 var(--hfx-nav-pagination-ring-sweep), transparent 0);
  mask: conic-gradient(#000 var(--hfx-nav-pagination-ring-sweep), transparent 0);
  transition: --hfx-nav-pagination-ring-sweep 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-nav-pagination-ring a[aria-current="page"] {
  background: var(--c);
  color: #fff;
}
.hfx-nav-pagination-ring svg {
  width: 1.1em;
  height: 1.1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-nav-pagination-ring a:is(:hover, :focus-visible) { color: var(--c); }
.hfx-nav-pagination-ring a[aria-current="page"]:is(:hover, :focus-visible) { color: #fff; }
.hfx-nav-pagination-ring a:is(:hover, :focus-visible)::before { --hfx-nav-pagination-ring-sweep: 360deg; }
.hfx-nav-pagination-ring a:first-child:is(:hover, :focus-visible) svg { transform: translateX(-0.15em); }
.hfx-nav-pagination-ring a:last-child:is(:hover, :focus-visible) svg { transform: translateX(0.15em); }

.hfx-nav-breadcrumb-arrows {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
}
.hfx-nav-breadcrumb-arrows a {
  --tip: 0.7em;
  margin-left: calc(0.18em - var(--tip));
  padding: 0.65em 1em 0.65em calc(0.9em + var(--tip));
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(var(--c) 0 0) 0 0 / 0 100% no-repeat,
    color-mix(in srgb, var(--c) 14%, transparent);
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%);
  transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1), color 0.25s ease;
}
.hfx-nav-breadcrumb-arrows a:first-child {
  margin-left: 0;
  padding-left: 1.1em;
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%);
}
.hfx-nav-breadcrumb-arrows a:is([aria-current="page"], :hover, :focus-visible) {
  background-size: 100% 100%;
  color: #fff;
}

.hfx-nav-sticker {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  gap: 0.4em;}
.hfx-nav-sticker a {
  padding: 0.55em 0.95em;
  border-radius: 0.5em;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.8, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.8, 0.64, 1), background-color 0.2s ease, color 0.2s ease;
}
.hfx-nav-sticker a:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
  box-shadow: 0.2em 0.25em 0 color-mix(in srgb, var(--c) 45%, #111827);
  transform: rotate(-6deg) scale(1.12);
}
.hfx-nav-sticker a:nth-child(even):is(:hover, :focus-visible) { transform: rotate(5deg) scale(1.12); }

.hfx-nav-swing-tags {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  font: 600 var(--hfx-size, 16px)/1.2 system-ui, sans-serif;
  align-items: flex-start;
  gap: 0.9em;
  padding: 0 0.6em;
  border-top: 0.12em solid color-mix(in srgb, var(--c) 45%, transparent);}
.hfx-nav-swing-tags a {
  position: relative;
  margin-top: 1.1em;
  padding: 0.45em 0.8em;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: inherit;
  text-decoration: none;
  transform-origin: 50% -1.1em;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.hfx-nav-swing-tags a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 1px;
  height: 1.1em;
  background: color-mix(in srgb, var(--c) 55%, transparent);
}
.hfx-nav-swing-tags a:is(:hover, :focus-visible) {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  animation: hfx-nav-swing-tags-swing 1.2s ease-in-out;
}
@keyframes hfx-nav-swing-tags-swing {
  0%, 100% { transform: rotate(0); }
  15%      { transform: rotate(12deg); }
  35%      { transform: rotate(-8deg); }
  55%      { transform: rotate(5deg); }
  75%      { transform: rotate(-2deg); }
}

.hfx-social-icons-fill-rise {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfx-social-icons-fill-rise-link {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border: 2px solid var(--c);
  border-radius: 50%;
  color: var(--c);
  transition: color 0.3s ease 0.05s;
}
.hfx-social-icons-fill-rise-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -25%;
  top: 100%;
  width: 150%;
  height: 150%;
  border-radius: 42%;
  background: var(--c);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-social-icons-fill-rise-link svg {
  width: 1.3em;
  height: 1.3em;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-social-icons-fill-rise-link:is(:hover, :focus-visible) { color: #fff; }
.hfx-social-icons-fill-rise-link:is(:hover, :focus-visible)::before {
  transform: translateY(-85%) rotate(120deg);
}
.hfx-social-icons-fill-rise-link:is(:hover, :focus-visible) svg { transform: scale(1.12); }

.hfx-social-icons-flip {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfx-social-icons-flip-link {
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transform: perspective(12em) rotateY(0deg);
  transition:
    transform 0.7s cubic-bezier(0.45, 0, 0.2, 1),
    background-color 0.1s linear 0.16s,
    color 0.1s linear 0.16s;
}
.hfx-social-icons-flip-link svg {
  width: 1.3em;
  height: 1.3em;
}
.hfx-social-icons-flip-link:is(:hover, :focus-visible) {
  transform: perspective(12em) rotateY(360deg);
  background: var(--c);
  color: #fff;
}

.hfx-social-icons-bounce {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfx-social-icons-bounce li {
  position: relative;
}
.hfx-social-icons-bounce li::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -0.55em;
  height: 0.3em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 25%, transparent);
}
.hfx-social-icons-bounce-link {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  transform-origin: 50% 100%;
}
.hfx-social-icons-bounce-link svg {
  width: 1.3em;
  height: 1.3em;
}
.hfx-social-icons-bounce-link:is(:hover, :focus-visible) {
  animation: hfx-social-icons-bounce-hop 0.9s infinite;
}
.hfx-social-icons-bounce li:is(:hover, :focus-within)::after {
  animation: hfx-social-icons-bounce-shadow 0.9s infinite;
}
@keyframes hfx-social-icons-bounce-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  12%      { transform: translateY(0) scale(1.14, 0.84); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  45%      { transform: translateY(-1em) scale(0.95, 1.06); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.35); }
  76%      { transform: translateY(0) scale(1.1, 0.88); animation-timing-function: ease-out; }
  88%      { transform: translateY(0) scale(0.98, 1.02); }
}
@keyframes hfx-social-icons-bounce-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; animation-timing-function: ease-out; }
  12%      { transform: scaleX(1.12); opacity: 1; animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
  45%      { transform: scaleX(0.55); opacity: 0.45; animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.35); }
  76%      { transform: scaleX(1.12); opacity: 1; animation-timing-function: ease-out; }
}

.hfx-social-icons-tooltip {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfx-social-icons-tooltip-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.hfx-social-icons-tooltip-link svg {
  width: 1.3em;
  height: 1.3em;
}
.hfx-social-icons-tooltip-tip {
  position: absolute;
  bottom: calc(100% + 0.9em);
  left: 50%;
  padding: 0.4em 0.65em;
  border-radius: 0.45em;
  background: var(--c);
  color: #fff;
  font: 600 0.75em/1 system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0.6em) scale(0.5);
  transform-origin: 50% 100%;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-social-icons-tooltip-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -0.4em;
  border: 0.4em solid transparent;
  border-top-color: var(--c);
}
.hfx-social-icons-tooltip-link:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
  transform: translateY(-0.15em);
}
.hfx-social-icons-tooltip-link:is(:hover, :focus-visible) .hfx-social-icons-tooltip-tip {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.hfx-social-share-expand {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25em;
  height: 3.25em;
}
/* widens the hover area while open, so the gaps between items keep it open */
.hfx-social-share-expand::before {
  content: "";
  position: absolute;
  inset: 0;
}
.hfx-social-share-expand:is(:hover, :focus-within)::before { inset: 0 -8.5em; }
.hfx-social-share-expand-toggle {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.25em;
  height: 3.25em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.35em 0.9em color-mix(in srgb, var(--c) 35%, transparent);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-social-share-expand-toggle svg {
  width: 1.35em;
  height: 1.35em;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-social-share-expand-item {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  opacity: 0;
  transform: translateX(0) scale(0.3);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.2s ease,
    background-color 0.2s ease;
}
.hfx-social-share-expand-item svg {
  width: 1.2em;
  height: 1.2em;
}
.hfx-social-share-expand:is(:hover, :focus-within) .hfx-social-share-expand-toggle { transform: scale(0.92); }
.hfx-social-share-expand:is(:hover, :focus-within) .hfx-social-share-expand-toggle svg { transform: rotate(-20deg); }
.hfx-social-share-expand:is(:hover, :focus-within) .hfx-social-share-expand-item {
  opacity: 1;
  transform: translateX(calc(var(--x) * 3.4em)) scale(1);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--x) * var(--x) * 30ms),
    opacity 0.2s ease calc(var(--x) * var(--x) * 30ms),
    background-color 0.2s ease;
}
.hfx-social-share-expand-item:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 28%, transparent); }

.hfx-icon-gradient-ring {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 1.1em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfx-icon-gradient-ring-link {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25em;
  height: 3.25em;
  border-radius: 50%;
  color: var(--c);
}
.hfx-icon-gradient-ring-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}
.hfx-icon-gradient-ring-link::before {
  content: "";
  position: absolute;
  inset: -0.3em;
  border-radius: 50%;
  background: conic-gradient(var(--c), color-mix(in srgb, var(--c) 30%, #fff) 25%, var(--c) 50%, color-mix(in srgb, var(--c) 15%, transparent) 75%, var(--c));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.22em), #000 calc(100% - 0.2em));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.22em), #000 calc(100% - 0.2em));
  opacity: 0;
  scale: 0.75;
  transition: opacity 0.25s ease, scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-icon-gradient-ring-link svg {
  position: relative;
  z-index: 1;
  width: 1.4em;
  height: 1.4em;
  transition: scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-icon-gradient-ring-link:is(:hover, :focus-visible)::before {
  opacity: 1;
  scale: 1;
  animation: hfx-icon-gradient-ring-spin 1.6s linear infinite;
}
.hfx-icon-gradient-ring-link:is(:hover, :focus-visible)::after {
  scale: 0.86;
  background: color-mix(in srgb, var(--c) 20%, transparent);
}
.hfx-icon-gradient-ring-link:is(:hover, :focus-visible) svg { scale: 0.92; }
@keyframes hfx-icon-gradient-ring-spin {
  to { rotate: 1turn; }
}

.hfx-social-icons-diamond {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 1.35em;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hfx-social-icons-diamond-link {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border: 2px solid var(--c);
  border-radius: 0.55em;
  color: var(--c);
  transform: rotate(45deg);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.25s ease,
    color 0.25s ease;
}
.hfx-social-icons-diamond-link svg {
  width: 1.25em;
  height: 1.25em;
  transform: rotate(-45deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-social-icons-diamond-link:is(:hover, :focus-visible) {
  transform: rotate(0deg);
  background: var(--c);
  color: #fff;
}
.hfx-social-icons-diamond-link:is(:hover, :focus-visible) svg { transform: rotate(0deg); }

.hfx-heart-icon-beat {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.hfx-heart-icon-beat svg {
  width: 1.6em;
  height: 1.6em;
  overflow: visible;
}
.hfx-heart-icon-beat svg path {
  fill: transparent;
  transition: fill 0.2s ease;
}
/* six dots around the heart, drawn as shadows of one tiny dot */
.hfx-heart-icon-beat::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.36em;
  height: 0.36em;
  margin: -0.18em;
  border-radius: 50%;
  box-shadow:
    0 -2.35em 0 var(--c), 2.04em -1.18em 0 var(--c), 2.04em 1.18em 0 var(--c),
    0 2.35em 0 var(--c), -2.04em 1.18em 0 var(--c), -2.04em -1.18em 0 var(--c);
  opacity: 0;
  pointer-events: none;
}
.hfx-heart-icon-beat:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-heart-icon-beat:is(:hover, :focus-visible) svg {
  animation: hfx-heart-icon-beat-beat 1.1s ease-in-out infinite;
}
.hfx-heart-icon-beat:is(:hover, :focus-visible) svg path { fill: currentColor; }
.hfx-heart-icon-beat:is(:hover, :focus-visible)::after {
  animation: hfx-heart-icon-beat-burst 0.6s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes hfx-heart-icon-beat-beat {
  0%, 60%, 100% { transform: scale(1); }
  14%           { transform: scale(1.28); }
  28%           { transform: scale(0.96); }
  42%           { transform: scale(1.16); }
}
@keyframes hfx-heart-icon-beat-burst {
  0%   { transform: scale(0.45); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.hfx-thumbs-up-pop {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.hfx-thumbs-up-pop svg {
  width: 1.55em;
  height: 1.55em;
  transform-origin: 15% 85%;
  transition: transform 0.55s cubic-bezier(0.6, -0.6, 0.3, 1.6);
}
.hfx-thumbs-up-pop-plus {
  position: absolute;
  top: -0.1em;
  right: -0.6em;
  color: var(--c);
  font: 700 0.85em/1 system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
}
.hfx-thumbs-up-pop:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
}
.hfx-thumbs-up-pop:is(:hover, :focus-visible) svg { transform: rotate(-18deg) scale(1.12); }
.hfx-thumbs-up-pop:is(:hover, :focus-visible) .hfx-thumbs-up-pop-plus {
  animation: hfx-thumbs-up-pop-float 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) 0.25s both;
}
@keyframes hfx-thumbs-up-pop-float {
  0%   { opacity: 0; transform: translateY(0.6em) scale(0.5); }
  35%  { opacity: 1; transform: translateY(-0.2em) scale(1.1); }
  100% { opacity: 1; transform: translateY(-0.6em) scale(1); }
}

.hfx-hamburger-to-x {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  place-content: center;
  gap: 0.3em;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 0.8em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.hfx-hamburger-to-x-bar {
  display: block;
  width: 1.6em;
  height: 0.17em;
  border-radius: 1em;
  background: var(--c);
  /* leaving: unrotate first, then slide apart */
  transition: rotate 0.2s ease, translate 0.2s ease 0.2s, scale 0.15s ease 0.2s;
}
.hfx-hamburger-to-x:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-hamburger-to-x:is(:hover, :focus-visible) .hfx-hamburger-to-x-bar {
  /* entering: slide together first, then rotate with a little overshoot */
  transition: translate 0.2s ease, rotate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s, scale 0.15s ease;
}
.hfx-hamburger-to-x:is(:hover, :focus-visible) .hfx-hamburger-to-x-bar:nth-child(1) {
  translate: 0 0.47em;
  rotate: 45deg;
}
.hfx-hamburger-to-x:is(:hover, :focus-visible) .hfx-hamburger-to-x-bar:nth-child(2) { scale: 0 1; }
.hfx-hamburger-to-x:is(:hover, :focus-visible) .hfx-hamburger-to-x-bar:nth-child(3) {
  translate: 0 -0.47em;
  rotate: -45deg;
}

.hfx-plus-icon-rotate {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.35em 0.9em color-mix(in srgb, var(--c) 30%, transparent);
  transition: transform 0.3s ease, box-shadow 0.3s ease;}
.hfx-plus-icon-rotate svg {
  width: 1.6em;
  height: 1.6em;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-plus-icon-rotate:is(:hover, :focus-visible) {
  transform: scale(1.06);
  box-shadow: 0 0.6em 1.3em color-mix(in srgb, var(--c) 40%, transparent);
}
.hfx-plus-icon-rotate:is(:hover, :focus-visible) svg { transform: rotate(135deg); }

.hfx-download-icon-drop {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  border-radius: 0.85em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-download-icon-drop svg {
  width: 1.6em;
  height: 1.6em;
}
.hfx-download-icon-drop-arrow,
.hfx-download-icon-drop-tray {
  transform-box: view-box;
  transform-origin: 50% 87.5%;
}
.hfx-download-icon-drop:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-download-icon-drop:is(:hover, :focus-visible) .hfx-download-icon-drop-arrow {
  animation: hfx-download-icon-drop-fall 1.2s infinite;
}
.hfx-download-icon-drop:is(:hover, :focus-visible) .hfx-download-icon-drop-tray {
  animation: hfx-download-icon-drop-give 1.2s infinite;
}
@keyframes hfx-download-icon-drop-fall {
  0%   { transform: translateY(0); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  32%  { transform: translateY(30%); opacity: 0; }
  33%  { transform: translateY(-45%); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1.25); }
  75%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes hfx-download-icon-drop-give {
  0%, 22%, 100% { transform: scaleY(1); }
  32%           { transform: scaleY(0.72); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
  52%           { transform: scaleY(1); }
}

.hfx-trash-icon-lid {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  border-radius: 0.85em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease, color 0.25s ease;}
.hfx-trash-icon-lid svg {
  width: 1.6em;
  height: 1.6em;
  overflow: visible;
}
.hfx-trash-icon-lid-lid {
  transform-box: view-box;
  transform-origin: 12.5% 25%;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-trash-icon-lid:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
}
.hfx-trash-icon-lid:is(:hover, :focus-visible) .hfx-trash-icon-lid-lid {
  transform: translateY(-9%) rotate(-22deg);
}

.hfx-copy-icon-layers {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  border-radius: 0.85em;
  background: var(--c);
  color: #fff;
  transition: box-shadow 0.3s ease;}
.hfx-copy-icon-layers svg {
  width: 1.6em;
  height: 1.6em;
  overflow: visible;
}
.hfx-copy-icon-layers rect {
  fill: var(--c);
  transform-box: view-box;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.hfx-copy-icon-layers-mid {
  opacity: 0;
  transform: translate(12.5%, 12.5%);
}
.hfx-copy-icon-layers:is(:hover, :focus-visible) { box-shadow: 0 0.45em 1em color-mix(in srgb, var(--c) 35%, transparent); }
.hfx-copy-icon-layers:is(:hover, :focus-visible) .hfx-copy-icon-layers-back { transform: translate(-7%, -7%); }
.hfx-copy-icon-layers:is(:hover, :focus-visible) .hfx-copy-icon-layers-mid {
  opacity: 1;
  transform: translate(0, 0);
}
.hfx-copy-icon-layers:is(:hover, :focus-visible) .hfx-copy-icon-layers-front { transform: translate(7%, 7%); }

.hfx-send-icon-fly {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent);
  transition: box-shadow 0.3s ease;}
.hfx-send-icon-fly svg {
  width: 1.5em;
  height: 1.5em;
  transform: translate(-0.08em, 0.08em);
}
.hfx-send-icon-fly:is(:hover, :focus-visible) { box-shadow: 0 0 0 0.4em color-mix(in srgb, var(--c) 18%, transparent); }
.hfx-send-icon-fly:is(:hover, :focus-visible) svg {
  animation: hfx-send-icon-fly-go 1s both;
}
@keyframes hfx-send-icon-fly-go {
  0%    { transform: translate(-0.08em, 0.08em) rotate(0deg); animation-timing-function: ease-out; }
  18%   { transform: translate(-0.3em, 0.3em) rotate(-8deg) scale(0.9); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  48%   { transform: translate(2.8em, -2.8em) rotate(0deg) scale(0.8); }
  48.1% { transform: translate(-2.8em, 2.8em) rotate(0deg) scale(0.8); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1.15); }
  100%  { transform: translate(-0.08em, 0.08em) rotate(0deg) scale(1); }
}

.hfx-back-to-top-swap {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.3s ease, color 0.3s ease;}
.hfx-back-to-top-swap svg {
  grid-area: 1 / 1;
  width: 1.5em;
  height: 1.5em;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-back-to-top-swap svg:nth-of-type(2) { transform: translateY(2.6em); }
.hfx-back-to-top-swap:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
}
.hfx-back-to-top-swap:is(:hover, :focus-visible) svg:nth-of-type(1) { transform: translateY(-2.6em); }
.hfx-back-to-top-swap:is(:hover, :focus-visible) svg:nth-of-type(2) {
  transform: translateY(0);
  transition-delay: 0.05s;
}

.hfx-icon-expand-label {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: inline-grid;
  grid-template-columns: 1.4em 0fr;
  align-items: center;
  height: 3.5em;
  padding: 0 1.05em;
  border: 0;
  border-radius: 1.75em;
  background: var(--c);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0.35em 0.9em color-mix(in srgb, var(--c) 25%, transparent);
  transition: grid-template-columns 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-icon-expand-label svg {
  width: 1.4em;
  height: 1.4em;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-icon-expand-label-label {
  overflow: hidden;
  white-space: nowrap;
}
.hfx-icon-expand-label-label > span {
  display: block;
  padding: 0 0.3em 0 0.65em;
  opacity: 0;
  transform: translateX(-0.6em);
  transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hfx-icon-expand-label:is(:hover, :focus-visible) { grid-template-columns: 1.4em 1fr; }
.hfx-icon-expand-label:is(:hover, :focus-visible) svg { transform: rotate(-12deg); }
.hfx-icon-expand-label:is(:hover, :focus-visible) .hfx-icon-expand-label-label > span {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.1s;
}

.hfx-play-button-pulse {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  width: 3.75em;
  height: 3.75em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 0.4em color-mix(in srgb, var(--c) 18%, transparent);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;}
.hfx-play-button-pulse svg {
  position: relative;
  width: 1.6em;
  height: 1.6em;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* the same color as the button, so a ring is invisible until it grows past the edge */
.hfx-play-button-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 60%, transparent);
  pointer-events: none;
}
.hfx-play-button-pulse:is(:hover, :focus-visible) {
  transform: scale(1.06);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 18%, transparent);
}
.hfx-play-button-pulse:is(:hover, :focus-visible) svg { transform: scale(1.12); }
.hfx-play-button-pulse:is(:hover, :focus-visible) .hfx-play-button-pulse-ring {
  animation: hfx-play-button-pulse-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.hfx-play-button-pulse:is(:hover, :focus-visible) .hfx-play-button-pulse-ring:nth-child(2) { animation-delay: 0.5s; }
@keyframes hfx-play-button-pulse-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

.hfx-star-icon-sparkle {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-star-icon-sparkle svg {
  width: 1.6em;
  height: 1.6em;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-star-icon-sparkle svg path {
  fill: transparent;
  transition: fill 0.2s ease;
}
.hfx-star-icon-sparkle-spark {
  position: absolute;
  width: 0.95em;
  height: 0.95em;
  background: var(--c);
  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;
}
.hfx-star-icon-sparkle-spark:nth-of-type(1) { top: -0.35em; right: -0.3em; }
.hfx-star-icon-sparkle-spark:nth-of-type(2) { bottom: -0.1em; left: -0.45em; width: 0.7em; height: 0.7em; }
.hfx-star-icon-sparkle-spark:nth-of-type(3) { top: -0.25em; left: -0.05em; width: 0.55em; height: 0.55em; }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) svg { transform: rotate(72deg) scale(1.08); }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) svg path { fill: currentColor; }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) .hfx-star-icon-sparkle-spark {
  animation: hfx-star-icon-sparkle-twinkle 1.2s ease-in-out infinite;
}
.hfx-star-icon-sparkle:is(:hover, :focus-visible) .hfx-star-icon-sparkle-spark:nth-of-type(2) { animation-delay: 0.4s; }
.hfx-star-icon-sparkle:is(:hover, :focus-visible) .hfx-star-icon-sparkle-spark:nth-of-type(3) { animation-delay: 0.8s; }
@keyframes hfx-star-icon-sparkle-twinkle {
  0%, 100% { transform: scale(0) rotate(0deg); }
  50%      { transform: scale(1) rotate(90deg); }
}

.hfx-eye-icon-blink {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  border-radius: 0.85em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-eye-icon-blink svg {
  width: 1.65em;
  height: 1.65em;
}
.hfx-eye-icon-blink-eye,
.hfx-eye-icon-blink-pupil {
  transform-box: view-box;
  transform-origin: 50% 50%;
}
.hfx-eye-icon-blink:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-eye-icon-blink:is(:hover, :focus-visible) .hfx-eye-icon-blink-eye {
  animation: hfx-eye-icon-blink-lid 2.4s ease-in-out infinite;
}
.hfx-eye-icon-blink:is(:hover, :focus-visible) .hfx-eye-icon-blink-pupil {
  animation: hfx-eye-icon-blink-look 2.4s ease-in-out infinite;
}
@keyframes hfx-eye-icon-blink-lid {
  0%, 12%, 100% { transform: scaleY(1); }
  6%            { transform: scaleY(0.08); }
}
@keyframes hfx-eye-icon-blink-look {
  0%, 18%, 90%, 100% { transform: translateX(0); }
  30%, 45%           { transform: translateX(-11%); }
  60%, 78%           { transform: translateX(11%); }
}

.hfx-lock-icon-unlock {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  border-radius: 0.85em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease, color 0.25s ease;}
.hfx-lock-icon-unlock svg {
  width: 1.6em;
  height: 1.6em;
  overflow: visible;
}
.hfx-lock-icon-unlock-shackle {
  transform-box: view-box;
  transform-origin: 33.33% 50%;
  /* leaving: swing back first, then drop in */
  transition: scale 0.25s ease, translate 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}
.hfx-lock-icon-unlock:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
}
.hfx-lock-icon-unlock:is(:hover, :focus-visible) .hfx-lock-icon-unlock-shackle {
  translate: 0 -12.5%;
  scale: -1 1;
  /* entering: lift first, then swing */
  transition: translate 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), scale 0.35s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}

.hfx-cart-icon-add {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-cart-icon-add svg {
  width: 1.6em;
  height: 1.6em;
  overflow: visible;
}
.hfx-cart-icon-add-cart,
.hfx-cart-icon-add-item {
  transform-box: view-box;
  transform-origin: 56% 87.5%;
}
.hfx-cart-icon-add-item { opacity: 0; }
.hfx-cart-icon-add:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-cart-icon-add:is(:hover, :focus-visible) .hfx-cart-icon-add-item {
  animation: hfx-cart-icon-add-drop 0.8s both;
}
.hfx-cart-icon-add:is(:hover, :focus-visible) .hfx-cart-icon-add-cart {
  animation: hfx-cart-icon-add-rock 0.8s both;
}
@keyframes hfx-cart-icon-add-drop {
  0%   { opacity: 0; transform: translateY(-55%); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  15%  { opacity: 1; }
  40%  { opacity: 1; transform: translateY(0); animation-timing-function: ease-out; }
  55%  { opacity: 1; transform: translateY(-9%); animation-timing-function: ease-in; }
  70%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes hfx-cart-icon-add-rock {
  0%, 38% { transform: rotate(0deg); }
  50%     { transform: rotate(9deg); }
  64%     { transform: rotate(-5deg); }
  78%     { transform: rotate(2deg); }
  100%    { transform: rotate(0deg); }
}

.hfx-bookmark-icon-fill {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  border-radius: 0.85em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-bookmark-icon-fill svg {
  width: 1.6em;
  height: 1.6em;
  overflow: visible;
  transform-origin: 50% 0;
}
.hfx-bookmark-icon-fill-ink {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-bookmark-icon-fill:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-bookmark-icon-fill:is(:hover, :focus-visible) .hfx-bookmark-icon-fill-ink { clip-path: inset(0); }
.hfx-bookmark-icon-fill:is(:hover, :focus-visible) svg {
  animation: hfx-bookmark-icon-fill-stretch 0.6s ease-in-out;
}
@keyframes hfx-bookmark-icon-fill-stretch {
  0%, 100% { transform: scale(1, 1); }
  45%      { transform: scale(0.94, 1.14); }
  75%      { transform: scale(1.03, 0.97); }
}

.hfx-sun-moon-swap {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.4s ease, color 0.4s ease;}
.hfx-sun-moon-swap svg {
  grid-area: 1 / 1;
  width: 1.6em;
  height: 1.6em;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}
.hfx-sun-moon-swap-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.3);
}
.hfx-sun-moon-swap:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 30%, #0b1120);
  color: #fff;
}
.hfx-sun-moon-swap:is(:hover, :focus-visible) .hfx-sun-moon-swap-sun {
  opacity: 0;
  transform: rotate(90deg) scale(0.3);
}
.hfx-sun-moon-swap:is(:hover, :focus-visible) .hfx-sun-moon-swap-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.hfx-mail-icon-open {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  border-radius: 0.85em;
  background: var(--c);
  color: #fff;
  transition: box-shadow 0.3s ease;}
.hfx-mail-icon-open svg {
  width: 1.65em;
  height: 1.65em;
  overflow: visible;
  /* the closed envelope sits low in its box, so lift it to center; it drops back as the letter rises */
  transform: translateY(-0.26em);
  transition: transform 0.3s ease 0.1s;
}
/* filled with the button color so the body hides the letter inside it */
.hfx-mail-icon-open-body,
.hfx-mail-icon-open-letter rect { fill: var(--c); }
.hfx-mail-icon-open-back,
.hfx-mail-icon-open-front,
.hfx-mail-icon-open-letter {
  transform-box: view-box;
  transform-origin: 50% 45.83%;
}
/* leaving: letter in, back flap down, front flap closes */
.hfx-mail-icon-open-letter { transition: transform 0.2s ease-in; }
.hfx-mail-icon-open-back {
  transform: scaleY(0);
  transition: transform 0.15s ease-in 0.15s;
}
.hfx-mail-icon-open-front { transition: transform 0.15s ease-out 0.3s; }
.hfx-mail-icon-open-pocket {
  opacity: 0;
  transition: opacity 0.15s ease 0.25s;
}
.hfx-mail-icon-open:is(:hover, :focus-visible) { box-shadow: 0 0.45em 1em color-mix(in srgb, var(--c) 35%, transparent); }
.hfx-mail-icon-open:is(:hover, :focus-visible) svg {
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s;
}
/* entering: front flap folds up, back flap opens, letter rises */
.hfx-mail-icon-open:is(:hover, :focus-visible) .hfx-mail-icon-open-front {
  transform: scaleY(0);
  transition: transform 0.15s ease-in;
}
.hfx-mail-icon-open:is(:hover, :focus-visible) .hfx-mail-icon-open-pocket {
  opacity: 1;
  transition-delay: 0.1s;
}
.hfx-mail-icon-open:is(:hover, :focus-visible) .hfx-mail-icon-open-back {
  transform: scaleY(1);
  transition: transform 0.2s ease-out 0.15s;
}
.hfx-mail-icon-open:is(:hover, :focus-visible) .hfx-mail-icon-open-letter {
  transform: translateY(-41.67%);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s;
}

.hfx-bell-icon-badge {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-bell-icon-badge svg {
  width: 1.55em;
  height: 1.55em;
  overflow: visible;
}
.hfx-bell-icon-badge-clapper {
  transform-box: view-box;
}
.hfx-bell-icon-badge-count {
  position: absolute;
  top: 0.35em;
  right: 0.3em;
  display: grid;
  place-items: center;
  min-width: 1.7em;
  height: 1.7em;
  padding: 0 0.35em;
  border-radius: 1em;
  background: var(--c);
  color: transparent;
  font: 700 0.7em/1 system-ui, sans-serif;
  transform: scale(0.42);
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.15s ease;
}
.hfx-bell-icon-badge:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-bell-icon-badge:is(:hover, :focus-visible) .hfx-bell-icon-badge-count {
  color: #fff;
  transform: translate(0.35em, -0.45em) scale(1);
  transition-delay: 0s, 0.12s;
}
.hfx-bell-icon-badge:is(:hover, :focus-visible) .hfx-bell-icon-badge-clapper {
  animation: hfx-bell-icon-badge-swing 0.8s ease-in-out;
}
@keyframes hfx-bell-icon-badge-swing {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(9%); }
  45%      { transform: translateX(-7%); }
  70%      { transform: translateX(3%); }
}

.hfx-search-icon-scan {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-search-icon-scan svg {
  width: 1.6em;
  height: 1.6em;
  transition: scale 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-search-icon-scan-glint {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.hfx-search-icon-scan:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-search-icon-scan:is(:hover, :focus-visible) svg {
  scale: 1.12;
  animation: hfx-search-icon-scan-loop 1.4s linear infinite;
}
.hfx-search-icon-scan:is(:hover, :focus-visible) .hfx-search-icon-scan-glint { opacity: 1; }
/* a circle that passes through the rest position, so it starts without a jump */
@keyframes hfx-search-icon-scan-loop {
  from { transform: translateX(-0.14em) rotate(0turn) translateX(0.14em) rotate(0turn); }
  to   { transform: translateX(-0.14em) rotate(1turn) translateX(0.14em) rotate(-1turn); }
}

.hfx-chat-icon-typing {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-chat-icon-typing svg {
  width: 1.65em;
  height: 1.65em;
  overflow: visible;
}
.hfx-chat-icon-typing-bubble,
.hfx-chat-icon-typing-dot {
  transform-box: view-box;
  transform-origin: 12.5% 87.5%;
}
.hfx-chat-icon-typing-bubble {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-chat-icon-typing:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--c) 20%, transparent); }
.hfx-chat-icon-typing:is(:hover, :focus-visible) .hfx-chat-icon-typing-bubble { transform: scale(1.08); }
.hfx-chat-icon-typing:is(:hover, :focus-visible) .hfx-chat-icon-typing-dot {
  animation: hfx-chat-icon-typing-bob 1s ease-in-out infinite;
}
.hfx-chat-icon-typing:is(:hover, :focus-visible) .hfx-chat-icon-typing-dot:nth-of-type(2) { animation-delay: 0.15s; }
.hfx-chat-icon-typing:is(:hover, :focus-visible) .hfx-chat-icon-typing-dot:nth-of-type(3) { animation-delay: 0.3s; }
@keyframes hfx-chat-icon-typing-bob {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-12%); opacity: 1; }
}

.hfx-check-icon-draw {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  width: auto;
  height: auto;
  padding: 0.3em;
  background: transparent;
  color: var(--c);}
.hfx-check-icon-draw svg {
  width: 2.6em;
  height: 2.6em;
}
.hfx-check-icon-draw-base {
  stroke: color-mix(in srgb, var(--c) 35%, transparent);
}
.hfx-check-icon-draw-ring,
.hfx-check-icon-draw-tick {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.25s ease-in;
}
.hfx-check-icon-draw-ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.hfx-check-icon-draw:is(:hover, :focus-visible) .hfx-check-icon-draw-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-check-icon-draw:is(:hover, :focus-visible) .hfx-check-icon-draw-tick {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.3s cubic-bezier(0.3, 0, 0.2, 1) 0.4s;
}

.hfx-link-icon-chain {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5em;
  height: 3.5em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  border-radius: 0.85em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease, color 0.25s ease;}
.hfx-link-icon-chain svg {
  width: 1.55em;
  height: 1.55em;
  overflow: visible;
}
.hfx-link-icon-chain-a,
.hfx-link-icon-chain-b {
  transform-box: view-box;
}
.hfx-link-icon-chain:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
}
.hfx-link-icon-chain:is(:hover, :focus-visible) .hfx-link-icon-chain-a {
  animation: hfx-link-icon-chain-tug-a 1.3s infinite;
}
.hfx-link-icon-chain:is(:hover, :focus-visible) .hfx-link-icon-chain-b {
  animation: hfx-link-icon-chain-tug-b 1.3s infinite;
}
@keyframes hfx-link-icon-chain-tug-a {
  0%, 100% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  35%      { transform: translate(9%, -9%); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  52%      { transform: translate(-2%, 2%); animation-timing-function: ease-out; }
  64%      { transform: translate(0, 0); }
}
@keyframes hfx-link-icon-chain-tug-b {
  0%, 100% { transform: translate(0, 0); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  35%      { transform: translate(-9%, 9%); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.4); }
  52%      { transform: translate(2%, -2%); animation-timing-function: ease-out; }
  64%      { transform: translate(0, 0); }
}

.hfx-cube-flip-button {
  --c: var(--hfx-color, #3b82f6);
  font: 600 1em system-ui, sans-serif;
  font-size: var(--hfx-size, 16px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 30em;
}
.hfx-cube-flip-button-box {
  position: relative;
  display: block;
  width: 9em;
  height: 2.8em;
  transform-style: preserve-3d;
  transform: translateZ(-1.4em);
  transition: transform 0.5s cubic-bezier(0.34, 1.35, 0.64, 1);
}
.hfx-cube-flip-button-front,
.hfx-cube-flip-button-top {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 0.5em;
  backface-visibility: hidden;
}
.hfx-cube-flip-button-front {
  border: 2px solid var(--c);
  background: color-mix(in srgb, var(--c) 10%, #fff);
  color: color-mix(in srgb, var(--c) 80%, #000);
  transform: translateZ(1.4em);
}
.hfx-cube-flip-button-top {
  background: var(--c);
  color: #fff;
  transform: rotateX(90deg) translateZ(1.4em);
}
.hfx-cube-flip-button:is(:hover, :focus-visible) .hfx-cube-flip-button-box {
  transform: translateZ(-1.4em) rotateX(-90deg);
}

.hfx-split-flap-button {
  --c: var(--hfx-color, #3b82f6);
  font: 700 1em ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 9em;
  height: 2.8em;
  padding: 0;
  border: 0;
  border-radius: 0.45em;
  background: none;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  perspective: 14em;
}
.hfx-split-flap-button-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  display: flex;
  justify-content: center;
  padding-left: 0.08em;
  overflow: hidden;
  line-height: 2.8em;
  backface-visibility: hidden;
}
.hfx-split-flap-button-up {
  top: 0;
  align-items: flex-start;
  border-radius: 0.45em 0.45em 0 0;
  background: color-mix(in srgb, var(--c) 86%, #fff);
  box-shadow: inset 0 -1px color-mix(in srgb, var(--c) 60%, #000);
}
.hfx-split-flap-button-down {
  bottom: 0;
  align-items: flex-end;
  border-radius: 0 0 0.45em 0.45em;
  background: var(--c);
}
.hfx-split-flap-button-flap {
  position: absolute;
  inset: 0 0 50%;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.55, 0, 0.35, 1.2);
}
.hfx-split-flap-button-flap .hfx-split-flap-button-half {
  height: 100%;
}
.hfx-split-flap-button-back {
  top: 0;
  transform: rotateX(180deg);
}
.hfx-split-flap-button:is(:hover, :focus-visible) .hfx-split-flap-button-flap {
  transform: rotateX(-180deg);
}

.hfx-prism-button {
  --c: var(--hfx-color, #3b82f6);
  font: 600 1em system-ui, sans-serif;
  font-size: var(--hfx-size, 16px);
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  perspective: 30em;
}
.hfx-prism-button-prism {
  position: relative;
  display: block;
  width: 10.5em;
  height: 2.8em;
  transform-style: preserve-3d;
  transform: translateZ(-0.81em);
}
.hfx-prism-button-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 0.3em;
  background: var(--c);
  backface-visibility: hidden;
  transform: rotateX(calc(var(--i) * 120deg)) translateZ(0.81em);
}
.hfx-prism-button-face:nth-child(2) {
  background: color-mix(in srgb, var(--c) 78%, #000);
}
.hfx-prism-button-face:nth-child(3) {
  background: color-mix(in srgb, var(--c) 62%, #000);
}
.hfx-prism-button:is(:hover, :focus-visible) .hfx-prism-button-prism {
  animation: hfx-prism-button-roll 3.6s cubic-bezier(0.65, 0, 0.3, 1.25) infinite;
}
@keyframes hfx-prism-button-roll {
  0%        { transform: translateZ(-0.81em) rotateX(0deg); }
  12%, 33%  { transform: translateZ(-0.81em) rotateX(-120deg); }
  45%, 66%  { transform: translateZ(-0.81em) rotateX(-240deg); }
  78%, 100% { transform: translateZ(-0.81em) rotateX(-360deg); }
}

.hfx-vertical-flip-card {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 14em;
  height: 8em;
  perspective: 40em;
  font-family: system-ui, sans-serif;
}
.hfx-vertical-flip-card-inner {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.hfx-vertical-flip-card:hover .hfx-vertical-flip-card-inner {
  transform: rotateX(-180deg);
}
.hfx-vertical-flip-card-front,
.hfx-vertical-flip-card-back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.15em;
  padding: 1em 1.2em;
  border-radius: 0.8em;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hfx-vertical-flip-card-front {
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  color: #111827;
}
.hfx-vertical-flip-card-front strong {
  font-size: 1.15em;
}
.hfx-vertical-flip-card-front small {
  font-size: 0.8em;
  color: #6b7280;
}
.hfx-vertical-flip-card-logo {
  position: absolute;
  top: 1.2em;
  left: 1.4em;
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 0.6em;
  background: var(--c);
  color: #fff;
  font-size: 0.85em;
  font-weight: 800;
}
.hfx-vertical-flip-card-back {
  justify-content: center;
  gap: 0.4em;
  background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 65%, #000));
  color: #fff;
  font-size: 0.9em;
  transform: rotateX(180deg);
}
.hfx-vertical-flip-card-back span::before {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-right: 0.6em;
  border-radius: 50%;
  background: color-mix(in srgb, #fff 70%, transparent);
  vertical-align: 0.1em;
}

.hfx-door-open-card {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 7.2em;
  height: 10em;
  padding: 0.4em 0.4em 0;
  border-radius: 0.5em 0.5em 0 0;
  background: color-mix(in srgb, var(--c) 55%, #000);
  perspective: 25em;
  font-family: system-ui, sans-serif;
}
.hfx-door-open-card::after {
  content: "";
  position: absolute;
  left: -0.6em;
  right: -0.6em;
  bottom: -0.3em;
  height: 0.3em;
  border-radius: 0.15em;
  background: color-mix(in srgb, var(--c) 40%, #000);
}
.hfx-door-open-card-room {
  display: grid;
  place-content: center;
  gap: 0.15em;
  height: 100%;
  text-align: center;
  border-radius: 0.25em 0.25em 0 0;
  background: radial-gradient(130% 90% at 50% 100%, #fffbeb, #fde68a 55%, #f59e0b);
  color: color-mix(in srgb, var(--c) 45%, #000);
  padding-left: 1.2em;
}
.hfx-door-open-card-room strong {
  font-size: 1.2em;
}
.hfx-door-open-card-room span {
  font-size: 0.75em;
  opacity: 0.8;
}
.hfx-door-open-card-door {
  position: absolute;
  inset: 0.4em 0.4em 0;
  border-radius: 0.25em 0.25em 0 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 80%, #000), var(--c) 0.8em);
  transform-origin: 0 50%;
  transition: transform 0.75s cubic-bezier(0.55, 0, 0.2, 1), filter 0.75s ease;
}
.hfx-door-open-card-door::before,
.hfx-door-open-card-door::after {
  content: "";
  position: absolute;
  left: 0.75em;
  right: 0.75em;
  border: 1px solid color-mix(in srgb, #fff 30%, transparent);
  border-radius: 0.2em;
  background: color-mix(in srgb, var(--c) 88%, #000);
  box-shadow: inset 0 0.25em 0.4em color-mix(in srgb, #000 25%, transparent);
}
.hfx-door-open-card-door::before {
  top: 1.9em;
  height: 2.5em;
}
.hfx-door-open-card-door::after {
  top: 5em;
  bottom: 0.9em;
}
.hfx-door-open-card-plate {
  position: absolute;
  top: 0.55em;
  left: 50%;
  padding: 0.05em 0.45em;
  border-radius: 0.3em;
  background: #fef3c7;
  color: #78350f;
  font-size: 0.7em;
  font-weight: 700;
  white-space: nowrap;
  transform: translateX(-50%);
}
.hfx-door-open-card-knob {
  position: absolute;
  top: 55%;
  right: 0.5em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffbe6, #d4a017);
  box-shadow: 0 0.1em 0.15em color-mix(in srgb, #000 35%, transparent);
}
.hfx-door-open-card:hover .hfx-door-open-card-door {
  transform: rotateY(84deg);
  filter: brightness(0.7);
}

.hfx-book-3d {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  perspective: 40em;
  font-family: Georgia, "Times New Roman", serif;
}
.hfx-book-3d::before {
  content: "";
  position: absolute;
  left: -0.5em;
  right: -0.5em;
  bottom: -0.7em;
  height: 1.2em;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, #000 22%, transparent), transparent);
}
.hfx-book-3d-book {
  position: relative;
  width: 6.4em;
  height: 9em;
  transform-style: preserve-3d;
  transform: rotateY(-30deg);
  transition: transform 0.7s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.hfx-book-3d:hover .hfx-book-3d-book {
  transform: rotateY(34deg);
}
.hfx-book-3d-cover,
.hfx-book-3d-back {
  position: absolute;
  inset: 0;
  border-radius: 0.15em 0.4em 0.4em 0.15em;
}
.hfx-book-3d-cover {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25em;
  padding: 0 0.7em 0 1.1em;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000) 0 0.3em, color-mix(in srgb, var(--c) 70%, #fff) 0.3em 0.38em, var(--c) 0.38em);
  color: #fff;
  transform: translateZ(0.7em);
}
.hfx-book-3d-cover small {
  font-size: 0.62em;
  white-space: nowrap;
  font-style: italic;
  opacity: 0.85;
}
.hfx-book-3d-cover strong {
  font-size: 1.3em;
  line-height: 1;
}
.hfx-book-3d-cover span {
  margin-top: 1.6em;
  font: 600 0.6em system-ui, sans-serif;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.85;
}
.hfx-book-3d-back {
  background: color-mix(in srgb, var(--c) 65%, #000);
  transform: translateZ(-0.7em) rotateY(180deg);
}
.hfx-book-3d-spine,
.hfx-book-3d-pages {
  position: absolute;
  top: 0;
  width: 1.4em;
  height: 100%;
}
.hfx-book-3d-spine {
  left: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, #000), color-mix(in srgb, var(--c) 85%, #000) 50%, color-mix(in srgb, var(--c) 60%, #000));
  color: #fff;
  transform: translateX(-0.7em) rotateY(-90deg);
}
.hfx-book-3d-spine span {
  writing-mode: vertical-rl;
  font: 700 0.62em system-ui, sans-serif;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.hfx-book-3d-pages {
  top: 2%;
  right: 0;
  height: 96%;
  background: repeating-linear-gradient(90deg, #fbf8f1 0 0.1em, #e2dccd 0.1em 0.13em);
  transform: translateX(0.7em) rotateY(90deg);
}

.hfx-page-turn {
  --c: var(--hfx-color, #3b82f6);
  --line: color-mix(in srgb, var(--c) 18%, transparent);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: flex;
  width: 13em;
  height: 8.4em;
  padding: 0.3em;
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--c) 75%, #000);
  perspective: 50em;
  font-family: system-ui, sans-serif;
}
.hfx-page-turn-page {
  position: relative;
  flex: 1;
  background:
    repeating-linear-gradient(transparent 0 0.5em, var(--line) 0.5em 0.6em) 0.7em 1.9em / calc(100% - 1.4em) 4.7em no-repeat,
    linear-gradient(var(--line), var(--line)) 0.7em 0.9em / 55% 0.55em no-repeat,
    #fffdf8;
}
.hfx-page-turn-page b {
  position: absolute;
  bottom: 0.4em;
  font-size: 0.6em;
  color: color-mix(in srgb, var(--c) 50%, #6b7280);
}
.hfx-page-turn-left,
.hfx-page-turn-back {
  border-radius: 0.2em 0 0 0.2em;
  box-shadow: inset -1.2em 0 1em -1em color-mix(in srgb, #000 30%, transparent);
}
.hfx-page-turn-under,
.hfx-page-turn-front {
  border-radius: 0 0.2em 0.2em 0;
  box-shadow: inset 1.2em 0 1em -1em color-mix(in srgb, #000 30%, transparent);
}
.hfx-page-turn-left b,
.hfx-page-turn-back b {
  left: 1.1em;
}
.hfx-page-turn-under b,
.hfx-page-turn-front b {
  right: 1.1em;
}
.hfx-page-turn-back {
  background:
    radial-gradient(circle at 70% 35%, #fef3c7 0 0.45em, transparent 0.5em) 0.7em 0.7em / calc(100% - 1.4em) 3.6em no-repeat,
    linear-gradient(160deg, color-mix(in srgb, var(--c) 35%, #fff), var(--c)) 0.7em 0.7em / calc(100% - 1.4em) 3.6em no-repeat,
    repeating-linear-gradient(transparent 0 0.5em, var(--line) 0.5em 0.6em) 0.7em 4.5em / calc(100% - 1.4em) 2.1em no-repeat,
    #fffdf8;
}
.hfx-page-turn-leaf {
  position: absolute;
  top: 0.3em;
  bottom: 0.3em;
  left: 50%;
  right: 0.3em;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1);
}
.hfx-page-turn-leaf .hfx-page-turn-page {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.hfx-page-turn-leaf .hfx-page-turn-back {
  transform: rotateY(180deg);
}
.hfx-page-turn:hover .hfx-page-turn-leaf {
  transform: rotateY(-180deg);
}

.hfx-paper-fold {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 13em;
  height: 8.1em;
  perspective: 35em;
  font-family: system-ui, sans-serif;
}
.hfx-paper-fold-panel {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.7em;
  padding: 0 1em;
  transform-style: preserve-3d;
  background:
    radial-gradient(circle at 78% 44%, #fef3c7 0 5%, transparent 5.5%),
    linear-gradient(color-mix(in srgb, var(--c) 25%, #fff), color-mix(in srgb, var(--c) 60%, #fff) 54%, var(--c) 54.5%, color-mix(in srgb, var(--c) 60%, #000));
  background-size: 100% 300%;
  transition: transform 0.6s cubic-bezier(0.3, 1.15, 0.4, 1);
}
.hfx-paper-fold-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #000;
  opacity: 0.2;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.hfx-paper-fold-p1 {
  border-radius: 0.5em 0.5em 0 0;
  background-position: 0 0;
  transform-origin: 50% 0;
  transform: rotateX(34deg);
}
.hfx-paper-fold-p2,
.hfx-paper-fold-p3 {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  transform-origin: 50% 0;
}
.hfx-paper-fold-p2 {
  background-position: 0 50%;
  transform: rotateX(-68deg);
  transition-delay: 0.04s;
}
.hfx-paper-fold-p2::after {
  background: #fff;
  opacity: 0.15;
}
.hfx-paper-fold-p3 {
  border-radius: 0 0 0.5em 0.5em;
  background-position: 0 100%;
  transform: rotateX(68deg);
  transition-delay: 0.08s;
}
.hfx-paper-fold small {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 70%, #000);
}
.hfx-paper-fold strong {
  font-size: 1.5em;
  color: #fff;
  text-shadow: 0 0.05em 0.2em color-mix(in srgb, #000 30%, transparent);
}
.hfx-paper-fold span {
  font-size: 0.8em;
  color: #fff;
}
.hfx-paper-fold:hover .hfx-paper-fold-panel {
  transform: rotateX(0deg);
}
.hfx-paper-fold:hover .hfx-paper-fold-panel::after {
  opacity: 0;
}

.hfx-envelope-open {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 11em;
  height: 6.2em;
  margin-top: 1.8em;
  perspective: 30em;
  font-family: system-ui, sans-serif;
  filter: drop-shadow(0 0.4em 0.5em color-mix(in srgb, var(--c) 25%, transparent));
}
.hfx-envelope-open-back,
.hfx-envelope-open-pocket,
.hfx-envelope-open-flap {
  position: absolute;
  inset: 0;
  border-radius: 0.4em;
}
.hfx-envelope-open-back {
  background: color-mix(in srgb, var(--c) 70%, #fff);
}
.hfx-envelope-open-letter {
  position: absolute;
  z-index: 1;
  top: 0.4em;
  left: 0.8em;
  right: 0.8em;
  height: 5em;
  padding: 0.8em 0.9em;
  border-radius: 0.3em;
  background: #fff;
  transition: transform 0.3s cubic-bezier(0.5, 0, 1, 1);
}
.hfx-envelope-open-letter strong {
  display: block;
  font-size: 0.85em;
  color: color-mix(in srgb, var(--c) 80%, #000);
}
.hfx-envelope-open-letter span {
  display: block;
  height: 0.3em;
  margin-top: 0.5em;
  border-radius: 1em;
  background: color-mix(in srgb, var(--c) 20%, transparent);
}
.hfx-envelope-open-letter span:last-child {
  width: 60%;
}
.hfx-envelope-open-pocket {
  z-index: 2;
  background: linear-gradient(color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 34%, #fff));
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
}
.hfx-envelope-open-flap {
  z-index: 3;
  bottom: auto;
  height: 60%;
  border-radius: 0.4em 0.4em 0 0;
  background: linear-gradient(color-mix(in srgb, var(--c) 38%, #fff), color-mix(in srgb, var(--c) 50%, #fff));
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.25s, z-index 0s 0.25s;
}
.hfx-envelope-open:hover .hfx-envelope-open-flap {
  z-index: 0;
  transform: rotateX(180deg);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), z-index 0s 0.2s;
}
.hfx-envelope-open:hover .hfx-envelope-open-letter {
  transform: translateY(-2.9em);
  transition: transform 0.5s cubic-bezier(0.3, 1.4, 0.5, 1) 0.3s;
}

.hfx-tile-flip-grid {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  grid-template-columns: repeat(5, 2.4em);
  grid-auto-rows: 2.4em;
  gap: 0.15em;
  perspective: 40em;
}
.hfx-tile-flip-grid span {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.45, 0, 0.2, 1.15);
  transition-delay: calc((var(--x) + var(--y)) * 0.06s);
}
.hfx-tile-flip-grid span::before,
.hfx-tile-flip-grid span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0.3em;
  backface-visibility: hidden;
}
.hfx-tile-flip-grid span::before {
  background:
    radial-gradient(circle at 74% 30%, color-mix(in srgb, var(--c) 40%, #0b1120) 0 8%, transparent 8.5%),
    radial-gradient(circle at 70% 32%, #f8fafc 0 9%, transparent 9.5%),
    radial-gradient(circle at 18% 22%, #fff 0 0.8%, transparent 1.2%),
    radial-gradient(circle at 36% 12%, #fff 0 0.6%, transparent 1%),
    radial-gradient(circle at 52% 40%, #fff 0 0.6%, transparent 1%),
    radial-gradient(circle at 90% 12%, #fff 0 0.7%, transparent 1.1%),
    radial-gradient(70% 50% at 25% 100%, color-mix(in srgb, var(--c) 45%, #020617) 99%, transparent),
    radial-gradient(60% 40% at 85% 100%, color-mix(in srgb, var(--c) 30%, #020617) 99%, transparent),
    linear-gradient(color-mix(in srgb, var(--c) 40%, #0b1120), color-mix(in srgb, var(--c) 60%, #1e1b4b));
  background-size: 500% 300%;
  background-position: calc(var(--x) * 25%) calc(var(--y) * 50%);
}
.hfx-tile-flip-grid span::after {
  background:
    radial-gradient(circle at 70% 32%, #fffbeb 0 8%, color-mix(in srgb, #fde047 45%, transparent) 8.5% 13%, transparent 13.5%),
    radial-gradient(70% 50% at 25% 100%, color-mix(in srgb, var(--c) 80%, #000) 99%, transparent),
    radial-gradient(60% 40% at 85% 100%, color-mix(in srgb, var(--c) 60%, #000) 99%, transparent),
    linear-gradient(color-mix(in srgb, var(--c) 20%, #fff), color-mix(in srgb, var(--c) 50%, #fff));
  background-size: 500% 300%;
  background-position: calc(var(--x) * 25%) calc(var(--y) * 50%);
  transform: rotateY(180deg);
}
.hfx-tile-flip-grid:hover span {
  transform: rotateY(180deg);
}

.hfx-accordion-fold-image {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  perspective: 30em;
}
.hfx-accordion-fold-image span {
  position: relative;
  width: 2.6em;
  height: 8em;
  background:
    radial-gradient(circle at 30% 34%, #fffbeb 0 9%, transparent 9.5%),
    radial-gradient(60% 42% at 18% 100%, color-mix(in srgb, var(--c) 75%, #000) 98%, transparent),
    radial-gradient(70% 55% at 78% 100%, color-mix(in srgb, var(--c) 55%, #000) 98%, transparent),
    radial-gradient(90% 62% at 48% 100%, color-mix(in srgb, var(--c) 70%, #fff) 98%, transparent),
    linear-gradient(color-mix(in srgb, var(--c) 18%, #fff), color-mix(in srgb, var(--c) 45%, #fff));
  background-size: 500% 100%;
  background-position: calc(var(--i) * 25%) 0;
  transition: transform 0.5s cubic-bezier(0.35, 1.1, 0.45, 1);
}
.hfx-accordion-fold-image span:first-child {
  border-radius: 0.6em 0 0 0.6em;
}
.hfx-accordion-fold-image span:last-child {
  border-radius: 0 0.6em 0.6em 0;
}
.hfx-accordion-fold-image span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hfx-accordion-fold-image span:nth-child(even)::after {
  background: #000;
}
.hfx-accordion-fold-image:hover span:nth-child(odd) {
  transform: translateX(calc((2 - var(--i)) * 0.61em)) rotateY(40deg);
}
.hfx-accordion-fold-image:hover span:nth-child(even) {
  transform: translateX(calc((2 - var(--i)) * 0.61em)) rotateY(-40deg);
}
.hfx-accordion-fold-image:hover span::after {
  opacity: 0.12;
}
.hfx-accordion-fold-image:hover span:nth-child(even)::after {
  opacity: 0.28;
}

.hfx-depth-layers-card {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  perspective: 40em;
  font-family: system-ui, sans-serif;
}
.hfx-depth-layers-card-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 14em;
  height: 8.6em;
  padding: 1em 1.1em;
  color: #fff;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.hfx-depth-layers-card-card > * {
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.5, 1), box-shadow 0.5s ease;
}
.hfx-depth-layers-card-bg,
.hfx-depth-layers-card-ridge {
  position: absolute;
  inset: 0;
  border-radius: 0.9em;
}
.hfx-depth-layers-card-bg {
  background:
    radial-gradient(80% 60% at 25% 5%, color-mix(in srgb, var(--c) 40%, #6ee7b7), transparent 75%),
    radial-gradient(55% 50% at 85% 10%, color-mix(in srgb, var(--c) 50%, #f0abfc), transparent 75%),
    linear-gradient(170deg, color-mix(in srgb, var(--c) 70%, #1e1b4b), color-mix(in srgb, var(--c) 35%, #020617));
  box-shadow: 0 0.8em 1.6em color-mix(in srgb, var(--c) 25%, transparent);
}
.hfx-depth-layers-card-ridge {
  top: auto;
  height: 55%;
  border-radius: 0 0 0.9em 0.9em;
  background: linear-gradient(color-mix(in srgb, var(--c) 18%, #020617), #020617);
  clip-path: polygon(0 45%, 18% 20%, 32% 38%, 52% 0, 70% 30%, 84% 14%, 100% 36%, 100% 100%, 0 100%);
}
.hfx-depth-layers-card-badge {
  position: absolute;
  top: 1em;
  right: 1.1em;
  padding: 0.2em 0.6em;
  border-radius: 1em;
  background: #fff;
  color: color-mix(in srgb, var(--c) 80%, #000);
  font-size: 0.7em;
  font-weight: 700;
}
.hfx-depth-layers-card h3 {
  position: relative;
  margin: 0;
  font-size: 1.2em;
  text-shadow: 0 0.1em 0.4em color-mix(in srgb, #000 35%, transparent);
}
.hfx-depth-layers-card p {
  position: relative;
  margin: 0.15em 0 0.7em;
  font-size: 0.78em;
  opacity: 0.8;
}
.hfx-depth-layers-card-cta {
  position: relative;
  padding: 0.35em 0.9em;
  border-radius: 0.5em;
  background: var(--c);
  font-size: 0.8em;
  font-weight: 600;
}
.hfx-depth-layers-card:hover .hfx-depth-layers-card-card {
  transform: rotateX(12deg) rotateY(18deg);
}
.hfx-depth-layers-card:hover .hfx-depth-layers-card-ridge { transform: translateZ(1.2em); }
.hfx-depth-layers-card:hover h3 { transform: translateZ(3.2em); }
.hfx-depth-layers-card:hover p { transform: translateZ(2.4em); }
.hfx-depth-layers-card:hover .hfx-depth-layers-card-badge { transform: translateZ(4.4em); }
.hfx-depth-layers-card:hover .hfx-depth-layers-card-cta {
  transform: translateZ(4em);
  box-shadow: -0.5em 0.6em 0.9em color-mix(in srgb, #000 35%, transparent);
}

.hfx-notification-stack-3d {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 16em;
  height: 11em;
  perspective: 30em;
  font-family: system-ui, sans-serif;
}
.hfx-notification-stack-3d-card {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  z-index: calc(3 - var(--i));
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 3.3em;
  margin-top: -1.65em;
  padding: 0 0.9em;
  border: 1px solid color-mix(in srgb, var(--c) 15%, transparent);
  border-radius: 0.9em;
  background: #fff;
  box-shadow: 0 0.4em 1em color-mix(in srgb, #000 10%, transparent);
  color: #111827;
  opacity: calc(1 - var(--i) * 0.2);
  transform: translateY(calc(var(--i) * 0.6em)) translateZ(calc(var(--i) * -1.4em));
  transition: transform 0.55s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.3s ease;
  transition-delay: calc(var(--i) * 0.04s);
}
.hfx-notification-stack-3d-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.55em;
  background: var(--c);
  color: #fff;
  font-size: 0.9em;
  font-weight: 700;
}
.hfx-notification-stack-3d-card div {
  flex: 1;
  min-width: 0;
}
.hfx-notification-stack-3d-card strong {
  display: block;
  font-size: 0.8em;
}
.hfx-notification-stack-3d-card p {
  margin: 0;
  overflow: hidden;
  font-size: 0.72em;
  color: #6b7280;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hfx-notification-stack-3d-card time {
  align-self: flex-start;
  margin-top: 0.9em;
  font-size: 0.65em;
  color: #9ca3af;
}
.hfx-notification-stack-3d:hover .hfx-notification-stack-3d-card {
  opacity: 1;
  transform: translateY(calc((var(--i) - 1) * 3.6em));
}

.hfx-gift-box-open {
  --c: var(--hfx-color, #3b82f6);
  --ribbon: #fcd34d;
  font-size: var(--hfx-size, 16px);
  display: grid;
  place-items: center;
  width: 11em;
  height: 12em;
  perspective: 40em;
}
.hfx-gift-box-open-box {
  position: relative;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateY(2.4em) rotateX(-22deg) rotateY(-35deg);
}
.hfx-gift-box-open-box div,
.hfx-gift-box-open-box svg {
  position: absolute;
}
.hfx-gift-box-open-front,
.hfx-gift-box-open-side {
  left: -2.5em;
  top: -2em;
  width: 5em;
  height: 4em;
}
.hfx-gift-box-open-front {
  background: linear-gradient(90deg, transparent 42%, var(--ribbon) 42% 58%, transparent 58%), var(--c);
  transform: translateZ(2.5em);
}
.hfx-gift-box-open-side {
  background: linear-gradient(90deg, transparent 42%, #d4a017 42% 58%, transparent 58%), color-mix(in srgb, var(--c) 70%, #000);
  transform: rotateY(90deg) translateZ(2.5em);
}
.hfx-gift-box-open-inside {
  left: -2.5em;
  top: -2.5em;
  width: 5em;
  height: 5em;
  background: color-mix(in srgb, var(--c) 40%, #000);
  transform: translateY(-2em) rotateX(90deg);
}
.hfx-gift-box-open-lid {
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: translateY(-2em);
  transition: transform 0.55s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.hfx-gift-box-open-lid-top {
  left: -2.75em;
  top: -2.75em;
  width: 5.5em;
  height: 5.5em;
  background:
    linear-gradient(90deg, transparent 42%, var(--ribbon) 42% 58%, transparent 58%),
    linear-gradient(transparent 42%, var(--ribbon) 42% 58%, transparent 58%),
    color-mix(in srgb, var(--c) 80%, #fff);
  transform: translateY(-0.9em) rotateX(90deg);
}
.hfx-gift-box-open-lid-front,
.hfx-gift-box-open-lid-side {
  left: -2.75em;
  top: -0.9em;
  width: 5.5em;
  height: 0.9em;
}
.hfx-gift-box-open-lid-front {
  background: linear-gradient(90deg, transparent 42%, var(--ribbon) 42% 58%, transparent 58%), color-mix(in srgb, var(--c) 90%, #000);
  transform: translateZ(2.75em);
}
.hfx-gift-box-open-lid-side {
  background: linear-gradient(90deg, transparent 42%, #d4a017 42% 58%, transparent 58%), color-mix(in srgb, var(--c) 62%, #000);
  transform: rotateY(90deg) translateZ(2.75em);
}
.hfx-gift-box-open-bow {
  left: -1.5em;
  top: -2.55em;
  width: 3em;
  height: 1.75em;
  fill: var(--ribbon);
  stroke: #d4a017;
  stroke-width: 1.5;
}
.hfx-gift-box-open-spark {
  left: -1.4em;
  top: -1.4em;
  width: 2.8em;
  height: 2.8em;
  fill: var(--ribbon);
  opacity: 0;
  transform: translateY(-1.5em) scale(0.2);
  transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1), opacity 0.2s ease;
}
.hfx-gift-box-open:hover .hfx-gift-box-open-lid {
  transform: translateY(-4.4em) rotateX(-16deg) rotateZ(-12deg);
}
.hfx-gift-box-open:hover .hfx-gift-box-open-spark {
  opacity: 1;
  transform: translateY(-4.2em) scale(1);
  transition-delay: 0.12s;
}

.hfx-isometric-card {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  perspective: 80em;
  font-family: system-ui, sans-serif;
}
.hfx-isometric-card-plane {
  position: relative;
  width: 9em;
  height: 6em;
  transform-style: preserve-3d;
  transform: rotateX(55deg) rotateZ(-45deg);
}
.hfx-isometric-card-shadow {
  position: absolute;
  inset: 0;
  border-radius: 0.5em;
  background: color-mix(in srgb, var(--c) 40%, #000);
  opacity: 0.3;
  filter: blur(0.25em);
  transform: translate(-0.2em, 0.2em);
  transition: transform 0.45s ease, opacity 0.45s ease, filter 0.45s ease;
}
.hfx-isometric-card-slab {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(0.5em);
  transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.hfx-isometric-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0.9em 1em;
  border-radius: 0.5em;
  background: #fff;
  color: #111827;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
}
.hfx-isometric-card-icon {
  position: absolute;
  top: 0.9em;
  left: 1em;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.5em;
  background: var(--c);
  color: #fff;
}
.hfx-isometric-card-icon svg {
  width: 1.1em;
  height: 1.1em;
}
.hfx-isometric-card-face strong {
  font-size: 1em;
}
.hfx-isometric-card-face small {
  font-size: 0.75em;
  color: #6b7280;
}
.hfx-isometric-card-side-y,
.hfx-isometric-card-side-x {
  position: absolute;
}
.hfx-isometric-card-side-y {
  top: 100%;
  left: 0.2em;
  right: 0.2em;
  height: 0.5em;
  background: color-mix(in srgb, var(--c) 55%, #fff);
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}
.hfx-isometric-card-side-x {
  top: 0.2em;
  bottom: 0.2em;
  right: 100%;
  width: 0.5em;
  background: var(--c);
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}
.hfx-isometric-card:hover .hfx-isometric-card-slab {
  transform: translateZ(2.4em);
}
.hfx-isometric-card:hover .hfx-isometric-card-shadow {
  opacity: 0.18;
  filter: blur(0.6em);
  transform: translate(-1.1em, 1.1em);
}

.hfx-venetian-blinds {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 13em;
  height: 8.4em;
  overflow: hidden;
  border: 0.35em solid color-mix(in srgb, var(--c) 55%, #1f2937);
  border-radius: 0.5em;
  perspective: 30em;
  font-family: system-ui, sans-serif;
}
.hfx-venetian-blinds::after {
  content: "";
  position: absolute;
  top: 0;
  right: 1em;
  width: 1px;
  height: 62%;
  background: color-mix(in srgb, var(--c) 50%, #000);
  box-shadow: 0 0 0 0.12em color-mix(in srgb, var(--c) 20%, transparent);
}
.hfx-venetian-blinds-view {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.2em;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 50% 115%, #fffbeb 0 22%, #fcd34d 30%, transparent 62%),
    linear-gradient(color-mix(in srgb, var(--c) 70%, #1e1b4b), color-mix(in srgb, var(--c) 35%, #fb923c));
}
.hfx-venetian-blinds-view strong {
  font-size: 1.3em;
  text-shadow: 0 0.05em 0.3em color-mix(in srgb, #000 25%, transparent);
}
.hfx-venetian-blinds-view span {
  font-size: 0.75em;
  opacity: 0.85;
}
.hfx-venetian-blinds-slat {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--i) * 100% / 7);
  height: calc(100% / 7 + 1px);
  background: linear-gradient(color-mix(in srgb, var(--c) 8%, #fff), color-mix(in srgb, var(--c) 30%, #fff));
  box-shadow: inset 0 -1px color-mix(in srgb, var(--c) 45%, #fff);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(var(--i) * 0.04s);
}
.hfx-venetian-blinds:hover .hfx-venetian-blinds-slat {
  transform: rotateX(-87deg);
}

.hfx-pop-up-card {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  place-items: center;
  width: 13em;
  height: 11em;
  perspective: 40em;
  font-family: system-ui, sans-serif;
}
.hfx-pop-up-card-table {
  position: relative;
  width: 11em;
  height: 5em;
  transform-style: preserve-3d;
  transform: translateY(1.4em) rotateX(58deg);
}
.hfx-pop-up-card-base,
.hfx-pop-up-card-inside,
.hfx-pop-up-card-outside {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  backface-visibility: hidden;
}
.hfx-pop-up-card-base {
  align-items: end;
  padding-bottom: 0.8em;
  border-radius: 0 0 0.4em 0.4em;
  background: color-mix(in srgb, var(--c) 6%, #fff);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent), 0 1em 1.5em color-mix(in srgb, #000 12%, transparent);
  color: color-mix(in srgb, var(--c) 80%, #000);
  font-weight: 700;
}
.hfx-pop-up-card-cover {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transform: rotateX(-178deg);
  transition: transform 0.7s cubic-bezier(0.3, 1.25, 0.5, 1);
}
.hfx-pop-up-card-inside {
  border-radius: 0.4em 0.4em 0 0;
  background: linear-gradient(color-mix(in srgb, var(--c) 18%, #fff), color-mix(in srgb, var(--c) 6%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
}
.hfx-pop-up-card-outside {
  border-radius: 0.4em 0.4em 0 0;
  background:
    radial-gradient(circle, color-mix(in srgb, #fff 35%, transparent) 0 0.12em, transparent 0.15em) 0 0 / 0.9em 0.9em,
    var(--c);
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  transform: rotateX(180deg);
}
.hfx-pop-up-card-heart {
  position: absolute;
  left: 50%;
  top: -1.6em;
  width: 3.4em;
  height: 3.2em;
  margin-left: -1.7em;
  fill: var(--c);
  transform-origin: 50% 100%;
  transform: rotateX(0deg) scale(0);
  transition: transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.hfx-pop-up-card:hover .hfx-pop-up-card-cover {
  transform: rotateX(-80deg);
}
.hfx-pop-up-card:hover .hfx-pop-up-card-heart {
  transform: rotateX(-90deg) scale(1);
  transition-delay: 0.15s;
}

.hfx-stand-up-card {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  perspective: 40em;
  font-family: system-ui, sans-serif;
}
.hfx-stand-up-card-card {
  position: relative;
  width: 13em;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #000 10%, transparent);
  border-radius: 0.75em;
  background: #fff;
  color: #1f2937;
  transform-origin: 50% 100%;
  transform: rotateX(48deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.6s ease;
}
.hfx-stand-up-card-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(color-mix(in srgb, #000 18%, transparent), transparent 70%);
  transition: opacity 0.6s ease;
}
.hfx-stand-up-card-image {
  height: 5em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c));
}
.hfx-stand-up-card-body {
  padding: 0.8em 1em 1em;
}
.hfx-stand-up-card h3 {
  margin: 0 0 0.2em;
  font-size: 1.05em;
}
.hfx-stand-up-card p {
  margin: 0;
  font-size: 0.85em;
  color: #6b7280;
}
.hfx-stand-up-card:hover .hfx-stand-up-card-card {
  transform: rotateX(0deg);
  box-shadow: 0 1em 1.6em color-mix(in srgb, #000 15%, transparent);
}
.hfx-stand-up-card:hover .hfx-stand-up-card-card::after {
  opacity: 0;
}

.hfx-push-in-card {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 14em;
  height: 8em;
  border: 0.45em solid color-mix(in srgb, var(--c) 14%, #fff);
  border-radius: 1em;
  perspective: 14em;
  transform-style: preserve-3d;
  font-family: system-ui, sans-serif;
}
.hfx-push-in-card-wall {
  position: absolute;
}
.hfx-push-in-card-top,
.hfx-push-in-card-bottom {
  left: 0;
  right: 0;
  height: 1.8em;
}
.hfx-push-in-card-left,
.hfx-push-in-card-right {
  top: 0;
  bottom: 0;
  width: 1.8em;
}
.hfx-push-in-card-top {
  top: 0;
  background: linear-gradient(color-mix(in srgb, var(--c) 40%, #111827), color-mix(in srgb, var(--c) 25%, #6b7280));
  transform-origin: 50% 0;
  transform: rotateX(-90deg);
}
.hfx-push-in-card-bottom {
  bottom: 0;
  background: linear-gradient(color-mix(in srgb, var(--c) 15%, #e5e7eb), color-mix(in srgb, var(--c) 8%, #fff));
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
}
.hfx-push-in-card-left {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, #4b5563), color-mix(in srgb, var(--c) 20%, #9ca3af));
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}
.hfx-push-in-card-right {
  right: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, #9ca3af), color-mix(in srgb, var(--c) 30%, #4b5563));
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}
.hfx-push-in-card-tile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  border-radius: 0.55em;
  background: #fff;
  color: #111827;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent);
  transition: transform 0.35s cubic-bezier(0.3, 1.35, 0.5, 1);
}
.hfx-push-in-card-tile svg {
  width: 1.6em;
  height: 1.6em;
  margin-bottom: 0.2em;
  color: var(--c);
}
.hfx-push-in-card-tile strong {
  font-size: 0.95em;
}
.hfx-push-in-card-tile small {
  font-size: 0.7em;
  color: #6b7280;
}
.hfx-push-in-card:hover .hfx-push-in-card-tile {
  transform: translateZ(-1.8em);
}

.hfx-cover-flow {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 18em;
  height: 5.6em;
  perspective: 30em;
  font-family: system-ui, sans-serif;
}
.hfx-cover-flow-cover {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: flex-end;
  width: 5.6em;
  height: 5.6em;
  margin-left: -2.8em;
  padding: 0.5em 0.6em;
  border-radius: 0.3em;
  color: #fff;
  font-size: 1em;
  box-shadow: 0 0.6em 1.2em color-mix(in srgb, #000 20%, transparent);
  transition: transform 0.6s cubic-bezier(0.3, 1.2, 0.5, 1), filter 0.6s ease;
}
.hfx-cover-flow-cover span {
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.hfx-cover-flow-cover:nth-child(1) {
  background:
    radial-gradient(circle at 35% 35%, #fef3c7 0 0.9em, transparent 0.95em),
    linear-gradient(transparent 60%, color-mix(in srgb, var(--c) 60%, #000) 60%),
    linear-gradient(color-mix(in srgb, var(--c) 30%, #fff), color-mix(in srgb, var(--c) 70%, #fff));
  filter: brightness(0.85);
  transform: translateX(-4.3em) translateZ(-1.6em) rotateY(52deg);
}
.hfx-cover-flow-cover:nth-child(2) {
  z-index: 1;
  background:
    repeating-radial-gradient(circle at 50% 42%, transparent 0 0.3em, color-mix(in srgb, #fff 14%, transparent) 0.3em 0.36em),
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--c) 60%, #fff) 0 0.8em, transparent 0.85em),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #0f172a), color-mix(in srgb, var(--c) 20%, #020617));
  transform: translateZ(0.6em);
}
.hfx-cover-flow-cover:nth-child(3) {
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 80%, #000) 0 0.5em, var(--c) 0.5em 1em);
  filter: brightness(0.85);
  transform: translateX(4.3em) translateZ(-1.6em) rotateY(-52deg);
}
.hfx-cover-flow:hover .hfx-cover-flow-cover:nth-child(1) {
  filter: brightness(1);
  transform: translateX(-6.1em) translateZ(0) rotateY(0deg);
}
.hfx-cover-flow:hover .hfx-cover-flow-cover:nth-child(2) {
  transform: translateZ(0);
}
.hfx-cover-flow:hover .hfx-cover-flow-cover:nth-child(3) {
  filter: brightness(1);
  transform: translateX(6.1em) translateZ(0) rotateY(0deg);
}

.hfx-hanging-sign {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  justify-items: center;
  perspective: 30em;
  font-family: system-ui, sans-serif;
}
.hfx-hanging-sign-nail {
  position: relative;
  z-index: 1;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3f4f6, color-mix(in srgb, var(--c) 30%, #4b5563));
  box-shadow: 0 0.1em 0.2em color-mix(in srgb, #000 30%, transparent);
}
.hfx-hanging-sign-board {
  position: relative;
  width: 9.5em;
  height: 3.6em;
  margin-top: 1.6em;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.3, 1.5, 0.5, 1);
  transition: transform 1.6s linear(0, 0.25 6%, 0.62 12%, 0.94 18%, 1.12 24%, 1.17 29%, 1.12 34%, 1.02 41%, 0.95 48%, 0.94 53%, 0.97 60%, 1.01 68%, 1.02 75%, 1 88%, 1);
}
.hfx-hanging-sign-string {
  position: absolute;
  left: 1em;
  bottom: 100%;
  width: calc(100% - 2em);
  height: 1.95em;
  overflow: visible;
  fill: none;
  stroke: color-mix(in srgb, var(--c) 35%, #78716c);
  stroke-width: 0.12em;
  stroke-linejoin: round;
}
.hfx-hanging-sign-string path {
  vector-effect: non-scaling-stroke;
}
.hfx-hanging-sign-front,
.hfx-hanging-sign-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 0.12em;
  border-radius: 0.5em;
  color: #fff;
  font-size: 1.35em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  backface-visibility: hidden;
}
.hfx-hanging-sign-front {
  background: var(--c);
  box-shadow: inset 0 0 0 0.2em var(--c), inset 0 0 0 0.28em color-mix(in srgb, #fff 55%, transparent), 0 0.4em 0.8em color-mix(in srgb, var(--c) 30%, transparent);
}
.hfx-hanging-sign-back {
  background: color-mix(in srgb, var(--c) 25%, #1f2937);
  box-shadow: inset 0 0 0 0.2em color-mix(in srgb, var(--c) 25%, #1f2937), inset 0 0 0 0.28em color-mix(in srgb, #fff 35%, transparent);
  transform: rotateY(180deg);
}
.hfx-hanging-sign:hover .hfx-hanging-sign-board {
  transform: rotateY(180deg);
}

.hfx-extruded-text-3d {
  --c: var(--hfx-color, #3b82f6);
  --d: color-mix(in srgb, var(--c) 55%, #000);
  margin: 0;
  font: 900 1em system-ui, sans-serif;
  font-size: calc(var(--hfx-size, 16px) * 3.6);
  line-height: 1.1;
  letter-spacing: 0.02em;
  color: var(--c);
  cursor: default;
  text-shadow:
    0.005em 0.005em 0 var(--d),
    0.01em 0.01em 0 var(--d),
    0.015em 0.015em 0 var(--d),
    0.02em 0.02em 0 var(--d),
    0.025em 0.025em 0 var(--d),
    0.03em 0.03em 0 var(--d),
    0.035em 0.035em 0 var(--d),
    0.04em 0.04em 0 var(--d),
    0.045em 0.045em 0 var(--d),
    0.05em 0.05em 0 var(--d),
    0.06em 0.08em 0.08em color-mix(in srgb, var(--c) 25%, transparent);
  transition: transform 0.4s cubic-bezier(0.3, 1.4, 0.5, 1), text-shadow 0.4s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.hfx-extruded-text-3d:hover {
  transform: translate(-0.06em, -0.06em);
  text-shadow:
    0.017em 0.017em 0 var(--d),
    0.034em 0.034em 0 var(--d),
    0.051em 0.051em 0 var(--d),
    0.068em 0.068em 0 var(--d),
    0.085em 0.085em 0 var(--d),
    0.102em 0.102em 0 var(--d),
    0.119em 0.119em 0 var(--d),
    0.136em 0.136em 0 var(--d),
    0.153em 0.153em 0 var(--d),
    0.17em 0.17em 0 var(--d),
    0.2em 0.26em 0.22em color-mix(in srgb, var(--c) 30%, transparent);
}

.hfx-word-cylinder-text {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  align-items: center;
  gap: 0.28em;
  margin: 0;
  font: 800 1em system-ui, sans-serif;
  font-size: calc(var(--hfx-size, 16px) * 2);
  cursor: default;
}
.hfx-word-cylinder-text-drum {
  position: relative;
  width: 4.3em;
  height: 3em;
  perspective: 12em;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.hfx-word-cylinder-text-drum::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.15em;
  right: 0;
  height: 1.3em;
  margin-top: -0.65em;
  border-radius: 0.25em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.hfx-word-cylinder-text-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(-1.45em) rotateX(0deg);
}
.hfx-word-cylinder-text-ring span {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1.2em;
  margin-top: -0.6em;
  line-height: 1.2em;
  color: var(--c);
  backface-visibility: hidden;
  transform: rotateX(calc(var(--i) * -45deg)) translateZ(1.45em);
}
.hfx-word-cylinder-text:hover .hfx-word-cylinder-text-ring {
  animation: hfx-word-cylinder-text-tick 8s cubic-bezier(0.5, 0, 0.25, 1.3) infinite;
}
@keyframes hfx-word-cylinder-text-tick {
  0%            { transform: translateZ(-1.45em) rotateX(0deg); }
  4%, 12.5%     { transform: translateZ(-1.45em) rotateX(45deg); }
  16.5%, 25%    { transform: translateZ(-1.45em) rotateX(90deg); }
  29%, 37.5%    { transform: translateZ(-1.45em) rotateX(135deg); }
  41.5%, 50%    { transform: translateZ(-1.45em) rotateX(180deg); }
  54%, 62.5%    { transform: translateZ(-1.45em) rotateX(225deg); }
  66.5%, 75%    { transform: translateZ(-1.45em) rotateX(270deg); }
  79%, 87.5%    { transform: translateZ(-1.45em) rotateX(315deg); }
  91.5%, 100%   { transform: translateZ(-1.45em) rotateX(360deg); }
}

.hfx-coin-flip-icon {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 5.5em;
  height: 7em;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  perspective: 30em;
}
.hfx-coin-flip-icon::after {
  content: "";
  position: absolute;
  bottom: 0.6em;
  left: 50%;
  width: 3.4em;
  height: 0.5em;
  margin-left: -1.7em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 35%, transparent);
  filter: blur(0.15em);
}
.hfx-coin-flip-icon-hop {
  display: block;
}
.hfx-coin-flip-icon-coin {
  position: relative;
  display: block;
  width: 4em;
  height: 4em;
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hfx-coin-flip-icon-rim,
.hfx-coin-flip-icon-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.hfx-coin-flip-icon-rim {
  background: color-mix(in srgb, var(--c) 60%, #000);
  transform: translateZ(var(--z));
}
.hfx-coin-flip-icon-face {
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 75%, #000));
  box-shadow: inset 0 0 0 0.25em color-mix(in srgb, var(--c) 80%, #000), inset 0 0 0 0.36em color-mix(in srgb, var(--c) 55%, #fff);
  backface-visibility: hidden;
  transform: translateZ(0.2em);
}
.hfx-coin-flip-icon-back {
  transform: rotateY(180deg) translateZ(0.2em);
}
.hfx-coin-flip-icon-face svg {
  width: 1.8em;
  height: 1.8em;
  fill: currentColor;
}
.hfx-coin-flip-icon:is(:hover, :focus-visible) .hfx-coin-flip-icon-coin {
  transform: rotateY(900deg);
}
.hfx-coin-flip-icon:is(:hover, :focus-visible) .hfx-coin-flip-icon-hop {
  animation: hfx-coin-flip-icon-hop 1.1s cubic-bezier(0.3, 0, 0.3, 1);
}
.hfx-coin-flip-icon:is(:hover, :focus-visible)::after {
  animation: hfx-coin-flip-icon-shadow 1.1s cubic-bezier(0.3, 0, 0.3, 1);
}
@keyframes hfx-coin-flip-icon-hop {
  0%, 100% { transform: translateY(0); }
  35%      { transform: translateY(-1.4em); }
  70%      { transform: translateY(0); }
  82%      { transform: translateY(-0.25em); }
}
@keyframes hfx-coin-flip-icon-shadow {
  0%, 100% { transform: scale(1); opacity: 1; }
  35%      { transform: scale(0.6); opacity: 0.5; }
  70%      { transform: scale(1); opacity: 1; }
  82%      { transform: scale(0.9); opacity: 0.9; }
}

.hfx-drawer-open-3d {
  --c: var(--hfx-color, #3b82f6);
  --panel: color-mix(in srgb, var(--c) 22%, #fff);
  --dark: color-mix(in srgb, var(--c) 45%, #111827);
  font-size: var(--hfx-size, 16px);
  perspective: 30em;
  font-family: system-ui, sans-serif;
}
.hfx-drawer-open-3d-cabinet {
  position: relative;
  width: 12em;
  height: 8em;
  border-radius: 0 0 0.5em 0.5em;
  background:
    linear-gradient(color-mix(in srgb, var(--c) 30%, #020617), color-mix(in srgb, var(--c) 15%, #020617)) 1em 1em / 10em 3.2em no-repeat,
    linear-gradient(var(--dark), var(--dark)) 4.8em 5.85em / 2.4em 0.35em no-repeat,
    linear-gradient(var(--panel), var(--panel)) 1em 4.6em / 10em 2.6em no-repeat,
    color-mix(in srgb, var(--c) 75%, #000);
  transform-style: preserve-3d;
  transform: translateY(0.8em) rotateX(-24deg);
}
.hfx-drawer-open-3d-cabinet::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 4.8em;
  border-radius: 0.5em 0.5em 0 0;
  background: color-mix(in srgb, var(--c) 60%, #fff);
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
}
.hfx-drawer-open-3d-drawer {
  position: absolute;
  top: 1em;
  left: 1em;
  width: 10em;
  height: 3.2em;
  transform-style: preserve-3d;
  transform: translateZ(0.05em);
  transition: transform 0.55s cubic-bezier(0.3, 1.25, 0.5, 1);
}
.hfx-drawer-open-3d-drawer span {
  position: absolute;
}
.hfx-drawer-open-3d-front {
  inset: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.35em;
  border-radius: 0.15em;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, transparent);
  color: color-mix(in srgb, var(--c) 60%, #000);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.hfx-drawer-open-3d-front::after {
  content: "";
  width: 3.4em;
  height: 0.5em;
  border-radius: 0.25em;
  background: var(--dark);
}
.hfx-drawer-open-3d-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.4em;
  background: color-mix(in srgb, var(--c) 35%, #111827);
  transform-origin: 50% 100%;
  transform: rotateX(90deg);
}
.hfx-drawer-open-3d-back {
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.6em;
  background: color-mix(in srgb, var(--c) 40%, #111827);
  transform: translateZ(-4.4em);
}
.hfx-drawer-open-3d-left,
.hfx-drawer-open-3d-right {
  bottom: 0;
  width: 4.4em;
  height: 2.6em;
  background: color-mix(in srgb, var(--c) 55%, #111827);
}
.hfx-drawer-open-3d-left {
  left: 0;
  transform-origin: 0 50%;
  transform: rotateY(90deg);
}
.hfx-drawer-open-3d-right {
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
}
.hfx-drawer-open-3d-folder {
  left: 1em;
  right: 1em;
  bottom: 0;
  height: 5.6em;
  padding-top: 0.25em;
  background: linear-gradient(#fde68a, #fcd34d);
  color: #78350f;
  font-size: 0.55em;
  font-weight: 700;
  line-height: 1;
}
.hfx-drawer-open-3d-tab-a {
  padding-left: 2.2em;
  clip-path: polygon(0 16%, 6% 16%, 9% 0, 40% 0, 43% 16%, 100% 16%, 100% 100%, 0 100%);
  transform: translateZ(-6em);
}
.hfx-drawer-open-3d-tab-b {
  padding-left: 9.4em;
  background: linear-gradient(#fef3c7, #fde68a);
  clip-path: polygon(0 16%, 50% 16%, 53% 0, 88% 0, 91% 16%, 100% 16%, 100% 100%, 0 100%);
  transform: translateZ(-3em);
}
.hfx-drawer-open-3d:hover .hfx-drawer-open-3d-drawer {
  transform: translateZ(4.1em);
}

.hfx-dice-roll-3d {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 8em;
  height: 8em;
  perspective: 25em;
}
.hfx-dice-roll-3d::after {
  content: "";
  position: absolute;
  bottom: 0.9em;
  left: 50%;
  width: 4.4em;
  height: 0.8em;
  margin-left: -2.2em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 30%, transparent);
  filter: blur(0.25em);
}
.hfx-dice-roll-3d-die {
  position: relative;
  width: 3.6em;
  height: 3.6em;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(-35deg);
  transition: transform 1.2s cubic-bezier(0.2, 0.85, 0.25, 1.04);
}
.hfx-dice-roll-3d-die span {
  --pip: var(--c) 0 0.3em, transparent 0.33em;
  position: absolute;
  inset: 0;
  border-radius: 0.45em;
  background-color: #fff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 20%, transparent), inset 0 0 0.6em color-mix(in srgb, var(--c) 12%, transparent);
}
.hfx-dice-roll-3d-f1 {
  background-image: radial-gradient(circle at 50% 50%, var(--c) 0 0.42em, transparent 0.45em);
  transform: translateZ(1.8em);
}
.hfx-dice-roll-3d-f2 {
  background-image: radial-gradient(circle at 27% 27%, var(--pip)), radial-gradient(circle at 73% 73%, var(--pip));
  transform: rotateX(90deg) translateZ(1.8em);
}
.hfx-dice-roll-3d-f3 {
  background-image: radial-gradient(circle at 27% 27%, var(--pip)), radial-gradient(circle at 50% 50%, var(--pip)), radial-gradient(circle at 73% 73%, var(--pip));
  transform: rotateY(90deg) translateZ(1.8em);
}
.hfx-dice-roll-3d-f4 {
  background-image: radial-gradient(circle at 27% 27%, var(--pip)), radial-gradient(circle at 73% 27%, var(--pip)), radial-gradient(circle at 27% 73%, var(--pip)), radial-gradient(circle at 73% 73%, var(--pip));
  transform: rotateY(-90deg) translateZ(1.8em);
}
.hfx-dice-roll-3d-f5 {
  background-image: radial-gradient(circle at 27% 27%, var(--pip)), radial-gradient(circle at 73% 27%, var(--pip)), radial-gradient(circle at 50% 50%, var(--pip)), radial-gradient(circle at 27% 73%, var(--pip)), radial-gradient(circle at 73% 73%, var(--pip));
  transform: rotateX(-90deg) translateZ(1.8em);
}
.hfx-dice-roll-3d-f6 {
  background-image: radial-gradient(circle at 27% 25%, var(--pip)), radial-gradient(circle at 73% 25%, var(--pip)), radial-gradient(circle at 27% 50%, var(--pip)), radial-gradient(circle at 73% 50%, var(--pip)), radial-gradient(circle at 27% 75%, var(--pip)), radial-gradient(circle at 73% 75%, var(--pip));
  transform: rotateY(180deg) translateZ(1.8em);
}
.hfx-dice-roll-3d:hover .hfx-dice-roll-3d-die {
  transform: rotateX(335deg) rotateY(505deg);
}

.hfx-carousel-ring-3d {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  place-items: center;
  width: 16em;
  height: 10em;
  perspective: 28em;
}
.hfx-carousel-ring-3d-ring {
  position: relative;
  width: 3.6em;
  height: 4.6em;
  transform-style: preserve-3d;
  transform: rotateX(-14deg) rotateY(0deg);
  animation: hfx-carousel-ring-3d-spin 14s linear infinite paused;
}
.hfx-carousel-ring-3d-ring span {
  position: absolute;
  inset: 0;
  border-radius: 0.4em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 25%, transparent);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 60deg)) translateZ(4.1em);
  transition: transform 0.6s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.hfx-carousel-ring-3d-ring span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: color-mix(in srgb, var(--c) 45%, #0f172a);
  backface-visibility: hidden;
  transform: rotateY(180deg);
}
.hfx-carousel-ring-3d-ring span:nth-child(1) {
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #fff), var(--c));
}
.hfx-carousel-ring-3d-ring span:nth-child(2) {
  background: radial-gradient(circle at 50% 35%, #fef3c7 0 0.5em, transparent 0.55em), linear-gradient(color-mix(in srgb, var(--c) 50%, #fb923c), color-mix(in srgb, var(--c) 70%, #000));
}
.hfx-carousel-ring-3d-ring span:nth-child(3) {
  background: repeating-linear-gradient(45deg, var(--c) 0 0.4em, color-mix(in srgb, var(--c) 65%, #fff) 0.4em 0.8em);
}
.hfx-carousel-ring-3d-ring span:nth-child(4) {
  background: radial-gradient(circle at 62% 28%, #f8fafc 0 0.4em, transparent 0.45em), linear-gradient(color-mix(in srgb, var(--c) 40%, #020617), color-mix(in srgb, var(--c) 70%, #0f172a));
}
.hfx-carousel-ring-3d-ring span:nth-child(5) {
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--c) 75%, #000) 58%), linear-gradient(color-mix(in srgb, var(--c) 20%, #fff), color-mix(in srgb, var(--c) 55%, #fff));
}
.hfx-carousel-ring-3d-ring span:nth-child(6) {
  background: conic-gradient(from 45deg, var(--c), color-mix(in srgb, var(--c) 35%, #fff), var(--c), color-mix(in srgb, var(--c) 60%, #000), var(--c));
}
.hfx-carousel-ring-3d:hover .hfx-carousel-ring-3d-ring {
  animation-play-state: running;
}
.hfx-carousel-ring-3d:hover .hfx-carousel-ring-3d-ring span {
  transform: rotateY(calc(var(--i) * 60deg)) translateZ(5em);
}
@keyframes hfx-carousel-ring-3d-spin {
  to { transform: rotateX(-14deg) rotateY(-360deg); }
}

.hfx-ticket-stub-fold {
  --c: var(--hfx-color, #3b82f6);
  --notch: radial-gradient(circle at 100% 0, transparent 0.5em, #000 0.52em) 0 0 / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 0.5em, #000 0.52em) 0 100% / 100% 51% no-repeat;
  --notch-l: radial-gradient(circle at 0 0, transparent 0.5em, #000 0.52em) 0 0 / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 0.5em, #000 0.52em) 0 100% / 100% 51% no-repeat;
  font-size: var(--hfx-size, 16px);
  display: flex;
  height: 6em;
  perspective: 30em;
  font-family: system-ui, sans-serif;
  filter: drop-shadow(0 0.4em 0.6em color-mix(in srgb, var(--c) 25%, transparent));
}
.hfx-ticket-stub-fold-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 10.8em;
  padding: 0 1.1em;
  border-radius: 0.6em 0 0 0.6em;
  background: linear-gradient(120deg, var(--c), color-mix(in srgb, var(--c) 70%, #000));
  color: #fff;
  -webkit-mask: var(--notch);
  mask: var(--notch);
}
.hfx-ticket-stub-fold-main small {
  font-size: 0.6em;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
}
.hfx-ticket-stub-fold-main strong {
  margin-bottom: 0.25em;
  font-size: 1.15em;
}
.hfx-ticket-stub-fold-main span {
  font-size: 0.72em;
  opacity: 0.9;
}
.hfx-ticket-stub-fold-stub {
  position: relative;
  width: 3.6em;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.45, 0, 0.2, 1.15);
}
.hfx-ticket-stub-fold-front,
.hfx-ticket-stub-fold-back {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 0 0.6em 0.6em 0;
  backface-visibility: hidden;
  -webkit-mask: var(--notch-l);
  mask: var(--notch-l);
}
.hfx-ticket-stub-fold-front {
  background:
    repeating-linear-gradient(transparent 0 0.3em, color-mix(in srgb, #fff 70%, transparent) 0.3em 0.55em) 0 0 / 2px 100% no-repeat,
    color-mix(in srgb, var(--c) 70%, #000);
  color: #fff;
}
.hfx-ticket-stub-fold-front span {
  writing-mode: vertical-rl;
  font-size: 0.7em;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hfx-ticket-stub-fold-back {
  border-radius: 0.6em 0 0 0.6em;
  background: #fff;
  -webkit-mask: var(--notch);
  mask: var(--notch);
  transform: rotateY(180deg);
}
.hfx-ticket-stub-fold-back svg {
  width: 2.6em;
  height: 2.6em;
  fill: #111827;
}
.hfx-ticket-stub-fold:hover .hfx-ticket-stub-fold-stub {
  transform: rotateY(-180deg);
}

.hfx-perspective-crawl-text {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 17em;
  height: 9em;
  overflow: hidden;
  border-radius: 0.8em;
  background:
    radial-gradient(circle at 12% 18%, #fff 0 0.05em, transparent 0.08em),
    radial-gradient(circle at 34% 8%, #fff 0 0.04em, transparent 0.07em),
    radial-gradient(circle at 58% 22%, #fff 0 0.05em, transparent 0.08em),
    radial-gradient(circle at 82% 12%, #fff 0 0.06em, transparent 0.09em),
    radial-gradient(circle at 92% 40%, #fff 0 0.04em, transparent 0.07em),
    radial-gradient(circle at 6% 52%, #fff 0 0.04em, transparent 0.07em),
    linear-gradient(color-mix(in srgb, var(--c) 25%, #020617), #020617);
  font-family: system-ui, sans-serif;
}
.hfx-perspective-crawl-text-view {
  position: absolute;
  inset: 0;
  perspective: 11em;
  perspective-origin: 50% 0;
  -webkit-mask-image: linear-gradient(transparent 8%, #000 55%);
  mask-image: linear-gradient(transparent 8%, #000 55%);
}
.hfx-perspective-crawl-text-copy {
  position: absolute;
  top: 3.2em;
  left: 2.6em;
  right: 2.6em;
  color: color-mix(in srgb, var(--c) 30%, #fff);
  text-align: center;
  transform-origin: 50% 0;
  transform: rotateX(46deg) translateY(0);
}
.hfx-perspective-crawl-text-copy strong {
  display: block;
  margin-bottom: 0.5em;
  font-size: 0.9em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hfx-perspective-crawl-text-copy p {
  margin: 0;
  font-size: 0.75em;
  line-height: 1.5;
  text-align: justify;
}
.hfx-perspective-crawl-text:hover .hfx-perspective-crawl-text-copy {
  animation: hfx-perspective-crawl-text-scroll 14s linear infinite;
}
@keyframes hfx-perspective-crawl-text-scroll {
  0%   { transform: rotateX(46deg) translateY(0); opacity: 1; }
  88%  { transform: rotateX(46deg) translateY(-12em); opacity: 1; }
  90%  { transform: rotateX(46deg) translateY(-12em); opacity: 0; }
  91%  { transform: rotateX(46deg) translateY(0); opacity: 0; }
  100% { transform: rotateX(46deg) translateY(0); opacity: 1; }
}

.hfx-layered-text-3d {
  --c: var(--hfx-color, #3b82f6);
  font: 900 1em system-ui, sans-serif;
  font-size: var(--hfx-size, 16px);
  perspective: 30em;
  cursor: default;
}
.hfx-layered-text-3d-stack {
  position: relative;
  font-size: 3.2em;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.hfx-layered-text-3d-stack span {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1px var(--c);
  opacity: calc(1 - var(--i) * 0.1);
  transform: translateZ(0);
  transition: transform 0.6s cubic-bezier(0.3, 1.2, 0.5, 1);
  transition-delay: calc(var(--i) * 0.025s);
}
.hfx-layered-text-3d-stack span:last-child {
  position: relative;
  display: block;
  color: var(--c);
}
.hfx-layered-text-3d:hover .hfx-layered-text-3d-stack {
  transform: rotateY(-32deg) rotateX(16deg);
}
.hfx-layered-text-3d:hover .hfx-layered-text-3d-stack span {
  transform: translateZ(calc(var(--i) * -0.16em));
}

.hfx-text-fill-wipe {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-block;
  -webkit-text-fill-color: transparent;
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 0% 100% no-repeat,
    linear-gradient(currentColor, currentColor);
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-size 0.55s cubic-bezier(0.65, 0, 0.35, 1);}
.hfx-text-fill-wipe:hover { background-size: 100% 100%, auto; }

.hfx-text-letter-roll {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-flex;
  overflow: hidden;
  line-height: 1.2;}
.hfx-text-letter-roll span {
  display: block;
  text-shadow: 0 1.2em var(--c);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: calc(var(--i) * 0.03s);
}
.hfx-text-letter-roll:hover span { transform: translateY(-1.2em); }

.hfx-text-glitch {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.04em;}
.hfx-text-glitch::before,
.hfx-text-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--c);
  opacity: 0;
  pointer-events: none;
}
.hfx-text-glitch::after { filter: hue-rotate(150deg); }
.hfx-text-glitch:hover { animation: hfx-text-glitch-jolt 1.3s steps(1) infinite; }
.hfx-text-glitch:hover::before {
  opacity: 1;
  animation: hfx-text-glitch-top 0.9s steps(1) infinite;
}
.hfx-text-glitch:hover::after {
  opacity: 1;
  animation: hfx-text-glitch-bottom 0.7s steps(1) infinite;
}
@keyframes hfx-text-glitch-top {
  0%, 100% { clip-path: inset(0 0 70% 0); transform: translate(-0.06em, -0.02em); }
  20%      { clip-path: inset(18% 0 58% 0); transform: translate(0.05em, 0); }
  40%      { clip-path: inset(42% 0 40% 0); transform: translate(-0.08em, 0.01em); }
  60%      { clip-path: inset(6% 0 82% 0); transform: translate(0.04em, 0); }
  80%      { clip-path: inset(28% 0 52% 0); transform: translate(-0.03em, 0); }
}
@keyframes hfx-text-glitch-bottom {
  0%, 100% { clip-path: inset(62% 0 8% 0); transform: translate(0.06em, 0.02em); }
  25%      { clip-path: inset(80% 0 0 0); transform: translate(-0.05em, 0); }
  50%      { clip-path: inset(50% 0 32% 0); transform: translate(0.07em, 0); }
  75%      { clip-path: inset(70% 0 12% 0); transform: translate(-0.04em, 0.01em); }
}
@keyframes hfx-text-glitch-jolt {
  0%, 14%, 52%, 100% { transform: none; }
  12% { transform: translateX(0.03em) skewX(-6deg); }
  50% { transform: translateX(-0.02em); }
}

.hfx-text-knockout {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 10em;
  overflow: visible;
  font-family: system-ui, sans-serif;
  font-weight: 900;
  cursor: default;
}
.hfx-text-knockout-block {
  fill: var(--c);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.hfx-text-knockout-word {
  fill: currentColor;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hfx-text-knockout:hover .hfx-text-knockout-block { transform: scaleY(0.07); }
.hfx-text-knockout:hover .hfx-text-knockout-word {
  opacity: 1;
  transition-delay: 0.15s;
}

.hfx-text-split-reveal {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  display: inline-grid;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;}
.hfx-text-split-reveal-word { color: transparent; }
.hfx-text-split-reveal::before,
.hfx-text-split-reveal::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.hfx-text-split-reveal::before { clip-path: inset(0 0 43% 0); }
.hfx-text-split-reveal::after { clip-path: inset(57% 0 0 0); }
.hfx-text-split-reveal-hidden {
  position: absolute;
  inset: 0.14em 0 0;
  display: grid;
  place-items: center;
  padding-left: 0.3em;
  font-size: 0.3em;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
}
.hfx-text-split-reveal:hover::before { transform: translateY(-0.4em); }
.hfx-text-split-reveal:hover::after { transform: translateY(0.4em); }
.hfx-text-split-reveal:hover .hfx-text-split-reveal-hidden {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

.hfx-text-stroke-draw {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 12em;
  overflow: visible;
  /* a static font: variable system fonts show their overlapping contours when stroked */
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  cursor: default;
}
.hfx-text-stroke-draw text {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  /* roughly the longest letter outline, in viewBox units */
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transition: fill 0.3s ease, stroke 0.3s ease;
}
.hfx-text-stroke-draw:hover text {
  fill: var(--c);
  stroke: var(--c);
  animation: hfx-text-stroke-draw-trace 1.4s cubic-bezier(0.4, 0, 0.3, 1) both;
}
@keyframes hfx-text-stroke-draw-trace {
  0%   { stroke-dashoffset: 280; fill-opacity: 0; }
  65%  { stroke-dashoffset: 0; fill-opacity: 0; }
  100% { stroke-dashoffset: 0; fill-opacity: 1; }
}

.hfx-text-sibling-blur {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;}
.hfx-text-sibling-blur span {
  transition: filter 0.35s ease, opacity 0.35s ease, color 0.35s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-text-sibling-blur:has(span:hover) span:not(:hover) {
  filter: blur(0.05em);
  opacity: 0.35;
}
.hfx-text-sibling-blur span:hover {
  color: var(--c);
  transform: translateX(0.2em);
}

.hfx-text-retro-shadow {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-block;
  font-weight: 900;
  text-shadow: 0 0 var(--c), 0 0 color-mix(in srgb, var(--c) 45%, transparent);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    text-shadow 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);}
.hfx-text-retro-shadow:hover {
  transform: translate(-0.08em, -0.08em);
  text-shadow: 0.08em 0.08em var(--c), 0.16em 0.16em color-mix(in srgb, var(--c) 40%, transparent);
}

.hfx-text-letter-wave {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-flex;}
.hfx-text-letter-wave span {
  display: block;
  transition: color 0.3s ease;
  transition-delay: calc(var(--i) * 0.04s);
}
.hfx-text-letter-wave:hover span {
  color: var(--c);
  animation: hfx-text-letter-wave-bob 1.1s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.08s);
}
@keyframes hfx-text-letter-wave-bob {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-0.28em); }
}

@property --hfx-text-liquid-fill-level {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
.hfx-text-liquid-fill {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-block;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0.035em var(--c);
  background:
    radial-gradient(0.34em 0.2em at 50% 100%, var(--c) 96%, transparent)
      left 0 bottom var(--hfx-text-liquid-fill-level) / 0.6em 0.2em repeat-x,
    linear-gradient(var(--c), var(--c))
      left 0 bottom 0 / 100% var(--hfx-text-liquid-fill-level) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: --hfx-text-liquid-fill-level 1s cubic-bezier(0.45, 0, 0.2, 1);}
.hfx-text-liquid-fill:hover {
  --hfx-text-liquid-fill-level: 110%;
  animation: hfx-text-liquid-fill-flow 0.9s linear infinite;
}
@keyframes hfx-text-liquid-fill-flow {
  to { background-position-x: 0.6em, 0; }
}

.hfx-text-circle-scribble {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  display: inline-block;}
.hfx-text-circle-scribble svg {
  position: absolute;
  left: -0.55em;
  top: -0.36em;
  width: calc(100% + 1.1em);
  height: calc(100% + 0.72em);
  overflow: visible;
  transform: rotate(-2deg);
}
.hfx-text-circle-scribble path {
  fill: none;
  stroke: var(--c);
  stroke-width: 3; /* viewBox units, so it scales with the text */
  stroke-linecap: round;
  /* the gap is longer than the path, so no round cap peeks out at rest */
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.02;
  transition: stroke-dashoffset 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-text-circle-scribble:hover path { stroke-dashoffset: 0; }

.hfx-text-acronym-expand {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.2);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-flex;
  font-weight: 900;
  letter-spacing: 0.02em;}
.hfx-text-acronym-expand > span {
  display: inline-flex;
  transition: color 0.4s ease;
}
.hfx-text-acronym-expand-tail {
  display: grid;
  grid-template-columns: 0fr;
  font-weight: 500;
  color: var(--c);
  opacity: 0;
  transition: grid-template-columns 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.hfx-text-acronym-expand-tail > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.hfx-text-acronym-expand > span:nth-child(2) .hfx-text-acronym-expand-tail { transition-delay: 0.05s; }
.hfx-text-acronym-expand > span:nth-child(3) .hfx-text-acronym-expand-tail { transition-delay: 0.1s; }
.hfx-text-acronym-expand:hover .hfx-text-acronym-expand-tail {
  grid-template-columns: 1fr;
  opacity: 1;
}

.hfx-text-shine {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-block;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(110deg, var(--c) 44%, color-mix(in srgb, var(--c) 35%, #fff) 50%, var(--c) 56%)
    100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position 0.9s cubic-bezier(0.4, 0, 0.2, 1);}
.hfx-text-shine:hover { background-position: 0 0; }

.hfx-text-image-fill {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.8);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-block;
  font-weight: 900;
  color: var(--c);
  background:
    radial-gradient(circle at 68% 40%, #fef9c3 0 0.16em, #fcd34d 0.2em, transparent 0.45em),
    radial-gradient(38% 55% at 22% 100%, color-mix(in srgb, var(--c) 30%, #14532d) 97%, transparent),
    radial-gradient(50% 48% at 78% 104%, color-mix(in srgb, var(--c) 20%, #15803d) 97%, transparent),
    radial-gradient(70% 45% at 50% 100%, color-mix(in srgb, var(--c) 35%, #4d7c0f) 97%, transparent),
    linear-gradient(color-mix(in srgb, var(--c) 40%, #fff) 10%, color-mix(in srgb, var(--c) 45%, #fb7185));
  background-size: 140% 140%;
  background-position: 50% 30%;
  -webkit-background-clip: text;
  background-clip: text;
  transition: color 0.5s ease, background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    background-position 0.9s cubic-bezier(0.22, 1, 0.36, 1);}
.hfx-text-image-fill:hover {
  color: transparent;
  background-size: 100% 100%;
  background-position: 50% 50%;
}

.hfx-text-stamp {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 1.8);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  display: inline-block;
  padding: 0.12em 0.4em;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s ease;}
.hfx-text-stamp::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 0.09em solid var(--c);
  border-radius: 0.18em;
  outline: 0.035em solid var(--c);
  outline-offset: -0.2em;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.hfx-text-stamp:hover {
  color: var(--c);
  /* two offset grids of pinholes read as worn ink */
  -webkit-mask:
    radial-gradient(circle, transparent 0.03em, #000 0.045em) 0 0 / 0.31em 0.27em,
    radial-gradient(circle, transparent 0.025em, #000 0.04em) 0.1em 0.05em / 0.23em 0.37em;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle, transparent 0.03em, #000 0.045em) 0 0 / 0.31em 0.27em,
    radial-gradient(circle, transparent 0.025em, #000 0.04em) 0.1em 0.05em / 0.23em 0.37em;
  mask-composite: intersect;
  animation: hfx-text-stamp-thump 0.45s cubic-bezier(0.3, 0, 0.3, 1) both;
}
.hfx-text-stamp:hover::before { opacity: 1; }
@keyframes hfx-text-stamp-thump {
  0%   { transform: rotate(-8deg) scale(1.5); opacity: 0.4; }
  55%  { transform: rotate(-8deg) scale(0.93); opacity: 1; }
  78%  { transform: rotate(-8deg) scale(1.03); }
  100% { transform: rotate(-8deg) scale(1); }
}

.hfx-text-letter-flip {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-flex;}
.hfx-text-letter-flip span {
  display: block;
  transform: perspective(2em) rotateX(0);
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.25, 1), color 0.3s ease;
  transition-delay: calc(var(--i) * 0.06s), calc(var(--i) * 0.06s + 0.15s);
}
.hfx-text-letter-flip:hover span {
  color: var(--c);
  transform: perspective(2em) rotateX(360deg);
}

.hfx-text-spread-letters {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  --n: 5; /* number of letters */
  display: inline-flex;
  font-weight: 700;}
.hfx-text-spread-letters span {
  display: block;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s ease;
}
.hfx-text-spread-letters:hover span {
  color: var(--c);
  transform: translateX(calc((var(--i) - (var(--n) - 1) / 2) * 0.18em));
}

.hfx-text-scatter {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-flex;}
.hfx-text-scatter span {
  display: block;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.hfx-text-scatter:hover span {
  transform: translate(var(--x), var(--y)) rotate(var(--r));
}
.hfx-text-scatter:hover span:nth-child(odd) { color: var(--c); }

.hfx-text-marker {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: 0 0.1em;}
.hfx-text-marker::before,
.hfx-text-marker::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.04em;
  right: -0.04em;
  background: color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 0.35em 0.1em 0.4em 0.15em / 0.2em 0.35em 0.15em 0.3em;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-text-marker::before {
  bottom: 0.12em;
  height: 0.54em;
  transform-origin: left;
  transform: rotate(-2deg) scaleX(0);
}
.hfx-text-marker::after {
  bottom: 0.2em;
  height: 0.44em;
  transform-origin: right;
  transform: rotate(1.5deg) scaleX(0);
}
.hfx-text-marker:hover::before { transform: rotate(-2deg) scaleX(1); }
.hfx-text-marker:hover::after {
  transform: rotate(1.5deg) scaleX(1);
  transition-delay: 0.25s;
}

.hfx-text-selection {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  display: inline-block;
  padding: 0 0.08em;}
.hfx-text-selection::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: 0 0.08em;
  background: var(--c);
  color: #fff;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-text-selection::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -0.1em 0;
  background: linear-gradient(var(--c), var(--c)) 100% 0 / 0.05em 100% no-repeat;
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.2s ease;
}
.hfx-text-selection:hover::after { clip-path: inset(0); }
.hfx-text-selection:hover::before {
  opacity: 1;
  transform: translateX(0.05em);
}

.hfx-text-typewriter {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  white-space: nowrap;}
.hfx-text-typewriter span { display: inline-block; }
.hfx-text-typewriter::after {
  content: "";
  position: absolute;
  top: 0.12em;
  bottom: 0.12em;
  left: 0;
  width: 0.5ch;
  background: var(--c);
  /* 12 = number of characters */
  transform: translateX(12.2ch);
}
.hfx-text-typewriter:hover span { animation: hfx-text-typewriter-type 1.2s steps(12) both; }
.hfx-text-typewriter:hover::after {
  animation: hfx-text-typewriter-caret 1.2s steps(12) both,
    hfx-text-typewriter-blink 0.8s step-end 1.2s infinite;
}
@keyframes hfx-text-typewriter-type {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0); }
}
@keyframes hfx-text-typewriter-caret {
  from { transform: translateX(0); }
  to   { transform: translateX(12.2ch); }
}
@keyframes hfx-text-typewriter-blink {
  50% { opacity: 0; }
}

.hfx-text-underline-strike {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  display: inline-block;
  transition: color 0.45s ease;}
.hfx-text-underline-strike::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.04em;
  height: 0.08em;
  border-radius: 0.04em;
  background: var(--c);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-text-underline-strike:hover { color: color-mix(in srgb, currentColor 40%, transparent); }
.hfx-text-underline-strike:hover::after { transform: translateY(-0.44em); }

.hfx-text-spoiler {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 1.9);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-block;
  padding: 0.1em 0.35em;
  border-radius: 0.25em;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  transition: background-color 0.4s ease;}
.hfx-text-spoiler span {
  display: inline-block;
  filter: blur(0.16em);
  opacity: 0.85;
  transition: filter 0.4s ease, opacity 0.4s ease;
}
.hfx-text-spoiler:hover { background-color: transparent; }
.hfx-text-spoiler:hover span {
  filter: blur(0);
  opacity: 1;
}

.hfx-text-echo {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.2);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
  line-height: 1;
  transition: color 0.3s ease;}
.hfx-text-echo::before,
.hfx-text-echo::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 0.03em var(--c);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.hfx-text-echo:hover { color: var(--c); }
.hfx-text-echo:hover::before {
  opacity: 0.7;
  transform: translateY(-0.95em);
}
.hfx-text-echo:hover::after {
  opacity: 0.7;
  transform: translateY(0.95em);
}

@property --hfx-text-circle-reveal-r {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}
.hfx-text-circle-reveal {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-grid;
  place-items: center;
  transition: --hfx-text-circle-reveal-r 0.7s cubic-bezier(0.65, 0, 0.35, 1);}
.hfx-text-circle-reveal > span,
.hfx-text-circle-reveal::after { grid-area: 1 / 1; }
.hfx-text-circle-reveal > span {
  -webkit-mask-image: radial-gradient(circle, transparent var(--hfx-text-circle-reveal-r), #000 calc(var(--hfx-text-circle-reveal-r) + 0.02em));
  mask-image: radial-gradient(circle, transparent var(--hfx-text-circle-reveal-r), #000 calc(var(--hfx-text-circle-reveal-r) + 0.02em));
}
.hfx-text-circle-reveal::after {
  content: attr(data-text);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  color: var(--c);
  clip-path: circle(var(--hfx-text-circle-reveal-r));
}
.hfx-text-circle-reveal:hover { --hfx-text-circle-reveal-r: 1.6em; }

@property --hfx-text-gradient-spin-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 90deg;
}
.hfx-text-gradient-spin {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-block;
  font-weight: 900;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(
    var(--hfx-text-gradient-spin-angle),
    var(--c),
    color-mix(in srgb, var(--c) 45%, #ec4899),
    color-mix(in srgb, var(--c) 30%, #f59e0b)
  );
  -webkit-background-clip: text;
  background-clip: text;
  transition: --hfx-text-gradient-spin-angle 0.8s cubic-bezier(0.65, 0, 0.35, 1);}
.hfx-text-gradient-spin:hover { --hfx-text-gradient-spin-angle: 270deg; }

.hfx-text-rainbow-letters {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-flex;
  color: var(--c);}
.hfx-text-rainbow-letters span {
  display: block;
  transition: filter 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--i) * 0.04s);
}
.hfx-text-rainbow-letters:hover span {
  filter: hue-rotate(calc(var(--i) * 48deg));
  transform: translateY(-0.1em);
}

.hfx-text-weight-shift {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-grid;
  font-weight: 200;
  transition: font-weight 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s ease;}
.hfx-text-weight-shift > span,
.hfx-text-weight-shift::after {
  grid-area: 1 / 1;
  justify-self: center;
}
/* invisible bold copy: holds the final width so neighbors never shift */
.hfx-text-weight-shift::after {
  content: attr(data-text);
  font-weight: 900;
  visibility: hidden;
}
.hfx-text-weight-shift:hover {
  color: var(--c);
  font-weight: 900;
}

.hfx-text-marquee {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 1.4);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.5em 0.35em 0.4em;
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  font-weight: 700;}
.hfx-text-marquee-icon {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 0.9em;
}
.hfx-text-marquee-view {
  width: 8.5em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 0.4em, #000 calc(100% - 2em), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 0.4em, #000 calc(100% - 2em), transparent);
}
.hfx-text-marquee-track {
  display: flex;
  width: max-content;
}
.hfx-text-marquee-track span {
  padding: 0 1.2em 0 0.4em;
  white-space: nowrap;
}
.hfx-text-marquee:hover .hfx-text-marquee-track {
  animation: hfx-text-marquee-scroll 5s linear infinite;
}
@keyframes hfx-text-marquee-scroll {
  to { transform: translateX(-50%); }
}

.hfx-text-reflection {
  --c: var(--hfx-color, #3b82f6);
  font-size: calc(var(--hfx-size, 16px) * 2.5);
  font-family: system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  cursor: default;
  position: relative;
  display: inline-block;}
.hfx-text-reflection::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% - 0.44em);
  color: var(--c);
  opacity: 0;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(transparent 25%, rgba(0, 0, 0, 0.55));
  mask-image: linear-gradient(transparent 25%, rgba(0, 0, 0, 0.55));
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.hfx-text-reflection:hover::after {
  opacity: 1;
  animation: hfx-text-reflection-sway 2.4s ease-in-out infinite;
}
@keyframes hfx-text-reflection-sway {
  0%, 100% { transform: scaleY(-1) skewX(0); }
  25%      { transform: scaleY(-0.94) skewX(6deg); }
  75%      { transform: scaleY(-1.04) skewX(-6deg); }
}

.hfx-dock-magnify {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  gap: 0.5em;
  padding: 0.5em;
}
/* the glass shelf, scaled on X so it widens with the icons */
.hfx-dock-magnify::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 1.1em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  -webkit-backdrop-filter: blur(0.75em);
  backdrop-filter: blur(0.75em);
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-dock-magnify:has(a:is(:hover, :focus-visible))::before { transform: scaleX(1.2); }
.hfx-dock-magnify a {
  --x: 0;
  --k: 1;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  border-radius: 0.7em;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 75%, #000));
  box-shadow: 0 0.3em 0.6em -0.3em rgba(0, 0, 0, 0.45);
  color: #fff;
  filter: hue-rotate(var(--hue, 0deg));
  transform-origin: 50% 100%;
  transform: translateX(calc(var(--x) * 2.6em)) translateY(calc((1 - var(--k)) * 0.9em)) scale(var(--k));
  transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-dock-magnify svg { width: 55%; height: 55%; }
/* everything right of the hovered icon shifts right, everything left shifts left */
.hfx-dock-magnify a:is(:hover, :focus-visible) ~ a { --x: 0.72; }
.hfx-dock-magnify a:has(~ a:is(:hover, :focus-visible)) { --x: -0.72; }
/* two away: a little bigger */
.hfx-dock-magnify a:is(:hover, :focus-visible) + a + a { --x: 0.66; --k: 1.12; }
.hfx-dock-magnify a:has(+ a + a:is(:hover, :focus-visible)) { --x: -0.66; --k: 1.12; }
/* direct neighbors */
.hfx-dock-magnify a:is(:hover, :focus-visible) + a { --x: 0.45; --k: 1.3; }
.hfx-dock-magnify a:has(+ a:is(:hover, :focus-visible)) { --x: -0.45; --k: 1.3; }
.hfx-dock-magnify a:is(:hover, :focus-visible) { --x: 0; --k: 1.6; }

.hfx-radial-menu {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
}
/* an invisible disc that keeps the hover alive between the items */
.hfx-radial-menu::before {
  content: "";
  position: absolute;
  inset: -4.2em;
  border-radius: 50%;
  transform: scale(0);
}
.hfx-radial-menu:is(:hover, :focus-within)::before { transform: scale(1); }
.hfx-radial-menu-toggle {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0.5em 1em -0.4em color-mix(in srgb, var(--c) 80%, transparent);
  color: #fff;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-radial-menu-toggle svg { width: 1.4em; height: 1.4em; }
.hfx-radial-menu a {
  --a: calc(var(--i) * 60deg);
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  margin: -1.15em 0 0 -1.15em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  opacity: 0;
  transform: rotate(calc(var(--a) - 90deg)) translateY(0) rotate(calc(90deg - var(--a))) scale(0.4);
  transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease, scale 0.2s ease;
  transition-delay: calc(var(--i) * 30ms);
}
.hfx-radial-menu a svg { width: 1.1em; height: 1.1em; }
.hfx-radial-menu:is(:hover, :focus-within) .hfx-radial-menu-toggle { transform: rotate(135deg); }
.hfx-radial-menu:is(:hover, :focus-within) a {
  opacity: 1;
  transform: rotate(var(--a)) translateY(-4.3em) rotate(calc(-1 * var(--a))) scale(1);
}
.hfx-radial-menu a:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
  scale: 1.12;
  transition-delay: 0s;
}

.hfx-emoji-reactions {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: inline-block;
  margin-top: 3.3em; /* room for the bar in this preview */
  font-family: system-ui, sans-serif;
}
.hfx-emoji-reactions-like {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 1.05em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 99em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--c);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.hfx-emoji-reactions-like svg { width: 1.1em; height: 1.1em; }
.hfx-emoji-reactions-bar {
  position: absolute;
  bottom: calc(100% + 0.5em);
  left: 50%;
  display: flex;
  gap: 0.1em;
  padding: 0.3em;
  border-radius: 99em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0.6em 1.4em -0.5em rgba(15, 23, 42, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(0.5em) scale(0.85);
  transform-origin: 50% 100%;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s 0.35s;
}
.hfx-emoji-reactions-bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 0.6em;
}
.hfx-emoji-reactions-bar button {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.35em;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(0.6em) scale(0.3);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.hfx-emoji-reactions:is(:hover, :focus-within) .hfx-emoji-reactions-like { background: color-mix(in srgb, var(--c) 16%, transparent); }
.hfx-emoji-reactions:is(:hover, :focus-within) .hfx-emoji-reactions-bar {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition-delay: 0s;
}
.hfx-emoji-reactions:is(:hover, :focus-within) .hfx-emoji-reactions-bar button {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.04s + var(--i) * 0.035s);
}
.hfx-emoji-reactions .hfx-emoji-reactions-bar button:is(:hover, :focus-visible) {
  transform: translateY(-0.3em) scale(1.35);
  transition-delay: 0s;
}

.hfx-toast-stack {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 17em;
  height: 3.1em;
  font-family: system-ui, sans-serif;
}
/* an invisible strip that keeps the hover alive across the gaps once spread */
.hfx-toast-stack::before {
  content: "";
  position: absolute;
  inset: -3.8em 0;
  transform: scaleY(0);
}
.hfx-toast-stack:hover::before { transform: scaleY(1); }
.hfx-toast-stack-toast {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0 0.9em;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0.5em 1.2em -0.5em rgba(15, 23, 42, 0.35);
  color: #1f2937;
  transform-origin: 50% 0;
  transform: translateY(calc(var(--i) * -0.6em)) scale(calc(1 - var(--i) * 0.06));
  transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.5, 1);
}
.hfx-toast-stack-toast > * { transition: opacity 0.3s ease; }
.hfx-toast-stack-toast:not(:last-child) > * { opacity: 0; }
.hfx-toast-stack-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
}
.hfx-toast-stack-icon svg { width: 1.05em; height: 1.05em; }
.hfx-toast-stack-text { display: grid; line-height: 1.25; }
.hfx-toast-stack-text small { color: #6b7280; font-size: 0.8em; }
/* spread: the newest drops to the bottom, the oldest rises to the top */
.hfx-toast-stack:hover .hfx-toast-stack-toast { transform: translateY(calc((1 - var(--i)) * 3.6em)) scale(1); }
.hfx-toast-stack:hover .hfx-toast-stack-toast > * { opacity: 1; }

.hfx-star-rating {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  font-family: system-ui, sans-serif;
}
.hfx-star-rating button {
  padding: 0.15em;
  border: 0;
  background: none;
  color: color-mix(in srgb, var(--c) 22%, transparent);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-star-rating svg {
  display: block;
  width: 1.9em;
  height: 1.9em;
}
/* the saved rating: three stars */
.hfx-star-rating button:nth-child(-n + 3) { color: var(--c); }
/* hovering: light every star, then unlight the ones after the hovered star */
.hfx-star-rating:has(button:is(:hover, :focus-visible)) button { color: var(--c); }
.hfx-star-rating button:is(:hover, :focus-visible) ~ button { color: color-mix(in srgb, var(--c) 22%, transparent); }
.hfx-star-rating button:is(:hover, :focus-visible) { transform: scale(1.25) rotate(-10deg); }
.hfx-star-rating-label {
  width: 5em;
  margin-left: 0.6em;
  font-weight: 600;
  color: var(--c);
}
.hfx-star-rating-label::after { content: "3.0"; }
.hfx-star-rating:has(button:nth-child(1):is(:hover, :focus-visible)) .hfx-star-rating-label::after { content: "Awful"; }
.hfx-star-rating:has(button:nth-child(2):is(:hover, :focus-visible)) .hfx-star-rating-label::after { content: "Meh"; }
.hfx-star-rating:has(button:nth-child(3):is(:hover, :focus-visible)) .hfx-star-rating-label::after { content: "Good"; }
.hfx-star-rating:has(button:nth-child(4):is(:hover, :focus-visible)) .hfx-star-rating-label::after { content: "Great"; }
.hfx-star-rating:has(button:nth-child(5):is(:hover, :focus-visible)) .hfx-star-rating-label::after { content: "Loved it!"; }

.hfx-dropdown-menu-stagger {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: inline-block;
  margin-bottom: 8.2em; /* room for the open panel in this preview */
  font-family: system-ui, sans-serif;
}
.hfx-dropdown-menu-stagger-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.6em 1em;
  border: 0;
  border-radius: 0.6em;
  background: var(--c);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.hfx-dropdown-menu-stagger-trigger svg {
  width: 1em;
  height: 1em;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-dropdown-menu-stagger-panel {
  position: absolute;
  top: calc(100% + 0.45em);
  left: 50%;
  width: 11.5em;
  margin: 0;
  padding: 0.35em;
  list-style: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.7em;
  background: #fff;
  box-shadow: 0 0.9em 1.8em -0.6em rgba(15, 23, 42, 0.35);
  color: #1f2937;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-0.4em) scale(0.96);
  transform-origin: 50% 0;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), visibility 0s 0.3s;
}
/* keeps the hover alive while the pointer crosses the gap */
.hfx-dropdown-menu-stagger-panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.6em;
}
.hfx-dropdown-menu-stagger li {
  opacity: 0;
  transform: translateY(-0.35em);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-dropdown-menu-stagger a {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.55em 0.7em;
  border-radius: 0.45em;
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.hfx-dropdown-menu-stagger a svg {
  width: 1.1em;
  height: 1.1em;
  color: var(--c);
}
.hfx-dropdown-menu-stagger a:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
}
.hfx-dropdown-menu-stagger:is(:hover, :focus-within) .hfx-dropdown-menu-stagger-trigger svg { transform: rotate(180deg); }
.hfx-dropdown-menu-stagger:is(:hover, :focus-within) .hfx-dropdown-menu-stagger-panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  transition-delay: 0s;
}
.hfx-dropdown-menu-stagger:is(:hover, :focus-within) li {
  opacity: 1;
  transform: none;
}
.hfx-dropdown-menu-stagger:is(:hover, :focus-within) li:nth-child(2) { transition-delay: 0.05s; }
.hfx-dropdown-menu-stagger:is(:hover, :focus-within) li:nth-child(3) { transition-delay: 0.1s; }

.hfx-tooltip-fade-up {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 0.65em;
  background: color-mix(in srgb, var(--c) 8%, transparent);
  color: var(--c);
  cursor: pointer;
}
.hfx-tooltip-fade-up svg { width: 1.3em; height: 1.3em; }
.hfx-tooltip-fade-up::before,
.hfx-tooltip-fade-up::after {
  position: absolute;
  left: 50%;
  font-size: 0.8em;
  background: #1e293b;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
}
/* the bubble */
.hfx-tooltip-fade-up::after {
  content: attr(data-tip);
  bottom: calc(100% + 0.9em);
  padding: 0.45em 0.75em;
  border-radius: 0.45em;
  box-shadow: 0 0.4em 1em -0.3em rgba(0, 0, 0, 0.4);
  color: #fff;
  font-family: system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transform: translate(-50%, 0.5em);
}
/* the arrow: a rotated square tucked under the bubble */
.hfx-tooltip-fade-up::before {
  content: "";
  bottom: calc(100% + 0.55em);
  width: 0.7em;
  height: 0.7em;
  transform: translate(-50%, 0.5em) rotate(45deg);
}
.hfx-tooltip-fade-up:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.hfx-tooltip-fade-up:is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: translate(-50%, 0) rotate(45deg);
}

.hfx-search-expand {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: block;
  width: 15em;
  height: 2.8em;
  border-radius: 1.4em;
  background: var(--c);
  color: #fff;
  cursor: text;
  font-family: system-ui, sans-serif;
  clip-path: inset(0 6.1em round 1.4em);
  transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-search-expand svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.25em;
  height: 1.25em;
  margin: -0.625em 0 0 -0.625em;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-search-expand input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 1.2em 0 2.8em;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hfx-search-expand input::placeholder { color: rgba(255, 255, 255, 0.75); }
.hfx-search-expand:is(:hover, :focus-within) { clip-path: inset(0 round 1.4em); }
.hfx-search-expand:is(:hover, :focus-within) svg { transform: translateX(-5.9em); }
.hfx-search-expand:is(:hover, :focus-within) input {
  opacity: 1;
  transition-delay: 0.2s;
}

.hfx-swipe-actions {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  isolation: isolate;
  width: 19em;
  overflow: hidden;
  border-radius: 0.9em;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 0.5em 1.2em -0.6em rgba(15, 23, 42, 0.35);
  font-family: system-ui, sans-serif;
}
.hfx-swipe-actions-behind {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  justify-content: flex-end;
  background: color-mix(in srgb, var(--c) 55%, #fff);
}
.hfx-swipe-actions-behind button {
  display: grid;
  place-items: center;
  width: 3.4em;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--c) 55%, #fff);
  color: #fff;
  cursor: pointer;
}
.hfx-swipe-actions-behind button + button { background: var(--c); }
.hfx-swipe-actions-behind svg {
  width: 1.3em;
  height: 1.3em;
  opacity: 0;
  transform: scale(0.4);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}
.hfx-swipe-actions-row {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.8em 1em;
  background: #fff;
  box-shadow: 0.5em 0 1em -0.6em rgba(15, 23, 42, 0.45);
  color: #1f2937;
  transition: transform 0.45s cubic-bezier(0.3, 1.25, 0.5, 1);
}
.hfx-swipe-actions-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.3em;
  height: 2.3em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
  font-size: 0.85em;
  font-weight: 700;
}
.hfx-swipe-actions-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
.hfx-swipe-actions-text small {
  overflow: hidden;
  color: #6b7280;
  font-size: 0.8em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hfx-swipe-actions time {
  align-self: flex-start;
  color: #9ca3af;
  font-size: 0.75em;
}
.hfx-swipe-actions:is(:hover, :focus-within) .hfx-swipe-actions-row { transform: translateX(-6.8em); }
.hfx-swipe-actions:is(:hover, :focus-within) .hfx-swipe-actions-behind svg {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.12s;
}

.hfx-date-range-hover {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  font-family: system-ui, sans-serif;
}
.hfx-date-range-hover p {
  margin: 0 0 0.4em 0.6em;
  font-weight: 700;
}
.hfx-date-range-hover-week,
.hfx-date-range-hover-grid {
  display: grid;
  grid-template-columns: repeat(7, 2.3em);
}
.hfx-date-range-hover-week span {
  padding-bottom: 0.4em;
  color: color-mix(in srgb, currentColor 50%, transparent);
  font-size: 0.72em;
  font-weight: 600;
  text-align: center;
}
.hfx-date-range-hover-grid { row-gap: 0.25em; }
.hfx-date-range-hover-grid button {
  position: relative;
  isolation: isolate;
  height: 2.1em;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 0.2s ease;
}
/* the day circle */
.hfx-date-range-hover-grid button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 1.95em;
  height: 1.95em;
  margin: -0.975em 0 0 -0.975em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 18%, transparent);
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease;
}
/* the range band */
.hfx-date-range-hover-grid button::after {
  content: "";
  position: absolute;
  inset: 0.08em 0;
  z-index: -2;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.hfx-date-range-hover-grid button:is(:hover, :focus-visible)::before { transform: scale(1); }
/* the chosen start date */
.hfx-date-range-hover-grid .hfx-date-range-hover-start {
  color: #fff;
  font-weight: 700;
}
.hfx-date-range-hover-grid .hfx-date-range-hover-start::before {
  background: var(--c);
  transform: scale(1);
}
/* days between the start and the hovered day */
.hfx-date-range-hover-start ~ button:has(~ button:is(:hover, :focus-visible))::after { transform: scaleX(1); }
/* the hovered day becomes the end cap */
.hfx-date-range-hover-start ~ button:is(:hover, :focus-visible) {
  color: #fff;
  font-weight: 700;
}
.hfx-date-range-hover-start ~ button:is(:hover, :focus-visible)::before { background: var(--c); }
.hfx-date-range-hover-start ~ button:is(:hover, :focus-visible)::after {
  transform: scaleX(0.5);
  transform-origin: left;
}
.hfx-date-range-hover-grid:has(.hfx-date-range-hover-start ~ button:is(:hover, :focus-visible)) .hfx-date-range-hover-start::after {
  transform: scaleX(0.5);
  transform-origin: right;
}

.hfx-table-row-highlight {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  min-width: 19em;
  border-collapse: separate;
  border-spacing: 0;
  font-family: system-ui, sans-serif;
}
.hfx-table-row-highlight :is(th, td) {
  padding: 0.6em 1.1em;
  text-align: left;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.hfx-table-row-highlight :is(th, td):last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hfx-table-row-highlight th {
  border-bottom: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hfx-table-row-highlight td {
  border-bottom: 1px solid color-mix(in srgb, var(--c) 12%, transparent);
  font-size: 0.9em;
}
.hfx-table-row-highlight td:first-child {
  position: relative;
  font-weight: 600;
}
.hfx-table-row-highlight td:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 0.2em;
  border-radius: 0.2em;
  background: var(--c);
  transform: scaleY(0);
  transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
}
/* column: background */
.hfx-table-row-highlight:has(td:nth-child(1):hover) :is(th, td):nth-child(1),
.hfx-table-row-highlight:has(td:nth-child(2):hover) :is(th, td):nth-child(2),
.hfx-table-row-highlight:has(td:nth-child(3):hover) :is(th, td):nth-child(3) {
  background: color-mix(in srgb, var(--c) 7%, transparent);
}
.hfx-table-row-highlight:has(td:nth-child(1):hover) th:nth-child(1),
.hfx-table-row-highlight:has(td:nth-child(2):hover) th:nth-child(2),
.hfx-table-row-highlight:has(td:nth-child(3):hover) th:nth-child(3) {
  color: var(--c);
}
/* row: an inset shadow paints over the column tint, so the crossing cell is strongest */
.hfx-table-row-highlight tbody tr:hover td { box-shadow: inset 0 0 0 10em color-mix(in srgb, var(--c) 11%, transparent); }
.hfx-table-row-highlight tbody tr:hover td:first-child::before { transform: scaleY(1); }

.hfx-video-chapters {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 20em;
  height: 10.5em;
  padding: 0 0.9em 0.55em;
  border-radius: 0.8em;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 48%),
    radial-gradient(circle at 74% 30%, rgba(255, 255, 255, 0.85) 0 7%, transparent 7.5%),
    radial-gradient(ellipse 62% 42% at 18% 100%, color-mix(in srgb, var(--c) 60%, #000) 0 98%, transparent 100%),
    radial-gradient(ellipse 72% 48% at 88% 106%, color-mix(in srgb, var(--c) 78%, #000) 0 98%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 35%, #fff), var(--c));
  color: #fff;
  font-family: system-ui, sans-serif;
}
.hfx-video-chapters-bar {
  display: flex;
  gap: 0.2em;
}
.hfx-video-chapters-bar button {
  --bar: rgba(255, 255, 255, 0.35);
  position: relative;
  flex: var(--g) 1 0;
  height: 1.1em;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hfx-video-chapters-bar button:nth-child(1) { --bar: #fff; }
.hfx-video-chapters-bar button:nth-child(2) { --bar: linear-gradient(90deg, #fff 45%, rgba(255, 255, 255, 0.35) 45%); }
/* the visible segment, thinner than the hit area */
.hfx-video-chapters-bar button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.3em;
  margin-top: -0.15em;
  border-radius: 0.15em;
  background: var(--bar);
  transition: transform 0.2s ease;
}
.hfx-video-chapters-bar button::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 0.5em);
  left: 50%;
  padding: 0.35em 0.65em;
  border-radius: 0.4em;
  background: rgba(15, 23, 42, 0.85);
  color: #fff;
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.4em);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-video-chapters-bar button:is(:hover, :focus-visible)::before { transform: scaleY(2); }
.hfx-video-chapters-bar button:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.hfx-video-chapters-controls {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
}
.hfx-video-chapters-controls svg { width: 1.35em; height: 1.35em; }
.hfx-video-chapters-controls svg:last-child { margin-left: auto; }

.hfx-playlist-row {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 20em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: system-ui, sans-serif;
}
.hfx-playlist-row li {
  display: grid;
  grid-template-columns: 1.6em 2.4em 1fr auto 2.4em;
  align-items: center;
  gap: 0.7em;
  padding: 0.4em 0.6em;
  border-radius: 0.6em;
  transition: background-color 0.2s ease;
}
.hfx-playlist-row-play {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.hfx-playlist-row-play > * {
  grid-area: 1 / 1;
  transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.2s ease;
}
.hfx-playlist-row-play span {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-variant-numeric: tabular-nums;
}
.hfx-playlist-row-play svg {
  width: 1.2em;
  height: 1.2em;
  color: var(--c);
  opacity: 0;
  transform: translateY(120%);
}
.hfx-playlist-row-cover {
  width: 2.4em;
  height: 2.4em;
  border-radius: 0.35em;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.55), transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000));
  filter: hue-rotate(var(--hue, 0deg));
}
.hfx-playlist-row-title {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}
.hfx-playlist-row-title b { font-weight: 600; }
.hfx-playlist-row-title small {
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.8em;
}
.hfx-playlist-row-like {
  display: grid;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-playlist-row-like svg { width: 1.15em; height: 1.15em; }
.hfx-playlist-row time {
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hfx-playlist-row li:is(:hover, :focus-within) { background: color-mix(in srgb, var(--c) 12%, transparent); }
.hfx-playlist-row li:is(:hover, :focus-within) .hfx-playlist-row-play span {
  opacity: 0;
  transform: translateY(-120%);
}
.hfx-playlist-row li:is(:hover, :focus-within) .hfx-playlist-row-play svg {
  opacity: 1;
  transform: none;
}
.hfx-playlist-row li:is(:hover, :focus-within) .hfx-playlist-row-like {
  opacity: 1;
  transform: none;
}

.hfx-list-slide-fill {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 13em;
  margin: 0;
  padding: 0.35em;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  border-radius: 0.8em;
  font-family: system-ui, sans-serif;
}
.hfx-list-slide-fill a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55em 0.8em;
  border-radius: 0.5em;
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.3s ease;
}
.hfx-list-slide-fill a::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-list-slide-fill span {
  transition: transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.25s ease;
}
.hfx-list-slide-fill span + span {
  opacity: 0;
  transform: translateX(-0.6em);
}
.hfx-list-slide-fill a:is(:hover, :focus-visible) { color: #fff; }
.hfx-list-slide-fill a:is(:hover, :focus-visible)::before {
  transform: scaleX(1);
  transform-origin: left;
}
.hfx-list-slide-fill a:is(:hover, :focus-visible) span { transform: translateX(0.3em); }
.hfx-list-slide-fill a:is(:hover, :focus-visible) span + span {
  opacity: 1;
  transform: translateX(0);
}

.hfx-context-submenu {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 11em;
  margin: 0 8.6em 0 0; /* room for the submenu in this preview */
  font-family: system-ui, sans-serif;
}
.hfx-context-submenu,
.hfx-context-submenu-sub {
  padding: 0.3em;
  list-style: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 0.7em;
  background: #fff;
  box-shadow: 0 0.8em 1.6em -0.6em rgba(15, 23, 42, 0.35);
  color: #1f2937;
}
.hfx-context-submenu a {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.45em 0.6em;
  border-radius: 0.45em;
  color: inherit;
  font-size: 0.9em;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.hfx-context-submenu a svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: #6b7280;
  transition: color 0.15s ease, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-context-submenu kbd,
.hfx-context-submenu a svg + svg { margin-left: auto; }
.hfx-context-submenu kbd {
  color: #9ca3af;
  font-family: inherit;
  font-size: 0.85em;
}
.hfx-context-submenu a:is(:hover, :focus-visible),
.hfx-context-submenu-parent:is(:hover, :focus-within) > a {
  background: color-mix(in srgb, var(--c) 13%, transparent);
  color: var(--c);
}
.hfx-context-submenu a:is(:hover, :focus-visible) svg,
.hfx-context-submenu-parent:is(:hover, :focus-within) > a svg { color: var(--c); }
.hfx-context-submenu-parent { position: relative; }
.hfx-context-submenu-sub {
  position: absolute;
  top: -0.35em;
  left: calc(100% + 0.5em);
  width: 8em;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-0.5em) scale(0.97);
  transform-origin: 0 1em;
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1), visibility 0s 0.25s;
}
.hfx-context-submenu-sub::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 0.8em;
}
.hfx-context-submenu-parent:is(:hover, :focus-within) > a svg + svg { transform: translateX(0.2em); }
.hfx-context-submenu-parent:is(:hover, :focus-within) .hfx-context-submenu-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.hfx-tooltip-typewriter {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75em;
  height: 2.75em;
  padding: 0;
  border: 0;
  border-radius: 0.65em;
  background: var(--c);
  color: #fff;
  cursor: pointer;
}
.hfx-tooltip-typewriter > svg { width: 1.35em; height: 1.35em; }
.hfx-tooltip-typewriter-tip {
  position: absolute;
  bottom: calc(100% + 0.7em);
  left: 50%;
  display: flex;
  align-items: center;
  box-sizing: content-box;
  width: 14ch;
  padding: 0.5em 0.8em;
  border-radius: 0.5em;
  background: #0f172a;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 40%, transparent), 0 0.5em 1.2em -0.4em rgba(0, 0, 0, 0.5);
  color: color-mix(in srgb, var(--c) 45%, #fff);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.4em) scale(0.92);
  transform-origin: 50% 100%;
  transition: opacity 0.15s ease, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-tooltip-typewriter-tip::before {
  content: "$";
  margin-right: 1ch;
  opacity: 0.5;
}
.hfx-tooltip-typewriter-tip span {
  width: 0;
  overflow: hidden;
}
.hfx-tooltip-typewriter-tip::after {
  content: "";
  width: 0.6ch;
  height: 1.15em;
  margin-left: 0.1ch;
  background: currentColor;
}
.hfx-tooltip-typewriter:is(:hover, :focus-visible) .hfx-tooltip-typewriter-tip {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.hfx-tooltip-typewriter:is(:hover, :focus-visible) .hfx-tooltip-typewriter-tip span {
  animation: hfx-tooltip-typewriter-type 0.8s steps(11) 0.2s both;
}
.hfx-tooltip-typewriter:is(:hover, :focus-visible) .hfx-tooltip-typewriter-tip::after {
  animation: hfx-tooltip-typewriter-blink 0.9s steps(1) 1s infinite;
}
@keyframes hfx-tooltip-typewriter-type {
  from { width: 0; }
  to { width: 11ch; }
}
@keyframes hfx-tooltip-typewriter-blink {
  50% { opacity: 0; }
}

.hfx-tooltip-side-slide {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  margin-right: 7em; /* room for the labels in this preview */
  padding: 0.4em;
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  border-radius: 0.9em;
  background: color-mix(in srgb, var(--c) 7%, transparent);
  font-family: system-ui, sans-serif;
}
.hfx-tooltip-side-slide a {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5em;
  height: 2.5em;
  border-radius: 0.6em;
  color: color-mix(in srgb, currentColor 70%, transparent);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hfx-tooltip-side-slide svg { width: 1.2em; height: 1.2em; }
.hfx-tooltip-side-slide a::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 0.9em);
  top: 50%;
  padding: 0.4em 0.75em;
  border-radius: 0.45em;
  background: var(--c);
  color: #fff;
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  clip-path: inset(0 100% 0 0 round 0.45em);
  transform: translate(-0.5em, -50%);
  transition: clip-path 0.3s cubic-bezier(0.65, 0, 0.35, 1), transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-tooltip-side-slide a::before {
  content: "";
  position: absolute;
  left: calc(100% + 0.5em);
  top: 50%;
  border: 0.35em solid transparent;
  border-right-color: var(--c);
  opacity: 0;
  transform: translate(-0.4em, -50%);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-tooltip-side-slide a:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 15%, transparent);
  color: var(--c);
}
.hfx-tooltip-side-slide a:is(:hover, :focus-visible)::after {
  clip-path: inset(0 0 0 0 round 0.45em);
  transform: translate(0, -50%);
}
.hfx-tooltip-side-slide a:is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.hfx-stepper-preview {
  --c: var(--hfx-color, #3b82f6);
  --p: 33.33%;
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 5.6em);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: system-ui, sans-serif;
}
/* track, then the progress line clipped to the current or hovered step */
.hfx-stepper-preview::before,
.hfx-stepper-preview::after {
  content: "";
  position: absolute;
  top: 0.95em;
  left: 2.8em;
  right: 2.8em;
  height: 0.2em;
  border-radius: 0.1em;
  background: color-mix(in srgb, var(--c) 18%, transparent);
}
.hfx-stepper-preview::after {
  background: linear-gradient(90deg, var(--c) 33.33%, color-mix(in srgb, var(--c) 50%, transparent) 33.33%);
  clip-path: inset(0 calc(100% - var(--p)) 0 0);
  transition: clip-path 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.hfx-stepper-preview a {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45em;
  color: color-mix(in srgb, currentColor 60%, transparent);
  font-size: 0.85em;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.25s ease;
}
.hfx-stepper-preview span {
  display: grid;
  place-items: center;
  width: 2.35em;
  height: 2.35em;
  border: 2px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  color: #6b7280;
  transition: border-color 0.25s ease, color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-stepper-preview svg { width: 1.2em; height: 1.2em; }
/* steps between the current one and the hovered one pick up a tint */
.hfx-stepper-preview :where(li:has(~ li a:is(:hover, :focus-visible))) span { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.hfx-stepper-preview li[aria-current] a { color: var(--c); }
.hfx-stepper-preview li[aria-current] span {
  border-color: var(--c);
  color: var(--c);
}
.hfx-stepper-preview a:is(:hover, :focus-visible) { color: var(--c); }
.hfx-stepper-preview a:is(:hover, :focus-visible) span {
  border-color: var(--c);
  color: var(--c);
  transform: scale(1.12);
}
.hfx-stepper-preview li:first-child span {
  border-color: var(--c);
  background: var(--c);
  color: #fff;
}
.hfx-stepper-preview:has(li:nth-child(1) a:is(:hover, :focus-visible)) { --p: 0%; }
.hfx-stepper-preview:has(li:nth-child(3) a:is(:hover, :focus-visible)) { --p: 66.67%; }
.hfx-stepper-preview:has(li:nth-child(4) a:is(:hover, :focus-visible)) { --p: 100%; }

.hfx-shortcut-keycaps {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  width: 15em;
  padding: 0.55em 0.55em 0.55em 0.9em;
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--c) 6%, transparent);
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-family: system-ui, sans-serif;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.hfx-shortcut-keycaps svg {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.3em;
}
.hfx-shortcut-keycaps span {
  flex: 1;
  text-align: left;
}
.hfx-shortcut-keycaps kbd {
  display: grid;
  place-items: center;
  min-width: 1.75em;
  height: 1.75em;
  padding: 0 0.3em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  box-shadow: 0 0.16em 0 color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--c);
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 600;
}
.hfx-shortcut-keycaps:is(:hover, :focus-visible) {
  border-color: var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: inherit;
}
.hfx-shortcut-keycaps:is(:hover, :focus-visible) kbd {
  animation: hfx-shortcut-keycaps-press 0.5s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}
.hfx-shortcut-keycaps:is(:hover, :focus-visible) kbd + kbd { animation-delay: 0.12s; }
@keyframes hfx-shortcut-keycaps-press {
  0% { transform: translateY(0); box-shadow: 0 0.16em 0 color-mix(in srgb, var(--c) 35%, transparent); }
  35%, 55% { transform: translateY(0.14em); box-shadow: 0 0.02em 0 color-mix(in srgb, var(--c) 35%, transparent); }
  100% {
    transform: translateY(0);
    border-color: var(--c);
    background: var(--c);
    box-shadow: 0 0.16em 0 color-mix(in srgb, var(--c) 60%, #000);
    color: #fff;
  }
}

.hfx-breadcrumb-collapse {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  font-family: system-ui, sans-serif;
  font-weight: 500;
  white-space: nowrap;
}
.hfx-breadcrumb-collapse a {
  color: color-mix(in srgb, currentColor 62%, transparent);
  text-decoration: none;
  transition: color 0.2s ease;
}
.hfx-breadcrumb-collapse a:is(:hover, :focus-visible) { color: var(--c); }
.hfx-breadcrumb-collapse a[aria-current] {
  color: inherit;
  font-weight: 650;
}
/* separators */
.hfx-breadcrumb-collapse-dots > span::before,
.hfx-breadcrumb-collapse-path a::before,
.hfx-breadcrumb-collapse a[aria-current]::before {
  content: "/";
  margin: 0 0.55em;
  color: color-mix(in srgb, var(--c) 55%, transparent);
}
.hfx-breadcrumb-collapse-more { display: flex; }
.hfx-breadcrumb-collapse-dots,
.hfx-breadcrumb-collapse-path {
  display: inline-grid;
  transition: grid-template-columns 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease;
}
.hfx-breadcrumb-collapse-dots { grid-template-columns: 1fr; }
.hfx-breadcrumb-collapse-path {
  grid-template-columns: 0fr;
  opacity: 0;
}
.hfx-breadcrumb-collapse-dots > span,
.hfx-breadcrumb-collapse-path > span {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}
.hfx-breadcrumb-collapse button {
  padding: 0 0.45em 0.3em;
  border: 0;
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.hfx-breadcrumb-collapse-more:is(:hover, :focus-within) .hfx-breadcrumb-collapse-dots {
  grid-template-columns: 0fr;
  opacity: 0;
}
.hfx-breadcrumb-collapse-more:is(:hover, :focus-within) .hfx-breadcrumb-collapse-path {
  grid-template-columns: 1fr;
  opacity: 1;
}

.hfx-chart-bar-tooltip {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: grid;
  grid-template-columns: repeat(7, 1.9em);
  gap: 0.55em;
  height: 7.5em;
  margin: 0 0 1.3em;
  padding: 0 0.4em;
  list-style: none;
  border-bottom: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  font-family: system-ui, sans-serif;
}
.hfx-chart-bar-tooltip li {
  position: relative;
  display: flex;
  align-items: flex-end;
  cursor: pointer;
}
.hfx-chart-bar-tooltip li::before {
  content: "";
  width: 100%;
  height: var(--h);
  border-radius: 0.35em 0.35em 0.1em 0.1em;
  background: color-mix(in srgb, var(--c) 28%, transparent);
  transition: background-color 0.2s ease, box-shadow 0.25s ease;
}
.hfx-chart-bar-tooltip li:nth-child(5)::before { background: color-mix(in srgb, var(--c) 60%, transparent); }
.hfx-chart-bar-tooltip li::after {
  content: attr(data-value);
  position: absolute;
  left: 50%;
  bottom: calc(var(--h) + 0.45em);
  padding: 0.25em 0.5em;
  border-radius: 0.4em;
  background: var(--c);
  color: #fff;
  font-size: 0.75em;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.5em) scale(0.7);
  transform-origin: 50% 100%;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-chart-bar-tooltip span {
  position: absolute;
  top: calc(100% + 0.5em);
  left: 50%;
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.72em;
  font-weight: 600;
  transform: translateX(-50%);
  transition: color 0.2s ease;
}
.hfx-chart-bar-tooltip li:hover::before {
  background: var(--c);
  box-shadow: 0 0 1em -0.2em color-mix(in srgb, var(--c) 70%, transparent);
}
.hfx-chart-bar-tooltip li:hover::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.hfx-chart-bar-tooltip li:hover span { color: var(--c); }

.hfx-map-pin {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 20em;
  height: 10.5em;
  border-radius: 0.8em;
  background:
    linear-gradient(28deg, transparent 47%, #fff 47% 50.5%, transparent 50.5%),
    linear-gradient(-62deg, transparent 58%, #fff 58% 60.5%, transparent 60.5%),
    radial-gradient(ellipse 30% 40% at 12% 88%, color-mix(in srgb, var(--c) 30%, #fff) 0 98%, transparent 100%),
    radial-gradient(ellipse 26% 30% at 88% 14%, color-mix(in srgb, #86efac 70%, var(--c)) 0 98%, transparent 100%),
    repeating-linear-gradient(0deg, transparent 0 1.9em, rgba(255, 255, 255, 0.6) 1.9em 2em),
    repeating-linear-gradient(90deg, transparent 0 1.9em, rgba(255, 255, 255, 0.6) 1.9em 2em),
    color-mix(in srgb, var(--c) 8%, #eef2f7);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
  font-family: system-ui, sans-serif;
}
.hfx-map-pin-dot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0.8em;
  height: 0.8em;
  margin: -0.4em 0 0 -0.4em;
  border: 2px solid #fff;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 70%, transparent);
}
.hfx-map-pin-pin {
  position: absolute;
  left: 50%;
  top: 64%;
  width: 2.4em;
  height: 2.4em;
  margin: -2.4em 0 0 -1.2em;
  color: var(--c);
}
/* the shadow on the ground */
.hfx-map-pin-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.2em;
  height: 0.4em;
  margin: -0.2em 0 0 -0.6em;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(15, 23, 42, 0.45), transparent);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.hfx-map-pin-pin svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0.1em 0.15em rgba(15, 23, 42, 0.3));
  transform-origin: 50% 100%;
  transition: transform 0.4s cubic-bezier(0.34, 1.8, 0.64, 1);
}
.hfx-map-pin-pin span {
  position: absolute;
  bottom: calc(100% + 0.9em);
  left: 50%;
  padding: 0.4em 0.7em;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: 0 0.5em 1em -0.4em rgba(15, 23, 42, 0.4);
  color: #1f2937;
  font-size: 0.8em;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 0.8em) scale(0.8);
  transform-origin: 50% 100%;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-map-pin-pin b {
  margin-left: 0.3em;
  color: var(--c);
}
.hfx-map-pin-pin b::before { content: "\2605 "; }
.hfx-map-pin-pin:is(:hover, :focus-visible) svg { transform: translateY(-0.6em) scale(1.1); }
.hfx-map-pin-pin:is(:hover, :focus-visible)::before {
  opacity: 0.6;
  transform: scale(0.6);
}
.hfx-map-pin-pin:is(:hover, :focus-visible) span {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0.08s;
}

.hfx-toggle-switch {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  cursor: pointer;
}
.hfx-toggle-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.hfx-toggle-switch-track {
  position: relative;
  width: 3.7em;
  height: 2.15em;
  border-radius: 99em;
  background: color-mix(in srgb, var(--c) 25%, transparent);
  transition: background-color 0.25s ease;
}
.hfx-toggle-switch-track::before {
  content: "";
  position: absolute;
  top: 0.225em;
  left: 0.225em;
  width: 1.7em;
  height: 1.7em;
  border-radius: 99em;
  background: #fff;
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 0 0 color-mix(in srgb, var(--c) 22%, transparent);
  transition: width 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), transform 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), box-shadow 0.25s ease;
}
.hfx-toggle-switch input:checked + .hfx-toggle-switch-track { background: var(--c); }
.hfx-toggle-switch input:checked + .hfx-toggle-switch-track::before { transform: translateX(1.55em); }
.hfx-toggle-switch input:focus-visible + .hfx-toggle-switch-track {
  outline: 2px solid var(--c);
  outline-offset: 2px;
}
/* hover: the knob stretches (anchored on its resting side) and gains a halo */
.hfx-toggle-switch:hover .hfx-toggle-switch-track::before {
  width: 2.15em;
  box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3), 0 0 0 0.45em color-mix(in srgb, var(--c) 22%, transparent);
}
.hfx-toggle-switch:hover input:checked + .hfx-toggle-switch-track::before { transform: translateX(1.1em); }

.hfx-color-swatches {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  gap: 0.6em;
  padding-bottom: 1.3em;
  font-family: system-ui, sans-serif;
}
.hfx-color-swatches button {
  position: relative;
  width: 2em;
  height: 2em;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sw);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  color: inherit;
  outline: 2px solid transparent;
  outline-offset: 0.2em;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), outline-color 0.2s ease;
}
.hfx-color-swatches button:nth-child(1) { --sw: color-mix(in srgb, var(--c) 15%, #fff); }
.hfx-color-swatches button:nth-child(2) { --sw: color-mix(in srgb, var(--c) 32%, #fff); }
.hfx-color-swatches button:nth-child(3) { --sw: color-mix(in srgb, var(--c) 60%, #fff); }
.hfx-color-swatches button:nth-child(4) { --sw: var(--c); }
.hfx-color-swatches button:nth-child(5) { --sw: color-mix(in srgb, var(--c) 82%, #000); }
.hfx-color-swatches button:nth-child(6) { --sw: color-mix(in srgb, var(--c) 64%, #000); }
.hfx-color-swatches button:nth-child(7) { --sw: color-mix(in srgb, var(--c) 38%, #000); }
/* shade number */
.hfx-color-swatches button::after {
  content: attr(data-shade);
  position: absolute;
  top: calc(100% + 0.55em);
  left: 50%;
  font-size: 0.68em;
  font-weight: 700;
  opacity: 0;
  transform: translate(-50%, -0.3em);
  transition: opacity 0.2s ease, transform 0.25s ease;
}
/* the selected shade: ring plus a check drawn from two borders */
.hfx-color-swatches button[aria-pressed="true"] { outline-color: var(--sw); }
.hfx-color-swatches button[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0.72em;
  width: 0.45em;
  height: 0.8em;
  border: solid #fff;
  border-width: 0 0.15em 0.15em 0;
  transform: rotate(45deg);
}
.hfx-color-swatches button:is(:hover, :focus-visible) {
  outline-color: color-mix(in srgb, var(--sw) 60%, transparent);
  transform: scale(1.18);
}
.hfx-color-swatches button:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hfx-tag-cloud {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em 0.4em;
  max-width: 19em;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: system-ui, sans-serif;
}
.hfx-tag-cloud a {
  display: inline-block;
  padding: 0.2em 0.55em;
  border-radius: 99em;
  color: color-mix(in srgb, currentColor 78%, transparent);
  font-size: calc(var(--s, 1) * 1em);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-tag-cloud a::before {
  content: "#";
  margin-right: 0.05em;
  color: var(--c);
  transition: color 0.2s ease;
}
.hfx-tag-cloud a:is(:hover, :focus-visible) {
  background: var(--c);
  box-shadow: 0 0.35em 0.8em -0.3em color-mix(in srgb, var(--c) 70%, transparent);
  color: #fff;
  transform: rotate(var(--r)) scale(1.15);
}
.hfx-tag-cloud a:is(:hover, :focus-visible)::before { color: rgba(255, 255, 255, 0.7); }

.hfx-code-block-lines {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  width: 18em;
  margin: 0;
  overflow: hidden;
  border-radius: 0.8em;
  background: #0f172a;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
  color: #e2e8f0;
}
.hfx-code-block-lines pre {
  margin: 0;
  padding: 0.7em 0;
  counter-reset: line;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  line-height: 1.7;
}
.hfx-code-block-lines code > span {
  display: block;
  padding-right: 1em;
  counter-increment: line;
  white-space: pre;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.hfx-code-block-lines code > span::before {
  content: counter(line);
  display: inline-block;
  width: 1.6em;
  margin-right: 1.1em;
  color: #475569;
  text-align: right;
  transition: color 0.15s ease;
}
.hfx-code-block-lines b { color: color-mix(in srgb, var(--c) 45%, #fff); font-weight: 600; }
.hfx-code-block-lines i { color: color-mix(in srgb, var(--c) 30%, #f0abfc); font-style: normal; }
.hfx-code-block-lines u { color: color-mix(in srgb, var(--c) 20%, #fcd34d); text-decoration: none; }
.hfx-code-block-lines code > span:hover {
  background: color-mix(in srgb, var(--c) 20%, transparent);
  box-shadow: inset 0.2em 0 0 var(--c);
}
.hfx-code-block-lines code > span:hover::before { color: color-mix(in srgb, var(--c) 50%, #fff); }
.hfx-code-block-lines > button {
  position: absolute;
  top: 0.55em;
  right: 0.55em;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.45em;
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-0.35em);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1), background-color 0.15s ease;
}
.hfx-code-block-lines > button svg { width: 1em; height: 1em; }
.hfx-code-block-lines:is(:hover, :focus-within) > button {
  opacity: 1;
  transform: none;
}
.hfx-code-block-lines > button:is(:hover, :focus-visible) {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.hfx-file-row-actions {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 19em;
  margin: 0;
  padding: 0.3em;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  border-radius: 0.9em;
  font-family: system-ui, sans-serif;
}
.hfx-file-row-actions li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.45em 0.55em;
  border-radius: 0.55em;
  transition: background-color 0.2s ease;
}
.hfx-file-row-actions-type {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.4em;
  height: 3.4em;
  border-radius: 0.7em;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  color: var(--c);
  font-size: 0.62em;
  font-weight: 800;
  letter-spacing: 0.04em;
  filter: hue-rotate(var(--hue, 0deg));
}
.hfx-file-row-actions-name {
  flex: 1;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hfx-file-row-actions-meta {
  color: color-mix(in srgb, currentColor 55%, transparent);
  font-size: 0.8em;
  transition: opacity 0.2s ease, transform 0.25s ease;
}
.hfx-file-row-actions-tools {
  position: absolute;
  top: 50%;
  right: 0.4em;
  display: flex;
  gap: 0.1em;
  transform: translateY(-50%);
}
.hfx-file-row-actions-tools button {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  padding: 0;
  border: 0;
  border-radius: 0.45em;
  background: none;
  color: color-mix(in srgb, currentColor 70%, transparent);
  cursor: pointer;
  opacity: 0;
  transform: translateX(0.7em);
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.15s ease, color 0.15s ease;
}
.hfx-file-row-actions-tools svg { width: 1.05em; height: 1.05em; }
.hfx-file-row-actions li:is(:hover, :focus-within) { background: color-mix(in srgb, var(--c) 10%, transparent); }
.hfx-file-row-actions li:is(:hover, :focus-within) .hfx-file-row-actions-meta {
  opacity: 0;
  transform: translateX(-0.5em);
}
.hfx-file-row-actions li:is(:hover, :focus-within) .hfx-file-row-actions-tools button {
  opacity: 1;
  transform: none;
}
.hfx-file-row-actions li:is(:hover, :focus-within) .hfx-file-row-actions-tools button:nth-child(2) { transition-delay: 0.04s; }
.hfx-file-row-actions li:is(:hover, :focus-within) .hfx-file-row-actions-tools button:nth-child(3) { transition-delay: 0.08s; }
.hfx-file-row-actions .hfx-file-row-actions-tools button:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 18%, transparent);
  color: var(--c);
  transition-delay: 0s;
}

.hfx-accordion-peek {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  width: 18em;
  border-top: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  font-family: system-ui, sans-serif;
}
.hfx-accordion-peek-item {
  display: grid;
  grid-template-rows: auto 0fr;
  padding-bottom: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  transition: grid-template-rows 0.35s cubic-bezier(0.3, 0.7, 0.4, 1), padding 0.35s cubic-bezier(0.3, 0.7, 0.4, 1), background-color 0.25s ease;
}
.hfx-accordion-peek button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
  padding: 0.6em 0.6em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease;
}
.hfx-accordion-peek button svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: var(--c);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-accordion-peek p {
  min-height: 0;
  margin: 0;
  padding: 0 0.7em;
  overflow: hidden;
  color: color-mix(in srgb, currentColor 65%, transparent);
  font-size: 0.85em;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(-0.4em);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-accordion-peek-item:is(:hover, :focus-within) {
  grid-template-rows: auto 1fr;
  padding-bottom: 0.5em;
  background: color-mix(in srgb, var(--c) 6%, transparent);
}
.hfx-accordion-peek-item:is(:hover, :focus-within) button { color: var(--c); }
.hfx-accordion-peek-item:is(:hover, :focus-within) button svg { transform: translateY(0.2em); }
.hfx-accordion-peek-item:is(:hover, :focus-within) p {
  opacity: 1;
  transform: none;
}

.hfx-range-slider-tooltip {
  --c: var(--hfx-color, #3b82f6);
  --v: 64%;
  font-size: var(--hfx-size, 16px);
  display: flex;
  align-items: center;
  gap: 0.9em;
  width: 16em;
  color: var(--c);
  font-family: system-ui, sans-serif;
}
.hfx-range-slider-tooltip > svg {
  flex: none;
  width: 1.35em;
  height: 1.35em;
}
.hfx-range-slider-tooltip-track {
  position: relative;
  flex: 1;
  height: 1.6em;
  cursor: pointer;
}
/* the visible bar: filled part, then the rest */
.hfx-range-slider-tooltip-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.4em;
  margin-top: -0.2em;
  border-radius: 99em;
  background: linear-gradient(90deg, var(--c) var(--v), color-mix(in srgb, var(--c) 22%, transparent) var(--v));
  transition: transform 0.25s ease;
}
.hfx-range-slider-tooltip-thumb {
  position: absolute;
  top: 50%;
  left: var(--v);
  width: 1.15em;
  height: 1.15em;
  margin: -0.575em 0 0 -0.575em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.2em var(--c), 0 0 0 0 color-mix(in srgb, var(--c) 20%, transparent), 0 0.15em 0.4em rgba(0, 0, 0, 0.3);
  transform: scale(0.8);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
/* value bubble and its arrow */
.hfx-range-slider-tooltip-thumb::after,
.hfx-range-slider-tooltip-thumb::before {
  position: absolute;
  left: 50%;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-range-slider-tooltip-thumb::after {
  content: attr(data-value);
  bottom: calc(100% + 0.75em);
  min-width: 2.2em;
  padding: 0.3em 0.45em;
  border-radius: 0.45em;
  background: var(--c);
  color: #fff;
  font-size: 0.8em;
  font-weight: 700;
  text-align: center;
  transform: translate(-50%, 0.5em) scale(0.6);
  transform-origin: 50% 100%;
}
.hfx-range-slider-tooltip-thumb::before {
  content: "";
  bottom: calc(100% + 0.35em);
  border: 0.3em solid transparent;
  border-top-color: var(--c);
  transform: translate(-50%, 0.5em);
}
.hfx-range-slider-tooltip:hover .hfx-range-slider-tooltip-track::before { transform: scaleY(1.5); }
.hfx-range-slider-tooltip:hover .hfx-range-slider-tooltip-thumb {
  transform: scale(1);
  box-shadow: 0 0 0 0.2em var(--c), 0 0 0 0.6em color-mix(in srgb, var(--c) 20%, transparent), 0 0.15em 0.4em rgba(0, 0, 0, 0.3);
}
.hfx-range-slider-tooltip:hover .hfx-range-slider-tooltip-thumb::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.hfx-range-slider-tooltip:hover .hfx-range-slider-tooltip-thumb::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hfx-chip-remove {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  font-family: system-ui, sans-serif;
}
.hfx-chip-remove-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45em 0.95em;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 99em;
  background: color-mix(in srgb, var(--c) 10%, transparent);
  color: var(--c);
  font-weight: 600;
  line-height: 1.2;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, padding 0.3s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.hfx-chip-remove button {
  display: grid;
  place-items: center;
  width: 0;
  height: 1.3em;
  margin-left: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  color: inherit;
  opacity: 0;
  cursor: pointer;
  transition: width 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), margin 0.3s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.2s ease;
}
.hfx-chip-remove svg {
  flex: none;
  width: 0.85em;
  height: 0.85em;
  transform: rotate(-90deg) scale(0.5);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-chip-remove-chip:is(:hover, :focus-within) {
  padding-right: 0.45em;
  border-color: var(--c);
  background: var(--c);
  color: #fff;
}
.hfx-chip-remove-chip:is(:hover, :focus-within) button {
  width: 1.3em;
  margin-left: 0.45em;
  opacity: 1;
}
.hfx-chip-remove-chip:is(:hover, :focus-within) svg { transform: rotate(0) scale(1); }

.hfx-grow {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.hfx-grow:is(:hover, :focus-visible) {
  transform: scale(1.1);
}

.hfx-shrink {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c) 25%, transparent);
  background: #fff;
  color: var(--c);
  box-shadow: 0 0.5em 1em -0.35em color-mix(in srgb, var(--c) 55%, transparent);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.hfx-shrink svg {
  width: 1.1em;
  height: 1.1em;
}
.hfx-shrink:is(:hover, :focus-visible) {
  transform: scale(0.94);
  box-shadow: 0 0.15em 0.3em -0.1em color-mix(in srgb, var(--c) 45%, transparent);
}

.hfx-pulse {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  border-radius: 2em;}
.hfx-pulse-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0.2em rgb(255 255 255 / 0.3);
}
.hfx-pulse:is(:hover, :focus-visible) {
  animation: hfx-pulse-beat 1s linear infinite;
}
@keyframes hfx-pulse-beat {
  0%, 100% { transform: scale(1); animation-timing-function: ease-out; }
  25%      { transform: scale(1.09); animation-timing-function: ease-in-out; }
  75%      { transform: scale(0.95); animation-timing-function: ease-in; }
}

.hfx-push {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-push svg {
  width: 1.1em;
  height: 1.1em;
}
.hfx-push:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  animation: hfx-push-press 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes hfx-push-press {
  50% { transform: scale(0.85); }
}

.hfx-pop {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  border-radius: 2em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 65%, #fff), var(--c) 60%);
  color: #fff;
  box-shadow: 0 0.4em 1em -0.4em color-mix(in srgb, var(--c) 70%, transparent);}
.hfx-pop-label {
  display: block;
}
.hfx-pop:is(:hover, :focus-visible) {
  animation: hfx-pop-pop 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-pop:is(:hover, :focus-visible) .hfx-pop-label {
  animation: hfx-pop-follow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) 0.08s;
}
@keyframes hfx-pop-pop {
  30% { transform: scale(1.18); }
  55% { transform: scale(0.94); }
  78% { transform: scale(1.04); }
}
/* the label lags a beat and moves less, so it trails the button instead of doubling it */
@keyframes hfx-pop-follow {
  35% { transform: scale(1.06); }
  65% { transform: scale(0.98); }
}

.hfx-grow-rotate {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  padding: 0.75em 1.5em;
  outline: 1px dashed rgb(255 255 255 / 0.7);
  outline-offset: -0.4em;
  letter-spacing: 0.02em;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);}
.hfx-grow-rotate:is(:hover, :focus-visible) {
  transform: scale(1.1) rotate(4deg);
}

.hfx-float-shadow {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.hfx-float-shadow::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  right: 10%;
  height: 0.8em;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 55%, transparent), transparent);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}
.hfx-float-shadow:is(:hover, :focus-visible) {
  transform: translateY(-0.5em);
}
.hfx-float-shadow:is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: translateY(0.65em) scaleX(0.85);
}

.hfx-bob {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  border-radius: 2em;
  box-shadow: 0 0.4em 0.9em -0.4em color-mix(in srgb, var(--c) 70%, transparent);
  transition: box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.hfx-bob svg {
  width: 1.15em;
  height: 1.15em;
}
.hfx-bob:is(:hover, :focus-visible) {
  box-shadow: 0 1em 1.4em -0.7em color-mix(in srgb, var(--c) 60%, transparent);
  animation: hfx-bob-rise 0.3s ease-out forwards, hfx-bob-bob 1.5s ease-in-out 0.3s infinite alternate;
}
@keyframes hfx-bob-rise {
  to { transform: translateY(-0.5em); }
}
@keyframes hfx-bob-bob {
  from { transform: translateY(-0.5em); }
  to   { transform: translateY(-0.2em); }
}

.hfx-hang {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font: 700 var(--hfx-size, 16px) system-ui, sans-serif;
  text-decoration: none;
}
/* the nail */
.hfx-hang::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 0.18em color-mix(in srgb, var(--c) 25%, transparent);
}
.hfx-hang-cord {
  position: relative;
  z-index: 1;
  width: 2px;
  height: 1.8em;
  margin-top: -0.2em;
  background: color-mix(in srgb, var(--c) 70%, transparent);
  transform-origin: 50% 0;
}
.hfx-hang-tag {
  position: relative;
  margin-top: -0.5em;
  padding: 0.95em 1.3em 0.7em;
  border-radius: 0.45em;
  background: var(--c);
  color: #fff;
  letter-spacing: 0.02em;
  box-shadow: 0 0.5em 0.9em -0.45em color-mix(in srgb, var(--c) 70%, transparent);
}
/* the punched hole the cord runs through */
.hfx-hang-tag::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 50%;
  width: 0.4em;
  height: 0.4em;
  margin-left: -0.2em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.85);
}
.hfx-hang:is(:hover, :focus-visible) .hfx-hang-tag {
  animation: hfx-hang-drop 0.3s ease-out forwards, hfx-hang-bob 1.5s ease-in-out 0.3s infinite alternate;
}
.hfx-hang:is(:hover, :focus-visible) .hfx-hang-cord {
  animation: hfx-hang-stretch 0.3s ease-out forwards, hfx-hang-spring 1.5s ease-in-out 0.3s infinite alternate;
}
/* the cord is 1.8em: dropping 0.6em stretches it to 2.4em, 0.25em to 2.05em */
@keyframes hfx-hang-drop {
  to { transform: translateY(0.6em); }
}
@keyframes hfx-hang-bob {
  from { transform: translateY(0.6em); }
  to   { transform: translateY(0.25em); }
}
@keyframes hfx-hang-stretch {
  to { transform: scaleY(1.333); }
}
@keyframes hfx-hang-spring {
  from { transform: scaleY(1.333); }
  to   { transform: scaleY(1.139); }
}

.hfx-wobble-horizontal {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-wobble-horizontal:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 22%, transparent);
  animation: hfx-wobble-horizontal-shake 0.9s ease-in-out;
}
@keyframes hfx-wobble-horizontal-shake {
  16% { transform: translateX(0.55em); }
  33% { transform: translateX(-0.4em); }
  50% { transform: translateX(0.26em); }
  66% { transform: translateX(-0.14em); }
  83% { transform: translateX(0.05em); }
}

.hfx-buzz-out {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
}
.hfx-buzz-out svg {
  width: 1.1em;
  height: 1.1em;
}
.hfx-buzz-out:is(:hover, :focus-visible) {
  animation: hfx-buzz-out-buzz 0.75s linear;
}
@keyframes hfx-buzz-out-buzz {
  10% { transform: translateX(0.2em) rotate(2deg); }
  20% { transform: translateX(-0.2em) rotate(-2deg); }
  30% { transform: translateX(0.18em) rotate(2deg); }
  40% { transform: translateX(-0.18em) rotate(-2deg); }
  50% { transform: translateX(0.13em) rotate(1deg); }
  60% { transform: translateX(-0.13em) rotate(-1deg); }
  70% { transform: translateX(0.08em) rotate(1deg); }
  80% { transform: translateX(-0.08em) rotate(-1deg); }
  90% { transform: translateX(0.04em) rotate(0); }
}

.hfx-skew {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease;}
.hfx-skew:is(:hover, :focus-visible) {
  transform: skewX(-10deg);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}

.hfx-bubble-float-bottom {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.hfx-bubble-float-bottom::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border: 0.55em solid transparent;
  border-bottom: 0;
  border-top-color: var(--c);
  transform: translate(-50%, -0.6em);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-bubble-float-bottom:is(:hover, :focus-visible) {
  transform: translateY(-0.55em);
}
.hfx-bubble-float-bottom:is(:hover, :focus-visible)::before {
  transform: translate(-50%, -1px);
}

.hfx-curl-top-right {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);}
.hfx-curl-top-right svg {
  width: 1.1em;
  height: 1.1em;
}
/* the flap: the cut corner mirrored across the fold, lighter like the back of the paper */
.hfx-curl-top-right::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1.4em;
  height: 1.4em;
  border-bottom-left-radius: 0.3em;
  background: linear-gradient(225deg, transparent 50%, color-mix(in srgb, var(--c) 45%, #fff) 50%, color-mix(in srgb, var(--c) 8%, #fff) 90%);
  box-shadow: -0.12em 0.12em 0.25em rgb(0 0 0 / 0.3);
  transform: scale(0);
  transform-origin: 100% 0;
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-curl-top-right:is(:hover, :focus-visible) {
  clip-path: polygon(0 0, calc(100% - 1.4em) 0, 100% 1.4em, 100% 100%, 0 100%);
}
.hfx-curl-top-right:is(:hover, :focus-visible)::before {
  transform: scale(1);
}

.hfx-outline-out {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  outline: 2px solid transparent;
  outline-offset: 0;
  transition: outline-offset 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), outline-color 0.3s ease;}
.hfx-outline-out:is(:hover, :focus-visible) {
  outline-color: var(--c);
  outline-offset: 0.3em;
}

.hfx-ripple-in {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  border: 2px solid var(--c);
  background: transparent;
  color: var(--c);
  transition: background-color 0.3s ease;}
.hfx-ripple-in::before,
.hfx-ripple-in::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--c);
  border-radius: 0.5em;
  opacity: 0;
  pointer-events: none;
}
.hfx-ripple-in:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
.hfx-ripple-in:is(:hover, :focus-visible)::before {
  animation: hfx-ripple-in-close 0.6s cubic-bezier(0.3, 0, 0.3, 1);
}
.hfx-ripple-in:is(:hover, :focus-visible)::after {
  animation: hfx-ripple-in-close 0.6s cubic-bezier(0.3, 0, 0.3, 1) 0.18s backwards;
}
@keyframes hfx-ripple-in-close {
  from { inset: -1em; border-radius: 1.5em; opacity: 0; }
  60%  { opacity: 1; }
  to   { inset: -2px; border-radius: 0.5em; opacity: 0; }
}

.hfx-trim {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  position: relative;}
.hfx-trim::before {
  content: "";
  position: absolute;
  inset: 0.3em;
  border: 2px solid rgb(255 255 255 / 0.85);
  border-radius: 0.25em;
  opacity: 0;
  transform: scale(1.08, 1.25);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}
.hfx-trim:is(:hover, :focus-visible)::before {
  opacity: 1;
  transform: none;
}

.hfx-round-corners {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  border-radius: 0;
  transition: border-radius 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);}
.hfx-round-corners:is(:hover, :focus-visible) {
  border-radius: 1.4em;
}

.hfx-underline-reveal {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 0;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.3s ease;}
.hfx-underline-reveal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.24em;
  background: var(--c);
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-underline-reveal:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 18%, transparent);
}
.hfx-underline-reveal:is(:hover, :focus-visible)::before {
  transform: translateY(0);
}

.hfx-shadow-radial {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  position: relative;}
.hfx-shadow-radial::before,
.hfx-shadow-radial::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1em;
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}
.hfx-shadow-radial::before {
  bottom: 100%;
  background: radial-gradient(ellipse at 50% 150%, color-mix(in srgb, var(--c) 60%, transparent), transparent 70%);
}
.hfx-shadow-radial::after {
  top: 100%;
  background: radial-gradient(ellipse at 50% -50%, color-mix(in srgb, var(--c) 60%, transparent), transparent 70%);
}
.hfx-shadow-radial:is(:hover, :focus-visible)::before,
.hfx-shadow-radial:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: none;
}

.hfx-box-shadow-outset {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: var(--c);
  color: #fff;
  border-radius: 0.35em;
  box-shadow: 0 0 0 color-mix(in srgb, var(--c) 60%, transparent), 0 0 0 color-mix(in srgb, var(--c) 35%, transparent), 0 0 0 color-mix(in srgb, var(--c) 18%, transparent);
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);}
.hfx-box-shadow-outset:is(:hover, :focus-visible) {
  transform: translate(-0.3em, -0.3em);
  box-shadow: 0.25em 0.25em 0 color-mix(in srgb, var(--c) 60%, transparent), 0.5em 0.5em 0 color-mix(in srgb, var(--c) 35%, transparent), 0.75em 0.75em 0 color-mix(in srgb, var(--c) 18%, transparent);
}

.hfx-back-pulse {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
  transition: background-color 0.4s ease, color 0.4s ease;}
.hfx-back-pulse svg {
  width: 1.1em;
  height: 1.1em;
}
.hfx-back-pulse:is(:hover, :focus-visible) {
  background: var(--c);
  color: #fff;
  animation: hfx-back-pulse-throb 1s ease-in-out 0.5s infinite;
}
@keyframes hfx-back-pulse-throb {
  50% { background-color: color-mix(in srgb, var(--c) 72%, transparent); }
}

.hfx-wobble-skew {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  border-radius: 0.8em;
  background: linear-gradient(color-mix(in srgb, var(--c) 78%, #fff), var(--c) 55%);
  color: #fff;
  box-shadow: inset 0 0.15em 0 rgb(255 255 255 / 0.35), 0 0.35em 0.8em -0.35em color-mix(in srgb, var(--c) 70%, transparent);
  text-shadow: 0 1px 1px color-mix(in srgb, var(--c) 60%, #000);}
.hfx-wobble-skew:is(:hover, :focus-visible) {
  animation: hfx-wobble-skew-jelly 1s ease-in-out;
}
@keyframes hfx-wobble-skew-jelly {
  16% { transform: skewX(-12deg); }
  33% { transform: skewX(10deg); }
  50% { transform: skewX(-6deg); }
  66% { transform: skewX(4deg); }
  83% { transform: skewX(-2deg); }
}

.hfx-forward-backward {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  gap: 0.75em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
}
.hfx-forward-backward a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.65em 1.15em;
  border-radius: 0.5em;
  text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease;
}
.hfx-forward-backward svg {
  width: 1.1em;
  height: 1.1em;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-forward-backward-prev {
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
}
.hfx-forward-backward-next {
  background: var(--c);
  color: #fff;
}
.hfx-forward-backward-prev:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 20%, transparent);
  transform: translateX(-0.45em);
}
.hfx-forward-backward-prev:is(:hover, :focus-visible) svg {
  transform: translateX(-0.2em);
}
.hfx-forward-backward-next:is(:hover, :focus-visible) {
  transform: translateX(0.45em);
}
.hfx-forward-backward-next:is(:hover, :focus-visible) svg {
  transform: translateX(0.2em);
}

.hfx-icon-float-away {
  --c: var(--hfx-color, #3b82f6);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.6em;
  border-radius: 0.5em;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
  border: 0;
  border-radius: 2em;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  transition: background-color 0.25s ease;}
.hfx-icon-float-away-icon {
  display: grid;
  width: 1.2em;
  height: 1.2em;
}
.hfx-icon-float-away-icon svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
}
.hfx-icon-float-away-heart {
  transition: fill 0.2s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hfx-icon-float-away-icon .hfx-icon-float-away-ghost {
  --drift: 1;
  fill: currentColor;
  opacity: 0;
}
.hfx-icon-float-away-ghost:nth-child(2) {
  --drift: -1;
}
.hfx-icon-float-away:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c) 20%, transparent);
}
.hfx-icon-float-away:is(:hover, :focus-visible) .hfx-icon-float-away-heart {
  fill: currentColor;
  transform: scale(1.12);
}
.hfx-icon-float-away:is(:hover, :focus-visible) .hfx-icon-float-away-ghost {
  animation: hfx-icon-float-away-rise 1.2s ease-out infinite;
}
.hfx-icon-float-away:is(:hover, :focus-visible) .hfx-icon-float-away-ghost:nth-child(2) {
  animation-delay: 0.6s;
}
/* the ghosts sit behind the main heart and surface above it, so they never blur its outline */
@keyframes hfx-icon-float-away-rise {
  0%   { opacity: 0; transform: translate(0, -0.2em) scale(0.45); }
  25%  { opacity: 0.9; transform: translate(calc(var(--drift) * 0.15em), -1.05em) scale(0.7); }
  100% { opacity: 0; transform: translate(calc(var(--drift) * 0.6em), -2.5em) scale(0.55); }
}

.hfx-direction-aware {
  --c: var(--hfx-color, #3b82f6);
  font: 400 var(--hfx-size, 16px) system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  display: block;
  width: 16em;
  height: 10em;
  overflow: hidden;
  border-radius: 0.75em;
  color: #fff;
  text-decoration: none;
}
.hfx-direction-aware-photo {
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 42% at 18% 112%, color-mix(in srgb, var(--c) 45%, #0f172a) 99%, transparent),
    radial-gradient(66% 36% at 92% 108%, color-mix(in srgb, var(--c) 60%, #0f172a) 99%, transparent),
    conic-gradient(from 128deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 78%, #1e293b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 120deg at 92% 55%, transparent 0, color-mix(in srgb, var(--c) 78%, #1e293b) 0.4deg 119.6deg, transparent 120deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 45%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 45%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 70% 26%, #fff 0 0.75em, rgb(255 255 255 / 0.45) 0.85em, transparent 3em),
    linear-gradient(color-mix(in srgb, var(--c) 60%, #fff), color-mix(in srgb, var(--c) 14%, #fff7ed) 75%);
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* four hit zones, one triangle per edge: top, right, bottom, left */
.hfx-direction-aware-zone {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.hfx-direction-aware-zone:nth-child(1) { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.hfx-direction-aware-zone:nth-child(2) { clip-path: polygon(100% 0, 100% 100%, 50% 50%); }
.hfx-direction-aware-zone:nth-child(3) { clip-path: polygon(0 100%, 100% 100%, 50% 50%); }
.hfx-direction-aware-zone:nth-child(4) { clip-path: polygon(0 0, 0 100%, 50% 50%); }
/* the zone you came in through covers the card, so crossing into another triangle changes nothing */
.hfx-direction-aware-zone:hover {
  z-index: 4;
  clip-path: inset(0);
}
.hfx-direction-aware-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.2em;
  padding: 1em 1.1em;
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 88%, #000) 10%, color-mix(in srgb, var(--c) 55%, transparent) 55%, color-mix(in srgb, var(--c) 15%, transparent));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hfx-direction-aware-overlay strong {
  font-size: 1.1em;
}
.hfx-direction-aware-overlay span {
  font-size: 0.85em;
  opacity: 0.85;
}
.hfx-direction-aware:is(:hover, :focus-visible) .hfx-direction-aware-photo {
  transform: scale(1.06);
}
/* in instantly (the slide is the entrance), out with a fade */
.hfx-direction-aware-zone:hover ~ .hfx-direction-aware-overlay,
.hfx-direction-aware:focus-visible .hfx-direction-aware-overlay {
  opacity: 1;
  transition-duration: 0s;
}
.hfx-direction-aware-zone:nth-child(1):hover ~ .hfx-direction-aware-overlay { animation: hfx-direction-aware-top 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hfx-direction-aware-zone:nth-child(2):hover ~ .hfx-direction-aware-overlay { animation: hfx-direction-aware-right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hfx-direction-aware-zone:nth-child(3):hover ~ .hfx-direction-aware-overlay,
.hfx-direction-aware:focus-visible .hfx-direction-aware-overlay { animation: hfx-direction-aware-bottom 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.hfx-direction-aware-zone:nth-child(4):hover ~ .hfx-direction-aware-overlay { animation: hfx-direction-aware-left 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
@keyframes hfx-direction-aware-top { from { transform: translateY(-100%); } }
@keyframes hfx-direction-aware-right { from { transform: translateX(100%); } }
@keyframes hfx-direction-aware-bottom { from { transform: translateY(100%); } }
@keyframes hfx-direction-aware-left { from { transform: translateX(-100%); } }

.hfx-magnetic-button {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 1.2em 1.8em; /* the magnetic field around the visible pill */
  border: 0;
  background: none;
  font: 600 var(--hfx-size, 16px) system-ui, sans-serif;
  cursor: pointer;
}
.hfx-magnetic-button-cell {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: calc(100% / 3);
}
.hfx-magnetic-button-cell:nth-child(3n + 2) { left: calc(100% / 3); }
.hfx-magnetic-button-cell:nth-child(3n) { left: calc(200% / 3); }
.hfx-magnetic-button-cell:nth-child(n + 4) { top: calc(100% / 3); }
.hfx-magnetic-button-cell:nth-child(n + 7) { top: calc(200% / 3); }
.hfx-magnetic-button-face {
  --x: 0;
  --y: 0;
  display: block;
  padding: 0.85em 1.8em;
  border-radius: 2em;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0.5em 1.1em -0.5em color-mix(in srgb, var(--c) 75%, transparent);
  transform: translate(calc(var(--x) * 0.7em), calc(var(--y) * 0.5em));
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}
.hfx-magnetic-button-label {
  display: block;
  transform: translate(calc(var(--x) * 0.3em), calc(var(--y) * 0.2em));
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-magnetic-button:is(:hover, :focus-visible) .hfx-magnetic-button-face {
  box-shadow: 0 0.9em 1.5em -0.6em color-mix(in srgb, var(--c) 75%, transparent);
}
.hfx-magnetic-button:focus-visible {
  outline: none;
}
.hfx-magnetic-button:focus-visible .hfx-magnetic-button-face {
  outline: 2px solid var(--c);
  outline-offset: 0.25em;
}
.hfx-magnetic-button-cell:nth-child(1):hover ~ .hfx-magnetic-button-face { --x: -1; --y: -1; }
.hfx-magnetic-button-cell:nth-child(2):hover ~ .hfx-magnetic-button-face { --x: 0; --y: -1; }
.hfx-magnetic-button-cell:nth-child(3):hover ~ .hfx-magnetic-button-face { --x: 1; --y: -1; }
.hfx-magnetic-button-cell:nth-child(4):hover ~ .hfx-magnetic-button-face { --x: -1; --y: 0; }
.hfx-magnetic-button-cell:nth-child(5):hover ~ .hfx-magnetic-button-face { --x: 0; --y: 0; }
.hfx-magnetic-button-cell:nth-child(6):hover ~ .hfx-magnetic-button-face { --x: 1; --y: 0; }
.hfx-magnetic-button-cell:nth-child(7):hover ~ .hfx-magnetic-button-face { --x: -1; --y: 1; }
.hfx-magnetic-button-cell:nth-child(8):hover ~ .hfx-magnetic-button-face { --x: 0; --y: 1; }
.hfx-magnetic-button-cell:nth-child(9):hover ~ .hfx-magnetic-button-face { --x: 1; --y: 1; }

.hfx-cursor-tilt-card {
  --c: var(--hfx-color, #3b82f6);
  position: relative;
  display: inline-block;
  perspective: 40em;
  font: 400 var(--hfx-size, 16px) system-ui, sans-serif;
  color: #fff;
  text-decoration: none;
}
.hfx-cursor-tilt-card-cell {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: calc(100% / 3);
}
.hfx-cursor-tilt-card-cell:nth-child(3n + 2) { left: calc(100% / 3); }
.hfx-cursor-tilt-card-cell:nth-child(3n) { left: calc(200% / 3); }
.hfx-cursor-tilt-card-cell:nth-child(n + 4) { top: calc(100% / 3); }
.hfx-cursor-tilt-card-cell:nth-child(n + 7) { top: calc(200% / 3); }
.hfx-cursor-tilt-card-face {
  --x: 0;
  --y: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: 14em;
  height: 8.6em;
  padding: 1em 1.2em 1.1em;
  overflow: hidden;
  border-radius: 0.9em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 45%, color-mix(in srgb, var(--c) 60%, #000));
  box-shadow: 0 0.6em 1.2em -0.6em color-mix(in srgb, var(--c) 70%, transparent);
  /* the corner under the pointer lifts toward the viewer */
  transform: rotateX(calc(var(--y) * 12deg)) rotateY(calc(var(--x) * -12deg));
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), scale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-cursor-tilt-card-glare {
  position: absolute;
  inset: -50%;
  background: radial-gradient(circle, rgb(255 255 255 / 0.4), transparent 40%);
  opacity: 0;
  transform: translate(calc(var(--x) * 22%), calc(var(--y) * 22%));
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
  pointer-events: none;
}
.hfx-cursor-tilt-card-tag {
  position: relative;
  padding: 0.3em 0.7em;
  border-radius: 2em;
  background: rgb(255 255 255 / 0.2);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hfx-cursor-tilt-card-price {
  position: relative;
  margin-top: auto;
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.1;
}
.hfx-cursor-tilt-card small {
  font-size: 0.45em;
  font-weight: 500;
  opacity: 0.8;
}
.hfx-cursor-tilt-card-note {
  position: relative;
  font-size: 0.8em;
  opacity: 0.85;
}
.hfx-cursor-tilt-card:is(:hover, :focus-visible) .hfx-cursor-tilt-card-face {
  scale: 1.04;
  box-shadow: 0 1.2em 1.8em -0.9em color-mix(in srgb, var(--c) 75%, transparent);
}
.hfx-cursor-tilt-card:is(:hover, :focus-visible) .hfx-cursor-tilt-card-glare {
  opacity: 1;
}
.hfx-cursor-tilt-card:focus-visible {
  outline: none;
}
.hfx-cursor-tilt-card:focus-visible .hfx-cursor-tilt-card-face {
  outline: 2px solid var(--c);
  outline-offset: 0.25em;
}
.hfx-cursor-tilt-card-cell:nth-child(1):hover ~ .hfx-cursor-tilt-card-face { --x: -1; --y: -1; }
.hfx-cursor-tilt-card-cell:nth-child(2):hover ~ .hfx-cursor-tilt-card-face { --x: 0; --y: -1; }
.hfx-cursor-tilt-card-cell:nth-child(3):hover ~ .hfx-cursor-tilt-card-face { --x: 1; --y: -1; }
.hfx-cursor-tilt-card-cell:nth-child(4):hover ~ .hfx-cursor-tilt-card-face { --x: -1; --y: 0; }
.hfx-cursor-tilt-card-cell:nth-child(5):hover ~ .hfx-cursor-tilt-card-face { --x: 0; --y: 0; }
.hfx-cursor-tilt-card-cell:nth-child(6):hover ~ .hfx-cursor-tilt-card-face { --x: 1; --y: 0; }
.hfx-cursor-tilt-card-cell:nth-child(7):hover ~ .hfx-cursor-tilt-card-face { --x: -1; --y: 1; }
.hfx-cursor-tilt-card-cell:nth-child(8):hover ~ .hfx-cursor-tilt-card-face { --x: 0; --y: 1; }
.hfx-cursor-tilt-card-cell:nth-child(9):hover ~ .hfx-cursor-tilt-card-face { --x: 1; --y: 1; }

.hfx-image-zoom-to-cursor {
  --c: var(--hfx-color, #3b82f6);
  font-size: var(--hfx-size, 16px);
  position: relative;
  isolation: isolate;
  display: block;
  width: 16em;
  height: 10em;
  overflow: hidden;
  border-radius: 0.75em;
  cursor: zoom-in;
}
.hfx-image-zoom-to-cursor-cell {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: calc(100% / 3);
}
.hfx-image-zoom-to-cursor-cell:nth-child(3n + 2) { left: calc(100% / 3); }
.hfx-image-zoom-to-cursor-cell:nth-child(3n) { left: calc(200% / 3); }
.hfx-image-zoom-to-cursor-cell:nth-child(n + 4) { top: calc(100% / 3); }
.hfx-image-zoom-to-cursor-cell:nth-child(n + 7) { top: calc(200% / 3); }
.hfx-image-zoom-to-cursor-photo {
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 42% at 18% 112%, color-mix(in srgb, var(--c) 45%, #0f172a) 99%, transparent),
    radial-gradient(66% 36% at 92% 108%, color-mix(in srgb, var(--c) 60%, #0f172a) 99%, transparent),
    conic-gradient(from 163deg at 6% 61%, transparent 0, color-mix(in srgb, var(--c) 38%, #06101f) 0.4deg 33.6deg, transparent 34deg),
    conic-gradient(from 163deg at 10% 57%, transparent 0, color-mix(in srgb, var(--c) 38%, #06101f) 0.4deg 33.6deg, transparent 34deg),
    conic-gradient(from 163deg at 14% 62%, transparent 0, color-mix(in srgb, var(--c) 38%, #06101f) 0.4deg 33.6deg, transparent 34deg),
    conic-gradient(from 163deg at 31% 63%, transparent 0, color-mix(in srgb, var(--c) 38%, #06101f) 0.4deg 33.6deg, transparent 34deg),
    conic-gradient(from 163deg at 35% 60%, transparent 0, color-mix(in srgb, var(--c) 38%, #06101f) 0.4deg 33.6deg, transparent 34deg),
    conic-gradient(from 163deg at 72% 64%, transparent 0, color-mix(in srgb, var(--c) 38%, #06101f) 0.4deg 33.6deg, transparent 34deg),
    conic-gradient(from 163deg at 77% 59%, transparent 0, color-mix(in srgb, var(--c) 38%, #06101f) 0.4deg 33.6deg, transparent 34deg),
    conic-gradient(from 163deg at 81% 62%, transparent 0, color-mix(in srgb, var(--c) 38%, #06101f) 0.4deg 33.6deg, transparent 34deg),
    conic-gradient(from 163deg at 96% 60%, transparent 0, color-mix(in srgb, var(--c) 38%, #06101f) 0.4deg 33.6deg, transparent 34deg),
    conic-gradient(from 128deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 78%, #1e293b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 120deg at 92% 55%, transparent 0, color-mix(in srgb, var(--c) 78%, #1e293b) 0.4deg 119.6deg, transparent 120deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 45%, #fff) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 45%, #fff) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 70% 26%, #fff 0 0.75em, rgb(255 255 255 / 0.45) 0.85em, transparent 3em),
    linear-gradient(color-mix(in srgb, var(--c) 60%, #fff), color-mix(in srgb, var(--c) 14%, #fff7ed) 75%);
  transform-origin: 50% 50%;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), transform-origin 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-image-zoom-to-cursor-badge {
  position: absolute;
  right: 0.6em;
  bottom: 0.6em;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: var(--c);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.hfx-image-zoom-to-cursor-badge svg {
  width: 1.1em;
  height: 1.1em;
}
.hfx-image-zoom-to-cursor:is(:hover, :focus-visible) .hfx-image-zoom-to-cursor-photo {
  transform: scale(2);
}
.hfx-image-zoom-to-cursor:is(:hover, :focus-visible) .hfx-image-zoom-to-cursor-badge {
  opacity: 0;
  transform: scale(0.6);
}
.hfx-image-zoom-to-cursor-cell:nth-child(1):hover ~ .hfx-image-zoom-to-cursor-photo { transform-origin: 12% 12%; }
.hfx-image-zoom-to-cursor-cell:nth-child(2):hover ~ .hfx-image-zoom-to-cursor-photo { transform-origin: 50% 12%; }
.hfx-image-zoom-to-cursor-cell:nth-child(3):hover ~ .hfx-image-zoom-to-cursor-photo { transform-origin: 88% 12%; }
.hfx-image-zoom-to-cursor-cell:nth-child(4):hover ~ .hfx-image-zoom-to-cursor-photo { transform-origin: 12% 50%; }
.hfx-image-zoom-to-cursor-cell:nth-child(5):hover ~ .hfx-image-zoom-to-cursor-photo { transform-origin: 50% 50%; }
.hfx-image-zoom-to-cursor-cell:nth-child(6):hover ~ .hfx-image-zoom-to-cursor-photo { transform-origin: 88% 50%; }
.hfx-image-zoom-to-cursor-cell:nth-child(7):hover ~ .hfx-image-zoom-to-cursor-photo { transform-origin: 12% 88%; }
.hfx-image-zoom-to-cursor-cell:nth-child(8):hover ~ .hfx-image-zoom-to-cursor-photo { transform-origin: 50% 88%; }
.hfx-image-zoom-to-cursor-cell:nth-child(9):hover ~ .hfx-image-zoom-to-cursor-photo { transform-origin: 88% 88%; }

.hfx-video-thumbnail {
  --c: var(--hfx-color, #3b82f6);
  display: flex;
  flex-direction: column;
  gap: 0.3em;
  width: 14em;
  font: 400 var(--hfx-size, 16px) system-ui, sans-serif;
  color: inherit;
  text-decoration: none;
}
.hfx-video-thumbnail-frame {
  position: relative;
  isolation: isolate;
  aspect-ratio: 16 / 9;
  margin-bottom: 0.3em;
  overflow: hidden;
  border-radius: 0.7em;
}
.hfx-video-thumbnail-scene {
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 42% at 18% 112%, color-mix(in srgb, var(--c) 20%, #0b0a1f) 99%, transparent),
    radial-gradient(66% 36% at 92% 108%, color-mix(in srgb, var(--c) 26%, #0b0a1f) 99%, transparent),
    conic-gradient(from 128deg at 70% 42%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 103.6deg, transparent 104deg),
    conic-gradient(from 120deg at 92% 55%, transparent 0, color-mix(in srgb, var(--c) 32%, #1e1b4b) 0.4deg 119.6deg, transparent 120deg),
    conic-gradient(from 124deg at 28% 38%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 111.6deg, transparent 112deg),
    conic-gradient(from 126deg at 50% 52%, transparent 0, color-mix(in srgb, var(--c) 42%, #6b2159) 0.4deg 107.6deg, transparent 108deg),
    radial-gradient(circle at 36% 56%, #fef3c7 0 0.9em, rgb(254 215 170 / 0.55) 1em, transparent 3.8em),
    linear-gradient(color-mix(in srgb, var(--c) 55%, #1e1b4b), color-mix(in srgb, var(--c) 35%, #f472b6) 55%, color-mix(in srgb, var(--c) 12%, #fdba74) 78%);
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* a strip of clouds twice the frame's width that repeats halfway, so its drift loops without a seam */
.hfx-video-thumbnail-scene::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 55%;
  background:
    radial-gradient(20% 28% at 22% 45%, rgb(255 255 255 / 0.4), transparent 70%),
    radial-gradient(14% 20% at 36% 28%, rgb(255 255 255 / 0.3), transparent 70%),
    radial-gradient(18% 24% at 78% 60%, rgb(255 255 255 / 0.3), transparent 70%);
  background-size: 50% 100%;
}
.hfx-video-thumbnail-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  margin: auto;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.45);
  color: #fff;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-video-thumbnail-play svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
}
.hfx-video-thumbnail-time {
  position: absolute;
  right: 0.55em;
  bottom: 0.55em;
  padding: 0.15em 0.4em;
  border-radius: 0.3em;
  background: rgb(0 0 0 / 0.7);
  color: #fff;
  font-size: 0.7em;
  font-weight: 600;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hfx-video-thumbnail-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.22em;
  background: rgb(255 255 255 / 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hfx-video-thumbnail-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.hfx-video-thumbnail-title {
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.2s ease;
}
.hfx-video-thumbnail-meta {
  font-size: 0.78em;
  opacity: 0.65;
}
.hfx-video-thumbnail:is(:hover, :focus-visible) .hfx-video-thumbnail-scene {
  transform: scale(1.04);
}
.hfx-video-thumbnail:is(:hover, :focus-visible) .hfx-video-thumbnail-scene::after {
  animation: hfx-video-thumbnail-drift 10s linear infinite;
}
.hfx-video-thumbnail:is(:hover, :focus-visible) .hfx-video-thumbnail-play {
  opacity: 0;
  transform: scale(0.6);
}
.hfx-video-thumbnail:is(:hover, :focus-visible) .hfx-video-thumbnail-time {
  transform: translateY(-0.35em);
}
.hfx-video-thumbnail:is(:hover, :focus-visible) .hfx-video-thumbnail-progress {
  opacity: 1;
}
.hfx-video-thumbnail:is(:hover, :focus-visible) .hfx-video-thumbnail-progress::after {
  animation: hfx-video-thumbnail-play 12s linear forwards;
}
.hfx-video-thumbnail:is(:hover, :focus-visible) .hfx-video-thumbnail-title {
  color: var(--c);
}
@keyframes hfx-video-thumbnail-drift {
  to { transform: translateX(-50%); }
}
@keyframes hfx-video-thumbnail-play {
  to { transform: scaleX(1); }
}