.cx-learning-meta { display:flex; flex-wrap:wrap; gap:.4rem 1rem; color:var(--text-dim,#c1b6a3); font-size:.8rem; }
.cx-learning-icon { display:inline-block; object-fit:contain; vertical-align:middle; margin-right:.45rem; flex:none; }
.cx-learning-body { max-width:75ch; line-height:1.85; }
.cx-learning-body > p { margin:.8rem 0; }
.cx-learning-before { display:flex; flex-wrap:wrap; gap:.35rem .8rem; margin:1rem 0; font-size:.85rem; }
.cx-learning-before > span { width:100%; color:var(--text-dim,#c1b6a3); }
.cx-learning-sources { margin:1rem 0; font-size:.8rem; }
.cx-learning-sources summary { cursor:pointer; min-height:var(--m-touch); align-content:center; }
.cx-learning-stages { display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin:1rem 0; }
.cx-learning-filters { display:flex; flex-wrap:wrap; gap:1rem; margin:1.3rem 0; }
.cx-learning-filters label { display:grid; gap:.35rem; flex:1 1 13rem; }
.cx-learning-filters input,.cx-learning-filters select { width:100%; padding:.6rem .75rem; color:inherit; background:var(--bg-raised,#211d19); border:1px solid var(--border,#645747); border-radius:4px; font:inherit; }
.cx-learning-filters option { color:#eee5d6; background:#211d19; }
.cx-learning-index [data-learning-stage] { scroll-margin-top:6rem; margin-top:2rem; }
.cx-learning-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:.8rem 1.5rem; }
.cx-learning-cards li { min-width:0; }
.cx-learning-cards a { display:inline-flex; align-items:center; }
.cx-learning-example { margin:1.2rem 0; padding:1rem; border:1px solid var(--border,#645747); border-radius:6px; background:rgba(128,111,84,.09); }
.cx-learning-example figcaption { font-weight:600; margin-bottom:.6rem; }
.cx-learning-example small { display:block; color:var(--text-dim,#c1b6a3); line-height:1.6; }
.cx-learning-example label { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.cx-learning-example input[type=range] { flex:1 1 9rem; accent-color:#90bd7b; }
.cx-dice-pair,.cx-example-comparison,.cx-example-values { display:flex; flex-wrap:wrap; gap:.8rem; margin:.7rem 0; }
.cx-dice-pair span { display:grid; place-items:center; width:2.6rem; height:2.6rem; border:1px solid #bba079; border-radius:.4rem; font-size:1.3rem; }
.cx-example-comparison > span,.cx-example-values > div { flex:1 1 5rem; }
.cx-example-comparison strong { display:block; color:var(--text,#eee5d6); font-size:1.15rem; }
.cx-example-values dd { margin:0; font-size:1.2rem; font-weight:600; }
.cx-learning-index :focus-visible,.cx-learning-body :focus-visible { outline:2px solid #cdb487; outline-offset:3px; }