/* ==========================================================================
   Presentation mode. A 1280x720 stage scaled to fit whatever space there is,
   so one set of pixel sizes works from a phone to a projector.
   ========================================================================== */

.pres{
  --stage-w:1280px; --stage-h:720px;
  --ink:#1f2933; --muted:#61717f; --line:#d3dde7;
  --dark:#123a5e; --accent:#de8a2a; --accent2:#17788a;
  --pale:#eaf1f7; --pale2:#fbf0de;
  background:#20262e;color:var(--ink);
  margin:0;overflow:hidden;height:100vh;
  font-family:'Segoe UI',Inter,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
}
.pres[data-course="qc"]{
  --dark:#241b4a; --accent:#6e4fd0; --accent2:#0f9bb0;
  --pale:#edeaf7; --pale2:#e4f4f7; --line:#dad6ea;
}


/* the author's name, small enough to stay out of the way */
.s-sig{position:absolute;left:72px;bottom:8px;z-index:2;
  font-size:7px;letter-spacing:.3px;color:var(--muted);opacity:.75;
  pointer-events:none}
.s-cover .s-sig,.s-section .s-sig,.pslide>.s-sig{}
.s-cover~.s-sig,.s-section~.s-sig{color:#9fb0c2}

/* --------------------------------------------------- practical slide --- */
/* The widget library reads the site's own variable names; map them onto the
   presentation palette so one widget looks right in both places. */
.pslide{
  --brand:var(--dark); --brand-2:#1f5c86; --accent-2:var(--accent2);
  --tint:var(--pale); --tint-2:var(--pale2); --surface:#fff;
}
.pres[data-course="qc"] .pslide{--brand-2:#3d2f7a}

.s-task{flex:0 0 auto;margin:0 0 .7em;padding:.6em 1em .65em;
  background:var(--pale2);border-left:4px solid var(--accent);
  border-radius:7px;font-size:1.06em;line-height:1.45;color:#2b3742}
.s-task:before{content:'Try it';display:block;font-size:.7em;letter-spacing:1.8px;
  text-transform:uppercase;font-weight:800;color:var(--accent);
  margin-bottom:.3em}
.s-prac{flex:1 1 auto;min-height:0;display:flex;gap:1.1em;align-items:stretch}
.s-prac .vizwrap{flex:1 1 auto;min-width:0;min-height:0;display:flex;
  flex-direction:column;justify-content:center;overflow:hidden}
.s-prac .side{flex:0 0 34%;display:flex;flex-direction:column;
  justify-content:center;gap:.7em}
/* the drawing gives way first, so the controls under it are never cut off */
.s-prac .viz{background:#fff;border:1.5px solid var(--line);border-radius:11px;
  overflow:hidden;max-height:100%;display:flex;flex-direction:column}
.s-prac .viz .vbody{flex:1 1 auto;min-height:0;display:flex;
  flex-direction:column;gap:.35em}
.s-prac .viz svg{flex:0 1 auto;min-height:0;max-height:100%}
.s-prac .viz .vh{padding:.5em .85em;border-bottom:1px solid var(--line);
  background:var(--pale)}
.s-prac .viz .vh .vt{font-weight:700;color:var(--dark);font-size:1em}
.s-prac .viz .vh .vs{color:var(--muted);font-size:.9em}
.s-prac .viz .vbody{padding:.7em .85em}
.s-prac .viz svg{display:block;width:100%;height:auto;overflow:visible}
.s-prac .viz button,.s-prac .viz select,.s-prac .viz input{font:inherit}
.s-prac .figcap{font-size:.9em;color:var(--muted);font-style:italic;
  margin-top:.4em}
.s-hint{font-size:1em;line-height:1.45;color:#3d4a56}
.s-hint b{color:var(--dark)}
.s-reveal{align-self:flex-start;font:inherit;font-size:.98em;font-weight:700;
  color:#fff;background:var(--accent2);border:0;border-radius:7px;
  padding:.5em 1.1em;cursor:pointer}
.s-reveal:hover{filter:brightness(1.08)}
.s-answer{background:var(--pale);border-left:4px solid var(--accent2);
  border-radius:7px;padding:.65em .95em;font-size:1em;line-height:1.45;
  color:#2b3742}
.s-answer b{color:var(--dark)}

/* ------------------------------------------------------------ chrome --- */
.pbar{position:fixed;inset:0 0 auto 0;height:52px;z-index:30;display:flex;
  align-items:center;gap:12px;padding:0 14px;color:#cbd5e1;font-size:14px;
  flex-wrap:nowrap;white-space:nowrap;
  background:rgba(18,22,28,.92);border-bottom:1px solid rgba(255,255,255,.08)}
.pbar>*{flex:0 0 auto}
.pbar a,.pbar button,.pbar select{font:inherit;color:#e6edf5;background:transparent;
  border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:6px 12px;
  cursor:pointer;text-decoration:none;transition:.15s}
.pbar a:hover,.pbar button:hover{background:rgba(255,255,255,.12);
  text-decoration:none}
.pbar select{background:#1b222b;padding:6px 10px;flex:0 1 auto;min-width:0;
  max-width:min(44vw,430px);text-overflow:ellipsis}
/* the same Reader / Slides switch the reading pages carry */
.pbar .viewsw{display:inline-flex;align-items:stretch;border-radius:8px;
  overflow:hidden;border:1px solid rgba(255,255,255,.22);flex:0 0 auto}
.pbar .viewsw a,.pbar .viewsw span{padding:6px 13px;font-weight:600;
  color:#c6d2df;text-decoration:none;line-height:1.2;white-space:nowrap}
.pbar .viewsw a:hover{background:rgba(255,255,255,.14);color:#fff}
.pbar .viewsw [aria-current]{background:var(--accent);color:#15202b;
  cursor:default}
.pbar .viewsw a+span,.pbar .viewsw span+a{
  border-left:1px solid rgba(255,255,255,.22)}
.pbar button.on{background:var(--accent);color:#15202b;
  border-color:var(--accent);font-weight:700}
.pbar .sp{margin-left:auto}
.pbar .count{font-variant-numeric:tabular-nums;color:#9fb0c2;min-width:78px;
  text-align:right}
.pbar .ttl{font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;min-width:0}
.pprog{position:fixed;left:0;top:52px;height:3px;background:var(--accent);
  width:0;z-index:31;transition:width .18s ease}

/* ------------------------------------------------------------- stage --- */
/* no padding: the slide is placed by script, which keeps its own margin */
.pstage{position:fixed;inset:52px 0 0 0;display:block;overflow:hidden;
  transition:bottom .18s ease}
.pslide{width:var(--stage-w);height:var(--stage-h);background:#fff;
  position:relative;overflow:hidden;border-radius:8px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);transform-origin:0 0}

/* nav zones */
.pnav{position:fixed;top:52px;bottom:0;width:14%;z-index:20;border:0;
  background:transparent;cursor:pointer;opacity:0;transition:opacity .2s}
.pnav:hover{opacity:1}
.pnav.prev{left:0;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent)}
.pnav.next{right:0;background:linear-gradient(270deg,rgba(0,0,0,.35),transparent)}
.pnav span{position:absolute;top:50%;transform:translateY(-50%);color:#fff;
  font-size:34px;line-height:1}
.pnav.prev span{left:18px}
.pnav.next span{right:18px}

/* ------------------------------------------------------ slide layout --- */
.s-pad{position:absolute;left:72px;right:72px;top:40px}
.s-title{font-size:31px;font-weight:700;color:var(--dark);line-height:1.16;
  letter-spacing:-.2px}
.s-sub{font-size:16px;color:var(--muted);margin-top:7px;font-style:italic}
.s-rule{height:3.5px;width:104px;background:var(--accent);margin-top:14px}
.s-body{position:absolute;left:72px;right:72px;bottom:58px;
  display:flex;flex-direction:column;justify-content:center;min-height:0}
.s-foot{position:absolute;left:72px;right:72px;bottom:24px;font-size:12px;
  color:var(--muted);display:flex;justify-content:space-between;
  border-top:1px solid var(--line);padding-top:9px}

.s-fit{width:100%;height:100%;min-height:0;display:flex;
  flex-direction:column;justify-content:center}
/* text blocks must never shrink below their content: a flex item that does
   paints over the block after it, and scrollHeight then under-reports */
.s-fit>*{flex:0 0 auto;min-height:0}
.s-fit>.s-figwrap,.s-fit>.s-figrow,.s-fit>.s-callout,
.s-fit>.s-cols,.s-fit>.s-apps,.s-fit>.s-mid{flex:1 1 auto}
.s-body ul{list-style:none;margin:0;padding:0}
.s-body li{position:relative;padding-left:1.32em;font-size:1.25em;
  line-height:1.42;margin-bottom:.6em}
.s-body li:before{content:'';position:absolute;left:.1em;top:.55em;width:.45em;
  height:.45em;background:var(--accent);border-radius:2px}
.s-body li.l1{padding-left:2.9em;font-size:1.09em;color:#3d4a56;
  margin-bottom:.45em}
.s-body li.l1:before{left:1.65em;top:.62em;width:.62em;height:.14em;
  background:var(--muted);border-radius:0}
.s-body li.bd{font-weight:600;color:var(--dark)}

.s-cols{display:flex;gap:1.6em;flex:1 1 auto;min-height:0}
.s-col{flex:1;border:1.5px solid var(--line);border-radius:9px;overflow:hidden}
.s-colh{padding:.6em 1em;font-size:1.19em;font-weight:700;color:#fff}
.s-colb{padding:1em 1.1em}
.s-colb li{font-size:1.09em;margin-bottom:.55em}

table.s-tbl{width:100%;border-collapse:collapse;font-size:1.125em}
table.s-tbl th{background:var(--dark);color:#fff;font-weight:600;text-align:left;
  padding:.62em .78em;border-right:1px solid rgba(255,255,255,.22)}
table.s-tbl td{padding:.55em .78em;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line)}
table.s-tbl tr.hl td{background:var(--pale2);font-weight:600;color:var(--dark)}
table.s-tbl tr:nth-child(even):not(.hl) td{background:#fafbfd}
.s-note{margin-top:.9em;font-size:.94em;color:var(--muted);font-style:italic}

.s-figwrap{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px}
.s-figwrap img{max-width:100%;max-height:100%;object-fit:contain}
.s-figrow{display:flex;gap:28px;flex:1 1 auto;min-height:0;align-items:center}
.s-figrow .im{flex:0 0 62%;height:100%;min-height:0;display:flex;
  align-items:center;justify-content:center}
.s-figrow .im img{max-width:100%;max-height:100%;object-fit:contain}
.s-figrow .tx{flex:1}
.s-figrow .tx li{font-size:1.06em;margin-bottom:.65em}
.s-cap{font-size:.94em;color:var(--muted);text-align:center;font-style:italic}

.s-math{background:var(--pale);border-left:5px solid var(--accent);
  border-radius:7px;padding:1.6em 2em;display:flex;flex-direction:column;
  gap:.6em;justify-content:center}
.s-math div{font-size:1.56em;color:var(--dark);text-align:center;
  font-weight:600}
.s-mid{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  justify-content:center}

.s-stmt{background:var(--pale);border-radius:8px;padding:.95em 1.25em;
  font-size:1.09em;color:#2b3742;font-style:italic;margin-bottom:1em;
  line-height:1.4}
.s-step{margin-bottom:.8em}
.s-step .h{font-size:1.125em;font-weight:700;color:var(--accent2);
  margin-bottom:.22em}
.s-step .l{font-size:1.125em;color:var(--ink);line-height:1.45;padding-left:1em}
.s-ans{margin-top:.4em;background:var(--pale2);border:2px solid var(--accent);
  border-radius:8px;padding:.6em 1.2em;font-size:1.31em;font-weight:700;
  color:var(--dark);text-align:center}
.s-cmt{margin-top:.7em;font-size:.94em;color:var(--muted);font-style:italic}

.s-analogy{background:var(--pale2);border-left:6px solid var(--accent);
  border-radius:8px;padding:1.5em 1.9em;font-size:1.5em;line-height:1.42;
  color:var(--dark);font-weight:600;margin-bottom:1.4em}
.s-callout{flex:1 1 auto;min-height:0;display:flex;align-items:center;
  justify-content:center}
.s-callout div{background:var(--dark);color:#fff;border-radius:12px;
  padding:46px 56px;font-size:1.875em;line-height:1.4;text-align:center;
  font-weight:600;max-width:88%}
.s-apps{display:flex;flex-direction:column;gap:.8em;flex:1 1 auto;
  min-height:0;justify-content:center}
.s-app{border:1.5px solid var(--line);border-left:6px solid var(--accent2);
  border-radius:8px;padding:.8em 1.25em}
.s-app .h{font-size:1.19em;font-weight:700;color:var(--dark);
  margin-bottom:.18em}
.s-app .d{font-size:1.03em;color:#3d4a56;line-height:1.4}

/* section and cover slides */
.s-section,.s-cover{position:absolute;inset:0;background:var(--dark);
  color:#fff}
.s-section .bar,.s-cover .bar{position:absolute;left:0;top:0;bottom:0;
  width:16px;background:var(--accent)}
.s-section .in,.s-cover .in{position:absolute;left:88px;right:88px;top:50%;
  transform:translateY(-50%)}
.s-section .kick,.s-cover .kick{font-size:19px;letter-spacing:3.5px;
  text-transform:uppercase;color:var(--accent);font-weight:600;
  margin-bottom:20px}
.s-section h1{font-size:52px;line-height:1.14;font-weight:700;
  letter-spacing:-.6px;margin:0}
.s-section p{margin-top:22px;font-size:22px;color:#c9d2e0}
.s-cover h1{font-size:60px;line-height:1.1;font-weight:800;margin:0;
  letter-spacing:-1px}
.s-cover .sub{margin-top:24px;font-size:24px;color:#c9d2e0}
.s-cover .meta{position:absolute;left:88px;bottom:64px;font-size:17px;
  color:#9aa8bd;line-height:1.7}

/* ---------------------------------------------------------- overview --- */
.povr{position:fixed;inset:52px 0 0 0;background:#161b22;overflow:auto;
  padding:22px;z-index:25;display:none;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;
  align-content:start;align-items:start}
.povr.on{display:grid}
.pth{background:#fff;border-radius:6px;overflow:hidden;cursor:pointer;
  position:relative;border:2px solid transparent;height:0;padding-bottom:56.25%}
.pth .inner{position:absolute;left:0;top:0}
.pth:hover,.pth.cur{border-color:var(--accent)}
.pth .inner{width:1280px;height:720px;transform-origin:top left;
  pointer-events:none}
.pth .n{position:absolute;right:5px;bottom:4px;background:rgba(0,0,0,.6);
  color:#fff;font-size:11px;padding:1px 6px;border-radius:4px;z-index:2}

.phelp{position:fixed;right:14px;bottom:14px;z-index:30;color:#8b98a6;
  font-size:12.5px;background:rgba(18,22,28,.9);padding:7px 12px;
  border-radius:8px;border:1px solid rgba(255,255,255,.1)}
@media (max-width:700px){.phelp{display:none}.pbar .ttl{display:none}}

/* shown only where a slide cannot help being small */
.pmob{display:none}
@media (max-width:620px) and (orientation:portrait){
  .pmob{display:block;position:fixed;left:14px;right:14px;bottom:14px;z-index:29;
    margin:0;text-align:center;font-size:13px;line-height:1.5;color:#8b98a6}
  .pmob a{color:var(--accent);text-decoration:underline}
}

/* On a narrow screen the controls need two rows rather than running off the
   right-hand edge. The stage is told the bar's real height from script, so
   the slide still sits under it whatever the bar does. */
@media (pointer:coarse){
  .pbar a,.pbar button,.pbar select{min-height:38px}
  .s-prac .viz button,.s-prac .viz select{min-height:0}
}
@media (max-width:760px){
  .pbar{flex-wrap:wrap;height:auto;min-height:52px;padding:7px 10px;
    row-gap:7px;column-gap:8px}
  .pbar a,.pbar button,.pbar select{padding:5px 10px;font-size:13.5px}
  .pbar .viewsw a,.pbar .viewsw span{padding:5px 11px}
  .pbar select{flex:1 1 120px;max-width:100%}
  .pbar .count{min-width:0;margin-left:auto}
  #btnFull{display:none}
  .pnav{width:52px}
  .pnav span{font-size:26px}
}

/* --------------------------------------------------- contents slide --- */
.s-contents{position:absolute;inset:0;padding:44px 72px 40px;
  display:flex;flex-direction:column}
.s-contents h2{font-size:30px;color:var(--dark);font-weight:750;margin:0}
.s-contents .rule{height:3.5px;width:104px;background:var(--accent);
  margin:12px 0 22px}
.s-contents ol{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:9px 30px;align-content:start}
.s-contents li{display:flex;gap:13px;align-items:baseline;
  border-bottom:1px solid var(--line);padding:8px 2px}
.s-contents .n{font-weight:800;color:var(--accent);min-width:32px;
  font-size:15px}
.s-contents .t{font-size:17px;color:var(--ink);font-weight:600;line-height:1.3}
.s-contents .c{font-size:13.5px;color:var(--muted);margin-left:auto;
  white-space:nowrap;padding-left:12px}

/* -------------------------------------- the explanation, on the slide --- */
.pslide sup{font-size:.66em;line-height:0;vertical-align:.5em}
.s-detail{flex:0 0 auto;margin:0 0 1.15em;padding:.85em 1.15em .9em;background:var(--pale);
  border-left:4px solid var(--accent2);border-radius:7px;font-size:1.02em;
  line-height:1.52;color:#2b3742}
.s-detail:before{content:'The concept, explained';display:block;font-size:.72em;
  letter-spacing:1.8px;text-transform:uppercase;font-weight:800;
  color:var(--accent2);margin-bottom:.35em}
.s-figrow .tx .s-detail,.s-figwrap .s-detail{margin-bottom:.9em}
/* the opening definition, where the whole explanation would not fit */
.s-lead{flex:0 0 auto;margin:0 0 1.05em;padding:0 0 0 .95em;
  border-left:3px solid var(--accent2);font-size:1.06em;
  line-height:1.46;color:#3d4a56;font-style:italic}
body.no-detail .s-lead{display:none}

/* an explanation that did not fit on its host slide, given its own */
.s-detail-full{margin:0;font-size:1.34em;line-height:1.6;padding:1.1em 1.4em 1.2em;
  background:var(--pale);border-left:5px solid var(--accent2)}
.s-detail-full:before{font-size:.6em;margin-bottom:.5em}
body.no-detail .s-detail{display:none}