:root { --paper:#faf9f6; --ink:#242621; --muted:#6d7168; --accent:#527750; --line:#d9dcd2; --light:#eef0ea; }
html,body { margin:0; background:var(--paper); color:var(--ink); }
.reveal { font-family:Arial,Helvetica,sans-serif; font-size:40px; color:var(--ink); }
.reveal .slides { text-align:left; }
.reveal .slides section.slide { height:100%; padding:36px 32px 40px; box-sizing:border-box; flex-direction:column; }
.reveal h1,.reveal h2,.reveal h3,.reveal p { margin:0; font-family:inherit; color:inherit; }
.reveal h1 { font-size:128px; font-weight:600; line-height:1.05; letter-spacing:-.055em; }
.reveal h2 { font-size:60px; font-weight:500; line-height:1.12; letter-spacing:-.03em; margin-bottom:44px; }
.reveal h3 { font-size:32px; font-weight:600; line-height:1.2; margin-bottom:18px; }
.reveal p { font-size:34px; line-height:1.42; }
.reveal em { font-style:italic; }
.reveal strong { font-weight:700; }
.reveal .muted { color:var(--muted); }
.reveal .small { font-size:26px; line-height:1.45; }
.reveal figure { margin:0; }
.reveal img { border:0; box-shadow:none; margin:0; max-width:100%; max-height:100%; }
.reveal .notes { display:none; }
.reveal ul,.reveal ol { margin:0; padding:0; }
.reveal li { margin:0; }
.reveal a { color:var(--accent); }

/* Opening, lecture plan, section dividers, breaks (as in lecture 1). */
.reveal .opening { justify-content:center; }
.reveal .opening-subtitle { margin-top:25px; font-size:60px; line-height:1.15; letter-spacing:-.025em; }
.reveal ol.plan { list-style:none; counter-reset:plan; display:flex; flex-direction:column; gap:22px; }
.reveal ol.plan>li { counter-increment:plan; display:grid; grid-template-columns:70px 1fr; align-items:baseline; font-size:34px; line-height:1.3; }
.reveal ol.plan>li::before { content:counter(plan); color:var(--accent); font-size:26px; }
.reveal ol.plan>li span { display:block; font-size:22px; color:var(--muted); margin-top:6px; }
.reveal .slides section.section-divider { color:white; padding-top:65px; }
.section-number { font-size:150px; line-height:1; letter-spacing:-.06em; color:#cfddc9; margin-bottom:30px; }
.reveal .section-divider h2 { font-size:104px; line-height:1.08; margin-bottom:30px; max-width:1300px; }
.reveal .section-description { font-size:36px; line-height:1.35; color:#e7eee4; max-width:1300px; }
.section-break .reveal .controls { color:white; }
.section-break .reveal .slide-number { color:#e7eee4; }
.reveal .break-slide { justify-content:center; }
.reveal .break-title { font-size:128px; font-weight:600; line-height:1.05; letter-spacing:-.055em; }
.reveal .topic-slide { justify-content:center; }
.reveal .topic-slide .topic-label { font-size:36px; color:var(--accent); margin-bottom:22px; }
.reveal .topic-slide h2 { font-size:88px; line-height:1.1; max-width:1300px; }
.reveal .break-subtitle { font-size:44px; color:var(--muted); margin-top:26px; }

/* Esc overview: one labelled row per lecture block (as in lecture 1). */
.overview-row-label { display:none; }
.reveal.overview .slides {
  left:var(--section-overview-left)!important;
  top:var(--section-overview-top)!important;
  margin:0!important;
  transform:scale(var(--section-overview-scale))!important;
  transform-origin:0 0!important;
}
.reveal.overview .slides>section.slide,
.reveal.overview .backgrounds>.slide-background {
  transform:var(--overview-position)!important;
  display:flex!important;
}
.reveal.overview .overview-row-label {
  display:block; position:absolute; left:0; width:6000px;
  color:var(--accent); font:100px/1.2 Arial,sans-serif;
  text-align:left; pointer-events:none;
}
.reveal.overview .slides>section.slide { background:var(--paper); }
.reveal.overview .slides>section.section-divider { background:var(--accent); }
.reveal.overview .slides>section.auxiliary-divider { background:var(--muted); }
.reveal.overview .slides>section.present,
.reveal.overview .slides>section:hover { outline-color:var(--accent); }
body:has(.reveal.overview) .reveal .slide-number { color:var(--muted); }
body:has(.reveal.overview) .reveal .controls { color:var(--accent); }

/* Controls (as in lecture 1). */
.reveal .controls { color:var(--accent); }
.reveal .progress { color:var(--accent); height:3px; }
.reveal .slide-number { background:transparent; color:var(--muted); font:14px Arial,sans-serif; right:118px; bottom:24px; }
.opening-slide:not(:has(.reveal.overview)) .reveal .controls,
.opening-slide:not(:has(.reveal.overview)) .reveal .progress,
.opening-slide:not(:has(.reveal.overview)) .reveal .slide-number { display:none!important; }

/* Lists. */
.reveal ul.list { list-style:none; display:flex; flex-direction:column; gap:20px; font-size:34px; line-height:1.4; max-width:1460px; }
.reveal ul.list>li { position:relative; padding-left:40px; }
.reveal ul.list>li::before { content:"–"; position:absolute; left:0; color:var(--muted); }
.reveal ol.steps { list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:20px; font-size:34px; line-height:1.4; max-width:1460px; }
.reveal ol.steps>li { counter-increment:step; position:relative; padding-left:56px; }
.reveal ol.steps>li::before { content:counter(step) "."; position:absolute; left:0; color:var(--muted); }
.reveal .list.compact,.reveal .steps.compact { font-size:30px; gap:14px; }

/* Mathematical text: Setting, Definition, Proposition, Theorem, Proof, Example, Remark. */
.reveal .math { font-size:34px; line-height:1.45; max-width:1460px; }
.reveal .math+.math,.reveal .eq+.math,.reveal .math+dl.where,.reveal dl.where+.math { margin-top:26px; }
.reveal .katex { font-size:1.04em; }
.reveal .katex-display { margin:0; }
.reveal .katex-display>.katex { text-align:left; }
.reveal .eq { font-size:36px; margin:18px 0 22px 56px; }
.reveal .eq.small-eq { font-size:31px; }
.reveal dl.where { display:grid; grid-template-columns:max-content 1fr; gap:12px 34px; margin:0; font-size:30px; line-height:1.4; align-items:baseline; max-width:1460px; }
.reveal dl.where dt { white-space:nowrap; }
.reveal dl.where dd { margin:0; }

/* Algorithms, typeset as in a textbook. */
.reveal .algorithm { border-top:2px solid var(--ink); border-bottom:1.5px solid var(--ink); padding:0 0 14px; max-width:1460px; font-size:30px; line-height:1.45; }
.reveal .math+.algorithm,.reveal dl.where+.algorithm { margin-top:14px; }
.reveal .algorithm+.math { margin-top:22px; }
.reveal .algorithm .algo-title { padding:10px 0; border-bottom:1px solid var(--ink); margin-bottom:12px; }
.reveal .algorithm .io { margin:0 0 4px; font-size:30px; }
.reveal .algorithm ol { list-style:none; counter-reset:line; margin-top:8px; }
.reveal .algorithm ol>li { counter-increment:line; position:relative; padding-left:64px; }
.reveal .algorithm ol>li::before { content:counter(line); position:absolute; left:0; width:36px; text-align:right; color:var(--muted); font-size:24px; line-height:1.85; }
.reveal .algorithm ol>li.in1 { padding-left:112px; }
.reveal .algorithm ol>li.in2 { padding-left:160px; }

/* Code. */
.reveal pre.code { margin:0; padding:22px 28px; width:auto; box-sizing:border-box; background:#f1f2ec; box-shadow:none; font:22px/1.5 Menlo,Monaco,Consolas,monospace; color:var(--ink); text-align:left; }
.reveal pre.code code { padding:0; max-height:none; overflow:visible; background:none; white-space:pre; font:inherit; }
.reveal .code .kw { font-weight:700; }
.reveal .code .cm { color:var(--muted); }
.reveal code.inline,.reveal .mono { font-family:Menlo,Monaco,Consolas,monospace; font-size:.88em; }

/* Layout. */
.cols { display:grid; grid-template-columns:1fr 1fr; gap:72px; min-height:0; }
.cols.wide-left { grid-template-columns:1.5fr 1fr; }
.cols.wide-right { grid-template-columns:1fr 1.5fr; }
.cols.three { grid-template-columns:repeat(3,1fr); }
.cols.ruled>*+* { border-left:1px solid var(--line); padding-left:64px; }
.cols.center { align-items:center; }
.fill { flex:1; min-height:0; }
.push-down { margin-top:auto; }
.nowrap { white-space:nowrap; }

/* Tables. */
.reveal table.data { border-collapse:collapse; font-size:30px; }
.reveal table.data th,.reveal table.data td { padding:11px 34px 11px 0; border:0; border-bottom:1px solid var(--line); text-align:left; vertical-align:baseline; line-height:1.35; }
.reveal table.data thead th { font-weight:600; border-bottom:1.5px solid var(--ink); }
.reveal table.data .num { text-align:right; font-variant-numeric:tabular-nums; }
.reveal table.data.full { width:100%; }
.reveal table.data.small-table { font-size:24px; }

/* Matrices (for example, an attention mask). */
.reveal table.matrix { border-collapse:collapse; font-size:26px; }
.reveal table.matrix th { font-weight:400; color:var(--muted); font-size:22px; padding:0 10px; text-align:center; }
.reveal table.matrix th.row { text-align:right; }
.reveal table.matrix td { width:88px; height:52px; text-align:center; vertical-align:middle; border:1px solid var(--line); font-variant-numeric:tabular-nums; padding:0; }
.reveal table.matrix td.masked { background:#eceee8; color:var(--muted); }

/* Tokens. */
.tokens { display:flex; flex-wrap:wrap; gap:12px 8px; align-items:flex-start; }
.tokens>span { display:flex; flex-direction:column; align-items:center; gap:8px; }
.tokens b { display:block; font:400 30px/1 Menlo,Monaco,Consolas,monospace; padding:11px 9px; border:1px solid #b9bfb2; background:#fff; white-space:pre; }
.tokens i { font:normal 18px Arial,sans-serif; color:var(--muted); font-variant-numeric:tabular-nums; }
.tokens.small { gap:8px 6px; }
.tokens.small b { font-size:24px; padding:8px 7px; }
.tokens b.units { border-color:var(--accent); border-width:2px; }

/* Question slides. */
.reveal .q-label { font-size:26px; color:var(--muted); margin-bottom:18px; }
.reveal section.question h2 { font-size:50px; line-height:1.18; margin-bottom:30px; max-width:1480px; }
.reveal .answer { margin-top:38px; padding-top:26px; border-top:1px solid var(--line); max-width:1460px; }
.reveal .answer p { font-size:31px; line-height:1.45; }
.reveal .answer p+p,.reveal .answer .eq+p { margin-top:12px; }

/* Diagrams and charts of real data. */
.diagram { display:block; width:100%; height:auto; overflow:visible; }
.diagram text { font-family:Arial,Helvetica,sans-serif; fill:var(--ink); }
.diagram .t-muted { fill:var(--muted); }
.diagram .box { fill:#fff; stroke:var(--ink); stroke-width:1.5; }
.diagram .wire { stroke:var(--muted); stroke-width:2; fill:none; }
.diagram .grid-line { stroke:var(--line); stroke-width:1; }
.diagram .axis { stroke:var(--muted); stroke-width:1.5; }
.diagram .mark { fill:var(--accent); }
.diagram .mark-line { stroke:var(--accent); stroke-width:3; fill:none; }
.reveal .caption { font-size:24px; line-height:1.4; color:var(--muted); margin-top:14px; }

/* Demonstration slides: a visible, clickable link and a short list of what to show. */
.reveal a.demo-link { display:inline-block; font:30px/1.35 Menlo,Monaco,Consolas,monospace; color:var(--accent); text-decoration:none; border-bottom:1.5px solid var(--accent); margin:0 0 10px; word-break:break-all; }
.reveal a.demo-link:hover,.reveal a.demo-link:focus-visible { color:var(--ink); border-bottom-color:var(--ink); }
.reveal .demo-links { display:flex; flex-direction:column; gap:6px; margin-bottom:34px; }
.reveal .demo-links .link-note { font-size:24px; color:var(--muted); margin:-4px 0 10px; }

/* Board slide: a question and empty space for the blackboard. */
.reveal section.board h2 { font-size:72px; max-width:1400px; }

/* Diagrams drawn in SVG: colours for boxes and marks. */
.diagram .box-accent { fill:#e3ebe0; stroke:var(--accent); stroke-width:2; }
.diagram .box-soft { fill:var(--light); stroke:none; }
.diagram .wire-accent { stroke:var(--accent); stroke-width:2.5; fill:none; }
.diagram .t-accent { fill:var(--accent); }
.diagram .t-mono { font-family:Menlo,Monaco,Consolas,monospace; }
.diagram .bad { fill:#b5b8b0; }
.diagram .bad-line { stroke:#b5b8b0; stroke-width:3; fill:none; }
/* "A Transformer": diagram on the left, one explanation per step on the right; the current step highlights its part. */
.reveal .transformer-layout { display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:start; }
.reveal .tsteps { align-items:start; justify-items:stretch; grid-template-rows:auto; }
.reveal .tsteps>.tstep { margin:0; }
.reveal .tstep h3 { font-size:34px; margin:6px 0 14px; color:var(--accent); }
.reveal .tstep .math, .reveal .tstep .math p { font-size:30px; line-height:1.4; }
.reveal .tstep table.data { font-size:26px; }
.reveal .attn-bars { display:flex; gap:10px; align-items:flex-end; height:130px; margin-top:16px; }
.reveal .attn-bars span { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; }
.reveal .attn-bars i { display:block; width:40px; background:var(--accent); }
.reveal .attn-bars b { font:18px Menlo,Monaco,Consolas,monospace; font-weight:400; margin-top:6px; }
#transformer[data-step="1"] .p-input, #transformer[data-step="1"] .p-input text { fill:var(--accent); font-weight:700; }
#transformer[data-step="2"] .p-emb rect,
#transformer[data-step="3"] .p-frame rect,
#transformer[data-step="4"] .p-norm rect,
#transformer[data-step="5"] .p-attn rect,
#transformer[data-step="6"] .p-plus circle,
#transformer[data-step="7"] .p-mlp rect,
#transformer[data-step="8"] .p-unemb rect,
#transformer[data-step="9"] .p-soft rect { fill:#d5e4d0; stroke:var(--accent); stroke-width:4; }
#transformer[data-step="6"] .p-plus path { stroke:var(--accent); stroke-width:4; }