:root{--ink:#1a2733;--muted:#54637a;--rule:#d6dee6;--accent:#3b82f6;--bg:#fff;
      --code-bg:#f2f4f6;--note-bg:#f5f8fa;--note-line:#b9c8d6}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
      --ink:#e6edf3;--muted:#9fb0c0;--rule:#2b3540;--bg:#0f141a;
      --code-bg:#171d24;--note-bg:#141b22;--note-line:#2b3a48}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
     font:16px/1.62 Charter,"Iowan Old Style",Georgia,serif}
.wrap{max-width:44rem;margin:0 auto;padding:3rem 1.25rem 6rem}
h1,h2,h3,.t{font-family:"Avenir Next",Avenir,"Helvetica Neue",system-ui,sans-serif}
.t{font-size:2.1rem;font-weight:700;line-height:1.12;margin:.4em 0 .3em}
.sub{font-family:"Avenir Next",Avenir,system-ui,sans-serif;font-size:1.1rem;
     color:var(--muted);margin:0 0 1.6rem}
.by{font-family:"Avenir Next",Avenir,system-ui,sans-serif;font-weight:600}
.date{color:var(--muted);font-size:.92rem;margin-bottom:2rem}
h1{font-size:1.5rem;margin:2.4em 0 .5em;padding-top:.6em;border-top:1px solid var(--rule)}
h2{font-size:1.12rem;margin:1.9em 0 .4em}
p{margin:0 0 1em}
ul{margin:0 0 1.2em 1.1em;padding:0}li{margin:0 0 .5em}
pre{background:var(--code-bg);padding:.85rem 1rem;border-radius:6px;overflow-x:auto;
    font:13px/1.5 Menlo,"SF Mono",Consolas,monospace;margin:0 0 1.2em}
.figtools{display:block;margin-top:.5rem}
.figbtn{display:inline-block;font:500 .74rem/1 "Avenir Next",Avenir,system-ui,sans-serif;
    letter-spacing:.02em;color:var(--muted);background:none;border:1px solid var(--rule);
    border-radius:5px;padding:.36rem .6rem;margin-right:.4rem;cursor:pointer;
    text-decoration:none}
.figbtn:hover{color:var(--ink);border-color:var(--muted)}
.figovl[hidden]{display:none}
.figovl{position:fixed;inset:0;z-index:50;background:rgba(8,12,17,.975);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
    display:flex;flex-direction:column;padding:0}
/* One line, never wrapping. The first version let the caption wrap to three
   lines and pushed the buttons into a stack, which on a phone left the diagram
   about a third of the screen. The caption is a convenience here; the figure
   is the point. */
.figovl-bar{display:flex;align-items:center;gap:.45rem;padding:.55rem .7rem;
    border-bottom:1px solid rgba(255,255,255,.14);flex:0 0 auto;flex-wrap:nowrap}
.figovl-cap{flex:1 1 auto;min-width:0;color:#dbe4ee;
    font:400 .78rem/1.35 "Avenir Next",Avenir,system-ui,sans-serif;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.figovl .figbtn{flex:0 0 auto;white-space:nowrap;margin-right:0}
.figovl .figbtn{color:#dbe4ee;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.04)}
.figovl .figbtn:hover{color:#fff;border-color:#fff}
.figovl-stage{flex:1 1 auto;min-height:0;overflow:auto;display:flex;
    align-items:center;justify-content:center;padding:1rem}
.figovl-stage svg{width:auto;height:auto;max-width:100%;max-height:100%;min-width:0;
    background:#fff;border-radius:6px}
html.figovl-open{overflow:hidden}
@media(max-width:34rem){
  /* flex-shrink:0 or the centring flex container shrinks the diagram back to
     the viewport width and the labels go unreadable again, which is the whole
     complaint this overlay exists to answer. Overflow on the stage lets the
     reader pan instead. */
  .figovl-stage svg{max-width:none;width:min(1180px,220vw);flex:0 0 auto}
  .figovl-cap{display:none}          /* the buttons need the room more */
  .figovl-stage{padding:.5rem}
}
p code,li code,td code,.note code,dd code{background:var(--code-bg);
    border-radius:3px;padding:.08em .32em;font-size:.88em;
    font-family:Menlo,"SF Mono",Consolas,monospace;overflow-wrap:anywhere}
pre code{background:none;padding:0;font-size:inherit}
.logo{width:92px;margin-bottom:1.4rem}
.logo svg{display:block;width:100%;height:auto}
.credit{display:inline-block;margin-left:.7rem;font-weight:400;font-size:.8rem;
    color:var(--muted)}
.orgsub{color:var(--muted)}
@media(max-width:34rem){.credit{display:block;margin:.25rem 0 0}}
.note{background:var(--note-bg);border:1px solid var(--note-line);border-radius:6px;
      padding:.8rem 1rem;margin:0 0 1.2em}
figure{margin:1.6em 0}
figure img{width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;background:#fff}
/* Diagrams are drawn about 1180 CSS px wide. Scaling one to a 360 px phone
   makes its labels unreadable, so instead the figure keeps a legible minimum
   width and pans inside its own scroller. Nothing else on the page scrolls
   sideways. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    width:100%;max-width:100%;min-width:0;margin:0 0 .3em}
.tablewrap table{margin-bottom:0}
figure{max-width:100%;min-width:0}
.figwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    width:100%;max-width:100%;min-width:0;
    border:1px solid var(--rule);border-radius:6px;background:#fff}
.figwrap svg{display:block;width:100%;min-width:660px;height:auto}
.figwrap::-webkit-scrollbar{height:8px}
.figwrap::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px}
@media(max-width:44rem){figure figcaption::after{content:" Scroll the diagram sideways to read it.";color:var(--muted)}}
figcaption{font-family:"Avenir Next",Avenir,system-ui,sans-serif;font-size:.85rem;
           color:var(--muted);margin-top:.5em}
table{border-collapse:collapse;width:100%;margin:0 0 .6em;
      font-family:"Avenir Next",Avenir,system-ui,sans-serif;font-size:.87rem}
th,td{border:1px solid var(--rule);padding:.42rem .6rem;text-align:left;vertical-align:top}
th{background:var(--note-bg);font-weight:600}
.cap{font-family:"Avenir Next",Avenir,system-ui,sans-serif;font-size:.85rem;
     color:var(--muted);margin:0 0 1.4em}
nav.toc{background:var(--note-bg);border:1px solid var(--note-line);border-radius:8px;
        padding:1rem 1.2rem;margin:0 0 2rem;font-family:"Avenir Next",Avenir,system-ui,sans-serif}
nav.toc a{display:block;color:var(--ink);text-decoration:none;font-size:.9rem;padding:.16rem 0}
nav.toc a:hover{color:var(--accent);text-decoration:underline}
nav.toc a.l2{padding-left:1.1rem;font-size:.86rem;color:var(--muted)}