/* ============================================================================
   ML8502 lecture template — same house style as index.html.
   Changed: proportions, figure size, a real mathematics layout, and a proper
   annotation kit (arrows, spotlight, marker pen, ring).
   Keys: → next · ← back · G grid · N notes · F full screen · P print
   ========================================================================= */

@font-face { font-family:"AktivGrotesk"; src:url("AktivGrotesk-Regular.woff2") format("woff2"); font-weight:400; font-display:swap }
@font-face { font-family:"AktivGrotesk"; src:url("AktivGrotesk-Medium.woff2")  format("woff2"); font-weight:500 650; font-display:swap }
@font-face { font-family:"AktivGrotesk"; src:url("AktivGrotesk-Bold.woff2")    format("woff2"); font-weight:700 900; font-display:swap }

:root{
  --ink:#071b34; --ink-2:#233c57; --ink-3:#60768d;
  --paper:#ffffff; --mbzuai-navy:#002554; --paper-2:#eaf1f8; --white:#fff;
  --green:#210eca;            /* MBZUAI keynote blue — structure and accent */
  --blue:var(--green);        /* reference deck name used by divider accents */
  --green-deep:#071b34;
  --mint:#aab5ff; --mint-soft:#e9ecff;
  --sand:#69b9d8; --coral:#b0322a; --amber:#8a6410;
  --line:rgba(7,27,52,.16); --line-light:rgba(255,255,255,.22);
  --shadow:0 22px 64px rgba(7,27,52,.15);
  --sans:"AktivGrotesk","Helvetica Neue",Arial,sans-serif;

  /* ---- type scale -------------------------------------------------------
     One ladder for the whole course. Before this the deck carried 17, 18, 19,
     20 and 21px running copy on neighbouring slides, which read as sloppy
     rather than as hierarchy. Six steps, used everywhere, nothing between. */
  --fs-h1:70px;               /* opener and closing statements */
  --fs-h2:46px;               /* slide headline */
  --fs-h2-min:38px;           /* safety floor; a title that hits it is too long */
  --fs-h3:28px;               /* block heading inside the body */
  --fs-body:23px;             /* every piece of running copy */
  --fs-sub:20px;              /* the support line under a heading or node */
  --fs-cap:18px;              /* figure captions, fine print, dense tables */
  --fs-label:16px;            /* uppercase and mono labels */
  --mono:"SFMono-Regular",Consolas,monospace;

  /* Stage. Fixed pixels, scaled to the room. Nothing below uses vw/vh, so the
     deck looks the same on a 16:9 laptop, a 16:10 hall and in the PDF. */
  --W:1600px; --H:900px;
  --pad-x:84px; --pad-t:50px;
  --footer-h:46px;
  --band-head:106px;          /* one headline line plus eyebrow, and no more */
  --gap:22px;
  --fig-h:530px;              /* figures get the whole body band */
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;background:#06172d;color:var(--ink);font-family:var(--sans);
     -webkit-font-smoothing:antialiased}

#deck{position:fixed;inset:0;overflow:hidden}
.stage{position:absolute;top:50%;left:50%;width:var(--W);height:var(--H);overflow:hidden;
       background:var(--paper);transform:translate(-50%,-50%) scale(var(--fit,1));transform-origin:center}
.slide{position:absolute;inset:0;display:none;overflow:hidden;background:var(--paper)}
.slide.is-active{display:block}

/* ---------------------------------------------------------------- canvas */
.canvas{position:relative;display:grid;grid-template-rows:var(--band-head) minmax(0,1fr) auto;
        row-gap:var(--gap);width:100%;height:100%;
        padding:var(--pad-t) var(--pad-x) calc(var(--footer-h) + 20px)}
.canvas::before{content:"";position:absolute;top:0;left:0;width:7px;height:100%;
                background:var(--spine,var(--green))}

.slide-head{display:grid;grid-template-columns:minmax(0,1fr) 208px;align-items:start;gap:34px;
            min-width:0;overflow:hidden}
.eyebrow{margin:0 0 10px;color:var(--green);font-size:var(--fs-label);font-weight:700;letter-spacing:.18em;
         line-height:1;text-transform:uppercase}
.slide-head h2{max-width:none;margin:0;font-size:var(--fs-h2);font-weight:600;letter-spacing:-.03em;
               line-height:1.06;white-space:nowrap}
.brand-logo{justify-self:end;width:208px;height:auto}
.brand-logo-inverse{filter:brightness(0) invert(1)}

/* Content is centred in the band between the head and the footer. With
   align-content:start any slide that did not fill the band left its whole
   lower half dead, which made short slides read as unfinished. */
/* A body with several blocks spreads them over the whole band. With
   align-content:center every short slide clumped its content into the middle
   and left the top and bottom thirds dead, which read as unfinished. A body
   with a single block still lands centred, because space-evenly on one item
   is centring. Layouts that manage their own height (.split, .math-slide,
   .body.admin) set their own align-content and are unaffected. */
.body{min-width:0;min-height:0;align-content:space-evenly}
h1,h2,h3,p,ul,ol,figure,table{margin:0}
h3{font-size:var(--fs-h3);font-weight:650;line-height:1.2;letter-spacing:-.012em}
p,li{font-size:var(--fs-body);line-height:1.4}
.lead{color:var(--ink-2);font-size:26px;line-height:1.32}
.muted{color:var(--ink-3)}
.mono{font-family:var(--mono)}
strong,b{font-weight:700}
a{color:#1550a8;text-decoration:underline;text-underline-offset:3px}

.takeaway{align-self:end;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.takeaway p{margin:0;color:var(--ink);font-size:25px;font-weight:650;line-height:1.25}

/* ---------------------------------------------------------------- footer */
.footer{position:absolute;right:0;bottom:0;left:0;display:grid;
        grid-template-columns:max-content max-content minmax(0,1fr) max-content;
        align-items:center;gap:24px;height:var(--footer-h);
        padding:0 var(--pad-x);background:var(--mbzuai-navy);color:#fff;
        font-size:12px;letter-spacing:.02em}
.footer b{margin-right:7px;color:rgba(255,255,255,.6);font-size:.84em;font-weight:700;
          letter-spacing:.1em;text-transform:uppercase}
.footer>span:not(.citation){white-space:nowrap}
.footer .page{grid-column:4;font-family:var(--mono);color:#fff}
/* Citations stay readable. Two per slide is the working limit; a third belongs
   under the figure, where a student photographing one slide will actually see it. */
.footer .citation{grid-column:3;display:flex;gap:20px;min-width:0;font-size:12px;line-height:1.15}
.footer .citation a{overflow:hidden;color:#cdd6ff;text-decoration:none;text-overflow:ellipsis;white-space:nowrap}
.footer .citation a:hover{color:#fff;text-decoration:underline}

/* ------------------------------------------------------------ dark slides */
.on-deep{background:var(--mbzuai-navy) url("mbzuai-nodes-navy.jpg") right center/cover no-repeat;color:#fff}
.on-deep .canvas::before{background:var(--coral)}
.on-deep h1,.on-deep h2,.on-deep h3,.on-deep strong{color:#fff}
.on-deep p,.on-deep li{color:#c9d5e5}
.on-deep .eyebrow{color:var(--mint)}
.on-deep .brand-logo{filter:brightness(0) invert(1)}

/* --------------------------------------------------------------- figures */
.fig{display:grid;justify-items:center;gap:12px;min-width:0}
.fig-box{position:relative;display:inline-block;max-width:100%;line-height:0}
.fig-box>img,.fig-box>video{display:block;width:auto;max-width:100%;height:auto;
                            max-height:var(--fig-h);object-fit:contain}
/* An svg that IS the figure should fill the box. An svg OVERLAYING an image
   must not, or the box stretches past the image and every annotation
   coordinate is scaled off target. This cost slide 9 about 20% horizontally. */
.fig-box:has(>svg):not(:has(>img)):not(:has(>video)){display:block;width:100%}
.fig-box:has(>svg):has(>img),.fig-box:has(>svg):has(>video){display:inline-block;width:auto}
.fig-box>svg{display:block;width:100%;max-width:100%;height:auto;max-height:var(--fig-h)}
.figcap{color:var(--ink-3);font-size:var(--fs-cap);font-style:italic;line-height:1.35;text-align:center}
.figcap b{color:var(--ink-2);font-style:normal}
.has-takeaway{--fig-h:448px}

/* =========================================================================
   ATTENTION KIT
   Four ways to point at something, all driven by data-reveal-step.
   The svg sits on the .fig-box, so its viewBox is the image's own pixel grid
   and every coordinate below is read straight off the source figure.
   ========================================================================= */
.anno{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.anno text{font-family:var(--sans);font-weight:700;letter-spacing:.04em;
           paint-order:stroke;stroke:rgba(255,255,255,.95);stroke-width:10px;stroke-linejoin:round}

/* 1 — arrow that draws itself */
.arrow{opacity:0;transition:opacity .18s ease}
.arrow path{fill:none;stroke:var(--coral);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;
            stroke-dasharray:1;stroke-dashoffset:1}
.arrow text{fill:var(--coral)}
.arrow.is-revealed{opacity:1}
.arrow.is-revealed path{animation:draw .48s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* 2 — ring circled round a region */
.ring{opacity:0;transition:opacity .18s ease}
.ring path{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;
           stroke-dasharray:1;stroke-dashoffset:1}
.ring.is-revealed path{animation:draw .62s cubic-bezier(.4,0,.2,1) forwards}
.ring ellipse,.ring rect{fill:none;stroke:var(--green);stroke-width:9;
                         stroke-dasharray:1;stroke-dashoffset:1}
.ring text{fill:var(--green)}
.ring.is-revealed{opacity:1}
.ring.is-revealed ellipse,.ring.is-revealed rect{animation:draw .55s cubic-bezier(.4,0,.2,1) forwards}

/* 3 — spotlight: wash out everything except the part under discussion.
       The most useful of the four in a bright room. */
.spot{opacity:0;transition:opacity .3s ease}
.spot.is-revealed{opacity:1}
/* .once shows at exactly its step and then steps aside — stacking two veils
   would wash out the whole figure. */
.once{opacity:0!important}
.once.is-now{opacity:1!important}
.spot .veil{fill:var(--paper)}
.spot .edge{fill:none;stroke:var(--green);stroke-width:5}
.spot text{fill:var(--green)}

/* 4 — marker pen across inline text */
.hl{padding:0 .12em;background-image:linear-gradient(rgba(255,207,72,.66),rgba(255,207,72,.66));
    background-repeat:no-repeat;background-size:0 88%;background-position:0 96%;
    transition:background-size .42s cubic-bezier(.4,0,.2,1)}
.hl.is-revealed{background-size:100% 88%}

/* Future lines disappear completely. Their layout box remains in place so a
   reveal never makes the slide jump. */
[data-focus-step]{opacity:0;visibility:hidden;transition:opacity .22s ease}
[data-focus-step].is-lit{opacity:1;visibility:visible;transform:none}

/* Things that genuinely should not be on screen yet (an answer). */
[data-reveal-step].veiled{visibility:hidden}
[data-reveal-step].veiled.is-revealed{visibility:visible}

/* --------------------------------------------------------------- title
   The reference keeps opening slides in the same paper, spine, and grid
   system as the rest of the deck. The lecture number becomes a quiet side
   fact instead of a full-height colored panel. */
.title-slide .canvas{grid-template-rows:1fr;padding:var(--pad-t) var(--pad-x) calc(var(--footer-h) + 20px)}
.title-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:center;height:100%}
.title-copy{display:flex;flex-direction:column;justify-content:center;padding:0}
.title-copy h1{margin:0 0 24px;font-size:var(--fs-h1);font-weight:620;letter-spacing:-.04em;line-height:1.02}
.title-copy h1 em{color:var(--green);font-style:normal}
.title-copy .dek{max-width:34ch;color:var(--ink-2);font-size:27px;line-height:1.36}
.title-logo{position:absolute;top:var(--pad-t);right:var(--pad-x);left:auto;width:208px}
.title-meta{display:grid;grid-template-columns:repeat(3,max-content);gap:52px;margin-top:44px;
            padding-top:20px;border-top:1px solid var(--line);font-size:var(--fs-cap);line-height:1.4}
.title-meta b{display:block;color:var(--green-deep)}
.title-meta span{color:var(--ink-2)}
.signal{position:relative;display:grid;align-content:center;padding:24px 0 0;border-top:6px solid var(--green);color:var(--ink)}
.signal::after{content:none}
.signal .k{color:var(--green);font-size:15px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.signal .num{margin-top:8px;font-size:116px;font-weight:620;letter-spacing:-.07em;line-height:.88}
.signal .ghost{display:none}

/* -------------------------------------------------------------- divider */
.divider,.divider.on-deep{background:var(--paper);color:var(--ink)}
.divider .canvas,.divider.on-deep .canvas{grid-template-rows:auto 1fr;align-content:center}
.divider .canvas::before,.divider.on-deep .canvas::before{background:var(--blue)}
.divider .brand-logo,.divider.on-deep .brand-logo{filter:none}
.divider .divider-copy{align-self:center;max-width:34ch}
.divider .secnum,.divider.on-deep .secnum{color:var(--blue);font-family:var(--mono);font-size:var(--fs-label);font-weight:700;letter-spacing:.14em}
.divider .rule{width:76px;height:6px;margin:20px 0 24px;background:var(--coral)}
.divider h1,.divider.on-deep h1{margin:0 0 20px;color:var(--ink);font-size:var(--fs-h1);font-weight:620;letter-spacing:-.04em;line-height:1.02}
.divider p,.divider.on-deep p{max-width:34ch;color:var(--ink-2);font-size:26px;line-height:1.3}
.divider .ghost{display:none}

/* ----------------------------------------------------------- structures */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center;height:100%}
.split.fig-left>*:first-child{order:2}
.split.fig-left>*:last-child{order:1}
.split.wide-fig{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr)}
.split.wide-copy{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}

/* Some approved slides place a synthesis, flow, or takeaway after a split.
   In that family the split must share the body band instead of claiming its
   full height and pushing the later evidence behind the footer. */
.body:not(.split):has(>.split:not(:only-child)){display:flex;flex-direction:column;gap:18px}
.body:not(.split):has(>.split:not(:only-child))>.split{flex:1 1 auto;height:auto;min-height:0}

.visual{height:100%;min-height:0;overflow:hidden;background:var(--green-deep);box-shadow:var(--shadow)}
.visual img{display:block;width:100%;height:100%;object-fit:cover}
.visual.contain img{object-fit:contain;background:#edf3f9}
.big-claim{max-width:13ch;font-size:60px;font-weight:620;letter-spacing:-.045em;line-height:1.02}
.subclaim{max-width:34ch;margin-top:20px;color:var(--ink-2);font-size:25px;line-height:1.34}
.plainly{margin-top:auto;padding:11px 18px;background:#eef2ff;border-left:5px solid var(--green);
         color:var(--ink-2);font-size:var(--fs-sub);line-height:1.32}
.plainly b{color:var(--green);font-weight:700}

.points{margin:0;padding:0;list-style:none}
.points li{position:relative;margin-bottom:14px;padding-left:26px;color:var(--ink-2);line-height:1.32}
.points li::before{content:"";position:absolute;top:.6em;left:2px;width:11px;height:2px;background:var(--green)}
.points li:last-child{margin-bottom:0}
.points.num{counter-reset:p}
.points.num li{padding-left:36px}
.points.num li::before{content:counter(p,decimal-leading-zero);counter-increment:p;top:0;
  width:auto;height:auto;background:none;color:var(--green);font-family:var(--mono);font-size:var(--fs-label);font-weight:700}

.note{padding:16px 22px;background:var(--white);border-left:5px solid var(--green);
      color:var(--ink-2);font-size:var(--fs-body);line-height:1.34;box-shadow:0 1px 0 var(--line)}
.note b{color:var(--ink)}
.note.attack{border-left-color:var(--coral)}   .note.attack  b{color:var(--coral)}
.note.open{border-left-color:var(--amber);background:#fdf9f0}  .note.open b{color:var(--amber)}

/* attack / defense / open — colour plus glyph plus word, never colour alone */
.mark{display:inline-flex;align-items:baseline;gap:7px;font-weight:700;white-space:nowrap}
.mark::before{font-size:.8em}
.mark.attack{color:var(--coral)}   .mark.attack::before{content:"\25B2"}
.mark.defense{color:#0e6a61}       .mark.defense::before{content:"\25A0"}
.mark.open{color:var(--amber)}     .mark.open::before{content:"\25CF"}

/* claim + flow (as index.html slide 04) */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;align-items:center}
.e-node{padding:22px 0 0;border-top:4px solid var(--green)}
.e-node:nth-of-type(2){border-color:var(--coral)}
.e-node .id{color:var(--green);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em}
.e-node strong{display:block;margin:10px 0 8px;font-size:var(--fs-h3);line-height:1.16}
.e-node small{color:var(--ink-3);font-size:var(--fs-sub)}
.flow .arrowhead{color:var(--green);font-size:30px}
.insight{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.insight b{display:block;margin-bottom:8px;color:var(--coral);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.09em}
.insight .cmp{display:flex;gap:12px;align-items:baseline;font-size:var(--fs-h3);font-weight:700}
.insight .cmp span{color:var(--coral)}
.insight small{display:block;margin-top:8px;color:var(--ink-3);font-size:var(--fs-label)}

/* ledger */
.ledger{width:100%;border-collapse:collapse;table-layout:fixed}
.ledger th{padding:13px 18px;background:var(--green-deep);color:#fff;font-size:var(--fs-label);font-weight:700;
           letter-spacing:.06em;text-align:left}
.ledger td{padding:14px 18px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-body);
           line-height:1.24;vertical-align:middle}
.ledger tbody tr:nth-child(even) td{background:rgba(233,240,248,.55)}
.ledger td:first-child{color:var(--ink);font-weight:650}
.ledger td.n{font-family:var(--mono);text-align:right}
.ledger tr.hi td{background:rgba(176,50,42,.07)}
.ledger + .fineprint{margin-top:12px}
.fineprint{color:var(--ink-3);font-size:var(--fs-cap);font-style:italic;line-height:1.35}

/* course map */
.map{width:100%;border-collapse:collapse;table-layout:fixed}
.map th{padding:0 12px 9px;color:#63778a;font-size:14px;font-weight:700;letter-spacing:.12em;
        text-align:left;text-transform:uppercase}
.map td{padding:9px 12px;border-bottom:1px solid var(--line);color:var(--ink-2);font-size:var(--fs-cap);line-height:1.18}
.body:has(>.split>.map) .map th{padding:0 9px 6px}
.body:has(>.split>.map) .map td{padding:5px 9px;font-size:17px;line-height:1.1}
.body:has(>.split>.map) .map th:nth-child(1){width:9%}
.body:has(>.split>.map) .map th:nth-child(2){width:16%}
.body:has(>.split>.map) .map th:nth-child(3){width:21%}
.body:has(>.split>.map) .map th:nth-child(4){width:54%}
.map td:first-child{color:var(--green);font-family:var(--mono);font-weight:700}
.map td:nth-child(2){color:var(--ink);font-weight:650}
.map tr.chapter-start td{border-top:2px solid var(--green)}
.map tr.presentation td{background:rgba(176,50,42,.055)}
.map tr.pause td{color:#8493a5}

/* =========================================================================
   MATHEMATICS
   Two layouts. `.thm` states a result and proves it. `.deriv` walks a
   derivation the room follows line by line. Both use KaTeX's own HTML
   rendering — the fonts are inlined in katex.css, so spacing is correct and
   there is no need for the MathML fallback.
   ========================================================================= */
.math-slide .body{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:46px;
                  align-items:start;height:100%}
.math-slide.single .body{grid-template-columns:minmax(0,1fr)}
.math-slide .body>.seq:only-child{grid-column:1/-1}
.math-slide .body>.split:only-child{grid-column:1/-1}
.math-slide .body>.split>div:only-child{grid-column:1/-1;justify-self:center;width:min(100%,1040px)}
.math-slide .body>.split>div:only-child>svg{display:block;width:100%;height:480px;max-height:var(--fig-h)}

.thm{padding:20px 26px;background:var(--white);border-left:6px solid var(--green);box-shadow:var(--shadow)}
.thm .kind{display:block;margin-bottom:10px;color:var(--green);font-family:var(--mono);font-size:var(--fs-label);
           font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.thm p{color:var(--ink-2);font-size:var(--fs-sub);line-height:1.36}
.thm .katex-display{margin:14px 0 4px}
.setup{margin-top:20px;color:var(--ink-2);font-size:var(--fs-body);line-height:1.36}
.setup .katex{font-size:1.02em}

/* proof / derivation steps */
.steps{display:grid;gap:16px}
.step{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.step>.n{margin-top:3px;color:var(--green);font-family:var(--mono);font-size:var(--fs-label);font-weight:700}
.step .why{display:block;margin-bottom:6px;color:var(--ink);font-size:var(--fs-sub);font-weight:700}
.step .eq{color:var(--ink);font-size:var(--fs-body)}
.step .eq .katex-display{margin:0}
.step .rem{margin-top:7px;color:var(--ink-3);font-size:var(--fs-cap);line-height:1.32}
.step.is-now>.n{color:var(--coral)}
.qed{margin-top:6px;color:var(--green);font-family:var(--mono);font-size:var(--fs-label);font-weight:700;text-align:right}

/* the symbol strip: this class is beginner-in-security, so notation is not a footnote */
.gloss{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 26px;margin-top:18px;
       padding-top:14px;border-top:1px solid var(--line);font-size:var(--fs-cap)}
.gloss span{display:block;color:var(--ink-2)}
.gloss span .katex{margin-right:9px}
.gloss .katex{color:var(--green);font-size:1.06em}

/* live-algebra cue */
.board{margin-top:16px;padding:12px 18px;background:#fdf9f0;border-left:5px solid var(--amber);
       color:var(--amber);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.03em}

/* --------------------------------------------------------------- question */
.question{background:var(--paper-2)}
.question .format{display:inline-block;margin-bottom:16px;color:var(--green);font-family:var(--mono);
                  font-size:var(--fs-label);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 56px;margin:0;padding:0;list-style:none}
.choices li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;color:var(--ink-2);
            font-size:var(--fs-body);line-height:1.3}
.choices .ltr{color:var(--green);font-family:var(--mono);font-weight:700}
.choices li.is-lit{color:var(--ink);font-weight:700}
.answer{min-height:96px;margin-top:22px;padding:18px 22px;background:var(--green-deep);
        border-left:5px solid var(--coral);color:#fff}
.answer b{display:block;margin-bottom:5px;color:var(--mint);font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase}
.answer p{color:#fff;font-size:var(--fs-body)}
.question .fig-box>img,.question .fig-box>video,.question .fig-box>svg{max-height:340px}

/* The active route always ends in a deep close, including decks whose final
   source state is a question or reading table rather than a dedicated cwrap. */
.slide.route-terminal.on-deep{background:var(--green-deep)}
.route-terminal.on-deep .format,.route-terminal.on-deep .choices .ltr{color:var(--mint)}
.route-terminal.on-deep .choices li{color:#c9d5e5}
.route-terminal.on-deep .choices li.is-lit{color:#fff}
.route-terminal.on-deep .ledger th{background:rgba(255,255,255,.12);color:#fff}
.route-terminal.on-deep .ledger td{border-color:var(--line-light);background:transparent;color:#c9d5e5}
.route-terminal.on-deep .ledger tbody tr:nth-child(even) td{background:rgba(255,255,255,.045)}
.route-terminal.on-deep .ledger td:first-child{color:#fff}
.route-terminal.on-deep .figcap,.route-terminal.on-deep .fineprint{color:#c9d5e5}

/* ------------------------------------------------------------------ code */
.codewrap{max-width:100%}
pre.code{margin:0;padding:22px 0;overflow:hidden;background:var(--green-deep);color:#eef3fb;
         border-left:6px solid var(--coral);font-family:var(--mono);font-size:var(--fs-cap);line-height:1.6;tab-size:2}
pre.code .kw{color:var(--mint)}
pre.code .st{color:#ffc9a8}
pre.code .ln{display:inline-block;width:30px;color:#5b7391;user-select:none}
pre.code .cl{display:block;padding:0 26px}
/* A highlight wraps the lines themselves, so it lands on the right rows
   whatever the font metrics do — no pixel offsets to re-tune. */
pre.code .grp{position:relative;display:block;padding:2px 26px;
              background-image:linear-gradient(rgba(255,207,72,.15),rgba(255,207,72,.15));
              background-repeat:no-repeat;background-size:0 100%;
              box-shadow:inset 4px 0 0 rgba(255,207,72,0);
              transition:background-size .4s cubic-bezier(.4,0,.2,1),box-shadow .4s}
pre.code .grp.is-revealed{background-size:100% 100%;box-shadow:inset 4px 0 0 #ffcf48}
pre.code .grp::after{content:attr(data-tag);position:absolute;top:50%;right:22px;
                     transform:translateY(-50%);opacity:0;color:#ffcf48;font-family:var(--sans);
                     font-size:var(--fs-label);font-weight:700;letter-spacing:.09em;transition:opacity .3s .12s}
pre.code .grp.is-revealed::after{opacity:1}

/* -------------------------------------------------------------- sequence */
.seq{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr))}
.seq>div{padding-right:32px}
.seq>div+div{padding-left:32px;border-left:1px solid var(--line)}
.seq .n{display:block;margin-bottom:16px;color:var(--green);font-family:var(--mono);font-size:var(--fs-label);
        font-weight:700;letter-spacing:.09em}
.seq p{margin-top:9px;color:var(--ink-2);font-size:var(--fs-sub);line-height:1.3}

/* --------------------------------------------------------------- closing */
.closing .canvas{grid-template-rows:auto 1fr;align-content:center}
.closing .cwrap{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:75px;align-items:center;align-self:center}
.closing h1{max-width:12ch;margin:0 0 20px;font-size:var(--fs-h1);font-weight:620;letter-spacing:-.04em;line-height:1.02}
.closing .contact{display:grid;border-top:1px solid var(--line-light)}
.closing .contact div{display:grid;grid-template-columns:110px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--line-light)}
.closing .contact b{display:block;margin-bottom:4px;color:var(--mint);font-family:var(--mono);
                    font-size:var(--fs-label);letter-spacing:.1em;text-transform:uppercase}
.closing .contact span{font-size:var(--fs-body)}

/* ---------------------------------------------------------------- chrome */
.controls{position:fixed;right:20px;bottom:20px;z-index:40;display:flex;gap:6px;padding:6px;
          background:rgba(7,27,52,.94);opacity:0;transition:opacity .16s}
.controls:hover,.controls:focus-within{opacity:1}
.controls button{min-width:42px;height:36px;padding:0 12px;border:0;background:transparent;color:#fff;
                 font:inherit;font-size:13px;cursor:pointer}
.controls button:hover:not(:disabled){background:rgba(255,255,255,.14)}
.controls button:disabled{color:rgba(255,255,255,.3);cursor:default}
/* The slide footer already prints the page number; a second faded counter
   floating over it read as a duplicate. Hidden here at its source so the
   cascade cannot bring it back. Keyboard navigation is unaffected. */
.controls .count{display:none}
button:focus-visible{outline:3px solid var(--sand);outline-offset:2px}
.notes{position:fixed;right:20px;bottom:68px;z-index:40;display:none;width:540px;max-height:65vh;
       overflow:auto;padding:20px 22px;background:rgba(7,27,52,.98);color:#e7edf6;font-size:15px;line-height:1.48;
       box-shadow:var(--shadow)}
.notes.is-open{display:block}
.notes b{display:block;margin-bottom:8px;color:var(--mint);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.overview{position:fixed;inset:0;z-index:50;display:none;overflow:auto;padding:32px 40px;
          background:rgba(7,27,52,.98);color:#fff}
.overview.is-open{display:block}
.overview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.overview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.overview .thumb{display:grid;gap:6px;min-height:80px;padding:13px 15px;background:rgba(255,255,255,.07);
                 border:0;color:#fff;font:inherit;text-align:left;cursor:pointer}
.overview .thumb:hover{background:rgba(255,255,255,.15)}
.overview .thumb small{color:var(--mint);font-family:var(--mono);font-size:11px}
.overview .thumb strong{font-size:14px;font-weight:600;line-height:1.25}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ----------------------------------------------------------------- print
   One 16:9 page per slide, everything in its finished state. */
@page{size:16.666667in 9.375in;margin:0}
@media print{
  html,body{height:auto;overflow:visible;background:#fff}
  body{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #deck{position:static}
  .stage{position:static;top:auto;left:auto;width:auto;height:auto;overflow:visible;
         transform:none;line-height:0;font-size:0}
  .canvas{line-height:normal;font-size:var(--fs-body)}
  .slide{position:relative;inset:auto;display:block!important;width:var(--W);height:var(--H);
         break-after:page;break-inside:avoid}
  .slide:last-of-type{break-after:auto}
  [data-focus-step],[data-reveal-step],.arrow,.ring{opacity:1!important;visibility:visible!important;transform:none!important}
  .spot{display:none!important}
  /* .ring path was missing here until 2026-08-25, while deck.css:159 animates exactly
     that selector (.ring.is-revealed path{animation:draw ...}). Every path-drawn ring
     therefore went to PDF still mid-animation: measured under print media, the two
     campus-map rings on Teaching Team and Logistics and the ring on Adversarial
     Policies in Go all computed stroke-dashoffset:0.60758px of pathLength 1, i.e. ~39%
     drawn, with animation-name still 'draw' -- so the exported fraction depended on
     when the snapshot was taken. The two room rings are the one thing on that slide a
     student needs out of the handout. Ellipse and rect rings were already reset and
     were unaffected. */
  .arrow path,.ring path,.ring ellipse,.ring rect{stroke-dashoffset:0!important;animation:none!important}
  .hl{background-size:100% 88%!important}
  .codewrap .band{transform:none!important}
  .controls,.notes,.overview{display:none!important}
}

/* ----------------------------------------------------------------- explain
   The deck is also a web page, so a term can carry its own definition and
   reveal it on hover. Dotted underline marks that something is explainable.
   Keyboard users get it on focus. .anno is pointer-events:none so an
   annotation overlay never eats the hover. */
[data-explain]{position:relative;border-bottom:1.6px dotted var(--green);cursor:help}
[data-explain]::after{content:attr(data-explain);position:absolute;left:50%;bottom:calc(100% + 12px);
  z-index:30;width:max-content;max-width:360px;padding:12px 15px;transform:translateX(-50%) translateY(5px);
  background:var(--ink);color:#fff;font-size:var(--fs-label);font-weight:400;font-style:normal;line-height:1.38;
  letter-spacing:0;text-align:left;white-space:normal;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;pointer-events:none}
[data-explain]::before{content:"";position:absolute;left:50%;bottom:calc(100% + 5px);z-index:31;
  width:0;height:0;transform:translateX(-50%) translateY(5px);
  border:7px solid transparent;border-top-color:var(--ink);
  opacity:0;visibility:hidden;transition:opacity .15s ease,transform .15s ease;pointer-events:none}
[data-explain]:hover::after,[data-explain]:focus-visible::after,
[data-explain]:hover::before,[data-explain]:focus-visible::before{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media print{[data-explain]{border-bottom:0}[data-explain]::after,[data-explain]::before{display:none}}

/* Annotation labels ride on the arrow colour and stay legible over a figure. */
.anno .lbl{font-size:46px;font-weight:700}
.step-cue{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:26px}
.step-cue>div{padding:0 26px;border-left:1px solid var(--line)}
.step-cue>div:first-child{padding-left:0;border-left:0}
.step-cue b{display:block;margin-bottom:6px;color:var(--green);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em}
.step-cue p{color:var(--ink-2);font-size:var(--fs-sub);line-height:1.28}

/* ----------------------------------------------------------------- ground
   A barely-there wash behind every slide, so the paper is not dead flat.
   Three soft colour fields at 2 to 4 percent, drifting over 96 seconds. It
   should read as depth, never as a pattern: if you notice it, it is wrong.
   Hidden in print, and the global reduced-motion rule already stops it. */
.slide::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 48% at 18% 22%, rgba(33,14,202,.035), transparent 70%),
    radial-gradient(52% 46% at 82% 78%, rgba(105,185,216,.045), transparent 72%),
    radial-gradient(44% 38% at 64% 10%, rgba(33,14,202,.022), transparent 70%);
  background-size:132% 132%;background-repeat:no-repeat;
  animation:drift 96s ease-in-out infinite alternate}
/* Drift the background, never transform the box: a transformed pseudo-element
   grows the measured frame and QA reads it as content overflowing the slide. */
@keyframes drift{from{background-position:0% 0%}to{background-position:100% 100%}}
.canvas{z-index:1}
@media print{.slide::before{display:none}}

/* ------------------------------------------------------------------- fgsm
   The FGSM row rebuilt from its three real panels rather than shown as one
   flat screenshot: operators, labels and confidences are live text, so they
   stay sharp and can be restyled. */
.fgsm{display:flex;align-items:flex-start;justify-content:center;gap:30px}
.fgsm .fp{margin:0;text-align:center}
.fgsm .fp img{display:block;width:252px;height:252px;object-fit:cover;border:1px solid var(--line)}
.fgsm figcaption{display:grid;gap:3px;margin-top:11px}
.fgsm .sym{color:var(--ink);font-size:var(--fs-cap)}
.fgsm .cls{color:var(--ink-2);font-size:var(--fs-sub);font-weight:650}
.fgsm .conf{color:var(--ink-3);font-family:var(--mono);font-size:var(--fs-label)}
.fgsm .op{align-self:center;margin-top:-46px;color:var(--ink-2);font-size:26px;white-space:nowrap}
.fgsm-read{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:26px}
.fgsm-read>div{padding:0 24px;border-left:1px solid var(--line)}
.fgsm-read>div:first-child{padding-left:0;border-left:0}
.fgsm-read b{display:block;margin-bottom:5px;color:var(--green);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em}
.fgsm-read p{color:var(--ink-2);font-size:var(--fs-sub);line-height:1.3}
.fgsm + .fgsm-read + .fineprint{margin-top:14px}

/* ------------------------------------------------------- generic step reveal
   The drawn marks (.arrow, .ring, .hl, .spot) each carry their own hidden
   state and animation. Ordinary content given data-reveal-step had none, so it
   was simply always visible and every reveal step looked identical. This is
   the default for everything else. Printing shows all steps. */
[data-reveal-step]:not(.arrow):not(.ring):not(.hl):not(.spot){
  opacity:0;transform:translateY(5px);transition:opacity .24s ease,transform .24s ease}
[data-reveal-step]:not(.arrow):not(.ring):not(.hl):not(.spot).is-revealed{
  opacity:1;transform:none}
@media print{[data-reveal-step]{opacity:1!important;transform:none!important}}

/* --------------------------------------------------------------- lecture art
   Each lecture's title slide carries one image summarising it, drawn in the
   course's recurring style. Transparent PNG so it sits on the paper rather
   than in a box. The cast marks are the same three figures at a small size,
   parked in a slide's outer margin where they comment rather than compete. */
.title-art{grid-column:1 / -1;margin:0;justify-self:center;min-height:0;max-width:900px}
.title-art img{display:block;width:100%;max-height:300px;height:auto;object-fit:contain}
/* the title grid must be allowed to shrink, or the art pushes the slide open */
.title-slide .title-grid{min-height:0;align-content:center}

/* An opener that carries art gives it a real column instead of a strip under
   the copy. Full-height on the right, the copy reading down the left, so the
   slide fills rather than floating a small picture in dead space. */
.title-slide:has(.title-art) .title-grid{grid-template-columns:minmax(0,1fr) minmax(0,.94fr);
  gap:56px;align-content:stretch;align-items:stretch}
/* the copy spreads over the full column height instead of huddling in the
   middle, which is what left the old opener two-thirds empty */
.title-slide:has(.title-art) .title-copy{justify-content:space-between;padding:6px 0}
.title-slide:has(.title-art) .title-art{grid-column:2;grid-row:1;display:flex;
  flex-direction:column;justify-content:center;gap:22px;justify-self:stretch;max-width:none}
.title-slide:has(.title-art) .title-art img{width:100%;max-height:520px}
.title-slide:has(.title-art) .title-art .figcap{max-width:44ch;margin:0 auto;text-align:center}

/* The three recurring marks, taught on the opener because they are the legend
   for every later slide. Colour is never the only carrier: each keeps its
   glyph and its word. */
.cast-key{display:grid;gap:16px;margin:28px 0;padding-top:24px;border-top:1px solid var(--line)}
.cast-key>div{display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:baseline}
.cast-key .mark{font-size:var(--fs-sub);letter-spacing:.02em}
.cast-key p{color:var(--ink-2);font-size:var(--fs-sub);line-height:1.3}
.cast-mark{position:absolute;right:calc(var(--pad-x) - 34px);bottom:calc(var(--footer-h) + 18px);
           width:150px;height:auto;opacity:.92;pointer-events:none;z-index:1}
@media print{.cast-mark{opacity:.92}}


/* =========================================================================
   ADMIN SLIDE
   One slide that answers every logistics question a student has in week 1:
   who teaches it, when and where it meets, when it does not, and what is
   assumed. Portraits on top, the three answers underneath.
   ========================================================================= */
.body.admin{display:grid;grid-template-rows:auto minmax(0,1fr);gap:22px;align-content:stretch}
.admin-cols{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1.02fr) minmax(0,.96fr);
            gap:44px;align-content:start}
.admin-cols>div+div{padding-left:44px;border-left:1px solid var(--line);margin-left:-44px}
.admin-cols h3{margin-bottom:12px;color:var(--green)}
.admin-cols .points li{margin-bottom:9px;font-size:var(--fs-sub);line-height:1.28}
.admin-cols .points li b{color:var(--ink)}
.admin-cols .note{padding:12px 18px;font-size:var(--fs-sub)}
.admin-cols .note p{font-size:var(--fs-sub);line-height:1.3}
.admin-cols .fineprint{margin-top:12px}
.ledger.tight td{padding:7px 14px;font-size:var(--fs-sub);line-height:1.18;white-space:nowrap}
.ledger.tight td:first-child{width:27%}
.ledger.tight td:nth-child(2){width:50%}
.ledger.tight td.rm{width:23%;color:var(--green);font-family:var(--mono);font-weight:700;text-align:right}


/* =========================================================================
   FILLING THE BAND
   Two structural blocks stacked in one body used to sit as two thin strips
   in the middle of an otherwise empty slide. They now share the band, and
   each block centres its own content inside its share.
   ========================================================================= */
.body:has(>.flow):has(>.seq){display:flex;flex-direction:column;gap:34px}
.body:has(>.flow):has(>.seq)>.flow{flex:1 1 0;min-height:0;align-items:center}
.body:has(>.flow):has(>.seq)>.seq{flex:1 1 0;min-height:0;margin-top:0!important;
  padding-top:26px;border-top:1px solid var(--line);align-content:center}

/* A body whose single child is a bare .seq (a three-column reference) also
   claims the band rather than floating a strip in the middle of it. */
.body>.seq:only-child{height:100%;align-content:stretch}
.body>.seq:only-child>div{display:flex;flex-direction:column;justify-content:center}

/* Question slides: the prompt sits at the top of the band, the answer at the
   bottom, so the slide reads as a full frame while the answer is still
   hidden and does not jump when it appears. */
.question .body>div:only-child{display:grid;height:100%;align-content:space-between}

.question .body>.split{align-items:stretch}
.question .body>.split>div{display:grid;align-content:space-between;gap:20px}

/* The weekly cycle, compressed to one strip so the contract — what you do, and
   what it is worth — fits on a single slide instead of three. */
.cycle{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.cycle>div{padding:0 24px;border-left:1px solid var(--line)}
.cycle>div:first-child{padding-left:0;border-left:0}
.cycle .id{color:var(--green);font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em}
.cycle strong{display:block;margin:7px 0 6px;font-size:var(--fs-body);line-height:1.15}
.cycle small{color:var(--ink-3);font-size:var(--fs-cap);line-height:1.3}
.cycle+.fineprint{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* VERTICAL STACKS (2026-09-02). Every slide of a stack family carries a small navigator above the
   footer: floating pills that name the moves and a wordless map of the family with the current node in
   crimson. Stacked slides also carry a corner flag so the student copy and the PDF say why they are there. */
.stack-nav{position:absolute;right:24px;bottom:calc(var(--footer-h) + 6px);display:flex;align-items:flex-end;gap:14px;z-index:6;pointer-events:none}
.sn-pills{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-bottom:8px}
.sn-pill{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:.04em;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 13px;box-shadow:0 6px 16px rgba(7,27,52,.14),0 1px 2px rgba(7,27,52,.10);animation:sn-float 3.2s ease-in-out infinite}
.sn-pill.up{color:#8a6410;border-color:#e6cf8f}
.sn-pill.down{color:var(--green);border-color:#c9d0f5}
.sn-pill.back{color:var(--ink-2)}
.sn-pill+.sn-pill{animation-delay:.6s}
@keyframes sn-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.sn-pill{animation:none}}
.sn-map{display:block;overflow:visible}
.sn-map .sn-line{fill:none;stroke:var(--ink-3);stroke-width:2}
.sn-map .sn-branch{fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-dasharray:4 4}
.sn-map circle{fill:#fff;stroke:var(--ink-3);stroke-width:2}
.sn-map .sn-parent{fill:var(--ink);stroke:var(--ink)}
.sn-map .sn-ex{stroke:#8a6410}
.sn-map .sn-mo{stroke:var(--green)}
.sn-map .sn-here{fill:var(--coral);stroke:var(--coral)}
/* Exit node: the map of the family the lecture has just left, drawn on the next main slide with the
   crimson dot on the trailing node so the presenter can see the main line is running again. The branch
   dots lose their amber and blue and the pill stops bobbing, so nothing on a lecture slide competes with
   the slide itself. */
.sn-map.sn-exit .sn-ex,.sn-map.sn-exit .sn-mo{stroke:var(--ink-3)}
.sn-map.sn-exit .sn-parent{fill:var(--ink-3);stroke:var(--ink-3)}
.sn-pill.quiet{animation:none;color:var(--ink-3);box-shadow:0 2px 6px rgba(7,27,52,.08)}
.slide.stacked .canvas::after{position:absolute;top:0;right:0;padding:5px 12px;color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.12em;z-index:5}
.slide.stack-more .canvas::after{content:"MORE";background:var(--green)}
.slide.stack-exercise .canvas::after{content:"EXERCISE";background:var(--amber)}
.overview .thumb-stack{opacity:.72;margin-left:12px}
/* keep the bottom strip clear of the navigator on family slides */
.slide:has(.stack-nav) .legendrow{padding-right:330px}
.slide:has(.stack-nav) .takeaway p{padding-right:330px}
@media print{.stack-nav{display:none}}

/* 26 Oct 2026 (Nils, option E): the MBZUAI faculty template look - white slides, MBZUAI navy #002554 footer, and the
   template's node-motif navy background (mbzuai-nodes-navy.jpg, from "Nils Lukas - 2026 Faculty Research.pptx") on
   dark slides. Was: --paper #f6f9fd, footer and dark slides #071b34. */