/* Explanatory figures (2026-10-08). Static markup is the final state;
   explain.js maps document scroll position to reversible diagram frames. */
.ex-story,.ex-fig{--ex-base:#1a9a74;--ex-hit:#d9622b;--ex-blue:#2a78d6;--ex-drop:#d6ddd8;--ex-faint:#eef1ec;--ex-quiet:#9fb1a7}
.ex-story{display:grid;gap:22px;margin:0 0 34px}
.ex-story-head{max-width:760px}
.ex-story-head .eyebrow{margin-bottom:9px}
.ex-story-head h3{font-size:20px;line-height:1.5;font-weight:650;margin:0 0 8px}
.ex-story-head p{font-size:13.5px;line-height:1.85;color:var(--muted);margin:0}
.ex-fig{margin:0 0 26px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:26px 30px 22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-areas:"head visual" "cap visual" "ctrl visual";grid-template-rows:auto auto 1fr;gap:12px 38px;align-items:start}
.ex-story .ex-fig{margin-bottom:0}
.ex-head{grid-area:head}
.ex-visual{grid-area:visual;min-width:0}
.ex-fig figcaption{grid-area:cap;font-size:13px;line-height:1.9;color:var(--muted)}
.ex-controls{grid-area:ctrl;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ex-kicker{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--teal);margin:0 0 9px}
.ex-fig h3{font-size:18px;line-height:1.6;font-weight:650;margin:0}
.ex-svg{display:block;width:100%;height:auto;overflow:visible}
.ex-replay,.ex-stop,.ex-toggle{display:none}
.js .ex-replay,.js .ex-stop{display:inline-flex;align-items:center;gap:7px;border:1px solid #becfc3;border-radius:4px;background:var(--paper);color:var(--ink);padding:6px 12px;font:inherit;font-size:12px;font-weight:650;line-height:1.8;cursor:pointer}
.js .ex-replay:hover,.js .ex-stop:hover{background:#e7ebe1}
.js .ex-toggle{display:flex;flex-wrap:wrap}
.ex-toggle button{cursor:pointer;font:inherit;font-size:12px;font-weight:650}
.ex-replay:focus-visible,.ex-stop:focus-visible,.ex-toggle button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.ex-legend{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;line-height:1.6;color:var(--muted)}
.ex-legend li{display:flex;align-items:center;gap:7px}
.ex-swatch{width:10px;height:10px;border-radius:50%;flex-shrink:0;background:var(--ex-base)}
.ex-swatch.drop{background:var(--ex-drop)}
.ex-swatch.hit,.ex-swatch.same{background:var(--ex-hit)}
.ex-swatch.skin{background:var(--ex-blue)}
.ex-swatch.other{background:#c9d2cc}
.ex-swatch.score{width:16px;height:6px;border-radius:3px}
.ex-sep-top{font-size:12px;font-weight:650;color:var(--muted);margin:0 0 6px}

/* 1. Sieve */
.ex-chips{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ex-chips li{display:flex;flex-direction:column;gap:1px;border:1px solid var(--line);border-radius:5px;padding:7px 10px;color:var(--muted);transition:background .45s ease,border-color .45s ease,color .45s ease}
.ex-chips span{font-size:11px;font-weight:650}
.ex-chips strong{font-size:20px;font-weight:600;line-height:1.3;color:var(--ink);transition:color .45s ease}
.ex-sieve[data-step="0"] [data-chip="0"],.ex-sieve[data-step="1"] [data-chip="1"],.ex-sieve[data-step="2"] [data-chip="2"],.ex-sieve:is([data-step="3"],[data-step="final"]) [data-chip="3"]{background:var(--ink);border-color:var(--ink);color:#d6e3dc}
.ex-sieve[data-step="0"] [data-chip="0"] strong,.ex-sieve[data-step="1"] [data-chip="1"] strong,.ex-sieve[data-step="2"] [data-chip="2"] strong,.ex-sieve:is([data-step="3"],[data-step="final"]) [data-chip="3"] strong{color:#fffefa}
.ex-dot{fill:var(--ex-base);transition:fill .6s ease,opacity .8s ease,transform .8s ease;transition-delay:calc(var(--d) * 1ms)}
.ex-sieve[data-step="1"] .ex-dot:not(.s1),.ex-sieve[data-step="2"] .ex-dot:not(.s2),.ex-sieve:is([data-step="3"],[data-step="final"]) .ex-dot:not(.s3){fill:var(--ex-drop);opacity:.8;transform:translateY(5px)}
.ex-sieve:is([data-step="3"],[data-step="final"]) .ex-dot.s3{fill:var(--ex-hit)}
.ex-ring{fill:none;stroke:var(--ex-hit);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity .5s ease}
.ex-sieve:is([data-step="3"],[data-step="final"]) .ex-ring{opacity:.85}
.ex-sieve[data-step="3"] .ex-ring{animation:ex-pulse 1.6s ease-out 2}
@keyframes ex-pulse{0%{transform:scale(.6);opacity:.95}100%{transform:scale(1.7);opacity:0}}

/* 2. Step-1 classes */
.ex-panel-bg{fill:var(--ex-faint)}
.ex-cell{fill:var(--ex-base);transform-box:fill-box;transform-origin:center;transition:fill .6s ease,transform .7s cubic-bezier(.3,.7,.3,1);transition-delay:calc(var(--d) * 1ms)}
.ex-classes:is([data-step="1"],[data-step="final"]) .ex-cell.hit{fill:var(--ex-hit);transform:scale(.55)}
.ex-panel-labels{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;font-size:12px;line-height:1.6;color:var(--muted)}
.ex-panel-labels li{display:flex;flex-direction:column;gap:2px;min-width:0}
.ex-panel-labels strong{font-size:13px;color:var(--ink)}
.ex-count{font-size:16px;font-weight:600;color:var(--ink)}

/* 3. Separation */
.ex-rail,.ex-axis{stroke:var(--line);stroke-width:2}
.ex-axis-arrow{fill:none;stroke:var(--ex-quiet);stroke-width:2}
.ex-sep-dot{fill:var(--ex-base);transform:translate(var(--ox0),var(--oy0));transition:transform .95s cubic-bezier(.3,.7,.25,1),fill .5s ease}
.ex-separation:not([data-step="0"]) .ex-sep-dot.hit{fill:var(--ex-hit)}
.ex-separation[data-mode="a"]:is([data-step="2"],[data-step="3"],[data-step="final"]) .ex-sep-dot{transform:translate(0,0)}
.ex-separation[data-mode="b"]:is([data-step="2"],[data-step="3"],[data-step="final"]) .ex-sep-dot{transform:translate(var(--oxb),0)}
.ex-sep-ghost{fill:var(--ex-base);opacity:.28}
.ex-separation:not([data-step="0"]) .ex-sep-ghost.hit{fill:var(--ex-hit);opacity:.45}
.ex-axis-labels{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;line-height:1.6;color:var(--muted)}
.ex-meter{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:16px}
.ex-meter-name{font-size:12px;font-weight:650;color:var(--ink)}
.ex-meter-track{position:relative;height:10px;margin:24px 0;border-radius:5px;background:var(--ex-faint)}
.ex-meter-fill{position:absolute;inset:0;border-radius:5px;background:var(--ink);transform-origin:left center;transform:scaleX(.958);transition:transform 1s cubic-bezier(.3,.7,.25,1)}
.ex-separation[data-mode="b"] .ex-meter-fill{transform:scaleX(.474)}
.ex-separation:is([data-step="0"],[data-step="1"]) .ex-meter-fill{transform:scaleX(0)}
.ex-meter-mark{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;background:var(--ex-quiet)}
.ex-meter-mark.threshold{background:var(--ex-hit)}
.ex-meter-mark i{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10.5px;line-height:1.4;color:var(--muted);white-space:nowrap}
.ex-meter-mark.threshold i{top:auto;bottom:22px;color:#9a4a22}
.ex-meter-value{font-size:22px;font-weight:600;min-width:2.6em;text-align:right;transition:opacity .4s ease}
.ex-meter-value .vb,.ex-separation[data-mode="b"] .ex-meter-value .va{display:none}
.ex-separation[data-mode="b"] .ex-meter-value .vb{display:inline}
.ex-separation:is([data-step="0"],[data-step="1"]) .ex-meter-value{opacity:0}
.ex-bars{margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}
.ex-bars-title{font-size:12.5px;font-weight:650;color:var(--ink);margin:0 0 10px}
.ex-bar-row{display:grid;grid-template-columns:7.2em minmax(0,1fr) 2.6em;align-items:center;gap:10px;margin-bottom:7px;font-size:12px;color:var(--muted)}
.ex-bar{height:12px;border-radius:3px;background:var(--ex-faint);overflow:hidden}
.ex-bar i{display:block;height:100%;min-width:3px;width:calc(var(--v) * 100%);border-radius:0 4px 4px 0;background:var(--ex-base);transition:width 1.1s cubic-bezier(.3,.7,.25,1)}
.ex-bar-row.shuffled .ex-bar i{background:var(--ex-quiet)}
.ex-separation:not([data-step="3"]):not([data-step="final"]) .ex-bar i{width:0;min-width:0}
.ex-bar-row strong{text-align:right;font-size:13px;font-weight:600;color:var(--ink)}
.ex-bars-note{font-size:11.5px;line-height:1.8;color:var(--muted);margin:10px 0 0}

/* 4. Positive-control example */
.ex-skin-zone{fill:none;stroke:var(--ex-blue);stroke-width:1.5;opacity:0;transition:opacity .6s ease}
.ex-skin:not([data-step="0"]) .ex-skin-zone{opacity:.6}
.ex-line{fill:#c9d2cc;stroke:var(--surface);stroke-width:0;transition:fill .6s ease;transition-delay:calc(var(--d) * 1ms)}
.ex-skin:not([data-step="0"]) .ex-line.skin{fill:var(--ex-blue)}
.ex-skin:is([data-step="2"],[data-step="final"]) .ex-line.hit{fill:var(--ex-hit);stroke-width:1.5}

/* 5. Rank correlation */
.ex-rank-cols{position:relative;height:1.7em;font-size:12px;font-weight:650;color:var(--muted)}
.ex-rank-cols span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.ex-rank-cols span:first-child{left:26%}
.ex-rank-cols span:last-child{left:74%}
.ex-rank-line{stroke:var(--ex-base);stroke-width:2.4;stroke-linecap:round;opacity:.85}
.ex-rank-node{fill:var(--surface);stroke:var(--ink);stroke-width:2}
.ex-rank-notes p{display:none;margin:12px 0 0;font-size:12.5px;line-height:1.8;color:var(--ink)}
.ex-rank[data-state="r100"] [data-rank-note="r100"],.ex-rank[data-state="r095"] [data-rank-note="r095"],.ex-rank[data-state="r026"] [data-rank-note="r026"],.ex-rank[data-state="r007"] [data-rank-note="r007"]{display:block}

/* 6. Protein reverse search */
.ex-qbar{fill:var(--ex-base)}
.ex-cbar{fill:var(--ex-quiet)}
.ex-cand.same .ex-cbar{fill:var(--ex-hit)}
.ex-cand-bg{fill:var(--ex-faint);stroke:transparent;stroke-width:1.5;transition:stroke .5s ease .6s}
.ex-protein:is([data-step="2"],[data-step="final"]) .ex-cand.same .ex-cand-bg{stroke:var(--ex-hit)}
.ex-cand{transform:translateY(var(--dy0));transition:transform .9s cubic-bezier(.3,.7,.25,1)}
.ex-protein:is([data-step="2"],[data-step="final"]) .ex-cand{transform:translateY(0)}
.ex-score-track{fill:#e1e7e2}
.ex-score{fill:var(--ex-base);transform-box:fill-box;transform-origin:left center;transform:scaleX(0);transition:transform 1s cubic-bezier(.3,.7,.25,1)}
.ex-protein:not([data-step="0"]) .ex-score{transform:scaleX(1)}
.ex-cand.same .ex-score{fill:var(--ex-hit)}
.ex-svg-label{font:600 20px var(--sans);fill:var(--ink)}
.ex-svg-badge{font:700 15px var(--sans);fill:#9a4a22;opacity:0;transition:opacity .5s ease .7s}
.ex-protein:is([data-step="2"],[data-step="final"]) .ex-svg-badge{opacity:1}

@media(max-width:900px){.ex-fig{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "visual" "cap" "ctrl";grid-template-rows:auto;gap:14px;padding:22px 22px 20px}}
@media(max-width:550px){.ex-story{gap:18px}.ex-story-head h3{font-size:18px}.ex-story-head p{font-size:13px}.ex-fig{padding:20px 17px 18px}.ex-fig h3{font-size:16px}.ex-fig figcaption{font-size:12.5px}.ex-chips{gap:5px}.ex-chips li{padding:6px 7px}.ex-chips strong{font-size:16px}.ex-panel-labels{gap:6px;font-size:11px}.ex-panel-labels strong{font-size:12px}.ex-count{font-size:14px}.ex-axis-labels{font-size:10.5px}.ex-meter{gap:9px}.ex-meter-value{font-size:18px}.ex-bar-row{grid-template-columns:6.4em minmax(0,1fr) 2.4em;gap:7px;font-size:11.5px}.ex-legend{font-size:11.5px;gap:5px 14px}}
@media(prefers-reduced-motion:reduce){.ex-replay,.ex-stop{display:none!important}}
@media print{.ex-replay,.ex-stop,.ex-toggle{display:none!important}.ex-fig{break-inside:avoid}.ex-fig,.ex-fig *{animation:none!important;transition:none!important}}

/* Scroll position owns every frame, including when rewinding or standing
   still. Disable the older timed transitions and decorative pulse entirely. */
.ex-fig,.ex-fig *{animation:none!important;transition:none!important}
.ex-scroll-track{grid-area:visual;min-width:0}
.ex-scroll-track .ex-visual{position:relative}
.ex-scroll-enabled .ex-scroll-track .ex-visual{padding:8px 0;background:var(--surface)}
.ex-scroll-enabled .ex-scroll-track[data-pinned="true"] .ex-visual{position:sticky;top:var(--ex-pin-top)}
.ex-scroll-track .ex-controls{margin-top:16px;gap:8px}
.ex-scroll-track .ex-toggle{flex-basis:100%}
.ex-scroll-help{display:none;margin-top:16px;grid-template-columns:minmax(0,1fr) auto;gap:7px 12px;font-size:11.5px;line-height:1.65;color:var(--muted)}
.ex-scroll-enabled .ex-scroll-help{display:grid}
.ex-scroll-help p{margin:0}
.ex-scroll-help>p:first-child{font-weight:650;color:var(--ink)}
.ex-scroll-progress{grid-column:1/-1;height:3px;overflow:hidden;background:var(--ex-faint);border-radius:3px}
.ex-scroll-progress i{display:block;width:100%;height:100%;background:var(--ex-base);transform-origin:left center}
.ex-scroll-note{grid-column:1/-1;font-size:10.5px}
.ex-scroll-after{grid-column:1/-1;grid-row:4;margin-top:6px}
.ex-separation[data-measurement="moving"] .ex-meter-fill,.ex-separation[data-measurement="moving"] .ex-meter-value{visibility:hidden}
.ex-rank-notes{display:grid}
.ex-rank-notes p{display:block!important;grid-area:1/1;visibility:hidden}
.ex-rank[data-state="r100"] [data-rank-note="r100"],.ex-rank[data-state="r095"] [data-rank-note="r095"],.ex-rank[data-state="r026"] [data-rank-note="r026"],.ex-rank[data-state="r007"] [data-rank-note="r007"],.ex-rank[data-state="moving"] [data-rank-note="moving"]{visibility:visible}
@media(max-width:900px){.ex-scroll-after{grid-row:auto}.ex-scroll-track .ex-controls{margin-top:14px}}
@media(prefers-reduced-motion:reduce){.ex-scroll-track{height:auto!important}.ex-scroll-track .ex-visual{position:static!important}.ex-scroll-help{display:none!important}}
@media print{.ex-scroll-track{height:auto!important}.ex-scroll-track .ex-visual{position:static!important}.ex-scroll-help{display:none!important}.ex-rank-notes p{display:none!important}.ex-rank[data-state="r007"] [data-rank-note="r007"]{display:block!important;visibility:visible}}