:root {
  color-scheme: dark;
  --bg: #050506;
  --ink: #f4f4f5;
  --ink-2: #a6a6ab;
  --ink-3: #737379;
  --fill: rgb(255 255 255 / 0.05);
  --fill-2: rgb(255 255 255 / 0.09);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sans: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
/* The app's light from the bottom edge, still: this page has no bundle and no WebGL. */
body { margin: 0; background: radial-gradient(90% 46% at 50% 112%, rgb(150 160 180 / 0.09), transparent 72%) var(--bg); color: var(--ink); font: 400 15px/1.45 var(--sans); -webkit-font-smoothing: antialiased; }
::selection { background: #3b3b42; color: #fff; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid rgb(255 255 255 / 0.5); outline-offset: 2px; }
[hidden] { display: none !important; }

/* The closed page, and a link's page: the crystal, which Graphite it is, one button. */
.join { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 24px 64px; text-align: center; }
.join[data-state="loading"] > * { visibility: hidden; }
.closed .title { color: var(--ink-2); }
.who { margin: 10px 0 0; min-height: 22px; font-size: 14px; color: var(--ink-3); }
.line { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; min-height: 20px; font-size: 13px; line-height: 20px; color: var(--ink-2); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.crystal { flex: none; }
.title { margin: 26px 0 0; min-height: 35px; font-size: 30px; line-height: 1.15; font-weight: 400; letter-spacing: -0.03em; text-wrap: balance; }
.btn.lg { height: 44px; margin-top: 32px; padding: 0 22px; border-radius: 22px; font-size: 15px; min-width: 132px; }
.btn.primary { background: var(--ink); color: #0a0a0b; font-weight: 500; }
.btn.primary:hover { background: #fff; }
#claim .line { margin-top: 18px; }
/* An invite to someone's team asks the new person's name, one field, before Join. */
.name-field { width: min(280px, 100%); height: 44px; margin-top: 28px; padding: 0 18px; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 22px; background: var(--fill); color: var(--ink); font: inherit; text-align: center; outline: 0; transition: border-color 0.2s var(--ease); }
.name-field::placeholder { color: var(--ink-3); }
.name-field:focus { border-color: rgb(255 255 255 / 0.32); }
.name-field + .btn.lg { margin-top: 14px; }
.btn.primary:disabled { opacity: 0.4; cursor: default; }
#claim:not([data-state="ready"]) .btn, #claim:not([data-state="ready"]) .title, #claim:not([data-state="ready"]) .who, #claim:not([data-state="ready"]) .name-field { display: none; }
#claim[data-state="ready"] > * { animation: rise 0.55s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  #claim[data-state="ready"] > * { animation: none; }
  .btn { transition: none; }
}