.coming-soon-hydra, .coming-soon-mobile-hydra { cursor: pointer; }
.magic-gate {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100svh - 40px);
  overflow: auto;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--void), var(--ink) 12%);
  color: var(--ink);
  font-family: var(--font-geist-sans), sans-serif;
  box-shadow: 0 18px 60px #0008;
}
.magic-gate::backdrop { background: #0009; }
.magic-gate h2 { margin: 0 26px 24px 0; font-size: 26px; font-weight: 300; line-height: 1.2; }
.magic-gate label { display: block; margin-bottom: 8px; font-size: 14px; }
.magic-gate input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--void); color: var(--ink); font: inherit; }
.magic-gate button { cursor: pointer; }
.magic-gate form button { margin-top: 12px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--void); color: var(--ink); font: inherit; }
.magic-gate button:disabled { opacity: .6; cursor: wait; }
.magic-gate-close { position: absolute; top: 10px; right: 10px; padding: 8px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 14px; }
.magic-gate-unlock { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.magic-gate-message { margin: 8px 0 0; font-size: 14px; line-height: 1.4; }
.magic-gate-message:empty { display: none; }