@import url("/assets/tokens.css?v=e468e95c1a"); /* design tokens, the one source; must stay the first statement */
/* /biases/ (PSY-2474, October 20, 2026): the demo panel, the codex wheel and the hub list. Tokens only, no hex, no
   :root. Everything else on these pages is a canonical component styled by chrome.css and article.css. The class
   names carry the bx- prefix and are documented in docs/design-system.md under "Bias demo". */

/* ---- demo panel ---- */
.bx-demo{background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:16px;padding:26px 28px;margin:6px 0 0}
.bx-demo:focus-within{border-color:var(--line-2);border-top-color:var(--brand)}
/* the start state: what kind of demo, how long, what you get at the end, one verb to begin */
.bx-start{display:grid;gap:14px}
.bx-facts{display:flex;flex-wrap:wrap;gap:6px 0;margin:0;color:var(--ink-soft);font-size:var(--small-size,0.9rem);font-weight:600;letter-spacing:0.02em;text-transform:uppercase}
.bx-facts span+span::before{content:"·";margin:0 10px;color:var(--line-2)}
.bx-start h3{font-family:var(--serif);font-weight:500;font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2;margin:0;color:var(--ink)}
.bx-start-after{margin:0;color:var(--ink-soft)}
.bx-skip{align-self:center;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px}
/* the demo section sits directly above the article: no double section padding between them */
section#demo{padding-bottom:12px}
section.bx-article{padding-top:30px}
.bx-intro{margin:0 0 18px;color:var(--ink-soft);font-size:var(--aside-size,1.0625rem)}
.bx-stage{display:grid;gap:16px}
.bx-stage p{margin:0}
.bx-stage ul{margin:0;padding-left:1.2em}
.bx-stage h3{font-size:1.2rem;margin:0}
.bx-actions{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-top:6px}
.bx-actions .btn{cursor:pointer}
.bx-opts{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.bx-opt{display:block;width:100%;text-align:left;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:12px;padding:13px 16px;font:inherit;font-size:1rem;line-height:1.4;cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease)}
.bx-opt:hover{border-color:var(--brand);background:var(--tint)}
.bx-opt:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.bx-opt[aria-pressed="true"]{border-color:var(--brand);background:var(--tint)}
.bx-opt.is-right{border-color:var(--good)}
.bx-opt.is-wrong{border-color:var(--high)}
.bx-field{display:grid;gap:8px}
.bx-field label{font-weight:600}
.bx-field input[type="range"]{width:100%;accent-color:var(--brand)}
.bx-field input[type="number"],.bx-field textarea{font:inherit;font-size:1rem;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink);width:100%}
.bx-field textarea{min-height:150px;resize:vertical}
.bx-range-row{display:flex;justify-content:space-between;gap:12px;font-size:var(--small-size,0.9rem);color:var(--ink-soft)}
.bx-value{font-family:var(--serif);font-size:1.5rem;color:var(--ink);text-align:center}
.bx-word{font-family:var(--serif);font-size:clamp(2rem,6vw,3.2rem);text-align:center;min-height:2.2em;display:grid;place-items:center;color:var(--ink);letter-spacing:-0.01em}
.bx-word.is-accent{color:var(--brand)}
.bx-progress{font-size:var(--small-size,0.9rem);color:var(--ink-soft)}
.bx-run{display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-height:52px}
.bx-pip{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;color:var(--on-dark);border:2px solid var(--line-2);background:var(--tint)}
.bx-pip.is-red{background:var(--high);border-color:var(--high)}
.bx-pip.is-black{background:var(--dark);border-color:var(--dark)}
.bx-pip.is-next{background:var(--bg);color:var(--ink-soft);border-style:dashed}
.bx-light{width:60px;height:60px;border-radius:50%;border:2px solid var(--line-2);background:var(--tint);margin:0 auto;transition:background .1s}
.bx-light.is-on{background:var(--honey);border-color:var(--honey-deep)}
.bx-counter{font-family:var(--serif);font-size:2rem;text-align:center}
/* ---- result ---- */
.bx-result{display:grid;gap:18px}
.bx-result-line{font-family:var(--serif);font-size:1.3rem;line-height:1.4;color:var(--ink)}
.bx-detail{color:var(--ink);margin:0}
.bx-study{border-left:3px solid var(--brand);padding:4px 0 4px 16px;display:grid;gap:4px}
.bx-study p{margin:0}
.bx-study-src{font-size:var(--small-size,0.9rem);color:var(--ink-soft)}
.bx-live{margin:0;color:var(--ink-soft);font-size:var(--aside-size,1.0625rem)}
.bx-chart{width:100%;height:auto;display:block;max-width:560px}
.bx-chart text{font-family:var(--sans);fill:var(--ink-soft)}
.bx-chart .bx-chart-ink{fill:var(--ink)}
.bx-split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bx-split-col{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.bx-split-col h4{font-size:.95rem;margin:0 0 10px;font-family:var(--sans);font-weight:600}
.bx-split-row{display:grid;gap:4px;margin-bottom:10px;font-size:var(--small-size,0.9rem)}
.bx-split-row svg{width:100%;height:8px;display:block}
.bx-988{margin:0 0 14px;padding:12px 14px;border-radius:10px;background:var(--crisis-bg);border:1px solid var(--crisis-line);font-size:var(--small-size,0.9rem)}
@media (max-width:600px){.bx-demo{padding:20px 16px}.bx-split{grid-template-columns:1fr}}

/* ---- codex wheel ---- */
.bx-codex-p{color:var(--ink-soft);max-width:70ch;margin:0 0 18px}
.bx-wheel-wrap{max-width:1000px;margin:0 auto}
.bx-wheel{width:100%;height:auto;display:block;font-family:var(--sans)}
.bx-wheel .bx-leaf text{fill:var(--ink);cursor:default;transition:fill .12s}
.bx-wheel .bx-leaf--live text{fill:var(--brand);cursor:pointer}
.bx-wheel .bx-leaf:hover text,.bx-wheel .bx-leaf:focus text,.bx-wheel .bx-leaf:focus-visible text{fill:var(--brand-hover);font-weight:700}
.bx-wheel .bx-leaf:focus{outline:none}
.bx-wheel .bx-leaf:focus-visible text{text-decoration:underline}
.bx-wheel .bx-leaf--live:hover text{text-decoration:underline}
.bx-wheel .bx-quad,.bx-wheel .bx-sub{stroke:var(--bg);stroke-width:1.5}
.bx-wheel .bx-quad-label{font-family:var(--sans);letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
.bx-wheel .bx-wheel-name{font-family:var(--serif)}
.bx-ring-wrap{display:none;max-width:360px;margin:0 auto}
.bx-ring{width:100%;height:auto;display:block;font-family:var(--sans)}
.bx-ring path{stroke:var(--bg);stroke-width:2}
.bx-ring .bx-ring-quad text{letter-spacing:.03em;text-transform:uppercase}
.bx-ring .bx-ring-quad:hover path,.bx-ring .bx-ring-quad:focus path{opacity:.8}
@media (max-width:700px){.bx-wheel-wrap{display:none}.bx-ring-wrap{display:block}}

/* ---- hub list ---- */
.bx-filter{display:grid;gap:8px;max-width:520px;margin:0 0 26px}
.bx-filter label{font-weight:600}
.bx-filter input{font:inherit;font-size:1rem;padding:11px 14px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);color:var(--ink)}
.bx-filter-count{margin:0;color:var(--ink-soft);font-size:var(--small-size,0.9rem);min-height:1.2em}
.bx-group{margin:0 0 34px;scroll-margin-top:90px}
main h3.sec.bx-group-h{font-size:1.4rem;margin:0 0 6px}
.bx-group-p{color:var(--ink-soft);margin:0 0 16px;max-width:70ch}
.bx-sub{margin:0 0 18px}
.bx-sub-h{font-family:var(--sans);font-size:.85rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 8px}
.bx-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.bx-row{display:grid;grid-template-columns:minmax(14rem,1fr) 2fr;gap:4px 18px;padding:9px 0;border-top:1px solid var(--line);font-size:var(--aside-size,1.0625rem)}
.bx-row:last-child{border-bottom:1px solid var(--line)}
.bx-row-name{font-weight:600;color:var(--ink)}
.bx-row--live .bx-row-name{color:var(--brand)}
.bx-row-text{color:var(--ink-soft)}
.bx-row-soon{display:inline-block;margin-left:8px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);border:1px solid var(--line-2);border-radius:999px;padding:1px 8px;vertical-align:middle}
@media (max-width:640px){.bx-row{grid-template-columns:1fr}}