:root {
  font-family: ui-rounded, "SF Pro Rounded", Arial, Helvetica, sans-serif;
  color: #fff;
  background: #13042f;
  color-scheme: dark;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid #fff; outline-offset: 6px; border-radius: 4px; }
.landing { background: linear-gradient(180deg, #13042f 0%, #500aac 50%, #9881f5 100%); }
.gradient { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 600ms ease; }
.gradient.ready { opacity: 1; }
.emoji-burst { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; contain: layout style paint; }
.emoji-particle { position: absolute; pointer-events: none; font-family: inherit; line-height: normal; white-space: nowrap; user-select: none; }
.page { position: relative; display: grid; grid-template-rows: 146px minmax(300px, 1fr) 136px; min-height: 100svh; }
.header { display: flex; justify-content: center; }
.brand {
  --brand-scale: 1;
  display: inline-flex; align-items: center; align-self: flex-start;
  gap: calc(20px * var(--brand-scale)); margin-top: 48px;
  height: calc(56px * var(--brand-scale)); text-decoration: none;
}
.brand-icon {
  display: block; flex: none;
  width: calc(56px * var(--brand-scale)); height: calc(56px * var(--brand-scale));
  border-radius: calc(16.8px * var(--brand-scale));
  box-shadow:
    0 calc(6px * var(--brand-scale)) calc(80px * var(--brand-scale)) rgb(125 82 244 / 32%),
    0 calc(6px * var(--brand-scale)) calc(32px * var(--brand-scale)) rgb(0 0 0 / 12%);
}
.brand-wordmark {
  display: block; flex: none; object-fit: contain;
  width: calc(195px * var(--brand-scale)); height: calc(34px * var(--brand-scale));
  /* drop-shadow takes Gaussian sigma: 16px matches a 32px shadow blur. */
  filter: drop-shadow(0 0 calc(16px * var(--brand-scale)) rgb(255 255 255 / 24%));
}
.brand-button { padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transform-origin: center; transition: transform 140ms ease; }
.brand-button:active { transform: scale(.95); }
.hero { display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.hero-content { width: 100%; transform: translateY(-24px); }
.coming-soon {
  position: relative; display: table; margin: 0 auto 24px; padding: 8px 16px;
  border: 1px solid rgb(255 255 255 / 14%); border-radius: 999px;
  background: rgb(245 247 250 / 7%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 12%), 0 6px 20px rgb(19 4 47 / 8%);
  color: rgb(255 255 255 / 90%); font-size: 20px; line-height: 24px; font-weight: 600;
}
.coming-soon::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.25px; pointer-events: none;
  background:
    radial-gradient(100px 36px at var(--glint-x, 0%) var(--glint-y, 65%), rgb(255 255 255 / 90%), transparent 75%),
    radial-gradient(ellipse at 72% 110%, rgb(255 255 255 / 65%), transparent 48%),
    radial-gradient(ellipse at 28% -15%, rgb(255 255 255 / 50%), transparent 36%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.coming-soon::after {
  content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(ellipse at var(--sheen-x, 15%) var(--sheen-y, 0%), rgb(255 255 255 / 10%), transparent 60%);
}
h1 { max-width: 880px; margin: 0 auto; font-size: 72px; line-height: 86px; letter-spacing: .35px; font-weight: 900; }
.footer { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 24px max(48px, env(safe-area-inset-bottom)); }
.socials { display: flex; gap: 16px; }
.socials a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; transition: opacity 160ms ease, transform 160ms ease; }
.socials a:hover { opacity: .7; transform: translateY(-2px); }
.socials img { display: block; }
.document { min-height: 100svh; background: #13042f; }
.document .header { height: 146px; }
.document main { max-width: 760px; margin: 0 auto; padding: 0 24px 64px; font-family: system-ui, Arial, sans-serif; color: #e4dff1; font-size: 16px; line-height: 1.7; }
.document h1 { margin: 24px 0; font-family: ui-rounded, Arial, sans-serif; font-size: 42px; line-height: 1.2; letter-spacing: 0; }
.document h2 { margin: 36px 0 12px; font-size: 22px; line-height: 1.35; color: #fff; }
.document p { margin: 0 0 16px; }
.document li { margin-bottom: 8px; }
.document a { text-underline-offset: 3px; }
.document .back { font-size: 14px; }
@media (max-width: 700px) {
  .page { grid-template-rows: 112px minmax(290px, 1fr) 120px; }
  .brand { --brand-scale: .7142857143; margin-top: 32px; }
  .hero { padding: 24px; }
  .hero-content { transform: translateY(-12px); }
  .coming-soon { font-size: 16px; line-height: 22px; padding: 8px 14px; }
  h1 { max-width: 520px; font-size: clamp(36px, 7.5vw, 52px); line-height: 1.16; letter-spacing: .15px; }
  .desktop-break { display: none; }
  /* 14px below the 44px hit area + 10px inside it = 24px to the visible icon. */
  .footer { padding-left: 16px; padding-right: 16px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .socials { gap: 12px; }
  .socials img { width: 24px; height: 24px; }
  .socials .social-x { width: 22px; height: 22px; }
  .document .header { height: 112px; }
  .document h1 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .gradient, .socials a, .brand-button { transition: none; }
  .socials a:hover { transform: none; }
}