:root {
  --bg: #F2F2F0; --surface: #F8F8F7; --ink: #121212; --ink2: #6E6E72; --ink3: #B6B6B3;
  --green: #1FAE68; --violet: #7B5CF0; --blue: #3566EA; --teal: #2AA6B8; --amber: #EDB21C; --orange: #FF7440;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111111; --surface: #1B1B1C; --ink: #F2F2F0; --ink2: #A3A3A8; --ink3: #5C5C60; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}
main { max-width: 680px; margin: 0 auto; padding: 56px 20px 80px; }
a { color: var(--ink); text-underline-offset: 3px; }
h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.03em; margin: 0 0 8px; }
h2 { font-size: 20px; letter-spacing: -0.01em; margin: 40px 0 8px; }
p, li { color: var(--ink); }
.muted { color: var(--ink2); }
.small { font-size: 14px; }
nav { display: flex; gap: 18px; font-weight: 600; font-size: 15px; margin-bottom: 48px; }
nav a { text-decoration: none; color: var(--ink2); }
nav a.home { color: var(--ink); margin-right: auto; }
.card { background: var(--surface); border-radius: 24px; padding: 6px 22px; margin: 16px 0; }
.card li { margin: 12px 0; }
ul { padding-left: 20px; }
footer { margin-top: 64px; font-size: 14px; color: var(--ink2); }

/* Landing: the orb with its five inputs. */
.hero { text-align: center; padding-top: 24px; }
.orb {
  width: 120px; height: 120px; margin: 0 auto 28px; border-radius: 50%; position: relative;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 6%, rgba(255,255,255,0) 14%),
    radial-gradient(circle at 50% 120%, #C9B6F2 0%, rgba(201,182,242,0) 60%),
    linear-gradient(180deg, #8D84E6 0%, #D9B9E8 38%, #FF8A5C 50%, #F5C0A8 58%, #6E5BC4 100%);
  box-shadow: inset 0 -10px 24px rgba(40,30,120,.35), 0 18px 50px rgba(123,92,240,.25);
}
.dots { display: flex; gap: 10px; justify-content: center; margin: 0 0 28px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; }
.score { font-size: 96px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; margin: 0; }
.tagline { font-size: 20px; color: var(--ink2); margin: 12px 0 36px; }