/* 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; }
/* Progress: a real bar, not a line of grey mono. Eleven rounds is a commitment
   and a visitor should be able to see where they are in it. */
.xp-progress {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.8rem;
}
.xp-progress span { color:var(--amber); }
.xp-pips { display:inline-flex; gap:3px; }
.xp-pip { width:16px; height:4px; background:#26262e; display:inline-block; }
.xp-pip.done { background:var(--amber); }
.xp-pip.now { background:var(--red); box-shadow:0 0 6px rgba(204,0,0,.6); }
/* The question is the round. It was .95rem in body grey, the same weight as the
   two answer panels underneath it. */
.xp-q { font-size:1.22rem; font-weight:700; line-height:1.45; letter-spacing:-.01em; color:#fff; margin:.2rem 0 .7rem; max-width:70ch; }
.xp-model { font-family:var(--mono); font-size:.66rem; color:var(--amber); margin-bottom:.7rem; }
.xp-pair { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; align-items:stretch; }
.xp-arm { border:1px solid var(--line); background:var(--panel); padding:.7rem .85rem; display:flex; flex-direction:column; }
/* The two arms are the comparison, so they get a labelled head each and an
   identical height — they used to be ragged (one scrolling, one 200px shorter),
   which made an A/B read as two unrelated blocks. */
.xp-arm-head {
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--text); margin-bottom:.5rem;
  border-bottom:1px solid var(--line); padding-bottom:.4rem;
}
.xp-arm-head::before {
  content:attr(data-tag);
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; flex:0 0 auto;
  background:var(--ground); border:1px solid var(--line); color:var(--amber);
  font-size:.66rem; font-weight:700;
}
.xp-arm-text { font-size:.82rem; line-height:1.62; color:#d5d3cd; white-space:pre-wrap; height:250px; overflow-y:auto; scrollbar-width:thin; flex:1 1 auto; }
.xp-arm-text::-webkit-scrollbar { width:7px; }
.xp-arm-text::-webkit-scrollbar-thumb { background:#2f2f3a; }
.xp-arm-reveal { margin-top:.5rem; font-family:var(--mono); font-size:.66rem; color:var(--amber); border-top:1px solid var(--line); padding-top:.4rem; }
.xp-ask { margin:1.1rem 0 .55rem; font-size:.95rem; font-weight:700; color:var(--text); }
.xp-choices { display:flex; flex-wrap:wrap; gap:.45rem; }
.xp-choices button, .xp-reveal button, .xp-btns button {
  font-family:var(--mono); font-size:.76rem; letter-spacing:.08em; background:var(--ground);
  color:var(--red); border:1px solid #5a1818; padding:.6rem 1.25rem; cursor:pointer;
}
.xp-choices button:hover { background:rgba(204,0,0,.12); }
.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:#7d7c87; font-family:var(--mono); }
.xp-disc { font-size:.74rem; color:#7d7c87; 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:#7d7c87; 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:#7d7c87; }
.xp-btns { margin:1rem 0; }

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