.marrow-field { position: relative; text-decoration: none; color: inherit; }
.marrow-field {
  padding-bottom: 2px;
  background-image: linear-gradient(#b0004e, #b0004e), linear-gradient(rgba(18, 16, 20, 0.28), rgba(18, 16, 20, 0.28));
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 1px);
  background-size: 0% 2px, 100% 1px;
  transition: background-size 213ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.marrow-field:hover, .marrow-field:focus-visible { background-size: 100% 2px, 100% 1px; }
.marrow-action { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: 0; border-radius: 4px; overflow: hidden; font: inherit; line-height: 1.1; color: #fbfaf6; background: #121014; cursor: pointer; }
.marrow-action { transition: transform 213ms cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 213ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.marrow-action::after {
  content: '';
  position: absolute;
  bottom: calc(12px - 5px);
  left: 24px;
  width: calc(100% - 24px * 2);
  height: 2px;
  background: #ffd2ae;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 213ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.marrow-action:hover, .marrow-action:focus-visible { transform: translateY(-4px); box-shadow: 0 4px 0 0 rgba(255, 210, 174, 0.85); }
.marrow-action:hover::after, .marrow-action:focus-visible::after { transform: scaleX(1); }
.marrow-action:active { transform: translateY(0); box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .marrow-field, .marrow-field::before, .marrow-field::after,
  .marrow-action, .marrow-action::before, .marrow-action::after { transition-duration: 1ms; animation: none; }
}