/* GENERATED by gen-marketsapien-app.mjs. DO NOT HAND-EDIT — edit the node. style.css */
:root{--void:#080510;--gold:#D69E2E;--ink:#e8e6f0;--muted:#9e9ab4;--line:#2a2545;--glass:rgba(255,255,255,.04)}
*{box-sizing:border-box}
body{margin:0;background:var(--void);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:0 0 56px}
/* SAFE AREA. The viewport is declared viewport-fit=cover, which deliberately extends the page UNDER the
   status bar and notch — and nothing inset it back, so on device the wordmark sat on top of the clock and
   "Completed n/42" hid behind the wifi and battery icons. Measured 2026-08-13 in the simulator on every
   screen. env() resolves to 0 where there is no inset, so this is correct on older devices and on the web
   build too. Amends the existing padding rather than adding a rule — the same declaration, made device-aware. */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(18px + env(safe-area-inset-top,0px)) calc(20px + env(safe-area-inset-right,0px)) 18px calc(20px + env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--void);z-index:5}
/* WORDMARK. Two children only — mark and type — so gap applies once. The old rule was
   .wordmark span, which is now WRONG rather than merely loose: the type sits in a wrapper span, and a
   descendant selector would paint the whole lockup gold instead of the second half. Targeted by class.
   letter-spacing goes POSITIVE here: -.02em was set for mixed-case type and closes up all-caps until it
   reads as one blurred word. The mark is flex:none so it can never be squeezed by a long score string. */
.wordmark{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.02em;flex:none}
.mark{width:40px;height:40px;border-radius:9px;display:block;flex:none}
.wm{white-space:nowrap;font-size:18px}
.wm-gold{color:var(--gold)}
/* THE SCORE YIELDS, THE BRAND DOES NOT. At the larger 2026-08-14 header size the wordmark and this
   string no longer both fit one line on a 440px iPhone. Something has to give, and it is this: the
   brand is fixed (flex:none) and the score takes what is left and wraps inside its own box.
   min-width:0 is REQUIRED on a flex child that is allowed to wrap — without it the item refuses to
   shrink below its longest unbreakable run and spills over its neighbour instead of wrapping. */
.score{font-size:14px;color:var(--muted);min-width:0;flex:1 1 auto;text-align:right;line-height:1.35}.score strong{color:var(--gold)}
#smartscore[data-settled="false"]{opacity:.6;font-style:italic}
#smartscore[data-settled="false"]::after{content:" (live)";font-size:11px;font-style:normal}
main{max-width:860px;margin:0 auto;padding:28px 20px}
h1{font-size:clamp(24px,5vw,34px);line-height:1.2;margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 28px}

.worlds{display:block}
.world{border:1px solid var(--line);border-radius:14px;margin:0 0 18px;background:var(--glass);overflow:hidden}
.scene{margin:0;position:relative;aspect-ratio:16/9;overflow:hidden}
.scene img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}
.scene figcaption{position:absolute;left:14px;bottom:12px}
/* NAME COLLISION, FIXED. This badge was called .stage — and the player's container is already
   <section class="stage glass" id="stage">. One class name, two different things, so the badge's
   gold/uppercase/12px styled the whole lesson stage and every child inherited it: the heading, the
   guide's line and the teaching body all rendered as gold caps. It shipped in builds 45-47 and looked
   deliberate. §21: everything declares an identity, and two things cannot share one. */
.stage-badge{display:inline-block;padding:5px 11px;border-radius:99px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:rgba(8,5,16,.72);color:var(--gold);border:1px solid var(--gold)}
.world > .whead,.world > .wq,.world > .rungs{margin-left:16px;margin-right:16px}
.world > .whead{margin-top:16px}
.biases{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 16px 0;padding:0}
.biases li{font-size:12px;line-height:1.3;padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.wq{margin:12px 16px 0;padding-left:12px;border-left:2px solid var(--pc);color:var(--muted);font-style:italic;font-size:14px}
.lscene{width:100%;height:170px;object-fit:cover;object-position:center 30%;border-radius:12px;margin-bottom:16px;display:block}
.whead{display:flex;align-items:center;gap:12px}
.whead h2{font-size:18px;margin:0}
.phil,.lphil{margin:2px 0 0;color:var(--muted);font-size:13px}
.reg{margin:4px 0 0;color:var(--muted);font-size:12px;font-style:italic;line-height:1.35}
.wcount{margin-left:auto;color:var(--muted);font-size:13px}
.orb{display:grid;place-items:center;width:40px;height:40px;min-width:40px;border-radius:50%;background:color-mix(in srgb,var(--pc) 22%,transparent);border:1px solid var(--pc);color:var(--pc-ink);font-weight:800}
.rungs{padding-bottom:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin-top:14px}
.rung{display:flex;align-items:center;gap:10px;text-align:left;padding:12px 14px;min-height:56px;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.rung:hover{border-color:var(--pc)}
.rung:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.rl{font-weight:800;color:var(--pc-ink);font-size:13px;min-width:22px}
.world[data-letter="M"],.rung[data-letter="M"],.orb[data-letter="M"]{--pc:#818CF8;--pc-ink:#818cf8}
.world[data-letter="S"],.rung[data-letter="S"],.orb[data-letter="S"]{--pc:#00d9ff;--pc-ink:#00d9ff}
.world[data-letter="A"],.rung[data-letter="A"],.orb[data-letter="A"]{--pc:#9D6BF2;--pc-ink:#9d6bf2}
.world[data-letter="P"],.rung[data-letter="P"],.orb[data-letter="P"]{--pc:#D69E2E;--pc-ink:#d69e2e}
.world[data-letter="I"],.rung[data-letter="I"],.orb[data-letter="I"]{--pc:#22c55e;--pc-ink:#22c55e}
.world[data-letter="E"],.rung[data-letter="E"],.orb[data-letter="E"]{--pc:#f97316;--pc-ink:#f97316}
.world[data-letter="N"],.rung[data-letter="N"],.orb[data-letter="N"]{--pc:#ef4444;--pc-ink:#ef4444}
.ltitle{font-size:22px;margin:0}
.rt{font-size:14px;line-height:1.35}
.rung.done{border-color:var(--gold)}.rung.done .rl::after{content:" ✓";color:var(--gold)}
.back{background:none;border:0;color:var(--muted);font:inherit;padding:0 0 16px;cursor:pointer}
.back:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.lhead{display:flex;gap:12px;align-items:center;margin-bottom:18px}
.lhead h1{font-size:22px;margin:0}
.orbit{display:flex;gap:8px;margin:0 0 18px}
.node{width:100%;height:5px;border-radius:3px;background:var(--line)}
.node.done{background:var(--gold)}.node.active{background:var(--ink)}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:20px;min-height:190px}
.role{text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--muted);margin-bottom:8px}
.stage h2{font-size:20px;margin:0 0 12px}
.q{font-weight:600}
.says{position:relative;padding-left:14px;border-left:2px solid var(--gold)}
.says::after{content:"— " attr(data-guide);display:block;margin-top:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.choices{display:grid;gap:10px;margin-top:12px}
.choice{text-align:left;padding:14px 16px;min-height:48px;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.choice:hover:not(:disabled){border-color:var(--gold)}
.choice:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.choice.right{border-color:#4ade80;color:#bbf7d0}
.choice.wrong{border-color:#f87171;color:#fecaca}
.choice:disabled{cursor:default}
.reveal{margin-top:14px;padding:14px;border-left:3px solid var(--gold);background:rgba(232,199,122,.07);border-radius:0 8px 8px 0}
.controls{margin-top:18px}
.say-btn{padding:12px 18px;min-height:44px;margin-right:10px;border-radius:11px;border:1px solid var(--gold);background:transparent;color:var(--gold);font:inherit;font-weight:600;cursor:pointer}
.say-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.cta{padding:14px 26px;min-height:48px;border-radius:11px;border:1px solid var(--gold);background:var(--gold);color:var(--void);font:inherit;font-weight:700;cursor:pointer}
.cta:disabled{opacity:.45;cursor:default}
.cta:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.is-hidden{display:none}
.gold{color:var(--gold)}.muted{color:var(--muted)}
.src{color:var(--muted);font-size:12px;margin-top:16px}
.disc{color:var(--muted);font-size:12px;line-height:1.5;margin-top:34px;padding-top:18px;border-top:1px solid var(--line)}
.legal{margin-top:12px;font-size:13px}.legal a{color:var(--gold)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}