@font-face { font-family: Inter; src: url('/assets/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root { color-scheme: dark; font-family: Inter, Arial, sans-serif; background: #101010; color: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; -webkit-font-smoothing: antialiased; }
main { width: min(100% - 56px, 640px); margin: 0 auto; padding-top: 16vh; text-align: center; }
.logo { display: block; width: 240px; height: auto; margin: 0 auto; }
h1 { margin: 64px -20px 0; font-size: 48px; line-height: 1.2; font-weight: 700; letter-spacing: -1.4px; }
p { margin: 0; }
.intro { margin-top: 24px; color: #d4d4d4; font-size: 24px; line-height: 29px; letter-spacing: -.7px; }
.description { max-width: 540px; margin: 12px auto 0; color: #999; font-size: 18px; line-height: 22px; letter-spacing: -.45px; }
.invitation { max-width: 450px; margin: 32px auto 0; color: #999; font-size: 16px; line-height: 20px; letter-spacing: -.35px; }
form { display: flex; gap: 12px; width: min(100%, 560px); margin: 30px auto 0; }
input, button { height: 56px; font: inherit; font-size: 16px; letter-spacing: -.4px; border-radius: 999px; }
input { flex: 1; min-width: 0; border: 1px solid #333; padding: 0 20px; background: transparent; color: #fff; }
input::placeholder { color: #999; opacity: 1; }
button { width: 172px; flex-shrink: 0; padding: 0 20px; border: 0; color: #101010; background: #e7e7e7; cursor: pointer; }
button:disabled { opacity: .5; cursor: default; }
input:focus-visible, button:focus-visible { outline: 2px solid #ddd; outline-offset: 4px; }
#feedback { margin: 16px auto 0; max-width: 560px; color: #d4d4d4; font-size: 14px; line-height: 20px; }
.limited { display: none; }
footer { margin: 32px auto 0; padding: 0 24px 24px; text-align: center; color: #999; font-size: 12px; line-height: 16px; letter-spacing: -.25px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) {
  body { display: flex; flex-direction: column; }
  main { padding-top: 72px; padding-bottom: 32px; }
  h1 { margin: 88px -8px 0; font-size: 24px; line-height: 29px; letter-spacing: -.8px; }
  .intro { margin: 24px -8px 0; font-size: 18px; line-height: 22px; letter-spacing: -.5px; }
  .description { margin: 10px auto 0; font-size: 16px; line-height: 20px; letter-spacing: -.35px; }
  .invitation { margin-top: 32px; font-size: 14px; line-height: 18px; letter-spacing: -.3px; }
  form { flex-direction: column; margin-top: 30px; }
  input { flex: none; width: 100%; }
  button { width: 100%; }
  .limited { display: block; margin-top: 16px; color: #999; font-size: 12px; line-height: 16px; letter-spacing: -.25px; }
  footer { margin: auto 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); text-align: left; }
}