@import url('/assets/tokens.css');
@import url('/assets/controls.css');
@font-face { font-family: Inter; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/inter-latin.woff2') format('woff2'); }
:root { font-family: Inter, sans-serif; color-scheme: dark; color: var(--color-solstice-ink); background: #171923; font-synthesis: none; -webkit-font-smoothing: antialiased; --primary: var(--color-solstice-ink); --primary-foreground: #1a1823; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
.sky { position: fixed; inset: 0; overflow: clip; pointer-events: none; background: radial-gradient(circle farthest-corner at 50% 110% in oklab, oklab(73.8% .058 .062) 0%, oklab(52.5% .070 .039) 20%, oklab(36.7% .040 -.018) 44%, oklab(26.4% .008 -.025) 68%, oklab(20.9% -.002 -.017) 100%); }
.disc { position: absolute; top: 82.222222%; left: calc(50% - 500px); width: 1000px; height: 1000px; border-radius: 50%; background: radial-gradient(circle farthest-corner at 40% 35% in oklab, oklab(95.9% .004 .043) 0%, oklab(81.5% .036 .066) 58%, oklab(73.9% .062 .064) 78%, oklab(72.1% .089 .068 / 0%) 100%); box-shadow: #f4b78538 0 0 170px 90px, #c6786c3d 0 0 400px 160px; }
[data-appearance='moon'] .sky { background: radial-gradient(circle farthest-corner at 50% 110% in oklab, oklab(56.1% .007 -.020) 0%, oklab(39.2% .006 -.021) 20%, oklab(30.8% .012 -.028) 44%, oklab(23.8% .008 -.024) 68%, oklab(18.7% -.0004 -.017) 100%); }
[data-appearance='moon'] .disc { background: radial-gradient(circle farthest-corner at 37% 30% in oklab, oklab(96.8% .001 .010) 0%, oklab(89.9% .002 -.008) 48%, oklab(76.9% .003 -.021) 74%, oklab(62.3% .003 -.023) 100%); box-shadow: #c5cbe52b 0 0 170px 90px, #8f91b533 0 0 400px 160px; }
.early-pack { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; min-height: 100svh; padding: 48px 64px 120px; }
.hero-logo { display: block; flex-shrink: 0; width: 144px; height: 193px; object-fit: fill; }
h1 { margin: 0; font-size: 80px; font-weight: 500; line-height: 92px; letter-spacing: -.055em; text-align: center; }
.mobile-break { display: none; }
.signup { position: relative; width: 520px; max-width: 100%; display: flex; flex-direction: column; gap: 20px; }
.email-field { display: flex; flex-direction: column; gap: 8px; }
label { font-size: 14px; line-height: 20px; }
.email-control { position: relative; }
.email-control .ui-input { height: 64px; padding: 0 132px 0 20px; border: 1px solid var(--color-solstice-rim); border-radius: var(--radius-solstice-widget); background: var(--color-solstice-glass-strong); backdrop-filter: blur(44px); -webkit-backdrop-filter: blur(44px); }
.email-control .ui-button { position: absolute; top: 8px; right: 8px; width: 108px; height: 48px; min-height: 48px; padding: 0 16px; justify-content: space-between; font-size: 16px; font-weight: 500; line-height: 24px; }
.email-control svg { flex-shrink: 0; }
:is(button,input,a):focus-visible { outline: 2px solid var(--color-solstice-ink); outline-offset: 4px; }
.adopter-note { margin: 0; text-align: center; color: var(--color-solstice-muted); font-size: 15px; line-height: 22px; }
.form-feedback { position: absolute; top: calc(100% + 16px); width: 100%; display: flex; flex-direction: column; align-items: center; }
#signup-status { margin: 0; max-width: 100%; font-size: 14px; line-height: 22px; text-align: center; overflow-wrap: anywhere; }
#signup-status:not(:empty) { padding: 10px 16px; border-radius: 6px; background: var(--color-solstice-glass-strong); }
.signup[data-state='error'] #signup-status { color: var(--color-solstice-ink); }
.signup[data-verifying='true'] .form-feedback { position: relative; top: auto; }
@supports not (backdrop-filter: blur(1px)) { .email-control .ui-input { background: #24212e; } }
@media (min-width: 2000px) { .disc { width: 70vw; height: 70vw; left: 15vw; } }
@media (max-width: 699px) {
  .sky { min-height: 720px; }
  .early-pack { justify-content: flex-start; gap: 20px; padding: 40px 24px 180px; }
  .hero-logo { width: 72px; height: 97px; }
  h1 { font-size: 34px; line-height: 38px; letter-spacing: -.035em; }
  .mobile-break { display: inline; }
  .desktop-space { display: none; }
  .signup { width: 100%; max-width: 440px; gap: 10px; margin-top: 4px; }
  .email-control .ui-input { height: 56px; padding-left: 14px; padding-right: 106px; }
  .email-control .ui-button { top: 6px; right: 6px; width: 88px; height: 44px; min-height: 44px; padding-inline: 12px; font-size: 14px; line-height: 20px; }
  .adopter-note { max-width: 280px; align-self: center; font-size: 13px; line-height: 20px; }
  .disc { top: calc(100% - 114px); left: calc(50% - 320px); width: 640px; height: 640px; box-shadow: #f4b78538 0 0 100px 50px; }
  [data-appearance='moon'] .disc { box-shadow: #c5cbe52b 0 0 100px 50px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
@media (forced-colors: active) { .sky { display: none; } .email-control .ui-input, .email-control .ui-button { border: 1px solid CanvasText; } }