/* Explainer shell and the shared method-explainer layout. Uses the host page's --ink, --muted, --teal, --teal-dark, --line and --paper. */
.explain-sheet, .explain-inline { --ink-soft:#3b504c; --faint:#9aaba6; --teal-soft:#e5f2ef; --math:"STIX Two Math","Cambria Math","Latin Modern Math","Times New Roman",serif; }
.explain-inline { line-height:1.6; }
.explain-sheet {
  width:min(620px,calc(100vw - 32px)); max-height:min(90vh,820px); padding:0; border:0; border-radius:20px; background:var(--paper); color:var(--ink); box-shadow:0 30px 80px -30px rgba(10,50,45,.55); overflow:auto; overscroll-behavior:contain; line-height:1.6; }
.explain-sheet::backdrop { background:rgba(18,38,36,.4); }
.explain-sheet[open] { animation:explain-in .18s ease-out; }
body:has(.explain-sheet[open]) { overflow:hidden; }
@keyframes explain-in { from { opacity:0; transform:translateY(8px) scale(.98); } }
@keyframes explain-up { from { transform:translateY(100%); } }
:is(.explain-sheet, .explain-inline) var { font-family:var(--math); font-style:italic; font-size:1.1em; }
:is(.explain-sheet, .explain-inline) math { font-family:var(--math); font-size:1.08em; }
:is(.explain-sheet, .explain-inline) .nowrap { white-space:nowrap; }
:is(.explain-sheet, .explain-inline) :is(button, a):focus-visible { outline:3px solid #82cfc7; outline-offset:2px; }
.explain-inner { padding:0 24px 22px; }
.explain-head { position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:10px; margin:0 -24px; padding:16px 16px 12px 24px; background:var(--paper); border-bottom:1px solid var(--line); }
.explain-kicker { flex:none; padding:2px 8px; border-radius:7px; background:#1f3b39; color:#fff; font-size:12px; font-weight:600; letter-spacing:.06em; }
.explain-head h2 { flex:1; margin:0; font-size:17px; font-weight:650; line-height:1.4; }
.explain-head h2:focus { outline:none; }
.explain-close { display:grid; flex:none; place-items:center; width:36px; height:36px; border:0; border-radius:50%; background:#f0f4f2; color:#4d625d; cursor:pointer; }
.explain-close:hover { background:#e3f3ee; color:var(--teal-dark); }
.explain-foot { margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
.explain-foot[hidden] { display:none; }
.explain-detail { display:inline-block; padding:7px 14px; border:1px solid #cfe3de; border-radius:999px; color:var(--teal-dark); font-size:14px; font-weight:600; text-decoration:none; transition:background .15s, color .15s; }
.explain-detail:hover { border-color:var(--teal); background:var(--teal); color:#fff; }

/* Method explainers: core idea, when to use it, a figure, three steps. */
.method-tag { flex-shrink:0; margin:2px 8px 0 0; padding:2px 8px; border-radius:7px; background:#1f3b39; color:#fff; font-size:12px; font-weight:600; letter-spacing:.06em; }
.method-core { display:grid; grid-template-columns:auto 1fr; align-items:start; margin:16px 0 12px; font-size:15px; font-weight:600; line-height:1.6; }
.method-problem { display:flex; align-items:baseline; gap:8px; margin:0 0 12px; padding:10px 14px; border:1px solid #f0dcc0; border-radius:12px; background:#fffaf2; color:#5e4520; font-size:14px; line-height:1.7; }
.method-problem-badge { flex:none; padding:1px 7px; border-radius:6px; background:#d98a1f; color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.04em; }
.method-judge { margin:0 0 14px; padding:14px 16px; border:1px solid #f0dcc0; border-radius:16px; background:#fffaf2; }
.method-judge-title { display:flex; align-items:center; margin:0 0 10px; font-size:15px; }
.method-judge-title .method-tag { margin-top:0; background:#a8650f; }
.method-signal { margin:0 0 10px; padding:10px 12px; border:1px dashed #ecd3ac; border-radius:12px; background:#fff; font-size:14.5px; line-height:1.9; }
.method-signal-tag { display:block; color:var(--muted); font-size:12px; font-weight:600; line-height:1.6; }
.method-signal mark { padding:0 2px; border-radius:3px; background:linear-gradient(transparent 52%, #ffdc9c 52%); color:inherit; }
.method-signal-notes { display:grid; gap:2px; margin:6px 0 0; padding:6px 0 0; border-top:1px solid #f3e6d2; list-style:none; color:#6b4d1d; font-size:13px; line-height:1.6; }
.method-signal-notes li::before { content:"→ "; color:#d08a2a; }
.method-checks { display:grid; gap:6px; margin:0; padding:0; list-style:none; }
.method-checks li { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px; padding:8px 12px; border:1px solid #e0ebe8; border-radius:12px; background:#fff; }
.method-check-no { grid-row:span 2; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--teal); color:#fff; font-size:12px; font-weight:700; }
.method-checks b { font-size:14px; font-weight:600; }
.method-checks small { color:var(--muted); font-size:12.5px; line-height:1.55; }
.method-else { display:grid; gap:6px; margin:10px 0 0; padding:0; list-style:none; font-size:13px; color:var(--ink-soft); }
.method-else li { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.method-else-tag { padding:1px 7px; border-radius:6px; background:#fbe6e2; color:#a2382c; font-size:12px; font-weight:600; }
.method-else-tag.alt { background:var(--teal-soft); color:var(--teal-dark); }
.method-switch { padding:2px 10px; border:1px solid #cfe3de; border-radius:999px; background:#fff; color:var(--teal-dark); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:background .15s, color .15s; }
.method-switch:hover { background:var(--teal); color:#fff; }
.method-figure { padding:16px 16px 14px; border:1px solid #dbe8e4; border-radius:16px; background:linear-gradient(180deg,#f5fbfa,#fbfdfc); text-align:center; }
.method-graph { display:block; width:100%; max-width:360px; height:auto; margin:0 auto; }
.method-graphs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:0; padding:0; list-style:none; }
.method-graphs li { padding:6px 4px 8px; border:1px solid #cfe7e1; border-radius:12px; background:#fff; font-size:12.5px; line-height:1.5; }
.method-graphs li.bad { border-color:#efc4bd; background:#fffaf9; }
.method-graphs svg { display:block; width:100%; height:auto; }
.method-graphs b { display:block; font-family:var(--math); font-size:15px; font-weight:400; }
.method-graphs .ok-mark { color:var(--teal); font-weight:700; }
.method-graphs .bad-mark { color:#c2412f; font-weight:700; }
.method-graph-caption { margin:4px 0 0; color:var(--muted); font-size:12.5px; }
.method-cases { display:grid; gap:6px; margin:10px auto 0; padding:0; max-width:360px; list-style:none; font-size:13.5px; }
.method-cases li { display:flex; align-items:center; justify-content:center; gap:8px; }
.method-case-tag { padding:1px 7px; border-radius:6px; background:var(--teal-soft); color:var(--teal-dark); font-size:12px; font-weight:600; }
.method-case-arrow { color:var(--faint); }
.method-pill { display:inline-block; margin:12px 0 0; padding:5px 14px; border:1px solid #f0dcc0; border-radius:999px; background:#fffaf2; color:#6b4d1d; font-size:14px; font-weight:600; }
.method-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0 0; padding:0; list-style:none; }
.method-steps li { position:relative; display:grid; justify-items:center; gap:2px; padding:12px 8px 10px; border:1px solid var(--line); border-top:3px solid #6fb8ad; border-radius:12px; background:#fff; text-align:center; }
.method-steps li + li::before { content:"→"; position:absolute; left:-9px; top:50%; transform:translate(-50%,-50%); color:#d08a2a; font-size:14px; }
.method-step-no { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--teal-soft); color:var(--teal); font-size:12px; font-weight:700; }
.method-steps strong { font-size:14px; }
.method-steps li > span:last-child { color:var(--muted); font-size:12px; line-height:1.55; }
.g-axis { stroke:#9fb3ad; stroke-width:1.4; }
.g-curve { fill:none; stroke:var(--teal); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.g-faint { fill:none; stroke:#b7d3ce; stroke-width:2; stroke-dasharray:4 4; }
.g-alt { fill:none; stroke:#d08a2a; stroke-width:2.4; stroke-dasharray:6 4; stroke-linecap:round; }
.g-bad { stroke:#d6533f; stroke-width:3; stroke-linecap:round; }
.g-band { fill:#e3f3ef; }
.g-guide { stroke:#c9d8d4; stroke-width:1; stroke-dasharray:3 3; }
.g-dot { fill:var(--teal); }
.g-dot-alt { fill:#d08a2a; }
.g-dot-bad { fill:#fff; stroke:#d6533f; stroke-width:2.4; }
.g-text { fill:var(--ink-soft); font-size:11px; font-weight:600; }
.g-math { fill:var(--ink-soft); font-family:var(--math); font-size:13px; font-style:italic; }
.g-text.ok { fill:var(--teal-dark); }
.g-text.alt { fill:#a8650f; }
.g-text.bad { fill:#c2412f; }

/* Expression figures (basic-inequality methods): square and circle slots, boxed terms, worked lines. Generic class names, so scoped to the explainer. */
:is(.explain-sheet, .explain-inline) .method-kinds { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:0; padding:0; list-style:none; }
:is(.explain-sheet, .explain-inline) .method-kinds li { display:grid; gap:2px; padding:8px 4px; border:1px solid #e0ebe8; border-radius:10px; background:#fff; font-size:14px; }
:is(.explain-sheet, .explain-inline) .method-kind-label { color:var(--muted); font-size:11.5px; font-weight:600; }
:is(.explain-sheet, .explain-inline) .method-kinds-note { margin:10px 0 4px; color:var(--ink-soft); font-size:13px; }
:is(.explain-sheet, .explain-inline) .mini-slot { display:inline-block; width:13px; height:13px; vertical-align:-1px; border:1.8px solid #0da3bc; border-radius:3px; background:#f8fdfe; }
:is(.explain-sheet, .explain-inline) .mini-slot.circle { border-color:#eaa01d; border-radius:50%; background:#fffcf5; }
:is(.explain-sheet, .explain-inline) .method-steps .mini-slot { width:11px; height:11px; border-width:1.6px; }
:is(.explain-sheet, .explain-inline) .method-formula { display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0 12px; color:var(--ink); font-family:var(--math); }
:is(.explain-sheet, .explain-inline) .method-formula .slot { display:inline-block; flex-shrink:0; width:46px; height:46px; border:3px solid #0da3bc; border-radius:10px; background:#f8fdfe; }
:is(.explain-sheet, .explain-inline) .method-formula .slot.circle { border-color:#eaa01d; border-radius:50%; background:#fffcf5; }
:is(.explain-sheet, .explain-inline) .method-formula .slot.small { width:34px; height:34px; border-width:2.5px; }
:is(.explain-sheet, .explain-inline) .method-formula .op { font-size:30px; line-height:1; }
:is(.explain-sheet, .explain-inline) .method-formula .coef { margin-right:-6px; font-weight:600; }
:is(.explain-sheet, .explain-inline) .method-formula .dot { font-size:24px; }
:is(.explain-sheet, .explain-inline) .radical { display:inline-flex; align-items:stretch; }
:is(.explain-sheet, .explain-inline) .radical-sign { flex-shrink:0; width:18px; height:auto; color:var(--ink); }
:is(.explain-sheet, .explain-inline) .radicand { display:inline-flex; align-items:center; gap:6px; padding:6px 4px 2px 6px; border-top:2.4px solid var(--ink); }
:is(.explain-sheet, .explain-inline) .method-template { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:2px 0 12px; }
:is(.explain-sheet, .explain-inline) :is(.method-template, .method-demo) .op { font-family:var(--math); font-size:18px; line-height:1; color:var(--ink-soft); }
:is(.explain-sheet, .explain-inline) .method-template .slot { display:inline-block; width:30px; height:30px; border:2.5px solid #0da3bc; border-radius:7px; background:#f8fdfe; }
:is(.explain-sheet, .explain-inline) .method-template .slot.circle { border-color:#eaa01d; border-radius:50%; background:#fffcf5; }
:is(.explain-sheet, .explain-inline) .method-word { padding:5px 10px; border:1px solid #e0ebe8; border-radius:9px; background:#fff; font-size:13.5px; font-weight:600; }
:is(.explain-sheet, .explain-inline) .method-node { display:inline-grid; justify-items:center; gap:1px; padding:6px 11px; border:1px solid #e0ebe8; border-radius:10px; background:#fff; }
:is(.explain-sheet, .explain-inline) .method-node small { white-space:nowrap; color:var(--muted); font-size:11.5px; font-weight:600; }
:is(.explain-sheet, .explain-inline) .method-node b { display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:600; white-space:nowrap; }
:is(.explain-sheet, .explain-inline) .method-arrow { display:inline-grid; justify-items:center; color:#d08a2a; line-height:1.1; }
:is(.explain-sheet, .explain-inline) .method-arrow small { color:var(--muted); font-size:11px; }
:is(.explain-sheet, .explain-inline) .method-arrow i { font-style:normal; font-size:16px; }
:is(.explain-sheet, .explain-inline) .hole { display:inline-block; width:24px; height:18px; border:1.8px dashed var(--teal); border-radius:5px; background:#f2faf8; vertical-align:middle; }
:is(.explain-sheet, .explain-inline) .hole-frac { display:inline-grid; justify-items:center; gap:2px; font-family:var(--math); font-size:13px; line-height:1; }
:is(.explain-sheet, .explain-inline) .hole-frac .hole { width:30px; height:16px; }
:is(.explain-sheet, .explain-inline) .hole-frac > span:first-child { padding:0 8px 2px; border-bottom:1.6px solid var(--ink); }
:is(.explain-sheet, .explain-inline) .method-demo { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 8px; margin:0 0 10px; padding:10px 12px; border:1px dashed #cfe0db; border-radius:12px; background:#fff; }
:is(.explain-sheet, .explain-inline) .method-demo-tag { flex-basis:100%; color:var(--muted); font-size:12px; font-weight:600; }
:is(.explain-sheet, .explain-inline) .method-demo-body { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; font-size:15px; }
:is(.explain-sheet, .explain-inline) .method-demo-group { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
:is(.explain-sheet, .explain-inline) .method-demo math { math-style:normal; }
:is(.explain-sheet, .explain-inline) .term { display:inline-flex; align-items:center; padding:3px 8px; border:2px solid #0da3bc; border-radius:8px; background:#f8fdfe; }
:is(.explain-sheet, .explain-inline) .term.circle { border-color:#eaa01d; border-radius:999px; background:#fffcf5; }
:is(.explain-sheet, .explain-inline) .term.plain { border:1px solid #cfe3de; background:var(--teal-soft); }
:is(.explain-sheet, .explain-inline) .method-demo + .method-pill { margin-top:2px; }
:is(.explain-sheet, .explain-inline) .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media(max-width:720px) {
  :is(.explain-sheet, .explain-inline) .method-kinds { grid-template-columns:repeat(2,1fr); }
  :is(.explain-sheet, .explain-inline) .method-formula { gap:7px; }
  :is(.explain-sheet, .explain-inline) .method-formula .slot { width:38px; height:38px; }
  :is(.explain-sheet, .explain-inline) .method-formula .slot.small { width:28px; height:28px; }
  :is(.explain-sheet, .explain-inline) .method-formula .op { font-size:25px; }
  :is(.explain-sheet, .explain-inline) .method-template { flex-wrap:nowrap; gap:4px; }
  :is(.explain-sheet, .explain-inline) .method-node { padding:5px 7px; }
  :is(.explain-sheet, .explain-inline) .method-node small { font-size:10.5px; }
  :is(.explain-sheet, .explain-inline) .method-node b { font-size:12.5px; }
  :is(.explain-sheet, .explain-inline) .method-node b.wrap { flex-wrap:wrap; justify-content:center; }
  :is(.explain-sheet, .explain-inline) .method-arrow small { font-size:10px; }
  :is(.explain-sheet, .explain-inline) .method-demo { padding:9px 8px; }
  :is(.explain-sheet, .explain-inline) .method-demo-body { gap:4px 5px; font-size:14px; }
  :is(.explain-sheet, .explain-inline) .method-demo-group { gap:5px; }
  :is(.explain-sheet, .explain-inline) .method-demo math { math-style:compact; }
  :is(.explain-sheet, .explain-inline) .term { padding:2px 6px; }
  .method-core { font-size:14px; }
  .method-judge { padding:12px; }
  .method-signal { padding:9px 10px; font-size:14px; }
  .method-checks li { padding:8px 10px; }
  .method-graphs { gap:6px; }
  .method-graphs li { font-size:11.5px; }
  .method-steps { grid-template-columns:1fr; gap:8px; }
  .method-steps li { grid-template-columns:auto 1fr; justify-items:start; align-items:center; column-gap:10px; row-gap:1px; padding:10px 12px; border-top-width:1px; border-left:3px solid #6fb8ad; text-align:left; }
  .method-steps li + li::before { content:none; }
  .method-step-no { grid-row:span 2; }
  .method-steps li > span:last-child { grid-column:2; }
}
@media(max-width:600px) {
  .explain-sheet { width:100%; max-width:none; max-height:90vh; margin:auto 0 0; border-radius:20px 20px 0 0; }
  .explain-sheet[open] { animation:explain-up .22s ease-out; }
  .explain-inner { padding:0 14px calc(18px + env(safe-area-inset-bottom)); }
  .explain-head { margin:0 -14px; padding:12px 10px 10px 14px; }
  .explain-head h2 { font-size:15.5px; }
}
@media(max-width:380px) {
  .method-figure { padding:14px 10px 12px; }
  :is(.explain-sheet, .explain-inline) .method-formula { gap:5px; }
  :is(.explain-sheet, .explain-inline) .method-formula .slot { width:34px; height:34px; }
  :is(.explain-sheet, .explain-inline) .method-formula .slot.small { width:26px; height:26px; }
  :is(.explain-sheet, .explain-inline) .method-formula .op { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) {
  .explain-sheet[open] { animation:none; }
}