.culvert-plate { position: relative; text-decoration: none; color: inherit; }
.culvert-plate { border-bottom: 1px dotted rgba(254, 254, 253, 0.4557); }
.culvert-plate::before, .culvert-plate::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #FCFBF7;
  opacity: 0;
  transition: opacity 168ms cubic-bezier(0.16, 1, 0.3, 1), transform 168ms cubic-bezier(0.16, 1, 0.3, 1);
}
.culvert-plate::before { top: -3px; left: -5px; border-right: 0; border-bottom: 0; transform: translate(-5px, -5px); }
.culvert-plate::after { right: -5px; bottom: -3px; border-top: 0; border-left: 0; transform: translate(5px, 5px); }
.culvert-plate:hover::before, .culvert-plate:focus-visible::before,
.culvert-plate:hover::after, .culvert-plate:focus-visible::after { opacity: 1; transform: translate(0, 0); }
.culvert-key { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 27px; border: 0; border-radius: 2px; overflow: hidden; font: inherit; line-height: 1.1; color: #fefefd; background: #7A2FB0; cursor: pointer; }
.culvert-key::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 2px solid #FCFBF7;
  border-radius: calc(2px - 2px);
  opacity: 0;
  pointer-events: none;
  transition: inset 168ms cubic-bezier(0.16, 1, 0.3, 1), opacity 168ms cubic-bezier(0.16, 1, 0.3, 1);
}
.culvert-key:hover::after, .culvert-key:focus-visible::after { inset: 3px; opacity: 1; }
.culvert-key:active::after { inset: 7px; }
@media (prefers-reduced-motion: reduce) {
  .culvert-plate, .culvert-plate::before, .culvert-plate::after,
  .culvert-key, .culvert-key::before, .culvert-key::after { transition-duration: 1ms; animation: none; }
}