/* Guide to "The referee and the cleaner". Served under the site CSP: no inline style or script. */
:root{
  --ground:#f6f7f9;--panel:#fff;--text:#1d2430;--muted:#5b6575;--faint:#8a93a1;--hair:#e3e7ec;--hair2:#d3d9e0;
  --ok:#2f7d4f;--warn:#9a6a14;--bad:#a8443c;--s1:#2f6db0;--s2:#7a4fb0;--track:#e6ebf1;--warn-bg:#fbf4e6;
  --box-a:#eef3f7;--box-b:#fff6e5;--box-c:#eef7ee;--box-d:#f4eef8;--mark:#fff1b8;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace
}
@media (prefers-color-scheme:dark){:root{
  --ground:#0f141a;--panel:#161d25;--text:#e4e9ef;--muted:#a3adba;--faint:#7c8796;--hair:#24303c;--hair2:#2f3d4b;
  --ok:#7cc79b;--warn:#e0b87a;--bad:#f19a92;--s1:#7fb0e6;--s2:#c3a2ec;--track:#24303c;--warn-bg:rgba(224,184,122,.10);
  --box-a:#18232e;--box-b:#2a2416;--box-c:#17261c;--box-d:#241c2e;--mark:#4a3f12
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--text)}
body{font:16px/1.6 var(--ui);overflow-x:hidden;font-variant-numeric:tabular-nums}
.wrap{max-width:900px;margin:0 auto;padding:20px 16px 48px}
a{color:var(--s1)}
nav.crumbs{font-size:14px;color:var(--muted);display:flex;gap:14px;flex-wrap:wrap}
h1{font-size:clamp(24px,5vw,32px);line-height:1.2;margin:14px 0 6px}
.lede{font-size:17px;color:var(--muted);margin:0 0 14px}
h2{font-size:clamp(19px,3.6vw,23px);line-height:1.3;margin:40px 0 8px;padding-top:12px;border-top:1px solid var(--hair)}
h3{font-size:16px;margin:18px 0 6px}
p,li{max-width:72ch}
.summary{font-size:16.5px}
.toc{background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:10px 14px;margin:12px 0}
.toc ol{margin:6px 0;padding-left:22px}
.toc li{margin:2px 0}
details{background:var(--panel);border:1px solid var(--hair);border-radius:10px;margin:8px 0}
details>summary{cursor:pointer;padding:10px 14px;font-weight:600;list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"+";display:inline-block;width:1.2em;color:var(--s1);font-weight:700}
details[open]>summary::before{content:"\2212"}
details>summary:focus-visible{outline:2px solid var(--s1);outline-offset:2px;border-radius:8px}
details>.in{padding:0 14px 12px}
code,kbd,.mono{font-family:var(--mono);font-size:.88em}
pre{font-family:var(--mono);font-size:13px;background:var(--ground);border:1px solid var(--hair);border-radius:8px;padding:10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;margin:8px 0}
.tbl{overflow-x:auto;margin:8px 0}
table{border-collapse:collapse;font-size:14px;min-width:100%}
th,td{border-bottom:1px solid var(--hair);padding:5px 8px;text-align:left;vertical-align:top}
th{color:var(--muted);font-weight:600}
td.n,th.n{text-align:right;white-space:nowrap}
tfoot td{font-weight:700}
figure{margin:16px 0;background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:10px}
figure svg{display:block;width:100%;height:auto}
figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.fig-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.note{font-size:14px;color:var(--muted)}
.tag{display:inline-block;font-size:12px;border:1px solid var(--hair2);border-radius:99px;padding:1px 8px;color:var(--muted)}
footer{margin-top:40px;font-size:13px;color:var(--faint)}
dl.gloss dt{font-weight:700;margin-top:10px}
dl.gloss dd{margin:2px 0 0 0;max-width:72ch}
/* SVG figures */
svg text{fill:var(--text);font-family:var(--ui);font-size:13px}
svg .sm{font-size:11.5px;fill:var(--muted)}
svg .b{font-weight:700}
svg .bx{fill:var(--panel);stroke:var(--hair2);stroke-width:1.2}
svg .ba{fill:var(--box-a);stroke:var(--s1);stroke-width:1.2}
svg .bb{fill:var(--box-b);stroke:var(--warn);stroke-width:1.2}
svg .bc{fill:var(--box-c);stroke:var(--ok);stroke-width:1.2}
svg .bd{fill:var(--box-d);stroke:var(--s2);stroke-width:1.2}
svg .lock{fill:var(--box-c);stroke:var(--ok);stroke-width:1.6;stroke-dasharray:5 3}
svg .ln{stroke:var(--muted);stroke-width:1.6;fill:none}
svg .ar{fill:var(--muted)}
svg .bar1{fill:var(--s1)}
svg .bar2{fill:var(--s2)}
svg .axis{stroke:var(--hair2);stroke-width:1}
svg .gpu{fill:var(--box-b);stroke:var(--warn);stroke-width:1.2}
svg .span{fill:var(--s1);opacity:.22}
/* widgets */
.widget{background:var(--panel);border:1px solid var(--hair2);border-radius:10px;padding:12px;margin:12px 0}
.widget h3{margin-top:0}
.widget .row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:6px 0}
button,select,input{font:inherit;font-size:14px;color:var(--text);background:var(--ground);border:1px solid var(--hair2);border-radius:6px;padding:4px 8px}
button{cursor:pointer}
button:hover{border-color:var(--s1)}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
button[aria-pressed="true"]{background:var(--s1);color:var(--panel);border-color:var(--s1)}
input[type=number]{width:5.5em}
input[type=range]{width:min(260px,100%);accent-color:var(--s1)}
.out{font-weight:700}
.pos{color:var(--ok)}.neg{color:var(--bad)}.zero{color:var(--muted)}
.stepbox{border-left:3px solid var(--s1);padding:6px 10px;margin:8px 0;min-height:7em}
.stepbox pre{margin:6px 0 0}
.para{border:1px solid var(--hair);border-radius:8px;padding:10px;background:var(--ground)}
mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 2px}
.wtable td,.wtable th{padding:4px 6px}
.wtable select{max-width:13em}
.nojs{font-size:14px;color:var(--muted)}
.js .nojs{display:none}
@media (max-width:560px){body{font-size:15.5px}table{font-size:13px}svg text{font-size:14px}}
svg .inbar{fill:var(--panel);font-weight:700}
/* wide figures scroll inside their frame on narrow screens; the page itself does not scroll sideways */
figure{overflow-x:auto}
@media (max-width:700px){figure>svg{min-width:760px}figure>svg text{font-size:13px}figcaption{position:sticky;left:0}}