/* GENERATED by gen-marketsapien-demo.mjs from products/xml/marketsapien-demo.xml. DO NOT HAND-EDIT — edit the node. style.css */
:root { --void:#080510; --surface:#110f1f; --surface2:#1a1730; --border:#2a2545; --text:#e8e6f0; --muted:#9e9ab4; --ivory:#f5f5f0; --gold:#D69E2E; --gold-light:#ECC94B; --font-heading:'Space Grotesk','Inter',ui-sans-serif,system-ui,sans-serif; --font-body:'Inter',ui-sans-serif,system-ui,sans-serif; }
* { box-sizing:border-box; } html,body { margin:0; }
html { background:var(--void); }
body { min-height:100vh; font-family:var(--font-body); color:var(--text); padding:20px 16px 40px; background:var(--void); position:relative; }
body::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -8%, var(--pc), transparent 55%),
    radial-gradient(70% 50% at 100% 2%, var(--gold), transparent 48%);
  opacity:.15; }
@media (prefers-reduced-motion:no-preference){ .orb{ animation:breathe 5s ease-in-out infinite; } }
.glyph { position:fixed; right:-4vw; bottom:-6vh; font-family:var(--font-heading); font-weight:800; font-size:52vh; line-height:1; color:var(--pc); opacity:.05; pointer-events:none; user-select:none; }
main { max-width:640px; margin:0 auto; position:relative; }
.top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:26px; }
.wordmark { font-family:var(--font-heading); font-weight:700; font-size:1.35rem; letter-spacing:-.02em; color:var(--ivory); } .wordmark span { color:var(--gold); }
.eyebrow { font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.hero { display:flex; gap:18px; align-items:center; margin-bottom:26px; }
.orb { flex:0 0 auto; width:78px; height:78px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--pc) 90%, white), var(--pc) 42%, color-mix(in srgb, var(--pc) 30%, var(--void)) 100%);
  box-shadow:0 0 44px -6px var(--pc), inset 0 0 22px -8px #000; font-family:var(--font-heading); font-weight:700; font-size:2rem; color:#0b0812; }
@keyframes breathe { 0%,100%{ box-shadow:0 0 40px -8px var(--pc), inset 0 0 22px -8px #000; } 50%{ box-shadow:0 0 60px 0 var(--pc), inset 0 0 22px -8px #000; } }
.planet-label { font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--pc); margin-bottom:6px; font-weight:600; }
.quote { font-family:var(--font-heading); font-weight:500; font-size:1.5rem; line-height:1.2; color:var(--ivory); margin:0; letter-spacing:-.01em; }
.attrib { color:var(--muted); font-size:.85rem; margin-top:8px; }
.bloom { text-align:center; margin:0 auto 20px; } .bloom-lbl { font-size:.72rem; color:var(--muted); letter-spacing:.02em; } .bloom-lbl strong { color:var(--gold); }
.rungs { display:flex; gap:5px; justify-content:center; margin-top:8px; } .rung { font-family:var(--font-heading); font-size:.64rem; font-weight:600; color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:2px 7px; opacity:.55; } .rung.on { color:var(--pc); border-color:var(--pc); opacity:1; box-shadow:0 0 12px -4px var(--pc); }
.orbit { display:flex; align-items:center; gap:0; margin:0 auto 22px; max-width:420px; }
.orbit .node { flex:1; height:2px; background:var(--border); position:relative; }
.orbit .node::after { content:''; position:absolute; right:-4px; top:50%; transform:translateY(-50%); width:9px; height:9px; border-radius:50%; background:var(--border); transition:.25s; }
.orbit .node.done::after { background:var(--gold); } .orbit .node.active::after { background:var(--pc); box-shadow:0 0 14px 1px var(--pc); transform:translateY(-50%) scale(1.5); }
.glass { background:color-mix(in srgb, var(--surface) 86%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--border); border-radius:20px; }
.stage { padding:26px 24px; min-height:210px; box-shadow:0 30px 80px -40px #000; }
.stage .role { color:var(--pc); font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:10px; font-weight:600; }
.stage h2 { font-family:var(--font-heading); font-weight:600; margin:.1rem 0 .7rem; font-size:1.3rem; color:var(--ivory); letter-spacing:-.01em; }
.stage p { line-height:1.6; margin:.5rem 0; color:var(--text); }
.choices { display:grid; gap:12px; margin-top:18px; }
.choice { text-align:left; padding:15px 16px; border:1px solid var(--border); border-radius:14px; background:color-mix(in srgb, var(--surface2) 70%, transparent); color:var(--text); font-family:var(--font-body); font-size:1rem; cursor:pointer; min-height:44px; transition:.18s; }
.choice:hover { border-color:var(--gold); background:var(--surface2); } .choice.picked { border-color:var(--pc); box-shadow:0 0 0 1px var(--pc) inset; }
.reveal { margin-top:16px; padding:14px 16px; border-left:3px solid var(--pc); background:color-mix(in srgb, var(--pc) 8%, transparent); border-radius:0 12px 12px 0; color:var(--text); line-height:1.55; }
.controls { display:flex; justify-content:center; margin-top:22px; }
.cta { font-family:var(--font-heading); font-weight:600; font-size:1.02rem; min-height:48px; padding:13px 34px; border:none; border-radius:14px; cursor:pointer; color:#1a1205; letter-spacing:.01em;
  background:linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow:0 12px 30px -12px var(--gold); transition:.18s; }
.cta:hover { transform:translateY(-1px); box-shadow:0 16px 36px -12px var(--gold); } .cta:disabled { opacity:.4; cursor:default; transform:none; box-shadow:none; }
.disc { margin-top:30px; color:var(--muted); font-size:.7rem; text-align:center; line-height:1.5; max-width:520px; margin-inline:auto; }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
@media (max-width:520px){ .hero{ flex-direction:column; text-align:center; } .quote{ font-size:1.3rem; } .glyph{ font-size:40vh; } }