.circle-invitation {
  --invite-ink: #302c38;
  --invite-muted: #726b7d;
  --invite-purple: #645080;
  --invite-border: #ded7e8;
  --invite-halo: #eee8f7;
  background: radial-gradient(ellipse at 50% 28%, #eae3f4 0, #f6f3fa 44%, #faf9fc 85%);
  color: var(--invite-ink);
}

.circle-invitation .link-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding-block: 116px 48px;
}

.circle-invitation .question-card {
  width: 100%;
  max-width: 560px;
  padding: 36px 40px 28px;
  border: 1px solid var(--invite-border);
  border-radius: 34px;
  background: linear-gradient(150deg, #ffffffed, #faf8ffed);
  box-shadow: 0 20px 70px -36px #62507d55, inset 0 1px 0 #fff;
  text-align: center;
  overflow-wrap: anywhere;
}

.circle-emblem {
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--invite-halo);
  box-shadow: inset 0 1px 0 #ffffffb3;
}

.circle-emblem span {
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  font-size: 64px;
  line-height: 1;
}

.circle-emblem img { width: 64px; height: 64px; border-radius: 15px; }
.circle-invitation [data-identity='mint'] { --invite-halo: #eaf0e7; }
.circle-invitation [data-identity='lilac'] { --invite-halo: #f6efd9; }

.circle-invitation .question-card .eyebrow {
  margin-bottom: 8px;
  color: var(--invite-muted);
  font-size: 15px;
  font-weight: 500;
}

.circle-invitation .question-card h1 {
  max-width: none;
  margin: 0 0 18px;
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, var(--sans);
  font-size: clamp(32px, 5vw, 42px);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.circle-invitation .purpose {
  max-width: 39ch;
  margin-inline: auto;
  color: var(--invite-muted);
  font-size: 16px;
  line-height: 1.65;
}

.circle-invitation .joining {
  margin-top: 20px;
  color: var(--invite-muted);
  font-size: 13px;
}

.circle-invitation .link-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 26px;
}

.circle-invitation .primary-action,
.circle-invitation .secondary-action {
  min-height: 52px;
  padding: 12px 21px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
}

.circle-invitation .primary-action {
  justify-content: center;
  border-color: #79638f;
  background: linear-gradient(165deg, #73608f, #5d4979);
  color: white;
  box-shadow: inset 0 1px 1px #c1acc666, 0 3px 8px #51406418;
}

.circle-invitation .primary-action:hover { background: #584571; }
.circle-invitation .chat-symbol {
  display: inline-block;
  flex: 0 0 24px;
  width: 24px;
  height: 22px;
  background: currentColor;
  mask: url('/assets/one-chat-symbol.png') center / contain no-repeat;
  -webkit-mask: url('/assets/one-chat-symbol.png') center / contain no-repeat;
}
.circle-invitation .secondary-action { color: var(--invite-purple); border-color: var(--invite-border); }
.circle-invitation .secondary-action:hover { background: var(--invite-halo); }
.circle-invitation .status { min-height: 21px; margin-top: 14px; color: var(--invite-muted); font-size: 12px; }
.circle-invitation #retry { margin-top: 14px; }
.circle-invitation [data-state='error'] .link-actions { display: none; }
.circle-invitation .install-note { margin: 0; padding: 0; border: 0; text-align: center; color: var(--invite-muted); }
.circle-invitation .install-note a { color: var(--invite-purple); font-size: 14px; font-weight: 600; }
.circle-invitation .install-note p { margin-top: 6px; font-size: 12px; }
.circle-invitation .footer-inner { padding-top: 20px; padding-bottom: 24px; }
.circle-invitation .nav .brand img { border-radius: 8px; }
.circle-invitation .brand-divider { opacity: .45; font-weight: 400; }

@media (max-width: 600px) {
  .circle-invitation .link-main { padding: 104px 18px 34px; gap: 22px; }
  .circle-invitation .question-card { padding: 30px 24px 23px; border-radius: 30px; }
  .circle-emblem { width: 96px; height: 96px; margin-bottom: 22px; }
  .circle-emblem span { font-size: 58px; }
  .circle-invitation .question-card h1 { font-size: 36px; }
  .circle-invitation .purpose { font-size: 15px; }
  .circle-invitation .primary-action,
  .circle-invitation .secondary-action { padding-inline: 17px; font-size: 14px; }
}

@media (max-width: 360px) {
  .circle-invitation .question-card { padding-inline: 20px; }
  .circle-invitation .link-actions { grid-template-columns: 1fr; }
  .circle-invitation .primary-action { justify-content: center; }
}

@media (prefers-color-scheme: dark) {
  html:has(.circle-invitation) { color-scheme: dark; background: #15131b; }
  .circle-invitation {
    --page-color: #1b1722;
    --page-end-color: #15131b;
    --invite-ink: #f0edf5;
    --invite-muted: #b3adbf;
    --invite-purple: #c6b3e4;
    --invite-border: #443c50;
    --invite-halo: #383044;
    background: radial-gradient(ellipse at 50% 28%, #292233 0, #1b1722 50%, #15131b 85%);
  }
  .circle-invitation .question-card {
    background: linear-gradient(145deg, #292431, #211d28);
    box-shadow: 0 20px 70px -36px #0008, inset 0 1px 0 #ffffff0a;
  }
  .circle-invitation [data-identity='mint'] { --invite-halo: #2e3b30; }
  .circle-invitation [data-identity='lilac'] { --invite-halo: #433b2e; }
  .circle-emblem { box-shadow: inset 0 1px 0 #ffffff08; }
  .circle-invitation .primary-action { background: linear-gradient(165deg, #846caa, #6d548e); border-color: #9b82bc; }
  .circle-invitation .site-header .nav { background: #27222ed9; border-color: #ffffff18; box-shadow: 0 8px 32px #0002; }
  .circle-invitation .site-header .nav::before { border-color: #ffffff06; }
  .circle-invitation .brand, .circle-invitation .footer-brand { color: var(--invite-ink); }
  .circle-invitation .nav-link, .circle-invitation .footer a { color: var(--invite-muted); }
  .circle-invitation .nav-link:hover { color: var(--invite-ink); background: #ffffff0a; }
  .circle-invitation .footer { --footer-ink: #b3adbf; color: var(--invite-muted); }
  .circle-invitation .copyright, .circle-invitation .registered-address { color: #948b9f; }
}