/* ===== Fonts (TeX Gyre Termes and Heros, self-hosted; GUST Font License in fonts/) ===== */
@font-face{font-family:"Termes Web";src:url("fonts/texgyretermes-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Termes Web";src:url("fonts/texgyretermes-italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Termes Web";src:url("fonts/texgyretermes-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Termes Web";src:url("fonts/texgyretermes-bolditalic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Heros Web";src:url("fonts/texgyreheros-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Heros Web";src:url("fonts/texgyreheros-bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}

/* ===== Tokens =====
   Layout: a sticky side panel holding a freshly sampled coagulation process, beside a left-aligned text column.
   Times for reading, Helvetica for headings and interface; raspberry accent on a cool grey page. */
:root{
  --paper:#EDF2F2; --panel:#FDFDFD; --ink:#27181A; --muted:#776365; --rule:#DACDCE;
  --accent:#AD4256; --soft:#FDD1D6; --line:#C0ABAD; --tie:#B9B0B1; --edge:#9C8A8C;
  --c0:#C25D5D; --c1:#A57708; --c2:#619037; --c3:#059391; --c4:#4083CB; --c5:#9B67B7;
  --good:#059391; --bad:#C25D5D; --mid:#D6CFD0; --fitlo:#E6DFE0; --fithi:#AD4256;
  --serif:"Termes Web","TeX Gyre Termes","Times New Roman",Times,serif;
  --sans:"Heros Web","TeX Gyre Heros","Helvetica Neue",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0F1818; --panel:#261C1D; --ink:#EEE5E6; --muted:#B1A0A1; --rule:#3F3133;
    --accent:#EB8A97; --soft:#4E2D31; --line:#655354; --tie:#554A4B; --edge:#7A6A6C;
    --c0:#ED8B89; --c1:#D2A249; --c2:#8EBB6A; --c3:#27C2BF; --c4:#71AFF4; --c5:#C594E1;
    --good:#27C2BF; --bad:#ED8B89; --mid:#4A4243; --fitlo:#362D2E; --fithi:#EB8A97;
    color-scheme:dark;
  }
}
/* ===== Base ===== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.23rem;line-height:1.55}
a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.18em}
a:hover{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.prose{max-width:65ch}
.prose p{margin:0 0 1em}
h1,h2,h3{font-family:var(--sans);font-weight:700;color:var(--ink);text-wrap:balance;margin:0}
h1{font-size:clamp(2.1rem,6vw,2.44em);line-height:1.08;letter-spacing:-.02em;margin:1.2rem 0 .3em}
h2{font-size:1.5625em;line-height:1.2;letter-spacing:-.01em;margin:0 0 .7em}
h3{font-size:.9em;margin:1.8rem 0 .5rem}
.lede{font-size:1.08em;line-height:1.5;max-width:60ch;margin:0 0 1.8rem}
.m{font-style:italic;white-space:nowrap}
sup,sub{line-height:0}
section{padding:3rem 0 1rem;border-top:1px solid var(--rule)}
section.first{border-top:0;padding-top:0}

/* ===== Split layout ===== */
.split{display:grid;grid-template-columns:minmax(0,min(38%,34rem)) minmax(0,1fr);min-height:100vh}
.side{position:sticky;top:0;height:100vh;height:100dvh;padding:1.6rem;background:var(--panel);display:flex;flex-direction:column;gap:.6rem}
#motif{display:block;flex:1;min-height:0;width:100%}
.mcap{font-family:var(--sans);font-size:.8rem;line-height:1.45;color:var(--muted);margin:0;max-width:60ch;min-height:2.9em}
.mcap sup{font-size:.75em}
.mcap button{font:inherit;color:var(--ink);background:none;border:0;border-radius:0;padding:0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.18em}
.mcap button:hover{background:none;color:var(--accent)}
.wrap{min-width:0;max-width:1040px;padding:0 clamp(1.1rem,4vw,2.5rem) 0 clamp(1.1rem,4vw,3rem)}
/* Lecture notes and exercise sheets: no side panel, centred column */
.split.plain{display:block}
.split.plain .wrap{max-width:52rem;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}
@media (max-width:960px){
  .split{display:block}
  .side{position:static;height:auto;padding:1rem clamp(1.1rem,4vw,2.5rem)}
  #motif{flex:none;height:120px}
  body.home #motif{height:186px}
  .wrap{padding:0 clamp(1.1rem,4vw,2.5rem)}
}

/* ===== Header / footer ===== */
.top{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;justify-content:space-between;padding:1.6rem 0 .6rem}
.top .who{font-family:var(--sans);font-weight:700;font-size:.92rem;color:var(--ink);text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-family:var(--sans);font-size:.95rem}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--ink);text-decoration-thickness:2px;text-underline-offset:.3em}
footer{border-top:1px solid var(--rule);margin-top:3rem;padding:1.4rem 0 3rem;font-family:var(--sans);font-size:.8rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;justify-content:space-between}

/* ===== Citations ===== */
.cite{font-family:var(--sans);font-size:.8em;text-decoration:none;white-space:nowrap}
.cite:hover{text-decoration:underline}

/* ===== Demos ===== */
.demo{margin:.4rem 0 2.4rem;background:transparent;border:0;border-top:3px solid var(--accent);border-radius:0;padding:clamp(.9rem,2vw,1.2rem) 0 0}
.demo h3{margin:0 0 .3rem}
.controls{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;font-family:var(--sans);font-size:.88rem;margin-bottom:1.1rem}
.slider{display:flex;align-items:center;gap:.75rem;flex:1 1 260px;max-width:440px}
.slider label{white-space:nowrap;color:var(--muted)}
.slider output{font-variant-numeric:tabular-nums;min-width:3.2ch;font-weight:700;color:var(--ink)}
input[type=range]{flex:1;accent-color:var(--accent);min-width:120px}
button{font-family:var(--sans);font-size:.88rem;font-weight:400;color:var(--accent);background:transparent;border:1px solid var(--accent);border-radius:2px;padding:.4rem .9rem;cursor:pointer}
button:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
canvas{display:block;width:100%}
.caption{font-family:var(--sans);font-size:.84rem;line-height:1.5;color:var(--muted);max-width:78ch;margin:.9rem 0 0}
.status{font-family:var(--sans);font-size:.92rem;font-variant-numeric:tabular-nums;margin:.9rem 0 0;min-height:1.5em}
.criterion{border-left:3px solid var(--accent);padding:.15rem 0 .15rem 1rem;margin:1.2rem 0 0}
.criterion .f{font-size:1.2rem;margin-bottom:.3rem}
.criterion .verdict{font-family:var(--sans);font-size:.92rem}
.small-lab{font-family:var(--sans);font-size:.82rem;color:var(--muted);margin:.2rem 0 .35rem}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem}

#ribbon{height:118px}
.bars{display:grid;grid-template-columns:auto 1fr auto;gap:.32rem .8rem;align-items:center;font-family:var(--sans);font-size:.85rem;font-variant-numeric:tabular-nums;margin-top:1.1rem}
.bars .lab{color:var(--muted)} .bars .lab b{font-weight:700;color:var(--ink)}
.bars .track{height:10px;background:color-mix(in srgb,var(--rule) 55%,transparent);border-radius:2px;overflow:hidden}
.bars .fill{display:block;height:100%;border-radius:2px}
.bars .num{text-align:right;min-width:7ch}
.treeCanvas{aspect-ratio:1/1;max-height:520px;margin:0 auto}
#bpvePlot{height:320px} #learnCurve{height:300px} #slChart{height:300px} #selfPlot{height:290px}
#gelChart{height:260px} #gelField{aspect-ratio:2/1;max-height:380px;margin:0 auto}
#fitChart{height:260px}
#cmjTree{height:330px} #cmjPlot{height:330px}
.dots{aspect-ratio:1/1;max-width:300px}
.learn-sub{font-family:var(--sans);font-size:.84rem;color:var(--muted);margin:0 0 .7rem;min-height:3.1em}
.tally{font-family:var(--sans);font-size:.88rem;font-variant-numeric:tabular-nums;margin:.7rem 0 0;display:grid;gap:.15rem}
.tally span::before{content:"";display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.45em;vertical-align:-.04em;background:var(--sw)}
.legend{display:flex;align-items:center;gap:.6rem;font-family:var(--sans);font-size:.82rem;color:var(--muted);margin-top:1rem;flex-wrap:wrap}
.legend .grad{flex:0 1 200px;height:8px;border-radius:4px}

/* ===== Home ===== */
.intro{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:2.5rem;align-items:start;margin-top:3rem}
.intro h1{margin-top:0}
.intro img{width:100%;border-radius:4px;display:block}
.role{font-family:var(--sans);font-size:1rem;color:var(--muted);margin:-.4rem 0 1.6rem}
.links{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-family:var(--sans);font-size:.92rem;margin:1.4rem 0 0}
.news{list-style:none;padding:0;margin:0;max-width:65ch}
.news li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--rule)}
.news .d{font-family:var(--sans);font-size:.88rem;color:var(--muted);padding-top:.15rem}

/* ===== Publications ===== */
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.5rem;font-family:var(--sans)}
.chips button{color:var(--muted);border-color:var(--rule);border-radius:2px;padding:.3rem .7rem;font-size:.84rem}
.chips button[aria-pressed="true"]{color:var(--paper);background:var(--ink);border-color:var(--ink)}
.pubs{list-style:none;margin:0 0 2.2rem;padding:0;max-width:72ch}
.pubs li{display:grid;grid-template-columns:3.4rem 1fr;gap:.3rem;padding:.75rem 0;border-bottom:1px solid var(--rule);scroll-margin-top:1rem}
.pubs li[hidden]{display:none}
.pubs .y{font-family:var(--sans);font-size:.85rem;color:var(--muted);padding-top:.2rem;font-variant-numeric:tabular-nums}
.pubs .t{font-weight:700}
.pubs .a,.pubs .v{font-size:.94em;color:var(--muted)}
.pubs .v a{font-family:var(--sans);font-size:.85rem;margin-left:.5rem}
.pubs li:target{background:color-mix(in srgb,var(--accent) 9%,transparent)}
.group-h{font-family:var(--sans);font-size:1rem;font-weight:700;margin:2rem 0 .3rem}

/* ===== Teaching ===== */
.courses{list-style:none;margin:0 0 2rem;padding:0;max-width:70ch}
.courses li{padding:.85rem 0;border-bottom:1px solid var(--rule)}
.courses .when{font-family:var(--sans);font-size:.88rem;color:var(--muted)}
.courses .name{font-weight:700}

@media (max-width:640px){
  .slider{flex-wrap:wrap;gap:.35rem .75rem}
  .slider label{flex-basis:100%}
  .two{grid-template-columns:minmax(0,1fr)}
  .intro{grid-template-columns:minmax(0,1fr)}
  .intro img{max-width:200px}
  #ribbon{height:96px}
  .news li{grid-template-columns:minmax(0,1fr);gap:.1rem}
}

/* ===== Page structure for Markdown pages (Jekyll) ===== */
.content > h1{margin:1.2rem 0 .3em}
.content > p,.content > ul,.content > ol{max-width:65ch}
.content > p{margin:0 0 1em}
.content > ul,.content > ol{padding-left:1.3rem;margin:0 0 1.2em}
.content > ul li,.content > ol li{margin:.25em 0}
.content > h2{max-width:none;border-top:1px solid var(--rule);padding-top:1.6em;margin-top:1.6em}
.content > p.lede{max-width:60ch}
.content > p.role{font-family:var(--sans);font-size:.88em;line-height:1.45;color:var(--muted);max-width:44ch;margin:0 0 1.4em}
body.home .content > ul{list-style:none;padding-left:0}
body.home .content > ul li{margin:0;padding:.55em 0;border-bottom:1px solid var(--rule)}
body.home .content > ul li:last-child{border-bottom:0}
body.home .content > ul li > strong:first-child{display:block;font-family:var(--sans);font-size:.82em}
.content > p.caption{margin:-1.4rem 0 2.6rem;max-width:78ch}
.content > p.links{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;font-family:var(--sans);font-size:.92rem}
.portrait{float:right;width:min(42%,260px);margin:.3rem 0 1rem 1.6rem}
.portrait img{display:block;width:100%;height:auto}
.portrait figcaption{font-family:var(--sans);font-size:.72rem;line-height:1.4;color:var(--muted);margin-top:.4rem}
.portrait figcaption a{color:var(--muted)}
.content::after{content:"";display:block;clear:both}
/* course pages: quieter section headings */
body.course .content > h2{border-top:0;padding-top:0;margin:2rem 0 .5rem;font-family:var(--sans);font-size:1.02rem;font-style:normal;font-weight:700;letter-spacing:0}
@media (max-width:1100px){ .portrait{width:min(42%,220px)} }
@media (max-width:560px){ .portrait{float:none;display:block;width:220px;margin:0 0 1.2rem} }

/* ===== Bandit demo ===== */
#banditChart{height:360px}
.algs{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem;font-family:var(--sans)}
.algs button{display:inline-flex;align-items:center;gap:.45rem;color:var(--ink);border-color:var(--rule);border-radius:999px;padding:.3rem .8rem;font-size:.84rem}
.algs button::before{content:"";width:.7em;height:.7em;border-radius:50%;background:var(--sw)}
.algs button[aria-pressed="false"]{color:var(--muted);opacity:.55}
.algs button[aria-pressed="false"]::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--sw)}

/* ===== Phase-of-matter figure beside the research intro ===== */
.phase-demo{float:right;width:330px;margin:1.6rem 0 1.5rem 2.5rem}
.phase-demo canvas{aspect-ratio:1/1}
.phase-demo .controls{margin:.8rem 0 0}
.phase-demo .slider{flex:1 1 100%;max-width:none}
.phase-demo .status{margin:.5rem 0 0;font-size:.86rem}
.phase-demo .caption{margin:.6rem 0 0}
.content > h2{clear:both}
@media (max-width:1200px){ .phase-demo{float:none;width:100%;max-width:420px;margin:1.5rem 0} }

/* Research page: a wider text column, closer to the width of the simulations */
body.research .content > p{max-width:76ch}
body.research .content > p.lede{max-width:68ch}
body.research .content > p.caption{max-width:84ch}

/* ===== Lecture notes (pages with maths) ===== */
.content > blockquote{max-width:65ch;margin:0 0 1.2em;padding:.2rem 0 .2rem 1.1rem;border-left:3px solid var(--rule)}
.content > blockquote p{margin:0}
.content > p.note{color:var(--muted);font-size:1rem}
.content > p.credit{font-family:var(--sans);font-size:.8rem;margin-top:3rem}
.content .katex-display{max-width:46rem;margin:.4em 0 1.2em;overflow-x:auto;overflow-y:hidden;padding:.15em 0}
.content li .katex,.content p .katex{font-size:1.04em}
body.notes .content > h2{font-size:1.15rem;margin:2.6rem 0 .7rem}

/* ===== Slot machines (Lecture 1) ===== */
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.6rem,2vw,1.2rem);margin-bottom:1.2rem}
.machine{border:1px solid var(--rule);border-top:4px solid var(--sw);border-radius:2px;padding:.8rem;display:flex;flex-direction:column;gap:.55rem;font-family:var(--sans);min-width:0}
.machine h3{margin:0;font-size:.92rem}
.reel{height:4rem;display:grid;place-items:center;font-family:var(--serif);font-size:2.4rem;line-height:1;background:var(--panel);border-radius:2px;font-variant-numeric:tabular-nums;color:var(--muted)}
.reel.spin{opacity:.45}
.reel.win{color:var(--good);font-weight:700}
.reel.lose{color:var(--muted)}
.machine button{width:100%}
button:disabled{opacity:.45;cursor:default}
button:disabled:hover{background:transparent}
.est{font-size:.82rem;color:var(--muted);min-height:2.5em;font-variant-numeric:tabular-nums}
.ci{position:relative;height:16px;background:color-mix(in srgb,var(--rule) 55%,transparent);border-radius:2px}
.ci .band{position:absolute;top:3px;bottom:3px;background:color-mix(in srgb,var(--sw) 40%,transparent);border-radius:2px}
.ci .dot{position:absolute;top:0;bottom:0;width:3px;background:var(--sw);border-radius:1px}
.ci .truth{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.ci-scale{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);margin-top:-.3rem}
.slot-controls{margin-bottom:0}
.slot-round{flex:1 1 240px;font-variant-numeric:tabular-nums}
.slot-report{font-family:var(--sans);font-size:.9rem}
.slot-report p{max-width:72ch;margin:.9rem 0 0}
.slot-report table{border-collapse:collapse;margin:.9rem 0 0;font-variant-numeric:tabular-nums;width:100%;max-width:560px}
.slot-report th,.slot-report td{padding:.3rem .6rem .3rem 0;border-bottom:1px solid var(--rule);text-align:right;font-weight:400}
.slot-report thead th{color:var(--muted);font-size:.8rem}
.slot-report th[scope=row],.slot-report thead th:first-child{text-align:left}
.slot-report tr.best th,.slot-report tr.best td{font-weight:700}
.slot-report tfoot th,.slot-report tfoot td{border-bottom:0;font-weight:700}
.slot-report .sw{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--sw);margin-right:.45em;vertical-align:-.04em}
.slot-report .bars{max-width:640px}
.slot-report .bars em{color:var(--muted)}
@media (max-width:520px){
  .machine{padding:.55rem}
  .reel{height:3.2rem;font-size:2rem}
  .slot-report th,.slot-report td{padding-right:.35rem;font-size:.8rem}
  .slot-report .bars{grid-template-columns:minmax(0,1.5fr) minmax(2.5rem,1fr) auto}
}

/* small label, e.g. marking lecture notes with a simulation */
.tag{display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:700;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:2px;padding:.05rem .45rem;vertical-align:.12em;margin-left:.2rem;white-space:nowrap}

/* ===== Policy-function figure and reward table (Lecture 2) ===== */
.pf-figure{margin:.6rem 0 1.6rem;max-width:46rem}
.pf-figure svg{display:block;width:100%;height:auto}
#table-demo h3{font-family:var(--sans);font-size:.95rem;margin:1.6rem 0 .3rem}
.rt-p{font-family:var(--sans);font-size:.88rem;line-height:1.5;color:var(--muted);max-width:72ch;margin:0 0 .9rem}
.rt-field{display:flex;align-items:center;gap:.6rem}
.rt-field label{color:var(--muted)}
#table-demo select{font:inherit;color:var(--ink);background:var(--panel);border:1px solid var(--rule);border-radius:2px;padding:.3rem .5rem}
.rt-mean{flex:1 1 170px;max-width:240px}
.rt-mean label{font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--ink)}
.rt-check{display:inline-flex;align-items:center;gap:.45rem}
.rt-check input{accent-color:var(--accent);width:1rem;height:1rem;margin:0}
.rt-round{margin-left:auto;color:var(--muted);font-variant-numeric:tabular-nums}
.rt-buttons{margin-bottom:.6rem}
.rt-interval{display:block;width:100%;height:auto;max-width:46rem;overflow:visible}
#table-demo .status{margin:.2rem 0 1rem;min-height:3em;max-width:72ch}
.rt-decks{display:grid;gap:.7rem;font-family:var(--sans)}
.rt-deck{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.8rem;align-items:center}
.rt-deck-lab{display:grid;font-size:.88rem}
.rt-deck-lab span{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rt-sw{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--sw);margin-right:.45em;vertical-align:-.04em}
.rt-cards{display:flex;gap:3px;overflow-x:auto;padding:3px 2px 6px}
.rt-card{flex:0 0 auto;position:relative;width:24px;height:36px;display:inline-grid;place-items:center;border:1px solid var(--rule);border-radius:3px;background:color-mix(in srgb,var(--rule) 30%,var(--paper));font-family:var(--sans);font-size:.95rem;font-variant-numeric:tabular-nums;color:var(--muted)}
.rt-card .idx{position:absolute;top:1px;left:2px;font-size:8px;color:var(--muted)}
.rt-card.down{background-image:repeating-linear-gradient(135deg,transparent 0 4px,color-mix(in srgb,var(--rule) 80%,transparent) 4px 5px)}
.rt-card.turned{background:var(--panel);border-color:var(--sw,var(--edge));color:var(--ink)}
.rt-card.turned.one{background:color-mix(in srgb,var(--sw,var(--accent)) 18%,var(--panel));font-weight:700}
.rt-card.next{border:1.5px dashed var(--sw,var(--edge))}
.rt-card .ghost{opacity:.5}
.rt-card.fresh{box-shadow:0 0 0 2px var(--sw);animation:rtflip .35s ease-out}
@keyframes rtflip{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}
@media (prefers-reduced-motion:reduce){.rt-card.fresh{animation:none}}
.rt-key{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-family:var(--sans);font-size:.8rem;color:var(--muted);margin:.7rem 0 1rem}
.rt-key .rt-card{width:18px;height:24px;font-size:.7rem;margin-right:.4rem;vertical-align:middle}
.rt-scroll{overflow:auto;max-height:15rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:.4rem 0 .8rem}
.rt-table{border-collapse:collapse;width:100%;font-family:var(--sans);font-size:.85rem;font-variant-numeric:tabular-nums}
.rt-table th,.rt-table td{padding:.3rem .8rem .3rem 0;text-align:right;border-bottom:1px solid var(--rule);font-weight:400;white-space:nowrap}
.rt-table thead th{color:var(--muted);font-size:.78rem;background:var(--paper);position:sticky;top:0}
.rt-table tbody tr:last-child th,.rt-table tbody tr:last-child td{border-bottom:0}
.rt-empty{text-align:left!important;color:var(--muted)}
@media (max-width:560px){ .rt-deck{grid-template-columns:minmax(0,1fr);gap:.3rem} .rt-round{margin-left:0;flex-basis:100%} }

/* ===== ETC and UCB charts (Lecture 2) ===== */
.l2-chart{display:block;width:100%;height:auto;max-width:46rem;overflow:visible}
.l2-wide{flex:1 1 320px;max-width:520px}
.l2-legend{display:grid;gap:.3rem;font-family:var(--sans);font-size:.85rem;margin:.5rem 0 0;max-width:46rem}
.l2-leg{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.6rem;align-items:center}
.l2-leg span{color:var(--ink)}
.l2-leg small{color:var(--muted);font-variant-numeric:tabular-nums}
#etc-demo .status,#ucb-demo .status{max-width:72ch;min-height:3em}
/* jump targets for cross-references */
.content [id]{scroll-margin-top:1.2rem}
.content p:target{background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:-.6rem 0 0 color-mix(in srgb,var(--accent) 9%,transparent),.6rem 0 0 color-mix(in srgb,var(--accent) 9%,transparent)}
/* where a "used later" exercise is used; links between notes pages */
.used-in{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-left:.15rem}
.used-in a{color:var(--muted)}
.notes-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;font-family:var(--sans);font-size:.92rem;border-top:1px solid var(--rule);padding-top:1rem;margin-top:3rem}
.l2-key{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;font-family:var(--sans);font-size:.82rem;color:var(--muted);margin:.4rem 0 0;max-width:46rem}
.l2-key>span{display:inline-block}
.l2-key svg{vertical-align:-2px;margin-right:.35rem}
#etcrun-demo .status,#ucbrun-demo .status{min-height:3em;max-width:72ch;margin:.3rem 0 .6rem}
/* self-check questions */
.quiz{display:grid;gap:1.1rem;max-width:46rem;margin:.4rem 0 2rem}
.quiz .q{border-left:3px solid var(--rule);padding:.2rem 0 .2rem 1rem}
.quiz .q-text{margin:0 0 .5rem}
.quiz .q-opts{display:flex;gap:.6rem}
.quiz .q-opts button{min-width:5.5rem}
.quiz .q-opts button.right{background:color-mix(in srgb,var(--good) 18%,transparent);border-color:var(--good);color:var(--ink)}
.quiz .q-opts button.wrong{background:color-mix(in srgb,var(--bad) 16%,transparent);border-color:var(--bad);color:var(--ink)}
.quiz .q-why p{margin:.6rem 0 0;font-size:.95rem;color:var(--ink);max-width:65ch}