@font-face{font-family:'Manrope';font-style:normal;font-display:swap;font-weight:200 800;src:url('/manrope.woff2') format('woff2');}
@font-face{font-family:'Syne';font-style:normal;font-display:swap;font-weight:400 800;src:url('/syne.woff2') format('woff2');}
:root {
  color-scheme: dark;
  --void: #07070a;
  --pearl: #edeae0;
  --mist: #a6a4af;
  --dim: #85818e;
  --lilac: #b5adf1;
  --ice: #a3c6eb;
  --ember: #efb897;
  --line: rgba(223, 219, 241, .15);
  font-family: 'Manrope', sans-serif;
  font-synthesis: none;
  background: var(--void);
  color: var(--pearl);
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button { border: 0; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ice); outline-offset: 6px; }
button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
::selection { color: var(--void); background: var(--lilac); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 12px; background: var(--pearl); color: var(--void); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.page-shell { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; }
.page-shell::after { content: ''; pointer-events: none; position: absolute; z-index: 3; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.site-header { height: 116px; flex-shrink: 0; margin: 0 4.5%; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 4; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 12px; font-size: 27px; font-weight: 750; letter-spacing: -1.6px; }
.wordmark-x { font-weight: 450; }
.brand-symbol { width: 25px; height: 29px; }
.nav-join { font-size: 12px; background: transparent; border: 1px solid #ffffff35; padding: 13px 19px; border-radius: 5px; display: inline-flex; gap: 25px; align-items: center; transition: background .2s, border-color .2s; }
.nav-join span { font-size: 18px; line-height: 1; color: var(--lilac); }
.nav-join:hover { background: #ffffff0b; border-color: #b5adf180; }

main { display: flex; flex: 1; }
.hero { width: 100%; min-height: 700px; position: relative; display: grid; align-content: center; }
.hero-copy, .hero-details { width: 58%; padding-left: 8.5%; position: relative; z-index: 2; pointer-events: none; }
.hero-copy { padding-top: 68px; }
.hero-details { padding-bottom: 116px; }
.hero-details button { pointer-events: auto; }
.intro { margin: 0 0 30px; display: flex; align-items: center; gap: 10px; color: var(--lilac); font-size: 12px; font-weight: 500; }
.intro-line { width: 24px; height: 1px; background: var(--lilac); }
h1 { font-family: 'Syne', sans-serif; font-weight: 600; font-size: clamp(54px, 5.6vw, 92px); line-height: 1.06; letter-spacing: -.057em; margin: 0; }
#hero-title > span { display: block; }
.hero-description { max-width: 365px; font-size: 15px; line-height: 1.85; color: var(--mist); margin: 29px 0 29px; letter-spacing: -.2px; }
.primary-button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 26px; padding: 0 22px; border-radius: 5px; background: var(--pearl); color: #17131e; font-size: 12px; font-weight: 750; transition: background .2s, box-shadow .2s; }
.primary-button:hover { background: #fff; box-shadow: 0 0 32px #b5adf11c; }
.primary-button svg { width: 20px; height: 20px; }
.cta-note { font-size: 10px; color: var(--dim); margin: 14px 0 0; }

.life-stage { position: absolute; inset: 0; pointer-events: none; }
.hero-art { position: absolute; pointer-events: none; top: -60px; bottom: 0; left: 31%; right: -7%; }
#organism { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; transition: opacity 1s; }
.ambient-light { position: absolute; inset: 4% 2% 8%; background: radial-gradient(ellipse at 49% 52%, #7971c315 0%, #494d8310 32%, transparent 67%); }
.art-vignette { position: absolute; inset: 0; background: linear-gradient(90deg, var(--void) 0%, transparent 19%, transparent 85%, var(--void)), linear-gradient(0deg, var(--void), transparent 15%, transparent 90%, var(--void)); }
.hero-art.fallback .ambient-light { inset: 21% 20% 25%; border: 1px solid var(--lilac); border-radius: 45% 55% 39% 61%; box-shadow: inset 14px 5px 45px #b5adf146, -20px 12px 90px #a3c6eb35, 20px -12px 90px #efb89724; transform: rotate(-24deg); }
.specimen-note { position: absolute; z-index: 2; right: 7%; top: 13%; color: #c9c5d5; font-size: 11px; line-height: 1.7; display: flex; gap: 11px; padding: 12px 16px 12px 13px; background: rgba(13, 12, 19, .94); border-left: 1px solid #b5adf16b; backdrop-filter: blur(10px); }
.specimen-note strong { color: var(--pearl); font-weight: 600; font-size: 12px; }
.specimen-cross { color: var(--lilac); font-size: 18px; line-height: 1; }
.life-interaction { position: absolute; z-index: 4; bottom: 58px; left: 65%; transform: translateX(-50%); text-align: center; min-width: 300px; pointer-events: auto; }
.interaction-copy { display: inline-flex; align-items: center; gap: 8px; color: #c8c2d5; font-size: 11px; margin-bottom: 15px; }
.life-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 8px #b5adf18a; }
.sustain-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 55px; padding: 0 27px 0 19px; margin: 0 auto; background: #13121ba8; backdrop-filter: blur(12px); border: 1px solid #b5adf132; border-radius: 40px; user-select: none; touch-action: none; -webkit-user-select: none; font-size: 11px; font-weight: 500; transition: border-color .2s, background .2s; }
.sustain-button:hover, .sustain-button[aria-pressed="true"] { border-color: #b5adf184; background: #252031b0; }
.sustain-icon { width: 28px; height: 28px; display: grid; place-items: center; }
.sustain-icon svg { width: 28px; height: 28px; color: var(--lilac); stroke-width: 1.1; }
.sustain-track { position: absolute; height: 1px; bottom: 0; width: calc(100% - 44px); overflow: hidden; border-radius: 2px; background: #ffffff0a; }
#sustain-progress { display: block; width: 100%; height: 1px; background: var(--lilac); transform: scaleX(0); transform-origin: left; }
.interaction-note { color: var(--dim); font-size: 9px; margin: 13px 0 0; }

.site-footer { position: relative; z-index: 4; min-height: 84px; margin: 0 4.5%; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-thought { font-size: 10px; color: var(--mist); display: flex; align-items: center; gap: 12px; }
.small-star { color: var(--lilac); font-size: 22px; }
.footer-controls { display: flex; align-items: center; gap: 17px; }
.footer-controls button { font-size: 10px; color: var(--mist); display: inline-flex; align-items: center; gap: 6px; background: transparent; padding: 10px 0; min-height: 44px; }
.footer-controls button:hover { color: var(--pearl); }
.footer-controls button svg { width: 15px; height: 15px; stroke-width: 1; }
.control-divider { width: 1px; height: 12px; background: var(--line); }
.footer-date { margin-left: 24px; font-size: 10px; color: var(--dim); }

dialog { padding: 58px 46px 22px; width: min(520px, calc(100vw - 32px)); max-height: calc(100svh - 32px); border: 1px solid #b5adf133; border-radius: 12px; color: var(--pearl); background: #100e17; overflow-x: hidden; box-shadow: 0 30px 150px #000a; }
dialog::backdrop { background: #050409b8; backdrop-filter: blur(14px); }
.close-dialog { position: absolute; z-index: 2; top: 15px; right: 15px; width: 40px; height: 40px; display: grid; place-items: center; background: #ffffff06; border-radius: 50%; color: var(--mist); }
.close-dialog:hover { color: var(--pearl); background: #ffffff10; }
.close-dialog svg { width: 18px; height: 18px; }
.dialog-visual { height: 116px; position: relative; margin-bottom: 35px; }
.dialog-orbit { position: absolute; width: 180px; height: 90px; left: 50%; top: 15px; border: 1px solid #b5adf199; border-radius: 50%; transform: translateX(-50%) rotate(-28deg); box-shadow: inset 0 0 25px #b5adf10b, 0 0 30px #b5adf115; }
.orbit-two { width: 150px; height: 105px; top: 7px; transform: translateX(-50%) rotate(39deg); border-color: #a3c6eb60; }
.dialog-core { position: absolute; width: 64px; height: 64px; border-radius: 50%; left: calc(50% - 32px); top: 28px; background: radial-gradient(circle at 30% 25%, #efe5ff, #ae9fee 20%, #645687 45%, #272038 70%); box-shadow: 0 0 38px #b5adf144; }
.dialog-kicker { font-size: 11px; color: var(--lilac); margin: 0 0 14px; }
dialog h2 { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 44px; letter-spacing: -2px; line-height: 1.07; margin: 0 0 19px; }
dialog p:not(.dialog-kicker, .preview-disclosure, .form-promise, .email-error) { font-size: 13px; line-height: 1.9; color: var(--mist); margin: 0; }
#waitlist-form { margin-top: 31px; }
#waitlist-form label { display: block; font-size: 11px; margin-bottom: 10px; color: var(--pearl); }
.email-field { display: flex; border: 1px solid #b5adf13a; border-radius: 5px; padding: 5px; background: #ffffff03; }
.email-field:focus-within { border-color: var(--lilac); outline: 1px solid var(--lilac); }
.email-field input { color: var(--pearl); background: transparent; border: 0; min-width: 0; flex: 1; font-size: 16px; padding: 10px 12px; outline: none; }
.email-field input::placeholder { color: var(--dim); font-size: 13px; }
.email-submit { width: 46px; flex-shrink: 0; background: var(--pearl); color: #17131e; border-radius: 3px; display: grid; place-items: center; }
.email-submit:hover { background: white; }
.email-error { color: #efb897; font-size: 11px; }
.email-error:empty { display: none; }
.form-promise { color: var(--mist); font-size: 10px; margin-top: 14px; }
.preview-disclosure { color: var(--dim); font-size: 10px; margin: 24px 0 0; }
.dialog-brand { margin-top: 35px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-size: 16px; font-weight: 650; letter-spacing: -.5px; }
.dialog-brand span { color: var(--dim); font-size: 10px; font-weight: 400; letter-spacing: 0; align-self: center; }
.back-button { margin-top: 26px; }

@media (min-width: 1600px) {
  .page-shell { max-width: 2000px; margin: auto; }
  .hero { min-height: 810px; }
  .hero-details { padding-bottom: 140px; }
  .life-interaction { bottom: 80px; }
}

@media (max-width: 1050px) {
  .site-header { height: 96px; }
  .hero { min-height: 700px; }
  .hero-copy, .hero-details { padding-left: 6%; width: 65%; }
  h1 { font-size: 6.1vw; }
  .hero-art { left: 28%; right: -19%; }
  .life-interaction { left: 71%; bottom: 64px; }
  .specimen-note { right: 7%; top: 9%; }
  .footer-date { display: none; }
  .footer-thought { max-width: 350px; font-size: 9px; }
}

@media (max-width: 720px) {
  .site-header { height: 83px; margin: 0 6%; }
  .wordmark { font-size: 23px; gap: 8px; }
  .brand-symbol { width: 20px; height: 24px; }
  .nav-join { font-size: 10px; padding: 11px 12px; gap: 15px; }
  .hero { min-height: 0; display: block; }
  .hero-copy { width: 100%; padding: 40px 7% 0; }
  .hero-details { width: 100%; padding: 0 7% 28px; }
  .intro { font-size: 11px; margin-bottom: 24px; }
  h1 { font-size: clamp(56px, 10.9vw, 79px); line-height: 1.02; letter-spacing: -.055em; }
  .hero-description { max-width: 350px; margin: 23px 0; font-size: 14px; line-height: 1.75; }
  .primary-button { min-height: 51px; font-size: 11px; }
  .cta-note { font-size: 9px; }
  .life-stage { position: relative; inset: auto; height: clamp(430px, 100vw, 560px); margin-top: 24px; }
  .hero-art { left: -13%; right: -13%; top: -35px; bottom: 78px; }
  .ambient-light { inset: 8%; }
  .art-vignette { background: linear-gradient(0deg, var(--void), transparent 22%, transparent 83%, var(--void)); }
  .specimen-note { right: 7%; top: 8px; font-size: 11px; padding: 9px 12px; }
  .life-interaction { left: 50%; bottom: 20px; min-width: 280px; }
  .site-footer { margin: 0 6%; padding: 23px 0 17px; flex-direction: column; gap: 9px; }
  .footer-thought { max-width: none; font-size: 9px; gap: 9px; }
  .footer-controls { gap: 18px; }
  .small-star { font-size: 18px; }
  .footer-controls button { padding: 4px; }
  .footer-date { display: inline; margin-left: 5px; }
}

@media (max-width: 390px) {
  .hero-copy, .hero-details { padding-left: 6%; padding-right: 6%; }
  h1 { font-size: clamp(44px, 13.5vw, 53px); }
  .footer-thought { font-size: 8px; }
  dialog { padding: 48px 25px 22px; }
  dialog h2 { font-size: 39px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: arrive 1.2s cubic-bezier(.15, .6, .3, 1) both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.identity-wordmark { width: 202px; display: block; color: var(--pearl); }
.identity-wordmark > svg { width: 100%; display: block; height: auto; }
.identity-dialog-brand > svg { width: 145px; height: auto; }
.life-interaction { bottom: 26px; }
.specimen-note { min-width: 145px; max-width: 235px; }
.interaction-copy { padding: 5px 9px; background: #07070abb; border-radius: 3px; margin-bottom: 10px; }
.interaction-note { margin-top: 9px; }
.email-submit:disabled { opacity: .4; cursor: not-allowed; }
#waitlist-form .consent-label { display: flex; align-items: flex-start; gap: 9px; color: var(--mist); font-size: 11px; line-height: 1.6; margin: 16px 0; }
.consent-label input { accent-color: var(--lilac); margin-top: 3px; flex: none; }
.consent-label > span { min-width: 0; overflow-wrap: anywhere; }
.consent-label a, .form-promise a { color: var(--pearl); text-decoration: underline; text-underline-offset: 3px; }
.consent-label a { display: inline-block; min-height: 24px; padding-block: 3px; }
#security-widget { min-height: 65px; width: 100%; display: flex; justify-content: center; }
#signup-status { color: var(--mist); font-size: 11px; line-height: 1.6; margin: 8px 0 0; }
.trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
@media (min-width: 721px) { .hero-art { left: 40%; right: -2%; } }
@media (min-width: 721px) and (max-width: 1050px) {
  /* Projection scales with canvas height: cap it on tall, narrow tablets. */
  .hero-art { left: 51%; right: -2%; top: 50%; bottom: auto; height: 60vw; max-height: 620px; transform: translateY(-54%); }
}
@media (max-width: 720px) {
  .site-header { height: 72px; }
  .identity-wordmark { width: 163px; }
  .hero { text-align: center; }
  .hero-copy { padding: 26px 6% 0; }
  .hero-copy .intro { display: none; }
  #hero-title { font-size: clamp(30px, 9.2vw, 61px); line-height: 1.15; letter-spacing: -.055em; }
  .life-stage { height: clamp(330px, 44svh, 430px); margin-top: 4px; }
  .hero-art { inset: 0 0 64px; }
  .life-interaction { bottom: 6px; min-width: 0; width: 100%; padding: 0 16px; }
  .sustain-button { min-height: 52px; }
  .specimen-note, .interaction-copy, .interaction-note { display: none; }
  .hero-details { padding: 8px 6% 27px; }
  .hero-description { max-width: 32ch; margin: 0 auto 18px; font-size: 12px; line-height: 1.75; }
  .hero-details .primary-button { min-width: 224px; }
  .cta-note { margin-top: 10px; }
  .site-footer { padding: 10px 0; }
  .footer-thought { display: none; }
  .footer-controls { justify-content: center; flex-wrap: wrap; gap: 8px 12px; }
  .footer-controls button, .footer-date { white-space: nowrap; }
  .dialog-brand { gap: 12px; flex-wrap: wrap; }
}
@media (max-width: 390px) { .identity-wordmark { width: 137px; } }