:root{
  --blue:#0070ba;--blue-soft:#e3eff8;--blue-mid:#9cc7e6;
  --ink:#1c242b;--muted:#687178;--rule:#d6dce0;--paper:#ffffff;
  --orange:#c46a00;--orange-soft:#fde9d2;--magenta:#c2187a;--magenta-soft:#f9dcec;
  --green:#2e7d3a;--green-soft:#e2f2e4;--red:#b3261e;--red-soft:#fbe3e1;
  --violet:#6a4fb3;--violet-soft:#e9e3f7;--muted-soft:#eceef0;
  --sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Cambria Math","Cambria","Times New Roman",serif;
  --mono:Consolas,"Cascadia Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#20262c;overflow:hidden;font-family:var(--sans);color:var(--ink)}
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#stage{position:relative;width:1600px;height:900px;flex:none;transform-origin:center center;background:var(--paper);overflow:hidden}

/* ------------------------------------------------------------ slide frame */
.slide{position:absolute;inset:0;padding:0 88px;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.slide.active{opacity:1;visibility:visible;transition:opacity .35s ease}
.slide>header{flex:none;height:132px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--rule);margin:0 -88px 0;padding:0 88px}
.logo{flex:none;height:96px;width:auto;display:block}
.slide h2{margin:0;font-size:44px;letter-spacing:-.01em}
.slide header p{margin:6px 0 0;color:var(--muted);font-size:21px}
.slide .body{flex:1;display:flex;flex-direction:column;padding:34px 0 64px;min-height:0}
.slide ul{margin:0;padding:0;list-style:none}
.slide li{position:relative;padding-left:30px;font-size:27px;line-height:1.38;margin:0 0 8px}
.slide li::before{content:"";position:absolute;left:2px;top:.52em;width:11px;height:11px;background:var(--blue)}
.slide .lead{font-size:27px;line-height:1.4;margin:0}
.viz{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;margin-top:18px}
.viz svg{max-width:100%;max-height:100%;overflow:visible}
.viz svg svg{overflow:hidden}
.cols{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;min-height:0}
.cols .viz{height:100%;margin:0}

/* title and question slides */
.slide.title{justify-content:center;padding-left:150px}
.slide.title h1{font-size:76px;margin:0;letter-spacing:-.02em}
.slide.title .sub{font-size:34px;color:var(--muted);margin:16px 0 64px}
.slide.title .who{font-size:28px}.slide.title .inst{font-size:21px;color:var(--muted);margin-top:8px;line-height:1.4}
.slide.title .hint{position:absolute;bottom:60px;left:150px;font-size:18px;color:var(--muted)}
.kbd{display:inline-block;border:1px solid var(--rule);border-bottom-width:3px;border-radius:5px;padding:1px 8px;font:600 15px var(--mono);color:var(--ink);background:#f7f9fa}
.question .body{flex-direction:row;align-items:center;gap:60px}
.question .q{flex:1}
.question .q h3{font-size:44px;font-weight:500;line-height:1.25;margin:0 0 36px}
.question .q .answer{font-size:26px;color:var(--muted);line-height:1.45}
.qmark{flex:none;width:260px;height:260px;border-radius:50%;border:5px solid var(--blue);background:var(--blue-soft);color:var(--blue);display:flex;align-items:center;justify-content:center;font:800 150px var(--sans)}

/* "optional detail" badge: <section class="slide deep"> — slides that can be skipped */
.slide.deep > header h2::after{content:"optional detail";display:inline-block;vertical-align:middle;margin-left:18px;
  font:700 15px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--orange);
  border:2px solid var(--orange);border-radius:4px;padding:2px 9px}

/* image slides: <div class="figrow"><figure><img><figcaption>…</figcaption></figure>…</div> */
.figrow{flex:1;min-height:0;display:flex;gap:28px;justify-content:center;align-items:center;margin-top:16px}
.figrow figure{margin:0;display:flex;flex-direction:column;align-items:center;min-width:0}
.figrow img{display:block;max-width:100%;border:1px solid var(--rule);border-radius:4px}
.figrow figcaption{font-size:20px;line-height:1.35;color:var(--muted);text-align:center;margin-top:10px;max-width:640px}
.figrow figcaption b{color:var(--ink)}

/* step reveal */
.step{transition:opacity .4s ease,transform .4s ease}
.step:not(.shown){opacity:0;transform:translateY(8px)}
.answer.step:not(.shown){opacity:0}

/* footer, progress */
#footer{position:absolute;right:88px;bottom:24px;font-size:17px;color:var(--muted);z-index:5}
#progress{position:absolute;left:0;bottom:0;height:5px;background:var(--blue);transition:width .3s ease;z-index:5}
#stepdots{position:absolute;left:88px;bottom:28px;display:flex;gap:6px;z-index:5}
#stepdots i{width:9px;height:9px;border-radius:50%;background:var(--rule)}
#stepdots i.on{background:var(--blue)}

/* math */
.m{font-family:var(--serif);font-style:italic}
.m b,.mb{font-family:var(--serif);font-style:normal;font-weight:700}
code,.code{font-family:var(--mono)}

/* overview, help */
#overview{position:fixed;inset:0;background:#20262c;overflow:auto;display:none;padding:30px;z-index:50}
body.overview #overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;align-content:start}
#overview button{border:0;background:#fff;text-align:left;padding:14px;cursor:pointer;min-height:95px;font:600 15px var(--sans);color:var(--ink);border-top:5px solid var(--rule)}
#overview button small{display:block;color:var(--muted);font-weight:400;margin-bottom:6px}
#overview button.cur{border-top-color:var(--blue)}
#help{position:fixed;right:20px;top:20px;background:#fff;padding:18px 22px;font-size:15px;line-height:1.8;display:none;z-index:60;box-shadow:0 8px 30px rgba(0,0,0,.35)}
body.help #help{display:block}

/* ------------------------------------------------------------ svg vocabulary */
svg text{font-family:var(--sans);fill:var(--ink);dominant-baseline:central}
svg .muted{fill:var(--muted)}
.cell{fill:#fff;stroke:var(--rule);stroke-width:1.5}
.kcell{fill:var(--orange-soft);stroke:var(--orange);stroke-width:1.5}
.pcell{fill:#f6c9a0;stroke:var(--rule);stroke-width:1.5}
.ocell{fill:#fff;stroke:var(--blue);stroke-width:1.5}
.ghost{fill:none;stroke:var(--rule);stroke-width:1.5;stroke-dasharray:6 5}
.win{fill:rgba(0,112,186,.13);stroke:var(--blue);stroke-width:5}
.box{fill:#eef5fb;stroke:var(--rule);stroke-width:1.5}
.box.blue{fill:var(--blue-soft);stroke:var(--blue);stroke-width:3}
.box.good{fill:var(--green-soft);stroke:var(--green);stroke-width:3}
.box.bad{fill:var(--red-soft);stroke:var(--red);stroke-width:3}
.box.mut{fill:#f4f5f6;stroke:var(--muted);stroke-width:2}
.box.orange{fill:var(--orange-soft);stroke:var(--orange);stroke-width:3}
.arrow{stroke:var(--blue);stroke-width:3.5;fill:none}
.line{stroke:var(--ink);stroke-width:2;fill:none}
.axis{stroke:var(--muted);stroke-width:2;fill:none}
.curve{stroke:var(--blue);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.g-anim{transition:transform .55s cubic-bezier(.4,.1,.2,1),opacity .4s ease}
.fade{transition:opacity .45s ease}
.pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* interactive controls inside slides */
.ctrls{display:flex;gap:26px;align-items:center;justify-content:center;font-size:21px;margin-top:6px;flex-wrap:wrap}
.ctrls label{display:flex;align-items:center;gap:10px}
.ctrls input[type=range]{width:170px;accent-color:var(--blue)}
.ctrls output{font:700 21px var(--mono);min-width:44px;display:inline-block}
.btn{border:1.5px solid var(--blue);background:#fff;color:var(--blue);font:600 20px var(--sans);padding:7px 16px;cursor:pointer;border-radius:4px}
.btn:hover{background:var(--blue-soft)}
table.t{border-collapse:collapse;font-size:23px;margin:0 auto}
table.t th{text-align:left;border-bottom:2px solid var(--ink);padding:6px 18px}
table.t td{padding:6px 18px;border-bottom:1px solid var(--rule)}
table.t td.r,table.t th.r{text-align:right}
table.t tr.total td{border-top:2px solid var(--ink);font-weight:700}
table.t tr.on td{background:var(--blue-soft)}
table.t tr td{transition:background .3s}

/* ------------------------------------------------------------ print = static PDF */
@media print{
  @page{size:1600px 900px;margin:0}
  html,body{background:#fff;overflow:visible;height:auto}
  #viewport{position:static;display:block}
  #stage{transform:none!important;width:auto;height:auto;overflow:visible;background:none}
  .slide{position:relative;width:1600px;height:900px;opacity:1!important;visibility:visible!important;
    page-break-after:always;break-after:page;transition:none}
  .step{opacity:1!important;transform:none!important}
  #footer,#progress,#stepdots,#overview,#help,.ctrls,.slide.title .hint{display:none!important}
  .slide .pageno{display:block}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;transition:none!important;animation:none!important}
}
.slide .pageno{display:none;position:absolute;right:88px;bottom:24px;font-size:17px;color:var(--muted)}