/* THE EXPERIMENT — styles. The CI whisker against a zero line is the most important
   object on the page: an interval that crosses zero must LOOK like a non-result. */
.xp-wrap {
  --ground:#0C0C0F; --panel:#14141A; --line:#2A2A33; --text:#E6E4DE;
  --muted:#84838F; --red:#CC0000; --amber:#E8A33D; --green:#6fd08c;
  --mono: ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,monospace;
  color: var(--text);
}
.xp-wrap h3 { margin:1.5rem 0 .5rem; font-size:.9rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:.3rem; }
.xp-lede { color:var(--muted); line-height:1.65; font-size:.9rem; max-width:64ch; }
.xp-counts { font-family:var(--mono); font-size:.68rem; color:var(--muted); border-left:2px solid var(--line); padding-left:.7rem; margin-bottom:1.2rem; }
.xp-progress { font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem; }
.xp-progress span { color:var(--amber); }
.xp-q { font-size:.95rem; line-height:1.6; margin:.3rem 0 .6rem; }
.xp-model { font-family:var(--mono); font-size:.66rem; color:var(--amber); margin-bottom:.6rem; }
.xp-pair { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
.xp-arm { border:1px solid var(--line); background:var(--panel); padding:.6rem .75rem; }
.xp-arm-head { font-family:var(--mono); font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:.35rem; }
.xp-arm-text { font-size:.8rem; line-height:1.55; color:var(--text); white-space:pre-wrap; max-height:230px; overflow-y:auto; }
.xp-arm-reveal { margin-top:.4rem; font-family:var(--mono); font-size:.66rem; color:var(--amber); border-top:1px solid var(--line); padding-top:.3rem; }
.xp-ask { margin:.9rem 0 .5rem; font-size:.9rem; font-weight:700; }
.xp-choices { display:flex; flex-wrap:wrap; gap:.4rem; }
.xp-choices button, .xp-reveal button, .xp-btns button {
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; background:var(--ground);
  color:var(--red); border:1px solid #5a1818; padding:.45rem 1rem; cursor:pointer;
}
.xp-choices button:hover, .xp-reveal button:hover { border-color:var(--red); }
.xp-choices button.xp-2nd { color:var(--muted); border-color:var(--line); }
.xp-reveal { margin-top:1rem; border-top:1px solid var(--line); padding-top:.8rem; }
.xp-reveal p { font-size:.86rem; line-height:1.6; color:var(--muted); }
.xp-mark { font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; padding:.4rem .8rem; border-left:2px solid; margin-bottom:.5rem; }
.xp-hit  { border-color:var(--green); color:var(--green); background:rgba(111,208,140,.06); }
.xp-miss { border-color:var(--red);   color:var(--red);   background:rgba(204,0,0,.06); }
.xp-teach { border-left:1px solid var(--amber); padding-left:.7rem; color:var(--amber) !important; font-size:.82rem !important; }
.xp-null-chip { color:#5c5b66; font-family:var(--mono); }
.xp-disc { font-size:.74rem; color:#5c5b66; line-height:1.55; margin:.7rem 0; border-left:1px solid var(--line); padding-left:.7rem; }

.xp-ci { margin:.5rem 0; }
.xp-ci-track { position:relative; height:16px; background:var(--panel); border:1px solid var(--line); }
.xp-ci-zero { position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--muted); }
.xp-ci-bar { position:absolute; top:4px; height:8px; background:#3a3a44; }
.xp-ci-bar.xp-ci-real { background:var(--red); }
.xp-ci-mean { position:absolute; top:1px; bottom:1px; width:2px; background:var(--text); }
.xp-ci-lab { display:flex; justify-content:space-between; font-family:var(--mono); font-size:.55rem; color:#5c5b66; margin-top:.15rem; }
.xp-verdict { font-family:var(--mono); font-size:.68rem; margin-top:.3rem; line-height:1.5; }
.xp-real { color:var(--red); }
.xp-null { color:var(--muted); }
.xp-noci { font-family:var(--mono); font-size:.68rem; color:var(--amber); border:1px dashed #5a3f18; padding:.3rem .5rem; }

.xp-final { font-size:1.6rem; font-weight:800; margin:.3rem 0 .6rem; }
.xp-strip { margin:.5rem 0; }
.xp-row { border-top:1px solid #1c1c22; padding:.45rem 0; }
.xp-row-m { font-family:var(--mono); font-size:.68rem; color:var(--text); }
.xp-note { font-size:.82rem; color:var(--muted); line-height:1.6; border-left:2px solid var(--amber); padding-left:.7rem; margin:.8rem 0; }
.xp-repro { padding-left:1.2rem; }
.xp-repro li { font-size:.85rem; line-height:1.6; color:var(--muted); margin:.5rem 0; }
.xp-repro b { color:var(--text); text-transform:uppercase; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; }
.xp-repro span { font-family:var(--mono); font-size:.66rem; color:var(--amber); }
.xp-repro .xp-how { color:#5c5b66; }
.xp-btns { margin:1rem 0; }

@media (max-width:768px) { .xp-pair { grid-template-columns:1fr; } }