@font-face {
  font-family: "Open Sans";
  src: url("./fonts/open-sans-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("./fonts/open-sans-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("./fonts/open-sans-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/space-grotesk-600.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --background: #1e2738;
  --text: #fff;
  --muted: rgba(255, 255, 255, .78);
  --gold: #f2d18d;
  --button-text: #1e2738;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-width: 0;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: var(--background);
}

body {
  color: var(--text);
  font-family: "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }

.funnel-screen {
  width: min(100%, 720px);
  min-height: 100svh;
  margin: 0 auto;
  padding: 14px 0 28px;
}

.brand-wrap {
  display: flex;
  justify-content: center;
  height: 24px;
}

.brand {
  display: block;
  width: 81px;
  height: auto;
  object-fit: contain;
}

.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-art {
  display: block;
  width: 100%;
  height: auto;
  margin: 14px 0 -40px;
  border-radius: 0 0 12px 12px;
}

h1 {
  width: calc(100% - 48px);
  max-width: 600px;
  margin: 0 24px 8px;
  font-family: "Open Sans", sans-serif;
  font-size: clamp(24px, 4.6vw, 40px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

.intro-copy {
  width: calc(100% - 48px);
  max-width: 540px;
  margin: 0 24px 15px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.gender-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: calc(100% - 48px);
  max-width: 430px;
  gap: 8px;
}

.gender-button {
  min-width: 0;
  min-height: 120px;
  padding: 8px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.gender-button img { display: block; width: 28px; height: 28px; object-fit: contain; }
.gender-button span { display: block; font-size: 12px; line-height: 1.15; }

.gender-button:hover,
.gender-button:focus-visible {
  border-color: var(--gold);
  outline: none;
}

.legal-copy {
  width: calc(100% - 48px);
  max-width: 520px;
  margin: 24px 24px 0;
  color: rgba(255, 255, 255, .66);
  font-size: 12px;
  line-height: 1.5;
}

.legal-copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-copy span { padding: 0 8px; }

.inner-topbar {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  width: 100%;
  height: 40px;
}

.inner-brand { justify-self: center; width: 81px; height: 24px; object-fit: contain; }
.back-control { width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #000; font-size: 49px; font-weight: 300; line-height: 24px; cursor: pointer; }

.birthday-content { display: flex; flex-direction: column; align-items: center; min-height: calc(100svh - 74px); padding-top: 14px; text-align: center; }
.birthday-content h1 { width: calc(100% - 48px); margin: 14px 24px 9px; font-size: 24px; line-height: 1.3; }
.birthday-content > p { width: calc(100% - 48px); margin: 0 24px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.zodiac-preview { display: flex; align-items: center; justify-content: center; gap: 32px; width: 100%; height: 122px; margin-top: 26px; }
.zodiac-preview img { width: 52px; height: 52px; object-fit: contain; }
.zodiac-preview img.zodiac-active { width: 76px; height: 76px; }
.birthday-wheels { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.5fr); width: calc(100% - 48px); max-width: 264px; gap: 0; margin-top: 0; }
.wheel-column { min-width: 0; }
.wheel-column label { display: block; height: 32px; color: var(--text); font-size: 16px; line-height: 24px; }
.wheel { position: relative; height: 220px; overflow: hidden; background: transparent; }
.wheel-item { display: block; width: 100%; height: 44px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.35); font-size: 17px; line-height: 44px; text-align: center; cursor: pointer; }
.wheel-item.active { color: var(--text); font-size: 19px; font-weight: 600; }
.wheel-mask { position: absolute; z-index: 2; left: 0; right: 0; height: 88px; pointer-events: none; }
.wheel-mask-top { top: 0; background: linear-gradient(to bottom, var(--background), transparent); }
.wheel-mask-bottom { bottom: 0; background: linear-gradient(to top, var(--background), transparent); }
.wheel::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 88px; height: 44px; border-top: 1px solid rgba(255,255,255,.35); border-bottom: 1px solid rgba(255,255,255,.35); pointer-events: none; }
.continue-control { width: calc(100% - 48px); max-width: 312px; min-height: 56px; margin-top: auto; margin-bottom: 32px; border: 0; border-radius: 8px; background: var(--gold); color: var(--button-text); font-size: 14px; font-weight: 700; cursor: pointer; }
.time-content .time-wheels { margin-top: 38px; }
.unknown-time { margin-top: 22px; border: 0; background: transparent; color: var(--text); font-size: 14px; cursor: pointer; }
.time-content .continue-control { margin-top: auto; }

@media (max-width: 390px) {
  .funnel-screen { padding: 14px 0 20px; }
  .brand-wrap { height: 24px; }
  .brand { width: 81px; }
  .hero-art { margin: 14px 0 -40px; }
  h1 { width: calc(100% - 48px); max-width: 312px; font-size: 24px; line-height: 1.3; }
  .intro-copy { width: calc(100% - 48px); max-width: 312px; margin-bottom: 15px; font-size: 15px; line-height: 1.5; }
  .gender-actions { width: calc(100% - 48px); max-width: 430px; gap: 8px; }
  .gender-button { min-height: 120px; padding: 8px 60px; }
  .legal-copy { width: calc(100% - 48px); max-width: 312px; margin-top: 24px; font-size: 12px; line-height: 1.5; }
  .legal-copy span { padding: 0 8px; }
  .inner-topbar { grid-template-columns: 40px 1fr 40px; }
  .birthday-content { padding-top: 14px; }
  .zodiac-preview { gap: 28px; margin-top: 24px; }
  .birthday-wheels { width: calc(100% - 48px); max-width: 312px; }
}

.generic-content { min-height: calc(100svh - 74px); display: flex; flex-direction: column; align-items: center; padding-top: 18px; text-align: center; }
.generic-content h1 { margin-top: 12px; }
.generic-content > p { width: min(100% - 48px, 520px); color: var(--muted); font-size: 15px; line-height: 1.5; }
.eyebrow { color: var(--gold); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.city-label { width: min(100% - 48px, 402px); margin-top: 30px; text-align: left; font-size: 12px; }
.city-input { width: min(100% - 48px, 402px); min-height: 50px; margin-top: 8px; padding: 0 14px; border: 1px solid rgba(0,0,0,.25); border-radius: 8px; background: #fff; color: #202735; }
.city-suggestions { width: min(100% - 48px, 402px); background: #fff; color: #202735; text-align: left; }
.city-suggestions button { display: block; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid #ddd; background: #fff; color: #202735; text-align: left; }
.generic-content .continue-control { margin-top: auto; }
.raw-chart { position: relative; width: min(72vw, 280px); aspect-ratio: 1; margin: 22px 0; border: 1px solid rgba(242,209,141,.7); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 28px, rgba(242,209,141,.3) 29px 30px), #172033; box-shadow: 0 0 28px rgba(242,209,141,.18); }
.raw-chart::before, .raw-chart::after { content: ""; position: absolute; inset: 18%; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; transform: rotate(30deg) scaleX(.65); }
.raw-chart::after { transform: rotate(-30deg) scaleX(.65); }
.loader-list { display: grid; gap: 9px; width: min(100% - 48px, 410px); text-align: left; }
.loader-list div { opacity: .25; color: var(--muted); transition: opacity .3s, color .3s; }
.loader-list div.visible { opacity: 1; color: var(--text); }
.raw-progress { width: min(100% - 48px, 410px); height: 4px; margin-top: auto; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.15); }
.raw-progress span { display: block; width: 65%; height: 100%; background: var(--gold); animation: rawProgress 3s linear infinite; }
@keyframes rawProgress { to { transform: translateX(80%); } }
.speech-card { width: min(100% - 48px, 430px); padding: 16px; border-radius: 12px; background: #f7f2ff; color: #2a3040; font-size: 13px; }
.raw-avatar { display: grid; place-items: center; width: 48px; height: 48px; margin: 14px; border-radius: 50%; background: #c7a5e8; }
.sign-results { display: flex; justify-content: space-between; width: min(100% - 48px, 360px); gap: 8px; margin: 10px 0; }
.sign-results span { flex: 1; font-size: 14px; }
.sign-results small, .profile-facts small { display: block; color: var(--muted); font-size: 10px; }
.accuracy-orb { position: relative; display: grid; place-items: center; width: 176px; height: 176px; margin: 18px; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 50% 20%, #354258, #121a2a); }
.accuracy-orb::after { content: ""; position: absolute; left: -5%; right: -5%; bottom: 0; height: var(--accuracy); background: linear-gradient(#65f4cf, #3a5de8); border-radius: 50% 50% 0 0; }
.accuracy-orb strong { position: relative; z-index: 1; font-size: 28px; }
.raw-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100% - 48px, 430px); gap: 10px; margin-top: 28px; }
.raw-options button { min-height: 58px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: transparent; color: var(--text); }
.raw-options span { margin-right: 8px; }
.profile-heading { margin-top: 20px; font-size: 32px; font-weight: 700; }
.profile-subtitle { color: var(--gold); }
.profile-facts { display: flex; gap: 40px; margin: 24px; }
.generic-content h3 { width: min(100% - 48px, 430px); text-align: left; }
.generic-content dl { display: grid; grid-template-columns: 110px 1fr; width: min(100% - 48px, 430px); gap: 10px; margin: 0; text-align: left; font-size: 13px; }
.generic-content dt { color: var(--muted); }
.generic-content dd { margin: 0; }
.palm-raw { position: relative; width: min(100% - 48px, 300px); margin: 20px 0; }
.raw-hand svg { width: 190px; height: 230px; fill: rgba(255,255,255,.05); stroke: var(--gold); stroke-width: 2; }
.palm-raw > span { position: absolute; padding: 6px 8px; border-radius: 8px; background: #121a2a; font-size: 10px; }
.palm-raw > span:nth-of-type(1) { top: 10%; left: 0; }.palm-raw > span:nth-of-type(2) { top: 34%; right: 0; }.palm-raw > span:nth-of-type(3) { bottom: 28%; left: 0; }.palm-raw > span:nth-of-type(4) { bottom: 10%; right: 0; }.palm-raw > span:nth-of-type(5) { top: 0; right: 20%; }
.raw-link { border: 0; background: transparent; color: var(--text); font-size: 13px; }
.camera-raw { position: relative; width: 100%; min-height: calc(100svh - 40px); overflow: hidden; background: #05070c; }
.camera-raw video { width: 100%; height: 100%; object-fit: cover; }.camera-hand { position: absolute; inset: 15%; }.camera-hand svg { width: 100%; height: 100%; fill: transparent; stroke: #fff; stroke-width: 2; }.camera-raw p { position: absolute; bottom: 110px; left: 0; right: 0; }.camera-raw button { position: absolute; bottom: 30px; border: 0; border-radius: 50%; }.camera-raw #raw-shutter { left: calc(50% - 36px); width: 72px; height: 72px; background: var(--gold); }.camera-raw #raw-camera-upload { right: 24px; padding: 12px; border-radius: 8px; }
.scan-raw { position: relative; width: min(100% - 48px, 350px); height: 350px; margin: 16px; border-radius: 16px; background: #121a2a; overflow: hidden; }.scan-raw::after { content: ""; position: absolute; left: 0; right: 0; top: var(--scan, 0); height: 2px; background: var(--gold); box-shadow: 0 0 16px var(--gold); }.scan-raw i { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px #fff; }.scan-raw i:nth-of-type(1) { left: 25%; top: 20%; }.scan-raw i:nth-of-type(2) { left: 42%; top: 12%; }.scan-raw i:nth-of-type(3) { left: 60%; top: 16%; }.scan-raw i:nth-of-type(4) { left: 72%; top: 24%; }.scan-percent { font-size: 40px; }.raw-spinner { width: 48px; height: 48px; margin: 40px; border: 4px solid rgba(255,255,255,.2); border-top-color: var(--gold); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
.planet-raw { width: 220px; height: 220px; margin: 30px; border: 1px dashed var(--gold); border-radius: 50%; animation: spin 8s linear infinite; }.complete-raw { display: grid; gap: 12px; margin: 32px; }.paywall-plans { display: grid; width: min(100% - 48px, 430px); gap: 10px; margin: 20px; }.plan { display: grid; grid-template-columns: 1fr auto; padding: 14px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(255,255,255,.06); color: var(--text); text-align: left; }.plan.selected { border-color: var(--gold); }.plan small { grid-column: 1 / -1; color: var(--muted); }.paywall-section { width: min(100% - 48px, 430px); margin: 10px; padding: 18px; border-radius: 8px; background: #172033; text-align: left; }

.back-control { color: #fff; }
.raw-options button[aria-pressed="true"] { border-color: var(--gold); background: #ffffff12; }
.continue-control:disabled { opacity: .45; cursor: default; }
.upload-error { color: #ffd3d3; padding: 12px 24px; }
@font-face{font-family:'Cormorant Garamond';src:url('./fonts/cormorant-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Manrope';src:url('./fonts/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap}
html,body{background:#0d0a18;color:#f9f7ff;font-family:'Manrope',system-ui,sans-serif}
body{background:radial-gradient(circle at 50% 18%,rgba(143,103,232,.32),transparent 30rem),linear-gradient(160deg,#0b0914,#171029)}
.eluna-brand{display:inline-flex;align-items:center;gap:7px;color:#f9f7ff;font:600 29px/1 'Cormorant Garamond',Georgia,serif;letter-spacing:.02em}
.eluna-brand svg{width:29px;height:29px}
.eluna-logo{display:block;width:clamp(120px,28vw,180px);height:auto;max-height:46px;object-fit:contain}
body{background:#0d0a18 url('./assets/branding/eluna-bg-mobile.png') center/cover fixed no-repeat!important}
@media(min-width:768px){body{background-image:url('./assets/branding/eluna-bg-desktop.png')!important}}