/* Mystelle site: the app's "Nebula" look (DESIGN.md), phone-first. */
:root {
  --bg-base: #08061a;
  --bg-mid: #120b33;
  --bg-glow: #2b1766;
  --text: #f1eeff;
  --text-2: #b7b1da;
  --text-3: #a9a3cf;
  --on-accent: #160c2e;
  --magenta: #f07ae6;
  --magenta-soft: #f7a8f0;
  --violet: #9b7bff;
  --violet-deep: #6b3fd9;
  --cyan: #7de3f4;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.12);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 0%, var(--bg-glow) 0%, var(--bg-mid) 45%, var(--bg-base) 100%) fixed;
  background-color: var(--bg-base);
  color: var(--text);
  font: 16px/1.55 'DM Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { max-width: 640px; margin: 0 auto; padding: 48px 16px 64px; }
h1, h2, h3, .brand { font-family: 'Syne', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 8vw, 44px); line-height: 1.1; margin: 0 0 12px; }
h2 { font-size: 22px; margin: 36px 0 10px; }
h3 { font-size: 18px; margin: 24px 0 8px; }
p { margin: 0 0 14px; color: var(--text-2); }
a { color: var(--cyan); }
.brand { font-size: 22px; text-decoration: none; color: var(--text); display: inline-flex; align-items: center; gap: 10px; }
.overline { font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--cyan); margin: 0 0 8px; }
.lead { font-size: 18px; color: var(--text-2); }
.orb {
  width: 132px; height: 132px; border-radius: 50%; margin: 24px auto 28px;
  background: radial-gradient(circle at 35% 30%, var(--magenta) 0%, var(--violet-deep) 45%, #1a0f4a 75%);
  box-shadow: 0 0 60px rgba(240, 122, 230, 0.35), inset 0 0 30px rgba(125, 227, 244, 0.25);
}
.orb.small { width: 28px; height: 28px; margin: 0; box-shadow: 0 0 16px rgba(240, 122, 230, 0.4); }
.card {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px;
  padding: 20px 18px; margin: 16px 0;
}
.center { text-align: center; }
.button {
  display: block; width: 100%; padding: 17px 24px; border-radius: 28px; border: 0; cursor: pointer;
  font: 700 17px/1 'DM Sans', system-ui, sans-serif; text-align: center; text-decoration: none;
  color: var(--on-accent); background: linear-gradient(90deg, var(--magenta), var(--violet));
  margin: 10px 0;
}
.button.secondary { color: var(--magenta-soft); background: transparent; border: 1.5px solid var(--magenta); }
.button[aria-disabled='true'] { opacity: 0.45; pointer-events: none; }
.code {
  font: 700 clamp(36px, 11vw, 48px)/1.1 'Syne', system-ui, sans-serif; letter-spacing: 0.18em;
  margin: 8px 0 4px; color: var(--text); word-break: break-all;
}
ul.features { list-style: none; padding: 0; margin: 0; }
ul.features li { padding: 10px 0 10px 28px; position: relative; color: var(--text); }
ul.features li::before { content: '✦'; position: absolute; left: 0; color: var(--cyan); }
ol.steps { padding-left: 22px; color: var(--text); }
ol.steps li { margin: 6px 0; }
.note { font-size: 13px; color: var(--text-3); }
footer { margin-top: 48px; font-size: 13px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }
footer a { color: var(--text-3); }
/* Privacy policy (built from docs/privacy-policy.md). */
.doc p, .doc li { color: var(--text-2); }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 14px; display: block; overflow-x: auto; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--glass-border); }
.doc th { color: var(--text); }
.doc .todo { background: rgba(255, 143, 163, 0.18); color: #ff8fa3; border-radius: 4px; padding: 0 3px; }