:root {
  /* surfaces */
  --bg:              #0a0612;
  --bg-elevated:     #15102a;
  --surface-glass:   rgba(168, 85, 247, 0.06);
  --surface-strong:  rgba(168, 85, 247, 0.12);
  --border-glass:    rgba(255, 255, 255, 0.08);
  --border-bright:   rgba(255, 255, 255, 0.16);

  /* hues (template theme dict overrides these) */
  --primary:         #a855f7;
  --primary-deep:    #6d28d9;
  --accent:          #ec4899;
  --signal:          #fde047;

  /* text */
  --text:            #f5f3ff;
  --text-muted:      rgba(245, 243, 255, 0.62);
  --text-faint:      rgba(245, 243, 255, 0.38);

  /* glass + glow */
  --blur-glass:      blur(20px) saturate(140%);
  --blur-nav:        blur(24px) saturate(160%);
  --glow-primary:    0 0 32px rgba(168, 85, 247, 0.45);
  --glow-accent:     0 0 28px rgba(236, 72, 153, 0.45);
  --glow-signal:     0 0 24px rgba(253, 224, 71, 0.40);

  /* radii + easing */
  --r-sm: 8px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font-display: "Instrument Serif", "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Inter Tight", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { min-height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------------------------------------------------------------- void */
.bg-void {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg);
  overflow: hidden;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(110px); opacity: 0.5;
  animation: drift 22s var(--ease) infinite alternate;
}
.orb-a { width: 480px; height: 480px; top: -140px; left: -140px; background: var(--primary); }
.orb-b { width: 380px; height: 380px; bottom: -100px; right: -80px; background: var(--accent); animation-duration: 28s; }
.grain {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  100% { transform: translate(40px,-30px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
}

/* --------------------------------------------------------------- shell */
.shell {
  flex: 1;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 18px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.screen { display: none; }
.screen.active { display: block; animation: rise 480ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- card */
.glass {
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-glass);
          backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 40px rgba(0, 0, 0, 0.35);
}
.card { padding: 32px 26px; }

.headline {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  line-height: 1.05; letter-spacing: -0.025em;
  background: linear-gradient(120deg, var(--text) 0%, var(--primary) 55%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  margin: 14px 0 12px;
}

.intro-text { color: var(--text-muted); font-size: 17px; margin-bottom: 26px; }

.signal {
  display: inline-block; padding: 0.25rem 0.65rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  color: #1a0f00; background: var(--signal);
  border-radius: 999px; box-shadow: var(--glow-signal);
}

.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.95rem 2.2rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: var(--text); font-family: var(--font-body); font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer;
  box-shadow: var(--glow-primary);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
  min-height: 48px;
}
.cta:hover { transform: translateY(-1px); }
.cta:active { transform: translateY(0); }

@keyframes pulse {
  0%, 100% { box-shadow: var(--glow-primary); }
  50%      { box-shadow: 0 0 56px rgba(168, 85, 247, 0.75); }
}
.pulse { animation: pulse 2.4s var(--ease) infinite; }

/* ------------------------------------------------------------ progress */
.progress {
  display: flex; gap: 10px; justify-content: center;
  margin-bottom: 20px;
}
.dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface-strong);
  border: 1px solid var(--border-glass);
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease);
}
.dot.filled { background: var(--primary); border-color: transparent; }
.dot.current { background: var(--accent); box-shadow: var(--glow-accent); border-color: transparent; }

/* ------------------------------------------------------------ question */
.q-label {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 10px;
}
.q-text {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 4.6vw, 1.9rem);
  line-height: 1.2; letter-spacing: -0.015em;
  margin-bottom: 22px;
}

.options { display: flex; flex-direction: column; gap: 10px; }
.options > .option { opacity: 0; transform: translateY(12px); animation: optrise 500ms var(--ease) forwards; }
.options > .option:nth-child(1) { animation-delay: 40ms; }
.options > .option:nth-child(2) { animation-delay: 100ms; }
.options > .option:nth-child(3) { animation-delay: 160ms; }
.options > .option:nth-child(4) { animation-delay: 220ms; }
.options > .option:nth-child(5) { animation-delay: 280ms; }
.options > .option:nth-child(6) { animation-delay: 340ms; }
@keyframes optrise { to { opacity: 1; transform: none; } }

.option {
  display: block; width: 100%; text-align: left;
  padding: 14px 16px; min-height: 48px;
  font-family: var(--font-body); font-size: 16px; line-height: 1.4;
  color: var(--text);
  background: var(--surface-glass);
  -webkit-backdrop-filter: var(--blur-glass);
          backdrop-filter: var(--blur-glass);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 180ms var(--ease), background 180ms var(--ease), transform 180ms var(--ease);
}
.option:hover { border-color: var(--border-bright); background: var(--surface-strong); transform: translateY(-1px); }
.option.selected {
  border-color: var(--accent);
  background: var(--surface-strong);
  box-shadow: var(--glow-accent);
}
.option:disabled { cursor: default; opacity: 0.55; }
.option.selected:disabled { opacity: 1; }

/* ------------------------------------------------------------ thinking */
.thinking { text-align: center; padding: 60px 0; }
.thinking-dots { display: flex; gap: 10px; justify-content: center; margin-bottom: 22px; }
.thinking-dots span {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--primary);
  animation: bob 1.2s var(--ease) infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.15s; background: var(--accent); }
.thinking-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(-10px); opacity: 1; }
}
.thinking-text { color: var(--text-muted); font-size: 16px; }

/* ---------------------------------------------------------------- done */
.done-mark {
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--text);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: var(--glow-primary);
}

/* -------------------------------------------------------------- reveal */
.reveal > * { opacity: 0; transform: translateY(12px); animation: optrise 700ms var(--ease) forwards; }
.reveal > *:nth-child(1) { animation-delay: 60ms; }
.reveal > *:nth-child(2) { animation-delay: 140ms; }
.reveal > *:nth-child(3) { animation-delay: 220ms; }
.reveal > *:nth-child(4) { animation-delay: 300ms; }

/* ---------------------------------------------------------------- foot */
.foot { text-align: center; padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); }
.foot-brand { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-faint); letter-spacing: 0.06em; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary), var(--glow-primary);
  border-radius: var(--r-sm);
}

@media (min-width: 700px) {
  .card { padding: 44px 40px; }
  body { font-size: 18px; }
}