.mail-dialog {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 30px;
  overflow-y: auto;
  border: 1px solid #555;
  border-top: 4px solid #f5821f;
  border-radius: 5px;
  background: #191919;
  color: #eee;
  box-shadow: 0 12px 50px #000a;
  font: 16px/1.45 Arial, sans-serif;
  color-scheme: dark;
}
.mail-dialog::backdrop { background: rgb(0 0 0 / 80%); }
.mail-is-open { overflow: hidden; }
.mail-dialog h2 { margin: 0 34px 24px 0; font-size: 24px; font-weight: 400; }
.mail-dialog .mail-close { position: absolute; top: 10px; right: 13px; width: 36px; height: 36px; padding: 0; border: 0; background: transparent; color: #aaa; font: 32px/1 Arial, sans-serif; cursor: pointer; }
.mail-dialog .mail-close:hover { color: #f5821f; }
.mail-form { display: grid; gap: 8px; }
.mail-form label { font-size: 14px; color: #ccc; }
.mail-form input, .mail-form textarea { box-sizing: border-box; width: 100%; min-width: 0; margin: 0 0 9px; padding: 10px 12px; border: 1px solid #606060; border-radius: 3px; background: #272727; color: #fff; font: inherit; user-select: text; -webkit-user-select: text; }
.mail-form textarea { resize: vertical; min-height: 135px; max-height: 40vh; }
.mail-dialog :focus-visible { outline: 2px solid #f5821f; outline-offset: 3px; }
.mail-form .mail-send { justify-self: end; min-width: 130px; padding: 11px 24px; border: 0; border-radius: 3px; background: #f5821f; color: #171717; font: bold 16px Arial, sans-serif; cursor: pointer; }
.mail-form .mail-send:hover { background: #ff9b46; }
.mail-form .mail-send:disabled { opacity: .55; cursor: wait; }
.mail-status { margin: 0 0 7px; font-size: 14px; color: #a5d78d; overflow-wrap: anywhere; user-select: text; }
.mail-status:empty { display: none; }
.mail-status.is-error { color: #ffc38e; }
.mail-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.orange_bar_mail:focus-visible { outline: 3px solid white; outline-offset: -5px; }
@media (max-width: 480px) { .mail-dialog { padding: 22px 18px; } }
/* Same centered zoom, duration and spring curve as the portrait window. */
@media (prefers-reduced-motion: no-preference) {
  .mail-dialog[open] { transform-origin: center; animation: mail-zoom-in .3s cubic-bezier(0.175, 0.885, 0.320, 1.275) both; }
  .mail-dialog[open].mail-closing { animation-name: mail-zoom-out; animation-timing-function: ease-in; pointer-events: none; }
  .mail-dialog[open]::backdrop { animation: mail-backdrop-in .2s ease both; }
  .mail-dialog[open].mail-closing::backdrop { animation: mail-backdrop-out .2s ease both; }
  @keyframes mail-zoom-in { from { transform: scale(0); } to { transform: scale(1); } }
  @keyframes mail-zoom-out { from { transform: scale(1); } to { transform: scale(0); } }
  @keyframes mail-backdrop-in { from { background-color: transparent; } to { background-color: rgb(0 0 0 / 80%); } }
  @keyframes mail-backdrop-out { from { background-color: rgb(0 0 0 / 80%); } to { background-color: transparent; } }
}