.mugen-contact {
  --mugen-contact-ink: #f4f6fb;
  --mugen-contact-muted: #c3ccdc;
  --mugen-contact-line: rgba(210, 224, 244, 0.28);
  --mugen-contact-accent: #d9c295;
  box-sizing: border-box;
  border: 1px solid var(--mugen-contact-line);
  border-radius: 0.5rem;
  background: #111a2b;
  color: var(--mugen-contact-ink);
  padding: clamp(1.25rem, 4vw, 3rem);
}

.mugen-contact__form {
  display: grid;
  gap: 1.15rem;
  max-width: 48rem;
}

.mugen-contact__field,
.mugen-contact__privacy,
.mugen-contact__required-note,
.mugen-contact__form > p {
  margin: 0;
}

.mugen-contact__field label {
  display: block;
  margin-bottom: 0.45rem;
  font-weight: 600;
}

.mugen-contact__field input,
.mugen-contact__field select,
.mugen-contact__field textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid var(--mugen-contact-line);
  border-radius: 0.25rem;
  background: rgba(255, 255, 255, 0.07);
  color: inherit;
  font: inherit;
  line-height: 1.5;
  padding: 0.78rem 0.9rem;
}

.mugen-contact__field select option {
  color: #111a2b;
}

.mugen-contact__field input:focus-visible,
.mugen-contact__field select:focus-visible,
.mugen-contact__field textarea:focus-visible,
.mugen-contact__submit:focus-visible,
.mugen-contact a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.mugen-contact__optional,
.mugen-contact__required-note,
.mugen-contact__intro {
  color: var(--mugen-contact-muted);
  font-size: 0.9rem;
}

.mugen-contact__privacy a,
.mugen-contact__mail-link {
  color: var(--mugen-contact-accent);
  text-underline-offset: 0.2em;
}

.mugen-contact__submit {
  min-height: 3rem;
  border: 1px solid var(--mugen-contact-accent);
  border-radius: 999px;
  background: var(--mugen-contact-accent);
  color: #111a2b;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0.75rem 2rem;
}

.mugen-contact__submit:hover {
  background: transparent;
  color: var(--mugen-contact-accent);
}

.mugen-contact__notice {
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  margin: 1rem 0;
  padding: 0.85rem 1rem;
}

.mugen-contact__notice--success {
  color: #b8efcf;
}

.mugen-contact__notice--error {
  color: #ffd1d1;
}

.mugen-contact__honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

@media (prefers-reduced-motion: reduce) {
  .mugen-contact *,
  .mugen-contact *::before,
  .mugen-contact *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}