:root{
  --bg:#faf9f7; --panel:#fff; --ink:#1c2027; --muted:#6b7280; --line:#e7e5e1;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --bind:#8a919c; --replace:#c07c1e; --keep:#a8850e; --move:#2f80b8;
  --lost:#c0392b; --at:#8a919c; --accent:#0ea5b7; --keyink:#2a3140;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0e1116; --panel:#151a21; --ink:#d5dae2; --muted:#8b93a0; --line:#242b34;
    --bind:#7d8590; --replace:#e0a13a; --keep:#d4b024; --move:#58a6d8; --lost:#e5615a;
    --at:#6b7280; --accent:#3ad0e0; --keyink:#c6ccd6; }
}
:root[data-theme="light"]{ --bg:#faf9f7;--panel:#fff;--ink:#1c2027;--muted:#6b7280;--line:#e7e5e1;
  --bind:#8a919c;--replace:#c07c1e;--keep:#a8850e;--move:#2f80b8;--lost:#c0392b;--at:#8a919c;--accent:#0ea5b7;--keyink:#2a3140;}
:root[data-theme="dark"]{ --bg:#0e1116;--panel:#151a21;--ink:#d5dae2;--muted:#8b93a0;--line:#242b34;
  --bind:#7d8590;--replace:#e0a13a;--keep:#d4b024;--move:#58a6d8;--lost:#e5615a;--at:#6b7280;--accent:#3ad0e0;--keyink:#c6ccd6;}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5}
.wrap{max-width:1100px;margin:0;padding:32px 24px 80px}
h1{font-size:15px;font-weight:600;letter-spacing:.02em;margin:0;color:var(--muted);text-transform:uppercase}
header .sub{font-family:var(--mono);font-size:12px;color:var(--accent);margin-top:4px}
.lead{font-family:var(--mono);font-size:12px;color:var(--muted);margin:2px 0 18px}
.stats{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 16px;min-width:104px}
.stat .n{font-size:26px;font-weight:650;font-variant-numeric:tabular-nums;line-height:1}
.stat .l{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:5px}
.stat.replace .n{color:var(--replace)} .stat.keep .n{color:var(--keep)}
.bar{position:sticky;top:0;background:linear-gradient(var(--bg),var(--bg) 70%,transparent);padding:10px 0;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;z-index:5;border-bottom:1px solid var(--line);margin-bottom:14px}
.bar .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:2px}
.chip{font-family:var(--mono);font-size:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);
  padding:4px 10px;border-radius:999px;cursor:pointer;user-select:none;display:inline-flex;gap:6px;align-items:center}
.chip::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
.chip[data-off="1"]{opacity:.34;text-decoration:line-through}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip.bind{--c:var(--bind)} .chip.replace{--c:var(--replace)} .chip.keep{--c:var(--keep)} .chip.move{--c:var(--move)}
section{margin:26px 0}
h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
h2 .hint{text-transform:none;font-weight:400;color:var(--muted)}
.log{font-family:var(--mono);font-size:12.5px}
.ev{padding:3px 10px 3px 12px;border-left:3px solid var(--bind);border-radius:0 4px 4px 0;
  white-space:pre-wrap;word-break:break-word}
.ev+.ev{border-top:1px solid color-mix(in srgb,var(--line) 55%,transparent)}
.ev.bind{border-color:var(--bind)}
.ev.replace{border-color:var(--replace);background:color-mix(in srgb,var(--replace) 7%,transparent)}
.ev.keep{border-color:var(--keep);background:color-mix(in srgb,var(--keep) 7%,transparent)}
.ev.move{border-color:var(--move)}
.ev .t{display:inline-block;min-width:58px;color:var(--muted);text-transform:lowercase}
.ev.replace .t{color:var(--replace)} .ev.keep .t{color:var(--keep)} .ev.move .t{color:var(--move)}
.key{color:var(--keyink);font-weight:600} .arrow{color:var(--muted)} .tgt{color:var(--ink)} .nil{color:var(--muted)}
.at{color:var(--at)} .mod{color:var(--accent)}
/* source links keep their token colour; only an underline marks them clickable */
#view a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:2px}
#view a:hover{text-decoration-color:currentColor}
.lost{display:block;padding:1px 0 1px 58px;color:var(--lost)}
.lost .tag{opacity:.8;text-transform:uppercase;font-size:10.5px;letter-spacing:.05em;margin-right:4px}
.lost .mod{color:color-mix(in srgb,var(--lost) 70%,var(--accent))}
.b{font-family:var(--mono);font-size:12px;padding:5px 10px;white-space:pre-wrap;word-break:break-word}
.b+.b{border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.b .aop{margin-top:3px;padding-left:22px;font-size:11.5px;position:relative}
.b .aop::before{content:"↳";position:absolute;left:6px;color:var(--muted)}
.b .aop .tag{text-transform:uppercase;font-size:10px;letter-spacing:.06em;color:var(--move);margin-right:5px}
.b .aop .methods{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(460px,1fr));gap:2px 22px}
.ml{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);font-size:12px;
  padding:3px 4px;border-bottom:1px solid color-mix(in srgb,var(--line) 45%,transparent)}
.ml .mod{color:var(--accent);min-width:0;overflow-wrap:anywhere} .ml .cnt{color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0}
.hide-bind .ev.bind,.hide-replace .ev.replace,.hide-keep .ev.keep,.hide-move .ev.move{display:none}
pre#src{font-family:var(--mono);font-size:12px;white-space:pre-wrap;word-break:break-word;color:var(--ink);margin:0}
/* the viewer script shows #view and hides the raw <pre> once it has rendered;
   without JavaScript the <pre> stays visible as a plain-text fallback */
#view{display:none}