/* Explainer section under the tool (explain.py). Loaded only on pages that have one. */
.xp{border-top:1px solid var(--line,#E5E8EB)}
.xp h2{font-size:21px;margin-bottom:10px}
.xp p,.xp li{color:#333D4B;line-height:1.8}
.xp ul,.xp ol{padding-left:22px;margin:6px 0 12px}
.xp li{margin:4px 0}
.xp h3{font-size:18px;margin:30px 0 8px;padding-top:4px;display:flex;align-items:center;gap:8px;scroll-margin-top:76px}
.xp h3::before{content:"";flex:none;width:4px;height:18px;border-radius:2px;background:var(--acc,#1B64DA)}
.xp-toc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.xp-toc a{font-size:13.5px;padding:4px 11px;border-radius:999px;background:#fff;color:var(--head,#191F28);text-decoration:none;border:1px solid var(--line-s,#D1D6DB);font-weight:550}
.xp-toc a:hover{background:var(--acc-soft,#E8F3FF);border-color:var(--acc,#1B64DA);color:var(--acc-d,#1957C2)}
/* principle diagrams */
.xp-fig{margin:16px 0 18px;padding:12px;background:var(--paper2,#F9FAFB);border:1px solid var(--line,#E5E8EB);border-radius:16px}
.xp-fig svg{display:block;width:100%;max-width:520px;height:auto;margin:0 auto}
.xp-fig figcaption{font-size:14px;color:var(--muted,#4E5968);text-align:center;margin-top:8px;line-height:1.6}
/* step images */
.xp-steps{display:grid;gap:22px;margin:12px 0 8px}
.xp-step{display:grid;grid-template-columns:minmax(0,408px) minmax(0,1fr);gap:20px;align-items:start}
.xp-shot{margin:0}
.xp-shot img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line,#E5E8EB);box-shadow:0 6px 18px -10px rgba(25,31,40,.25);background:#fff}
.xp-stt{margin:2px 0 8px;font-weight:800;color:var(--head,#191F28);font-size:17px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.xp-stt span{font-size:12.5px;font-weight:800;color:#fff;background:var(--grass,#1B64DA);border-radius:999px;padding:2px 10px}
.xp ol.xp-co{list-style:none;padding:0;margin:0}
.xp-co li{display:flex;gap:9px;align-items:flex-start;margin:0 0 9px}
.xp-co i{flex:none;font-style:normal;width:24px;height:24px;margin-top:3px;border-radius:50%;background:#D23F63;color:#fff;font-weight:800;font-size:13px;display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.xp .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:700px){.xp-step{grid-template-columns:1fr;gap:10px}.xp-shot{max-width:408px}}
/* tables, notes, questions */
.xp-tbl{font-size:14.5px;margin:8px 0 6px}
.xp-tbl th[scope=row]{background:#fff;font-weight:700;color:var(--head,#191F28);white-space:normal}
.xp-tbl td,.xp-tbl th{line-height:1.6}
.xp-tip,.xp-warn{padding:11px 14px;border-radius:12px;margin:12px 0}
.xp-tip{background:var(--acc-soft,#E8F3FF);border-left:3px solid var(--acc,#1B64DA)}
.xp-warn{background:#FFF7ED;border-left:3px solid var(--orange,#C2410C)}
.xp-tip b,.xp-warn b{display:inline-block;margin-right:8px;color:var(--head,#191F28)}
.xp-faq details{border-top:1px solid var(--line,#E5E8EB);padding:10px 0}
.xp-faq details:first-child{border-top:0}
.xp-faq summary{cursor:pointer;font-weight:700;color:var(--head,#191F28);list-style:none;display:flex;gap:8px}
.xp-faq summary::-webkit-details-marker{display:none}
.xp-faq summary::before{content:"Q";flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:var(--acc-soft,#E8F3FF);color:var(--acc-d,#1957C2);font-weight:800;font-size:13px;margin-top:2px}
.xp-faq details p{margin:6px 0 0 30px}
@media(max-width:520px){.xp h2{font-size:19.5px}.xp h3{font-size:17px;margin-top:26px}.xp-fig{padding:4px 0 8px;margin-left:-8px;margin-right:-8px;border-radius:14px}.xp-fig svg{border-radius:12px}.xp-tbl{font-size:14px;background:none}.xp-tbl thead{display:none}.xp-tbl,.xp-tbl tbody,.xp-tbl tr{display:block}.xp-tbl tr{background:#fff;border:1px solid var(--line,#E5E8EB);border-radius:12px;margin:0 0 8px;padding:8px 12px}.xp table.xp-tbl th[scope=row]{display:block;border:0;padding:0 0 4px;background:none;font-size:15px}.xp table.xp-tbl td{display:flex;gap:10px;border:0;border-top:1px dashed var(--line,#E5E8EB);padding:5px 0}.xp-tbl td::before{content:attr(data-l);flex:0 0 38%;color:var(--muted,#4E5968);font-weight:600}}