:root{--ink:#222;--mut:#666;--faint:#999;--rule:#e8e8e8;--ai:#b4541c;--link:#1a4c7c;
 --head:#a3461b;                /* rust, for every heading level */
 --slidefont:'Urbanist',-apple-system,'Segoe UI',Helvetica,sans-serif;--fw:300;--bw:600;
 /* same pairing as cs.princeton.edu/~arvindn: Open Sans text, Georgia headings */
 --serif:Georgia,'Times New Roman',serif;
 --sans:'Open Sans','PT Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#fff}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--sans);
 font-size:17px;line-height:1.66;text-rendering:optimizeLegibility}
a{color:var(--link);text-decoration:none;border-bottom:1px solid rgba(26,76,124,.25)}
a:hover{border-bottom-color:var(--link)}
p{margin:0 0 .85em}
#shell{display:grid;grid-template-columns:403px minmax(0,1fr)}
#toc{position:sticky;top:0;height:100vh;overflow-y:auto;background:#fff;
 padding:34px 22px 60px 32px;font-family:var(--sans);font-size:13px;line-height:1.5}
#toc .head{font-family:var(--serif);font-size:16px;line-height:1.35;font-weight:600;margin-bottom:2px}
#toc .sub{color:var(--faint);font-size:11.5px;margin-bottom:22px}
#toc ol{list-style:none;margin:0;padding:0}
#toc .s{margin:0 0 14px}
#toc .s.headless{margin-top:-6px}
#toc .s>a{display:block;font-weight:600;color:var(--ink);border:0;padding:2px 0 3px}
#toc .s>a.ai{color:var(--ai)}
#toc .e a{display:block;color:var(--mut);border:0;padding:2.5px 0 2.5px 13px;
 border-left:1px solid var(--rule)}
#toc .e a:hover{color:var(--ink);border-left-color:#bdbdbd}
#toc a.on{color:var(--ink)!important;border-left:2px solid var(--ai)!important;padding-left:12px!important}
#toc .cnt{color:var(--faint);font-weight:400;font-size:11px;margin-left:6px}
/* the text column centres in the space right of the sidebar, so wide windows don't leave it clinging left */
#main{padding:34px 48px 40vh 64px;max-width:calc(740px + 112px);margin:0 auto;width:100%;box-sizing:border-box}
h1,h2,h3,h4{font-family:var(--serif);color:var(--head)}
header.doc h1{font-size:36px;line-height:1.15;margin:2px 0 8px;font-weight:400;letter-spacing:-.005em;color:var(--ink)}
header.doc h1.ai{color:var(--ai)}
header.doc .subtitle{color:var(--mut);margin:0 0 10px;font-size:16.5px}
header.doc .subtitle.ai{color:var(--ai)}
header.doc .intro{margin:18px 0 0;font-size:17px}
header.doc .intro p:last-child{margin-bottom:0}
/* « Back to the homepage, as on his other pages (e.g. /~arvindn/teaching/) */
header.doc .back{margin:6px 0 0;text-align:center}
header.doc h1,header.doc .subtitle{text-align:center}
/* intro in a theme-blue box (trial) */
header.doc .intro:not(.empty){background:#e8f1fb;border:1px solid #c3cfdc;padding:16px 22px;border-radius:2px}
h2{font-size:21px;font-weight:400;line-height:1.3;margin:52px 0 10px;text-transform:uppercase;letter-spacing:.045em}
h2.ai{color:var(--ai)}
.blurb{font-size:17px;margin:0 0 18px}
.blurb p:last-child{margin-bottom:0}
.blurb.ai{color:var(--ai)}
.entry{margin:0;padding:14px 0 16px}
.entry h3{font-size:20px;line-height:1.32;margin:0 0 .5em;font-weight:400}
.entry h3.ai{color:var(--ai)}
.entry h3.ai::after{content:'\2726';font-size:10px;vertical-align:.55em;margin-left:6px;opacity:.55}
.body>p:last-child{margin-bottom:0}
.body figure{margin:1.1em 0}
.body blockquote{margin:1em 0 1em 1.1em;padding-left:.95em;border-left:2px solid var(--rule);
 color:var(--mut)}
.body blockquote p:first-child{margin-top:0}
.body blockquote p:last-child{margin-bottom:0}
/* quiet provenance tag - readable, not shouting */
.icml{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:.11em;
 vertical-align:.32em;margin-left:7px;padding:1px 4px;border:1px solid var(--rule);
 border-radius:2px;color:var(--faint);white-space:nowrap}
h1.part{font-size:30px;font-weight:400;letter-spacing:0;line-height:1.2;color:var(--ink);
 margin:72px 0 0;padding-bottom:8px;border-bottom:1px solid var(--rule)}
h1.part:first-of-type{margin-top:48px}
/* the Part's rule already separates it; the first section needs no gap of its own */
h1.part + h2{margin-top:22px}
/* under Part 1: a skip link to Part 2, for readers who came for the AI material */
.partjump{font-family:var(--sans);font-size:14.5px;margin:12px 0 0;text-align:center}
.partjump + h2{margin-top:22px}
#toc .p{margin:20px 0 7px}
#toc .p>a{display:block;font-family:var(--serif);font-size:15px;font-weight:400;
 color:var(--ink);border:0;padding:2px 0 4px;border-bottom:1px solid var(--rule)}
.body h4.sub{font-size:17.5px;font-weight:700;color:var(--ink);margin:1.4em 0 .35em}
.body h4.sub:first-child{margin-top:0}
.body ul,.body ol{margin:.7em 0;padding-left:1.5em}
.body li{margin:.3em 0}
.body li::marker,.intro li::marker,.blurb li::marker{color:var(--faint)}
.body figure img{width:100%;height:auto;display:block;margin-left:auto;margin-right:auto;border:1px solid var(--rule);border-radius:2px}
.body figure.frame img{box-sizing:border-box;border:1px solid #d9d6cf;border-radius:1px;box-shadow:1px 1px 2px rgba(0,0,0,.07),4px 5px 12px rgba(0,0,0,.11)}
.body figure.frame.dark img{border-color:rgba(0,0,0,.18);box-shadow:1px 1px 2px rgba(0,0,0,.10),5px 6px 14px rgba(0,0,0,.20)}
/* ICML slides get the same photo frame as images, and the custom diagrams' light blue */
.body figure.slidefig,.body figure.tablefig{box-sizing:border-box;border:1px solid #d9d6cf;border-radius:1px;box-shadow:1px 1px 2px rgba(0,0,0,.07),4px 5px 12px rgba(0,0,0,.11)}
.body figure.slidefig .slide{border:none;border-radius:0;background:#e8f1fb}
/* links inside ICML slides: one underline (the slide's own, not the page's border too), and the
   slides' default link blue matched to the page's link colour; grey caption links stay grey */
.slide a{border-bottom:0}
.slide a span[style*="#4371C4" i]{color:var(--link) !important}
.meta{font-family:var(--sans);font-size:11.5px;color:var(--faint);margin-top:.8em;
 display:flex;gap:9px;flex-wrap:wrap;align-items:baseline}
.meta a{color:var(--faint);border:0}
.meta a:hover{color:var(--link)}
.meta .sep{opacity:.45;padding:0 1px}
a.tco{border:0;font-size:.78em;opacity:.4;padding:0 1px}
.slide{font-size:15px}
.xref{color:var(--mut);font-style:italic}
footer{margin-top:64px;padding-top:18px;border-top:1px solid var(--rule);
 font-family:var(--sans);font-size:12px;color:var(--faint);line-height:1.55}
#tocbtn{display:none}
@media(max-width:900px){#shell{grid-template-columns:1fr}
 #main{padding:56px 22px 20vh;max-width:none}
 /* 94 entries of contents would bury the writing on a phone; tuck them behind a button */
 #toc{display:none;position:fixed;inset:0;z-index:20;height:auto;overflow-y:auto;
  padding:64px 24px 40px;background:#fff}
 body.toc-open #toc{display:block}
 body.toc-open{overflow:hidden}
 #tocbtn{display:block;position:fixed;top:12px;right:12px;z-index:30;
  font-family:var(--sans);font-size:13px;padding:7px 13px;border:1px solid var(--rule);
  border-radius:3px;background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}}
@media print{#toc{display:none}#shell{grid-template-columns:1fr}}
.gtable{background:#e8f1fb;padding:18px 18px 16px;font-family:Arial, Helvetica, sans-serif;color:#14181f;overflow-x:auto}.gtable .gtable-title{font-size:21px;font-weight:700;margin:0 0 12px;line-height:1.25}.gtable table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;background:#ffffff;border:1.7px solid #47505a;border-radius:10px;overflow:hidden;font-size:15px;line-height:1.38;box-shadow:0 2px 8px rgba(0,0,0,0.08)}.gtable th,.gtable td{padding:9px 12px;vertical-align:middle;text-align:left}.gtable thead th{background:#f3f7fc;font-weight:700}.gtable tbody th{font-weight:700}.gtable tbody tr>*{border-top:1px solid #c3cfdc}.gtable tr>*+*{border-left:1px solid #c3cfdc}.body .gtable td img{width:100%;height:auto;border:0;border-radius:0;box-shadow:none;padding:0;display:block;margin:0 auto}