/* Look and feel follow Zhihan's job-talk deck: off-white background, dark-teal bold titles, a coral
   section label and bar, gray-blue panels, Helvetica Neue. Colour is used for emphasis only. */
:root {
  --bg: #f9fafb;
  --ink: #24404b;
  --title: #184856;
  --muted: #62707d;
  --faint: #8a96a3;
  --rule: #d5dbe0;
  --line: #e1e6ea;
  --code-bg: #f1f4f6;
  --blue: #184856;
  --orange: #e07856;
  --panel: #e9edf0;
  --ok: #5b8a72;
  --err: #c05746;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: Menlo, "SF Mono", Consolas, "DejaVu Sans Mono", monospace;
  /* the slide itself keeps these colours in every theme, like a projected slide */
  --s-bg: #f9fafb; --s-ink: #24404b; --s-title: #184856; --s-coral: #e07856; --s-muted: #62707d;
  --s-faint: #8a96a3; --s-panel: #edf0f2; --s-rule: #d5dbe0; --s-red: #c05746; --s-green: #5b8a72;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11191d; --ink: #dde6ea; --title: #a9cbd6; --muted: #9fb0bb; --faint: #7d8d98; --rule: #34434b; --line: #2a373e;
    --code-bg: #182227; --blue: #8fbccb; --orange: #eb9275; --panel: #0c1316; --ok: #8cc0a4; --err: #ee8f80;
  }
}
:root[data-theme="dark"] {
  --bg: #11191d; --ink: #dde6ea; --title: #a9cbd6; --muted: #9fb0bb; --faint: #7d8d98; --rule: #34434b; --line: #2a373e;
  --code-bg: #182227; --blue: #8fbccb; --orange: #eb9275; --panel: #0c1316; --ok: #8cc0a4; --err: #ee8f80;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.45;
       display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
header, main, footer { min-width: 0; }
code, pre, textarea { font-family: var(--mono); }
button { font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------- top bar */
header { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
header .title { font-size: 15px; color: var(--muted); margin-right: auto; }
header .title b { color: var(--title); font-weight: 700; }
header label { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
header input { font: 14px var(--mono); width: 150px; padding: 4px 8px; border: 1px solid var(--rule); border-radius: 4px;
               background: var(--bg); color: var(--ink); }
.status { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.status.ready::before { background: var(--ok); }
.status.busy::before { background: var(--orange); }
.status.error::before { background: var(--err); }
.tool-btn { background: none; border: 1px solid var(--rule); border-radius: 4px; padding: 3px 10px; font-size: 13px; color: var(--ink); }
.tool-btn:hover { border-color: var(--ink); }

/* ---------------------------------------------------------------- two panes */
main { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: 0; }
.pane { overflow: auto; min-height: 0; }
.slide-pane { padding: 20px; border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; }
.cells-pane { padding: 20px 20px 60px; }
body.present { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
body.present main { grid-template-columns: 1fr; }
body.present .cells-pane { display: none; }
body.present .slide-pane { border-right: none; display: flex; align-items: center; justify-content: center; }
body.present .slide { width: min(100%, calc((100vh - 190px) * 16 / 9)); }

/* ---------------------------------------------------------------- the slide */
/* Side by side, the slide fills the left column and its text is larger; in present mode it is a 16:9 slide. */
.slide { --u: clamp(7px, 1.2cqw, 13px); container-type: inline-size; flex: 1 0 auto; width: 100%; background: var(--s-bg); color: var(--s-ink);
         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; box-shadow: 0 1px 3px rgba(24, 72, 86, .12);
         padding: 40px 48px 56px; position: relative; display: flex; flex-direction: column; }
/* Presenter and both audience layouts use the same slide geometry, scaled to their pane. */
body:is(.present,.instructor-unlocked,.audience) .slide-pane { container-type: size; align-items: center; justify-content: center; }
body:is(.present,.instructor-unlocked,.audience) .slide { --u: calc(1cqw * var(--fit, 1)); flex: none; aspect-ratio: 16 / 9;
  width: min(100cqw, calc(100cqh * 16 / 9));
  padding: min(5cqw, calc(5cqh * 16 / 9)) min(6cqw, calc(6cqh * 16 / 9)) min(4cqw, calc(4cqh * 16 / 9)); }
.slide .head { border-left: calc(var(--u) * 1.3) solid var(--s-coral); padding-left: calc(var(--u) * 1.8); margin: 0 0 calc(var(--u) * 2.6); }
.slide .kicker { font-size: calc(var(--u) * 2); font-weight: 700; color: var(--s-coral); margin-bottom: calc(var(--u) * .5); }
.slide h1 { font-weight: 700; font-size: calc(var(--u) * 3.5); line-height: 1.2; margin: 0; color: var(--s-title); letter-spacing: -.005em; }
.slide .hl { color: var(--s-coral); }
.slide p, .slide li { font-size: calc(var(--u) * 2.75); margin: 0 0 calc(var(--u) * 1.4); }
.slide ul, .slide ol { margin: 0 0 calc(var(--u) * 1.4); padding-left: calc(var(--u) * 3); }
.slide li { margin-bottom: calc(var(--u) * 1); }
.slide .muted { color: var(--s-muted); }
.slide b { font-weight: 700; color: var(--s-title); }
.slide code { font-size: .88em; color: var(--s-title); background: var(--s-panel); padding: 0 .3em; border-radius: 3px; }
.slide .pno { position: absolute; right: calc(var(--u) * 2.2); bottom: calc(var(--u) * 2.2); min-width: calc(var(--u) * 3); height: calc(var(--u) * 3);
               background: var(--s-coral); color: #fff; font-size: calc(var(--u) * 1.4); font-weight: 700;
               display: flex; align-items: center; justify-content: center; padding: 0 .3em; }
.slide .box { background: var(--s-panel); border-left: calc(var(--u) * .6) solid var(--s-title); padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2); font-size: calc(var(--u) * 2.4); margin: calc(var(--u) * .6) 0 calc(var(--u) * 1.8); }
.slide pre.box { font-family: var(--mono); color: var(--s-title); font-size: calc(var(--u) * 2); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.slide .big { font-size: calc(var(--u) * 3.2); }
.slide svg.diagram { flex-shrink: 0; width: 100%; height: auto; margin: 0 0 calc(var(--u) * 2); font-family: var(--font); }
.slide .accent { color: var(--s-title); }
.slide .warm { color: var(--s-coral); }
.slide .spacer { flex: 1; }
.slide .gap-above { margin-top: calc(var(--u) * 3); }

/* flow diagrams: boxes and arrows */
.flow { display: flex; align-items: center; gap: calc(var(--u) * 1.4); margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 2.4); flex-wrap: nowrap; }
.flow .node { border: 1.5px solid var(--s-title); color: var(--s-title); font-weight: 700; padding: calc(var(--u) * 1.2) calc(var(--u) * 1.8); font-size: calc(var(--u) * 2.6); text-align: center; background: #fff; }
.flow .node.py { background: var(--s-panel); }
.flow .node.py { border-color: var(--s-title); color: var(--s-title); }
.flow .node.model { border-color: var(--s-coral); color: var(--s-coral); }
.flow .arrow { font-size: calc(var(--u) * 2.6); color: var(--s-muted); }
.flow .arrow small { display: block; font-size: calc(var(--u) * 1.35); text-align: center; }
@container (max-width: 360px) {
  body:not(.present):not(.instructor-unlocked):not(.audience) .slide .flow { gap: calc(var(--u) * .6); }
  body:not(.present):not(.instructor-unlocked):not(.audience) .slide .flow .node { min-width: 0; padding: calc(var(--u) * .7); font-size: calc(var(--u) * 2.2); }
}
.loop { display: grid; grid-template-columns: auto auto auto; gap: calc(var(--u) * 1.2) calc(var(--u) * 2); align-items: center; justify-items: center;
        margin: calc(var(--u) * 1) 0 calc(var(--u) * 2); font-size: calc(var(--u) * 2.1); }
.loop .node { border: 1.5px solid var(--s-title); color: var(--s-title); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.8); text-align: center; min-width: calc(var(--u) * 16); }
.loop .node.py { border-color: var(--s-title); color: var(--s-title); }
.loop .node.model { border-color: var(--s-coral); color: var(--s-coral); }
.loop .lbl { color: var(--s-muted); font-size: calc(var(--u) * 1.6); text-align: center; }

.slide .people { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: calc(var(--u) * 2.4); margin-top: calc(var(--u) * 1.5); }
.slide .person img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; margin-bottom: calc(var(--u) * 1.4); }
.slide .person img[src$="/edith-ngai.jpg"],
.slide .person img[src$="/chenshu-wu.jpg"] { object-position: center top; }
.slide .person a { color: inherit; text-decoration: none; }
.slide .person a:hover { text-decoration: underline; }
.slide .person a img { transition: opacity .15s; }
.slide .person a:hover img { opacity: .85; }
.slide .person .role { font-size: calc(var(--u) * 1.8); color: var(--s-title); font-weight: 600; }
.slide .person .role.first { color: var(--s-coral); }
.slide .person .name { font-size: calc(var(--u) * 2.3); font-weight: 700; color: var(--s-title); line-height: 1.2; margin: calc(var(--u) * .4) 0; }
.slide .person .where { font-size: calc(var(--u) * 1.9); color: var(--s-muted); line-height: 1.3; white-space: pre-line; }
.slide .person .when { font-size: calc(var(--u) * 1.9); color: var(--s-title); margin-top: calc(var(--u) * .6); }
/* Share portrait-card rows so wrapped names keep affiliations aligned. */
.slide .people:is(:has(.when), .panelists) { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.slide .people:is(:has(.when), .panelists) .person { min-width: 0; overflow-wrap: anywhere; }
@supports (grid-template-rows: subgrid) {
  .slide .people:is(:has(.when), .panelists) { row-gap: 0; }
  .slide .people:is(:has(.when), .panelists) .person { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
  .slide .people.panelists .person { grid-row: span 3; }
}
@container (max-width: 360px) {
  .slide .people:is(:has(.when), .panelists) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slide .people:is(:has(.when), .panelists) .person { padding-bottom: calc(var(--u) * 2.4); }
}

body:is(.present,.instructor-unlocked,.audience) .slide .people:is(:has(.when), .panelists) { grid-template-columns: repeat(var(--n,4), minmax(0,1fr)); }
body:is(.present,.instructor-unlocked,.audience) .slide .people:is(:has(.when), .panelists) .person { padding-bottom: 0; }

.slide .session-host { display: flex; align-items: center; gap: calc(var(--u) * 1.8); margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 1.8); }
.slide .session-host > a { flex: 0 0 auto; }
.slide .session-host img { display: block; width: calc(var(--u) * 7.5); height: calc(var(--u) * 7.5); object-fit: cover; border-radius: 50%; }
.slide .session-host .host-role { font-size: calc(var(--u) * 1.55); line-height: 1.2; font-weight: 600; color: var(--s-coral); }
.slide .session-host .host-name { display: block; font-size: calc(var(--u) * 2); line-height: 1.2; font-weight: 700; color: var(--s-title); text-decoration: none; margin: calc(var(--u) * .25) 0; }
.slide .session-host .host-name:hover { text-decoration: underline; }
.slide .session-host .host-affiliation { font-size: calc(var(--u) * 1.65); line-height: 1.25; color: var(--s-muted); }
.slide .panelists + .session-host { margin-top: calc(var(--u) * 2.7); margin-bottom: 0; }

.slide table.sched { border-collapse: collapse; font-size: calc(var(--u) * 2.2); width: 100%; }
.slide table.sched td { border-bottom: 1px solid var(--s-rule); padding: calc(var(--u) * .7) calc(var(--u) * 1.2); }
.slide table.sched tr.ours td { font-weight: 700; color: var(--s-title); }
.slide table.sched tr.ours td:first-child { color: var(--s-coral); }
.slide table.sched td:first-child { color: var(--s-muted); white-space: nowrap; width: 1%; }
.slide .split { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--u) * 3); align-items: start; }
.slide video { width: min(40cqw, calc((100vh - 220px) * 46 / 101)); height: auto; aspect-ratio: 46 / 101; display: block; background: #000; box-shadow: 0 1px 4px rgba(24, 72, 86, .25); }
body:is(.present,.instructor-unlocked,.audience) .slide video { width: calc(40cqw * 46 / 101); }
.slide svg.diagram.compact { width: 82%; }
body:is(.present,.instructor-unlocked,.audience) .slide svg.diagram.compact { width: 66%; margin-bottom: calc(var(--u) * 1); }
.slide img.chart { flex-shrink: 0; width: 100%; height: auto; margin: 0 0 calc(var(--u) * 1.6); }
body:is(.present,.instructor-unlocked,.audience) .slide img.chart { width: 68%; align-self: center; }
body.present header label { display: none; }
body:is(.present,.instructor-unlocked,.audience) .slide svg.diagram:not(.compact) { width: 78%; }
body:is(.present,.instructor-unlocked,.audience) .slide .quote { margin-bottom: calc(var(--u) * 1.2); }
body:is(.present,.instructor-unlocked,.audience) .slide .quote { font-size: calc(var(--u) * 2); }
.slide.welcome .head { border-left: none; padding: 0 0 calc(var(--u) * 2.2); border-bottom: 2px solid var(--s-coral); }
.slide.welcome .kicker { color: var(--s-muted); font-size: calc(var(--u) * 1.8); }
.slide.welcome h1 { font-size: calc(var(--u) * 5); line-height: 1.25; }
.slide.welcome .sub { font-size: calc(var(--u) * 2.8); color: var(--s-title); font-style: italic; font-weight: 700; margin-bottom: calc(var(--u) * .8); }
.slide.welcome .bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: calc(var(--u) * 4); align-items: end; }
.slide.welcome .label { font-size: calc(var(--u) * 1.9); font-weight: 700; color: var(--s-coral); margin-bottom: calc(var(--u) * .6); }
/* Equal columns keep portrait centers evenly spaced, regardless of name length. */
.slide.welcome .people { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--u) * 1.4); margin-top: 0; }
.slide.welcome .person { min-width: 0; text-align: center; }
.slide.welcome .person img { width: min(100%, calc(var(--u) * 9)); margin: 0 auto calc(var(--u) * .8); }
.slide.welcome .person .name { font-size: calc(var(--u) * 1.65); white-space: normal; overflow-wrap: anywhere; min-height: 2.4em; }
body:is(.present,.instructor-unlocked,.audience) .slide.welcome .people { column-gap: calc(var(--u) * 2.2); }
/* Share the portrait/name/affiliation rows so wrapped names do not shift the schools. */
@supports (grid-template-rows: subgrid) {
  .slide.welcome .people { row-gap: 0; }
  .slide.welcome .person { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
}
.slide.welcome .person .where { font-size: calc(var(--u) * 1.5); }
.slide.welcome .open { display: block; width: calc(var(--u) * 27); }
/* next to the cells there is height to spare: organizers on one row, the QR code below them */
body:not(.present):not(.instructor-unlocked):not(.audience) .slide.welcome .bottom { grid-template-columns: 1fr; gap: calc(var(--u) * 3.5); }
body:not(.present):not(.instructor-unlocked):not(.audience) .slide.welcome .open { width: auto; display: grid; grid-template-columns: auto 1fr; column-gap: calc(var(--u) * 2.4); align-items: center; }
body:not(.present):not(.instructor-unlocked):not(.audience) .slide.welcome .open img { grid-row: span 2; margin: 0; }
body:not(.present):not(.instructor-unlocked):not(.audience) .slide.welcome .open .url { font-size: calc(var(--u) * 2.6); align-self: end; }
body:not(.present):not(.instructor-unlocked):not(.audience) .slide.welcome .open .muted { align-self: start; }
.slide.welcome .open img { width: calc(var(--u) * 11); display: block; margin-bottom: calc(var(--u) * .6); }
.slide.welcome .open .url { font-size: calc(var(--u) * 1.9); margin-bottom: calc(var(--u) * .4); }
.slide.welcome .open .muted { font-size: calc(var(--u) * 1.6); }
.audience-laser { position: fixed; z-index: 1000; width: 13px; height: 13px; border-radius: 50%;
  background: #ef4035; border: 2px solid #fff; box-shadow: 0 0 0 2px #b51a19, 0 0 10px #ef403580;
  transform: translate(-50%, -50%); pointer-events: none; }
.audience-laser[hidden] { display: none; }
.slide figure.clip { margin: 0; }
.slide figure.clip figcaption { text-align: right; font-size: calc(var(--u) * 1.4); color: var(--s-faint); margin-top: calc(var(--u) * .5); }
.slide .url { font-size: calc(var(--u) * 3.4); font-weight: 700; color: var(--s-coral); }
.slide .open { display: flex; gap: calc(var(--u) * 3); align-items: center; margin-top: calc(var(--u) * 1); }
.slide .open img { width: calc(var(--u) * 14); height: auto; }
.slide .open > div { min-width: 0; }
.slide .open .url { overflow-wrap: anywhere; }

/* Illustrations occupy their own space after the text, at their original aspect ratio. */
.slide .art { display: block; flex: 1 1 0; height: 0; min-height: calc(var(--u) * 8); max-height: calc(var(--u) * 20);
  width: 30%; align-self: flex-end; object-fit: contain; object-position: right bottom; margin: calc(var(--u) * 1.2) 0 0; }
.slide .quote { font-size: calc(var(--u) * 2.2); background: var(--s-panel); border-left: calc(var(--u) * .6) solid var(--s-coral); padding-right: calc(var(--u) * 2) !important; padding: calc(var(--u) * .6) 0 calc(var(--u) * .6) calc(var(--u) * 2); margin-bottom: calc(var(--u) * 1.8); }
.slide .quote mark { background: rgba(224, 120, 86, .16); color: inherit; padding: 0 .1em; border-bottom: 2px solid var(--s-coral); }
.slide .quote .who { font-size: calc(var(--u) * 1.5); color: var(--s-faint); margin-top: calc(var(--u) * .8); }
.slide .ladder { display: flex; flex-direction: column; gap: calc(var(--u) * 1.1); margin: calc(var(--u) * .6) 0 calc(var(--u) * 2); }
.slide .rung { font-size: calc(var(--u) * 2.15); background: #fff; border: 1.5px solid var(--s-rule); padding: calc(var(--u) * 1.1) calc(var(--u) * 1.8); display: flex; align-items: baseline; gap: calc(var(--u) * 1.6); }
.slide .rung span { color: var(--s-title); font-weight: 700; min-width: calc(var(--u) * 2); }
.slide .rung.r1 { margin-left: 0; } .slide .rung.r2 { margin-left: 4%; } .slide .rung.r3 { margin-left: 8%; }
.slide .rung.r4 { margin-left: 12%; background: var(--s-panel); } .slide .rung.r5 { margin-left: 16%; background: var(--s-panel); }
.slide .rung.today { border-color: var(--s-coral); }
.slide .rung.today span { color: var(--s-coral); }
.slide .rung em { margin-left: auto; font-style: normal; font-size: calc(var(--u) * 1.5); color: #fff; background: var(--s-coral); padding: .15em .6em; white-space: nowrap; }
.slide sup { font-size: .6em; color: var(--s-faint); }
.slide ol.refs { margin-bottom: calc(var(--u) * 1.6); }
.slide ol.refs li { font-size: calc(var(--u) * 1.6); margin-bottom: calc(var(--u) * .5); }
.slide .refs-wrap .label { font-size: calc(var(--u) * 1.9); font-weight: 700; color: var(--s-coral); margin: 0 0 calc(var(--u) * .6); }
body:is(.present,.instructor-unlocked,.audience) .slide .refs-wrap { column-count: 2; column-gap: calc(var(--u) * 4); }
body:is(.present,.instructor-unlocked,.audience) .slide ol.refs li { font-size: calc(var(--u) * 1.3); break-inside: avoid; }
.slide .url.small { font-size: .9em; }

/* ---------------------------------------------------------------- cells */
.step-head { margin: 0 0 14px; }
.step-head .kicker { font-size: 13px; font-weight: 700; color: var(--orange); }
.step-head { border-left: 5px solid var(--orange); padding-left: 12px; }
.step-head h2 { font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--title); margin: 2px 0 0; }
.step-head h2 .hl { color: var(--orange); }
.cell { margin: 0 0 22px; }
.aside { color: var(--muted); border-left: 3px solid var(--rule); padding: 2px 0 2px 12px; margin: 0 0 18px; }
.cell .prompt { margin: 0 0 6px; color: var(--ink); }
.cell .prompt ul.ref { margin: 4px 0 2px; padding-left: 18px; font-size: 14px; }
.cell .prompt ul.ref li { margin: 1px 0; }
.cell .pill { display: inline-block; font-size: 11px; font-weight: 700; color: var(--title); border: 1px solid var(--rule); border-radius: 999px; padding: 0 8px; margin-right: 4px; vertical-align: 1px; }
.cell.optional .editor { border-style: dashed; }
.cell.scratch .editor { border-color: var(--orange); border-style: dashed; }
.ghost.stop { color: var(--err); border-color: var(--err); }
.add-row { display: flex; gap: 8px; align-items: center; margin: 2px 0 10px; }
.add-row .add-cell { margin: 0; }
.toolbox-toggle::after { content: " ▸"; }
.toolbox-toggle.open::after { content: " ▾"; }
.toolbox { border: 1px solid var(--line); border-radius: 6px; background: var(--code-bg); padding: 10px 12px 12px; margin: 0 0 20px; font-size: 13px; }
.toolbox[hidden] { display: none; }
.toolbox .tb-group + .tb-group { margin-top: 10px; }
.toolbox .tb-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--orange); margin: 0 0 4px; }
.toolbox .tb-note, .toolbox .tb-hint { margin: 2px 0; color: var(--muted); font-size: 12.5px; }
.toolbox .tb-hint { margin: 8px 0 2px; }
.toolbox .tb-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.toolbox .tb-fn { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.toolbox .tb-item { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; text-align: left; background: none; border: 1px solid transparent;
                    border-radius: 4px; padding: 3px 6px; color: var(--ink); font-size: 12.5px; }
.toolbox .tb-item:hover, .toolbox .tb-src:hover { border-color: var(--rule); background: var(--bg); }
.toolbox .tb-item code { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--title); font-weight: 600; font-size: 12px; }
.toolbox .tb-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.toolbox .tb-item em { flex: none; margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--orange); border: 1px solid var(--orange); border-radius: 999px; padding: 0 6px; }
.toolbox .tb-src { flex: none; background: none; border: 1px solid transparent; border-radius: 4px; color: var(--faint); font-size: 11.5px; padding: 0 6px; }
.editor textarea::placeholder { color: var(--faint); opacity: 1; font-family: var(--font); }
.cell .prompt code { background: var(--code-bg); padding: 0 .3em; border-radius: 3px; font-size: .9em; }
.editor { position: relative; border: 1px solid var(--line); background: var(--code-bg); border-radius: 4px; }
.editor:focus-within { border-color: var(--blue); }
.editor pre, .editor textarea { margin: 0; padding: 10px 12px; font-size: 13.5px; line-height: 1.5; white-space: pre; tab-size: 4;
                                overflow: hidden; border: 0; width: 100%; font-family: var(--mono); }
.editor pre { position: absolute; inset: 0; pointer-events: none; color: var(--ink); }
.editor textarea { position: relative; display: block; resize: none; background: transparent; color: transparent;
                   caret-color: var(--ink); outline: none; min-height: 2.5em; overflow-x: auto; }
.editor textarea::selection { background: rgba(33, 96, 140, .25); color: transparent; }
.tok-kw { color: var(--blue); font-weight: 600; }
.tok-str { color: #3f7a5c; }
.tok-com { color: var(--faint); font-style: italic; }
.tok-num { color: var(--orange); }
.tok-fn { color: var(--ink); font-weight: 600; }
.tok-blank { background: rgba(194, 97, 18, .22); outline: 1px dashed var(--orange); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tok-str { color: #8fd19e; } }
:root[data-theme="dark"] .tok-str { color: #8fd19e; }

.cell .bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.editor.static pre { position: static; overflow-x: auto; }
.cell.recorded .bar { flex-wrap: wrap; }
.cell.recorded .rec { font-size: 12px; font-weight: 700; color: var(--title); background: var(--code-bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.cell.recorded .rec-note { font-size: 12px; color: var(--muted); }
.run { background: var(--title); color: #fff; border: 1px solid var(--title); font-weight: 700; border-radius: 4px; padding: 4px 14px; font-size: 14px; }
.run:disabled { opacity: .45; cursor: default; }
.ghost { background: none; border: 1px solid var(--rule); color: var(--muted); border-radius: 4px; padding: 3px 10px; font-size: 13px; }
.ghost:hover { color: var(--ink); border-color: var(--ink); }
.bar .hint { font-size: 12px; color: var(--faint); margin-left: auto; }
.bar .state { flex: 1 1 180px; font-size: 13px; color: var(--muted); }
.bar .state:empty { display: none; }
.bar .state.stale { color: var(--orange); font-weight: 600; }

.output { margin-top: 8px; font-size: 14px; }
.output:empty { display: none; }
.output pre.text { background: none; border-left: 3px solid var(--rule); padding: 4px 0 4px 12px; margin: 6px 0;
                   white-space: pre-wrap; word-break: break-word; font-size: 13px; }
.output pre.error { color: var(--err); border-left: 3px solid var(--err); padding: 4px 0 4px 12px; white-space: pre-wrap; font-size: 13px; }
.output .html { margin: 6px 0; overflow-x: auto; }
.output table { border-collapse: collapse; font-size: 13px; margin: 4px 0; }
.output th, .output td { border-bottom: 1px solid var(--rule); padding: 4px 8px; text-align: left; vertical-align: top; }
.output th { font-weight: 700; color: var(--title); border-bottom: 1.5px solid var(--muted); }
.output .answer { border-left: 3px solid var(--orange); padding: 2px 0 2px 12px; margin: 6px 0; }
.output .answer p { margin: 0 0 8px; }
.output .label { color: var(--muted); margin: 6px 0 2px; }
.output .cost { color: var(--faint); font-size: 12px; margin-top: 4px; }
.output ul.calls { margin: 2px 0; padding-left: 20px; }
.output pre.json { background: var(--code-bg); border: 1px solid var(--line); padding: 8px 10px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.output details summary { cursor: pointer; color: var(--muted); margin-top: 6px; }
.output ol.trace { padding-left: 22px; margin: 4px 0; }
.output ol.trace li { margin-bottom: 4px; }
.output code { font-size: 12.5px; }
.output .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.output .pair .col { min-width: 0; }
.output .flag { color: var(--err); font-size: 13px; margin: 4px 0; }
.output .note { color: var(--title); background: var(--code-bg); border-left: 3px solid var(--title); padding: 4px 10px; margin: 6px 0; font-size: 13px; }
.output .bad { color: var(--err); }
.output .noflag { color: var(--ok); font-size: 13px; margin: 4px 0; }
@media (max-width: 1100px) { .output .pair { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- bottom navigation */
/* One row of pages that scrolls sideways; the current page stays centred. */
footer { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 16px 8px; border-top: 1px solid var(--line); }
footer .progress { position: absolute; left: 0; right: 0; top: -1px; height: 3px; background: transparent; }
footer .progress div { height: 100%; width: 0; background: var(--orange); transition: width .35s ease; }
footer .steps { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; scroll-behavior: auto;
                scrollbar-width: none; cursor: grab; padding: 2px 0; user-select: none; }
footer .steps::-webkit-scrollbar { display: none; }
footer .steps.dragging { cursor: grabbing; }
footer .steps.more-left.more-right { mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
footer .steps.more-left:not(.more-right) { mask-image: linear-gradient(90deg, transparent, #000 48px); }
footer .steps.more-right:not(.more-left) { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
footer .steps .part { flex: none; font-size: 11px; font-weight: 700; color: var(--orange); white-space: nowrap; padding: 0 2px 0 10px; }
footer .steps .part:first-child { padding-left: 0; }
footer .steps button.folded { display: none; }
footer .steps button.part.toggle { font-size: 11px; font-weight: 700; color: var(--orange); border: 1px dashed var(--orange); padding: 3px 10px; margin-left: 8px; }
footer .steps button.part.toggle::after { content: " ▸"; }
footer .steps button.part.toggle.open::after { content: " ▾"; }
footer .steps button.part.toggle:hover { background: var(--code-bg); }
footer .steps button { flex: none; white-space: nowrap; background: none; border: 1px solid transparent; border-radius: 999px;
                       padding: 4px 12px; font-size: 13px; color: var(--muted); transition: background .2s, color .2s, border-color .2s; }
footer .steps button:hover { color: var(--title); border-color: var(--rule); }
footer .steps button.done { color: var(--ink); }
footer .steps button.here { background: var(--title); border-color: var(--title); color: #fff; font-weight: 700; }
.nav { flex: none; width: 36px; height: 36px; border-radius: 50%; background: none; border: 1px solid var(--rule); color: var(--title); font-size: 16px; }
.nav:hover:not(:disabled) { border-color: var(--title); background: var(--code-bg); }
.nav:disabled { opacity: .35; cursor: default; }
footer .count { flex: none; font-size: 12px; color: var(--faint); min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- the helper: a chat panel in the corner */
/* The round button sits above the page strip; the panel opens above it. Neither shows on the projector. */
.helper-launch { position: fixed; right: 22px; bottom: 76px; z-index: 50; width: 54px; height: 54px; border-radius: 50%;
                 border: 0; background: #184856; color: #fff; display: grid; place-items: center; padding: 0;
                 box-shadow: 0 3px 10px rgba(24, 72, 86, .28), 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .15s, box-shadow .15s; }
.helper-launch svg { width: 30px; height: 30px; }
.helper-launch.open svg { width: 24px; height: 24px; }
body.instructor-minimized .helper-launch { bottom: 144px; }
.helper-launch:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(24, 72, 86, .32), 0 0 0 1px rgba(255, 255, 255, .12); }
.helper-launch:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.helper { position: fixed; right: 22px; bottom: 142px; z-index: 50; width: min(400px, calc(100vw - 32px));
          height: min(580px, calc(100vh - 220px)); min-height: 280px; display: flex; flex-direction: column;
          background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
          box-shadow: 0 12px 32px rgba(17, 25, 29, .22); }
.helper[hidden] { display: none; }
body.present .helper-launch, body.present .helper { display: none; }
.helper-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--code-bg); }
.helper-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; background: #184856; color: #fff; display: grid; place-items: center; }
.helper-avatar svg { width: 20px; height: 20px; }
.helper-name { flex: 1; min-width: 0; line-height: 1.25; }
.helper-name b { display: block; color: var(--title); font-size: 15px; }
.helper-name span { font-size: 12px; color: var(--muted); }
.helper-new { font-size: 12px; padding: 2px 8px; }
.helper-close { background: none; border: 0; color: var(--muted); font-size: 22px; line-height: 1; padding: 0 4px; }
.helper-close:hover { color: var(--ink); }
.helper-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.helper .msg { max-width: 88%; font-size: 14px; line-height: 1.45; padding: 8px 11px; border-radius: 10px; overflow-wrap: anywhere; }
.helper .from-user { align-self: flex-end; background: var(--title); color: var(--bg); border-bottom-right-radius: 3px; white-space: pre-wrap; }
.helper .from-helper { align-self: flex-start; background: var(--code-bg); border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.helper .from-helper p { margin: 0 0 6px; }
.helper .from-helper p:last-child, .helper .from-helper ul:last-child, .helper .from-helper ol:last-child { margin-bottom: 0; }
.helper .from-helper p.h { font-weight: 700; color: var(--title); }
.helper .from-helper ul, .helper .from-helper ol { margin: 2px 0 6px; padding-left: 20px; }
.helper .from-helper li { margin: 2px 0; }
.helper .from-helper code { font-size: 12.5px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; padding: 0 .25em; }
.helper .from-helper a { color: var(--blue); }
.helper .code { position: relative; margin: 6px 0; }
.helper .code pre { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 24px 10px 8px; overflow-x: auto; font-size: 12.5px; line-height: 1.45; }
.helper .code pre code { border: 0; padding: 0; background: none; }
.helper .code .copy { position: absolute; top: 4px; right: 4px; font-size: 11px; padding: 1px 7px; border: 1px solid var(--rule);
                      border-radius: 4px; background: var(--bg); color: var(--muted); }
.helper .code .copy:hover { color: var(--ink); border-color: var(--ink); }
.helper .notice { align-self: center; max-width: 100%; font-size: 13px; color: var(--muted); background: none; padding: 2px 6px; text-align: center; }
.helper .notice.error { color: var(--err); }
.helper .need-seat { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; color: var(--ink); }
.helper .need-seat button { font-size: 12px; padding: 2px 9px; }
.helper-form textarea:disabled { background: var(--code-bg); cursor: not-allowed; }
.helper .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.helper .chips button { font-size: 13px; color: var(--title); background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 11px; }
.helper .chips button:hover { border-color: var(--title); background: var(--code-bg); }
.helper .thinking { display: flex; gap: 4px; padding: 12px 14px; }
.helper .thinking span { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: helper-dot 1.2s infinite ease-in-out; }
.helper .thinking span:nth-child(2) { animation-delay: .15s; }
.helper .thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes helper-dot { 0%, 80%, 100% { opacity: .3; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .helper .thinking span { animation: none; opacity: .6; } .helper-launch { transition: none; } }
.helper-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 4px; border-top: 1px solid var(--line); }
.helper-form textarea { flex: 1; resize: none; font: 14px/1.4 var(--font); color: var(--ink); background: var(--bg); border: 1px solid var(--rule);
                        border-radius: 6px; padding: 7px 9px; max-height: 132px; }
.helper-form textarea:focus { outline: none; border-color: var(--blue); }
.helper-form .run { padding: 7px 14px; }
.helper-foot { margin: 0; padding: 2px 12px 8px; font-size: 11.5px; color: var(--faint); }
.helper-actions { display: flex; flex-wrap: wrap; gap: 6px; padding: 7px 12px; border-top: 1px solid var(--line); }
.helper-actions button { font-size: 12px; padding: 4px 8px; }
.helper-support { flex: 0 1 auto; max-height: 230px; overflow-y: auto; padding: 0 12px 10px; font-size: 13px; line-height: 1.4; }
.helper-support[hidden] { display: none; }
.helper-support p, .helper-support ul { margin: 4px 0 8px; }
.helper-support ul { padding-left: 18px; }
.helper-support label { display: block; font-size: 12px; color: var(--muted); }
.helper-support textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; margin-top: 4px; padding: 6px 8px;
  background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; font: 13px/1.4 var(--font); }
.helper-support textarea[hidden] { display: none; }
.helper-action-status { flex: none; margin: 0; padding: 0 12px 8px; color: var(--muted); font-size: 12px; }
.helper-action-status:empty { display: none; }
.helper-log { min-height: 70px; }
.helper-actions button:focus-visible, .helper-support textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.output .ask-helper { margin: 2px 0 6px 15px; font-size: 12px; padding: 2px 9px; }
.cells-pane { padding-bottom: 110px; }

/* slide-in when changing pages */
@keyframes enter-next { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes enter-prev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.slide.enter-next { animation: enter-next .28s ease-out; }
.slide.enter-prev { animation: enter-prev .28s ease-out; }
@media (prefers-reduced-motion: reduce) { .slide.enter-next, .slide.enter-prev { animation: none; } footer .progress div { transition: none; } }

@media (max-width: 900px) {
  body { display: block; }
  main { grid-template-columns: 1fr; }
  .slide-pane { border-right: none; border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .slide { padding: 24px 22px 40px; }
  .cells-pane { padding: 16px; }
  footer { position: sticky; bottom: 0; background: var(--bg); }
  header .title { width: 100%; }
  .helper-launch { right: 14px; bottom: 72px; }
  .helper { left: 8px; right: 8px; width: auto; bottom: 136px; height: calc(100dvh - 200px); }
}

/* Keep the chat controls reachable on a short phone viewport, including landscape. */
@media (max-width: 900px) and (max-height: 600px) {
  .helper { top: 8px; bottom: 8px; height: auto; min-height: 0; }
  .helper-log { min-height: 0; }
  .helper-support { max-height: 40dvh; }
  .helper-launch.open { visibility: hidden; }
}

/* One scroll owner lets the audience follow wide result tables. */
.output { overflow-x:auto; }
.output .html { overflow-x:visible; }