:root{
  --bg:#f7f8fa;--card:#ffffff;--ink:#17202a;--muted:#5b6673;--line:#e3e7ec;
  --accent:#0f6e8c;--accent-ink:#0b4a5e;
  --s1:#0a7aa3;--s2:#c2571a;--s1-soft:#8cc3d8;--s2-soft:#e6b393;
  --node:#eef2f5;--node-g:#e3f1f6;--pass:#17202a;
  --g0:#1d2a33;--g1:#33434e;--g2:#4c5d69;--g3:#677884;--g4:#8494a0;--g5:#a3b1bb;--g6:#c3ced6;--g7:#e2e8ec;
  --radius:14px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0f1418;--card:#161d23;--ink:#e6ebf0;--muted:#9aa7b4;--line:#243039;
    --accent:#5ec3e0;--accent-ink:#9fdcee;
    --s1:#3987e5;--s2:#d95926;--s1-soft:#2a4f78;--s2-soft:#6e3a22;
    --node:#1c252d;--node-g:#173041;--pass:#e6ebf0;
  }
}
:root[data-theme="dark"]{
  --bg:#0f1418;--card:#161d23;--ink:#e6ebf0;--muted:#9aa7b4;--line:#243039;
  --accent:#5ec3e0;--accent-ink:#9fdcee;
  --s1:#3987e5;--s2:#d95926;--s1-soft:#2a4f78;--s2-soft:#6e3a22;
  --node:#1c252d;--node-g:#173041;--pass:#e6ebf0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  overflow-wrap:break-word}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-ink);text-decoration:underline}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 56px}
.crumbs{margin:0 0 6px;font-size:13px;color:var(--muted)}
.crumbs a{color:var(--muted)}
h1{margin:0 0 10px;font-size:30px;line-height:1.2;letter-spacing:-.01em}
h2{margin:48px 0 14px;font-size:22px;line-height:1.3;padding-top:12px;border-top:1px solid var(--line)}
h3{margin:28px 0 8px;font-size:17px}
p,dd,li{text-wrap:pretty}
p{margin:0 0 14px}
.lede{color:var(--muted);font-size:16px}
.toc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin:18px 0 0}
.toc ol{margin:0;padding-left:22px;columns:2;column-gap:28px;font-size:15px}
@media (max-width:560px){.toc ol{columns:1}}

/* figures */
.fig{margin:0 0 22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 12px}
.fig figcaption{margin-top:10px;font-size:14px;color:var(--muted);line-height:1.5}
.fig-svg{display:block;width:100%;height:auto;max-height:620px}
.t-s{font-size:13px;fill:var(--ink)}
.t-xs{font-size:11px;fill:var(--ink)}
.muted{fill:var(--muted)}
.val{fill:var(--ink);font-variant-numeric:tabular-nums}
.inbar{fill:#ffffff}
.axis line{stroke:var(--line);stroke-width:1.5}
.axis .zero{stroke:var(--muted);stroke-width:1.5}
.axis .grid{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.axis .tick{stroke:var(--muted)}
.axis text{fill:var(--muted)}
.bar.s1{fill:var(--s1)}
.bar.s2{fill:var(--s2)}
.bar.rs{opacity:.62}
.track{stroke:var(--line);stroke-width:1.5}
.passline{stroke:var(--pass);stroke-width:2.5}
.dot{stroke:var(--card);stroke-width:2}
.dot.d1{fill:var(--s1)}
.dot.d2{fill:var(--s2)}

/* section 1 pixel squares */
.px{stroke:var(--card);stroke-width:2}
.px-ir{fill:var(--g4)}
.px-b1{fill:var(--g3)}.px-b2{fill:var(--g5)}.px-b3{fill:var(--g4)}
.px-r1{fill:var(--g2)}.px-r2{fill:var(--g5)}.px-r3{fill:var(--g6)}
.px-goal{fill:var(--node-g);stroke:var(--s1);stroke-width:2;stroke-dasharray:5 4}
.grid-goal{stroke:var(--s1);stroke-width:1;stroke-dasharray:3 3;fill:none}

/* fallback grayscale cells */
.g0{fill:var(--g0)}.g1{fill:var(--g1)}.g2{fill:var(--g2)}.g3{fill:var(--g3)}
.g4{fill:var(--g4)}.g5{fill:var(--g5)}.g6{fill:var(--g6)}.g7{fill:var(--g7)}

/* data-flow diagram */
.nd{fill:var(--node);stroke:var(--line);stroke-width:1.5}
.nd-g{fill:var(--node-g);stroke:var(--s1)}
.nd-body{fill:var(--node)}
.nd-out{fill:var(--node-g);stroke:var(--s1);stroke-width:2}
.ln{fill:none;stroke:var(--muted);stroke-width:1.6}
.ln-g{stroke:var(--s1);stroke-dasharray:5 4}
.ah{fill:var(--muted)}
.flow .st{transition:opacity .2s}
.flow.stepping .st{opacity:.22}
.flow.stepping .st.on{opacity:1}
.flow .st.on .nd{stroke:var(--s1);stroke-width:2.5}
.flow .only-c{display:none}
.flow.control .only-c{display:inline}
.flow.control .only-g{display:none}
.flow.control .gp{display:none}
.steps{margin:10px 0 0;padding-left:22px;font-size:14px}
.steps li{margin:0 0 6px;color:var(--ink)}
.steps.stepping li{color:var(--muted)}
.steps.stepping li.on{color:var(--ink);font-weight:500}

/* status wireframe */
.frame{fill:none;stroke:var(--line);stroke-width:1.5}
.wf-card{fill:var(--bg);stroke:var(--line);stroke-width:1.2}
.wf-line{fill:var(--g5)}
.wf-line.light{fill:var(--line)}
.wf-bar{fill:var(--line)}
.wf-fill{fill:var(--s1)}
.wf-chart{fill:none;stroke-width:2}
.wf-chart.c1{stroke:var(--s1)}
.wf-chart.c2{stroke:var(--s2);stroke-dasharray:4 3}
.wf-mark{stroke:var(--muted);stroke-dasharray:2 3}
.wf-knob{fill:var(--card);stroke:var(--s1);stroke-width:2.5}
.callout{fill:var(--accent)}
.callout-t{fill:var(--card);font-weight:700}

/* interactive sharpening figure */
.live[hidden],.controls[hidden]{display:none}
.panes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pane{margin:0;min-width:0}
.pane canvas{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated;border-radius:6px;background:var(--node)}
.pane-l{margin:6px 0 0;font-size:12px;color:var(--muted);text-align:center}
.controls{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-top:12px}
.ctl{display:flex;align-items:center;gap:8px;font-size:14px}
.ctl input{width:140px;accent-color:var(--s1)}
.ctl output{font-variant-numeric:tabular-nums;min-width:3.5em}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg-b{font:inherit;font-size:13px;padding:5px 12px;border:0;background:var(--card);color:var(--ink);cursor:pointer}
.seg-b+.seg-b{border-left:1px solid var(--line)}
.seg-b[aria-pressed="true"]{background:var(--s1);color:#ffffff}
.seg-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.readout{margin:10px 0 0;font-size:14px;font-variant-numeric:tabular-nums}

/* tables */
.tbl{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:10px;background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14px}
caption{text-align:left;padding:10px 12px 4px;font-weight:600;font-size:14px}
th,td{padding:7px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
thead th{border-top:0;font-size:13px;color:var(--muted);font-weight:600}
tbody th{font-weight:600;white-space:nowrap;color:var(--muted);width:32%}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:560px){
  tbody th{white-space:normal}
  th,td{padding:6px 8px}
}

/* glossary */
.gloss{margin:0}
.gloss dt{font-weight:600;margin-top:12px}
.gloss dd{margin:2px 0 0;color:var(--ink)}

.foot{margin-top:48px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot p{margin:0 0 6px}