@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:block;src:url(fonts/IBMPlexSans-Regular.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:italic;font-display:block;src:url(fonts/IBMPlexSans-Italic.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:block;src:url(fonts/IBMPlexSans-SemiBold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:block;src:url(fonts/IBMPlexSans-SemiBold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:700;font-style:normal;font-display:block;src:url(fonts/IBMPlexSans-Bold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-weight:600;font-style:normal;font-display:block;src:url(fonts/IBMPlexSerif-SemiBold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Serif';font-weight:700;font-style:normal;font-display:block;src:url(fonts/IBMPlexSerif-Bold.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;font-display:block;src:url(fonts/IBMPlexMono-Regular.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:block;src:url(fonts/IBMPlexMono-Medium.woff2) format('woff2')}



:root{
  --ink:#16293D; --body:#2E3E4E; --muted:#66727F;
  --paper:#FFFFFF; --soft:#F6F3EC; --line:#E2DCD1;
  --A:#1F7A6F; --Aq:#E8F4F2;          /* Unit A  teal   */
  --B:#C4632C; --Bq:#FBEFE6;          /* Unit B  orange */
  --C:#7B4B9B; --Cq:#F3ECF7;          /* Unit C  plum   */
  --D:#B8860B; --Dq:#FFF8E6;          /* Unit D  gold   */
  --E:#A62B58; --Eq:#FBEDF2;          /* Unit E  rose   */
  --M:#1B4F8A; --Mq:#E9F0F8;          /* Milestone blue */
  --ok:#2E7D53; --warn:#B3451F;
}
*{box-sizing:border-box}
body{margin:0;padding:0;background:#fff;color:var(--body);
     font-family:'IBM Plex Sans',Verdana,sans-serif;font-size:11.5pt;line-height:1.62}
h1,h2,h3,h4{font-family:'IBM Plex Serif',Georgia,serif;color:var(--ink);margin:0}
p{margin:0 0 11px}
b,strong{color:var(--ink);font-weight:600}

/* ---------- cover ---------- */
.cover{height:295mm;display:flex;flex-direction:column;justify-content:space-between;
       padding:30mm 20mm;background:var(--ink);color:#fff;break-after:page;page:bleed}
.cover .eb{font-size:10pt;letter-spacing:3px;text-transform:uppercase;color:#E8A87C}
.cover h1{font-size:64pt;color:#fff;line-height:.95;margin:0 0 10px}
.cover .st{font-size:17pt;color:#B9C6D4;font-family:'IBM Plex Sans';font-weight:400}
.cover .nm{display:flex;gap:16px;margin-top:26px}
.cover .nm div{flex:1}
.cover .nml{font-size:8.5pt;letter-spacing:2px;text-transform:uppercase;color:#E8A87C;margin-bottom:22px}
.cover .nmr{border-bottom:1.5px solid #5B6E82}

/* ---------- unit divider ---------- */
.udiv{height:295mm;display:flex;flex-direction:column;justify-content:center;
      padding:0 22mm;break-before:page;break-after:page;page:bleed}
.udiv .un{font-size:11pt;letter-spacing:4px;text-transform:uppercase;font-weight:700}
.udiv h2{font-size:40pt;line-height:1.05;margin:6px 0 14px}
.udiv .ud{font-size:14pt;line-height:1.55;color:var(--body);max-width:150mm}
.udiv ol{margin:22px 0 0;padding-left:20px}
.udiv li{font-size:12pt;margin-bottom:5px}

/* ---------- generic page ---------- */
.pg{padding:0 18mm;break-before:page}
.pg.cont{break-before:auto}
h2.fh{font-size:21pt;margin:0 0 3px}
h3.sh{font-size:13.5pt;margin:16px 0 5px;color:var(--ink)}
.lead{font-size:12.5pt;line-height:1.6;color:var(--body)}

/* ---------- activity and challenge ---------- */
.slotwrap{border:1.6px solid var(--line);border-radius:8px;overflow:hidden;
  margin:12px 0 14px;break-inside:avoid;background:#fff}
.slotwrap.long{break-inside:auto}
.slot{display:flex;border-top:1px solid var(--line)}
.slotn{flex:0 0 62px;font-family:'IBM Plex Sans',sans-serif;font-size:7.4pt;font-weight:700;
  letter-spacing:.7px;color:#fff;background:#3C6E8F;padding:9px 6px;text-align:center}
.slotb{flex:1;padding:8px 11px 9px}
.slotw{font-family:'IBM Plex Sans',sans-serif;font-size:8.6pt;color:var(--muted);
  margin-bottom:4px}
.slotc{font-family:'IBM Plex Mono',monospace;font-size:8.5pt;line-height:1.5;
  white-space:pre-wrap}
h3.sh.doit{position:relative;padding-left:0}
h3.sh.doit::before{content:"ACTIVITY";display:inline-block;font-family:'IBM Plex Sans',sans-serif;
  font-size:7.6pt;font-weight:700;letter-spacing:1.6px;color:#fff;background:var(--ink);
  border-radius:3px;padding:2px 7px;margin-right:9px;vertical-align:3px}

.chal{border:1.6px solid var(--line);border-left:5px solid #7B4B9B;border-radius:8px;
  padding:11px 15px;margin:14px 0 4px;background:#FBF9FC;break-inside:avoid}
.chal .clbl{display:block;font-size:7.6pt;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:#7B4B9B;margin-bottom:4px}
.chal .clbl span{font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);
  font-size:8.4pt;margin-left:7px}
.chal p{margin:0 0 6px} .chal p:last-child{margin:0}
.chal ul{margin:4px 0 0;padding-left:17px} .chal li{margin-bottom:3px}

/* ---------- session opener ---------- */
.sop{display:flex;gap:16px;align-items:flex-start;border-bottom:3px solid var(--line);
     padding-bottom:10px;margin-bottom:12px}
.sop .num{font-family:'IBM Plex Serif',Georgia,serif;font-size:42pt;font-weight:700;
          line-height:.85;min-width:58px}
.sop .unm{font-size:8.5pt;letter-spacing:2.5px;text-transform:uppercase;font-weight:700}
.sop h2{font-size:24pt;line-height:1.1;margin:2px 0 0}
.make{font-size:12.5pt;line-height:1.55;margin:0 0 12px}

/* ---------- figures ---------- */
.fig{margin:10px 0 12px;text-align:center}
svg.bb{width:100%;max-width:158mm;height:auto}
.figcap{font-size:9.5pt;color:var(--muted);margin-top:5px;font-style:italic}
.pinstrip{margin:9px 0 12px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.psl{font-size:9.5pt;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);font-weight:700}
.pin{display:inline-block;border:1.8px solid;border-radius:7px;padding:3px 13px;
     font-weight:700;font-size:11pt}

/* ---------- image slots ---------- */
.imgslot{margin:10px 0 12px}
.imgslot img{width:100%;border-radius:7px;border:1px solid var(--line);display:block}
.imgslot.half{max-width:78mm}
.imgslot.ph{border:2.5px dashed #C3BCAE;border-radius:9px;background:var(--soft);
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            text-align:center;padding:16px;gap:5px}
.phi{font-size:22pt;opacity:.42}
.phn{font-family:'IBM Plex Mono',monospace;font-size:10pt;color:var(--warn);font-weight:500}
.phw{font-size:10pt;color:var(--muted);max-width:120mm;line-height:1.4}

/* ---------- parts ---------- */
.parts{display:flex;flex-wrap:wrap;gap:7px;margin:8px 0 12px}
.pt{display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);
    border-radius:20px;padding:5px 13px 5px 6px}
.ptq{background:var(--ink);color:#fff;border-radius:50%;width:22px;height:22px;
     display:flex;align-items:center;justify-content:center;font-size:10pt;font-weight:700;flex-shrink:0}
.ptn{font-size:10.5pt;color:var(--ink)}

/* ---------- steps ---------- */
ol.steps{list-style:none;counter-reset:st;margin:8px 0 12px;padding:0}
ol.steps li{counter-increment:st;position:relative;padding-left:38px;margin-bottom:9px;
            font-size:11.5pt;line-height:1.55}
ol.steps li::before{content:counter(st);position:absolute;left:0;top:1px;width:26px;height:26px;
     border-radius:50%;display:flex;align-items:center;justify-content:center;
     font-family:'IBM Plex Sans';font-size:12pt;font-weight:700;color:#fff}
ul.bul{margin:6px 0 12px;padding-left:20px}
ul.bul li{margin-bottom:6px}

/* ---------- callouts ---------- */
.cal{border-radius:9px;padding:11px 15px;margin:11px 0;border-left:5px solid}
.calh{font-size:9.5pt;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;margin-bottom:3px}
.calb{font-size:11pt;line-height:1.55}
.cal.tip{background:#EAF3EE;border-color:var(--ok)} .cal.tip .calh{color:var(--ok)}
.cal.warn{background:#FBECE6;border-color:var(--warn)} .cal.warn .calh{color:var(--warn)}
.cal.try{background:#F3ECF7;border-color:var(--C)} .cal.try .calh{color:var(--C)}
.cal.fix{background:#FFF8E6;border-color:#B8860B} .cal.fix .calh{color:#8B6508}

/* ---------- code blocks (mBlock style) ---------- */
.codewrap{background:#F4F6F8;border:1px solid #DDE3E9;border-radius:9px;padding:12px 14px;margin:10px 0 12px}
.codeh{font-size:9.5pt;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
       font-weight:700;margin-bottom:8px}
.blk{border-radius:6px;padding:7px 13px;margin-bottom:5px;color:#fff;font-size:11pt;
     font-weight:500;display:inline-block;min-width:60%}
.blk.ev{background:#C9A227}      /* event  */
.blk.ctl{background:#C4632C}     /* control/loop */
.blk.act{background:#2E72B8}     /* output action */
.blk.sen{background:#3E9E7E}     /* sensing */
.blk.op{background:#7B4B9B}      /* operator */
.blk.ind{margin-left:26px}
.blk.ind2{margin-left:52px}

/* ---------- side by side: the block, and the line ---------- */
.sxs{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:11px 0 6px}
.sxshead{display:flex;background:var(--soft);border-bottom:1px solid var(--line)}
.sxshead div{flex:1;padding:6px 13px;font-size:8.8pt;letter-spacing:1.1px;
             text-transform:uppercase;color:var(--muted);font-weight:700}
.sxshead div:first-child{border-right:1px solid var(--line)}
.sxsrow{display:flex;align-items:stretch;border-bottom:1px solid #EFEBE2}
.sxsrow:last-child{border-bottom:none}
.sxsl{flex:1;padding:6px 11px;border-right:1px solid var(--line);background:#FCFBF9}
.sxsr{flex:1;padding:6px 11px;background:#1E2733;display:flex;align-items:center}
.sxsl .blk{margin:0;min-width:0;font-size:9.6pt;padding:5px 11px}
.sxsc{font-family:'IBM Plex Mono',monospace;font-size:9.2pt;color:#D6DEE7;
      white-space:pre-wrap;line-height:1.5}
.sxsc .kw{color:#E0A458;font-weight:500} .sxsc .fn{color:#7FC4E8}
.sxsc .nu{color:#A6D98C} .sxsc .st{color:#E3A3A3}
.sxsc .cm{color:#7B8794;font-style:italic} .sxsc .pp{color:#C09BD8}
.sxsgap{min-height:22px}
.sxsnote{font-size:9.6pt;color:var(--muted);font-style:italic;padding:4px 2px}
code.cx{font-family:'IBM Plex Mono',monospace;font-size:9.2pt;background:#1E2733;
        color:#D6DEE7;padding:2px 6px;border-radius:4px;white-space:nowrap}
code.cx .kw{color:#E0A458} code.cx .fn{color:#7FC4E8} code.cx .nu{color:#A6D98C}

/* ---------- C++ listings (Level 2+) ---------- */
.cppwrap{background:#1E2733;border-radius:9px;padding:12px 0 10px;margin:11px 0 13px;
         border:1px solid #16202B}
.cppwrap .codeh{color:#8FA3B8;padding:0 15px;margin-bottom:8px}
.cpp{font-family:'IBM Plex Mono',monospace;font-size:9.6pt;line-height:1.62}
.cl{display:flex;padding:0 15px}
.cl.hl{background:#2C3A4A;border-left:3px solid #E0A458;padding-left:12px}
.ln{color:#5B6C7E;width:24px;flex-shrink:0;text-align:right;margin-right:14px;
    user-select:none;font-size:8.6pt}
.lt{color:#D6DEE7;white-space:pre-wrap}
.cpp .kw{color:#E0A458;font-weight:500}
.cpp .fn{color:#7FC4E8}
.cpp .nu{color:#A6D98C}
.cpp .st{color:#E3A3A3}
.cpp .cm{color:#7B8794;font-style:italic}
.cpp .pp{color:#C09BD8}

/* ---------- serial monitor panel ---------- */
.serwrap{border:1px solid var(--line);border-radius:9px;overflow:hidden;margin:11px 0 13px}
.serh{background:var(--soft);padding:6px 14px;font-size:9pt;letter-spacing:1.2px;
      text-transform:uppercase;color:var(--muted);font-weight:700;border-bottom:1px solid var(--line)}
.ser{background:#FBFAF8;padding:9px 14px;font-family:'IBM Plex Mono',monospace;font-size:9.6pt}
.sl{color:var(--ink);line-height:1.55}

/* ---------- tables ---------- */
table.tb{width:100%;border-collapse:collapse;margin:9px 0 12px;font-size:10.5pt}
table.tb th{background:var(--ink);color:#fff;text-align:left;padding:7px 10px;font-weight:600;font-size:10pt}
table.tb td{border-bottom:1px solid var(--line);padding:7px 10px;vertical-align:top}
table.tb td.sym{font-weight:600;color:var(--ink);width:30%}

/* ---------- word box ---------- */
.wordbox{background:var(--soft);border-radius:9px;padding:12px 15px;margin:11px 0}
.wbh{font-size:9.5pt;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;
     color:var(--muted);margin-bottom:6px}
.wd{margin-bottom:5px;font-size:11pt}
.wd b{color:var(--ink);margin-right:7px}
.wd span{color:var(--body)}

/* ---------- unit colour application ---------- */
.uA .sop .num,.uA .sop .unm,.uA h3.sh{color:var(--A)}
.uA ol.steps li::before{background:var(--A)}
.uA .sop{border-color:var(--A)}
.uB .sop .num,.uB .sop .unm,.uB h3.sh{color:var(--B)}
.uB ol.steps li::before{background:var(--B)}
.uB .sop{border-color:var(--B)}
.uC .sop .num,.uC .sop .unm,.uC h3.sh{color:var(--C)}
.uC ol.steps li::before{background:var(--C)}
.uC .sop{border-color:var(--C)}
.uD .sop .num,.uD .sop .unm,.uD h3.sh{color:#8B6508}
.uD ol.steps li::before{background:#B8860B}
.uD .sop{border-color:#B8860B}
.dD{color:#8B6508} .bgD{background:#FFF8E6}
.uE .sop .num,.uE .sop .unm,.uE h3.sh{color:#8A2049}
.uE ol.steps li::before{background:#A62B58}
.uE .sop{border-color:#A62B58}
.dE{color:#8A2049} .bgE{background:#FBEDF2}
.uM .sop .num,.uM .sop .unm,.uM h3.sh{color:var(--M)}
.uM ol.steps li::before{background:var(--M)}
.uM .sop{border-color:var(--M)}
.dA{color:var(--A)} .dB{color:var(--B)} .dC{color:var(--C)} .dM{color:var(--M)}
.bgA{background:var(--Aq)} .bgB{background:var(--Bq)} .bgC{background:var(--Cq)} .bgM{background:var(--Mq)}

@page{size:A4;margin:15mm 0 16mm 0}
@page bleed{margin:0}

@media print{
  body{background:#fff}

  /* --- things that must never be cut in half --- */
  .fig,.cal,.codewrap,.imgslot,.wordbox,.parts,.pinstrip,
  .cppwrap,.serwrap,.sxs{break-inside:avoid}
  ol.steps li,ul.bul li,.wd{break-inside:avoid}
  ul.bul.short{break-inside:avoid}

  /* A long listing breaks between its lines rather than jumping a whole
     page. box-decoration-break keeps the dark panel on both halves. */
  .cppwrap.long{break-inside:auto;
                -webkit-box-decoration-break:clone;box-decoration-break:clone}
  .cppwrap.long .cl{break-inside:avoid}
  .cppwrap .codeh{break-after:avoid}

  /* A short table stays whole. A long one breaks between rows, never inside
     one, and repeats its header on the continuation page. */
  table.tb{break-inside:avoid}
  table.tb.long{break-inside:auto}
  table.tb tr{break-inside:avoid}
  table.tb thead{display:table-header-group}
  table.tb tbody tr:first-child,table.tb tbody tr:last-child{break-before:avoid}
  .sop{break-inside:avoid}

  /* --- a heading never sits alone at the foot of a page --- */
  h2.fh,h3.sh,h4,.sop{break-after:avoid}
  h2.fh + p,h2.fh + .lead,h2.fh + ul,h2.fh + ol,h2.fh + div,h2.fh + table,
  h3.sh + p,h3.sh + .lead,h3.sh + ul,h3.sh + ol,h3.sh + div,h3.sh + table,
  .sop + p,.sop + .make,.sop + div{break-before:avoid}

  /* --- a caption stays with what it captions --- */
  .figcap{break-before:avoid}
  .codeh,.serh,.wbh,.calh{break-after:avoid}

  /* --- never one lonely line of a paragraph --- */
  p,li{orphans:3;widows:3}
  .lead,.make{orphans:2;widows:2}

  /* --- the last item of a list does not go on alone --- */
  ol.steps,ul.bul{orphans:2;widows:2}
}


/* ===================================================================
   Portal screen overrides. The book's stylesheet is above this line.
   Interface classes are prefixed pt- so they can never collide with a
   book class.
   =================================================================== */

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:74px}
body{background:#ECE8DF;padding:0}
/* A display: rule beats the hidden attribute, and several things here are
   flex. Without this the contents sheet stays over the page, invisible but
   swallowing every tap. */
[hidden]{display:none !important}

.a-A{--ac:var(--A);--acq:var(--Aq)}
.a-B{--ac:var(--B);--acq:var(--Bq)}
.a-C{--ac:var(--C);--acq:var(--Cq)}
.a-D{--ac:var(--D);--acq:var(--Dq)}
.a-E{--ac:var(--E);--acq:var(--Eq)}
.a-M{--ac:var(--M);--acq:var(--Mq)}

/* ---------- the bar at the top ---------- */
.pt-bar{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;
  display:flex;align-items:center;gap:12px;padding:0 14px;min-height:54px}
.pt-bar a{color:#fff;text-decoration:none}
.pt-back{display:flex;align-items:center;gap:7px;font-size:11pt;font-weight:600;
  padding:12px 10px 12px 2px;margin-left:-2px;border-radius:8px}
.pt-back:active{background:#ffffff22}
.pt-where{font-size:9.6pt;letter-spacing:1.6px;text-transform:uppercase;
  color:#9FB3C8;margin-left:auto;text-align:right;font-weight:700}

.pt-wrap{max-width:820px;margin:0 auto;padding:0 0 60px}
.pt-wrap.sess{padding-bottom:110px}

/* ===================================================================
   The level picker
   =================================================================== */
.pt-hero{background:var(--ink);color:#fff;padding:40px 20px 34px}
.pt-hero .eb{font-size:9.4pt;letter-spacing:3px;text-transform:uppercase;
  color:#E8A87C;margin:0 0 10px;font-weight:700}
.pt-hero h1{color:#fff;font-size:44pt;line-height:.98;margin:0;letter-spacing:-1px}
.pt-hero p{color:#B9C6D4;font-size:12.5pt;margin:14px 0 0}
.pt-levels{display:grid;gap:14px;padding:18px 16px}
.pt-lvl{display:block;background:#fff;border-radius:16px;padding:20px 20px 18px;
  text-decoration:none;box-shadow:0 1px 3px #16293d18;
  border-top:6px solid var(--ac)}
.pt-lvl:active{transform:translateY(1px)}
.pt-lvl .lh{display:flex;align-items:baseline;justify-content:space-between}
.pt-lvl .n{font-family:'IBM Plex Serif',Georgia,serif;font-size:26pt;
  font-weight:700;color:var(--ac);line-height:1}
.pt-lvl .ar{color:var(--ac);transform:rotate(180deg);opacity:.75}
.pt-lvl .g{display:block;font-size:12.5pt;color:var(--ink);font-weight:600;
  margin-top:6px}
.pt-lvl .bar{display:flex;gap:3px;margin:14px 0 10px;height:8px}
.pt-lvl .bar .sq{background:var(--ac);border-radius:2px;opacity:.85}
.pt-lvl .m{display:block;font-size:10.5pt;color:var(--muted)}

/* ===================================================================
   The level index
   =================================================================== */
.pt-lvlhead{background:#fff;padding:26px 18px 0;border-top:6px solid var(--ac)}
.pt-lvlhead .eb{font-size:9pt;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;font-weight:700}
.pt-lvlhead h1{font-family:'IBM Plex Serif',Georgia,serif;font-size:34pt;
  line-height:1;margin:0;color:var(--ink);letter-spacing:-.5px}
.pt-lvlhead .sub{font-size:12.5pt;color:var(--body);margin:8px 0 0;font-weight:600}

/* the year at a glance */
.pt-rail{display:flex;gap:6px;margin:18px 0 0;padding:0 0 18px;overflow-x:auto}
.pt-rail .rc{flex:1 0 auto;min-width:46px;text-decoration:none;text-align:center;
  border-radius:10px 10px 0 0;padding:9px 4px 8px;background:var(--acq);
  border-bottom:4px solid var(--ac)}
.pt-rail .rl{display:block;font-family:'IBM Plex Serif',Georgia,serif;
  font-size:15pt;font-weight:700;color:var(--ac);line-height:1}
.pt-rail .rn{display:block;font-size:8.6pt;color:var(--muted);margin-top:3px;
  font-weight:600}

/* search */
.pt-find{padding:16px 16px 4px}
.pt-find input{width:100%;font-family:inherit;font-size:12pt;padding:14px 16px;
  border:2px solid #D9D2C6;border-radius:12px;background:#fff;color:var(--ink)}
.pt-find input:focus{outline:none;border-color:var(--ink)}
.pt-none{padding:18px;color:var(--muted);font-size:11pt}

/* a unit */
.pt-unit{margin:26px 16px 0;background:#fff;border-radius:16px;
  padding:18px 16px 4px;box-shadow:0 1px 3px #16293d14}
.pt-unit.proj{background:var(--acq);box-shadow:none;
  border:2px solid color-mix(in srgb,var(--ac) 30%,transparent)}
.pt-uhead{display:flex;align-items:center;gap:14px}
.pt-uhead .ulet{flex:0 0 46px;height:46px;border-radius:12px;background:var(--ac);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Serif',Georgia,serif;font-size:20pt;font-weight:700}
.pt-uhead .ub{font-size:8.8pt;letter-spacing:2px;text-transform:uppercase;
  color:var(--ac);font-weight:700;margin:0 0 2px}
.pt-uhead h2{font-size:18pt;margin:0;line-height:1.12;color:var(--ink)}
.ubl{font-size:11pt;color:var(--body);margin:12px 0 0;line-height:1.5}

/* the sessions */
.pt-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.pt-item a{display:flex;align-items:center;gap:13px;background:var(--soft);
  border-radius:11px;padding:12px 14px;text-decoration:none;min-height:60px}
.pt-unit.proj .pt-item a{background:#fff}
.pt-item a:active{background:var(--acq)}
.pt-item .n{flex:0 0 36px;height:36px;border-radius:50%;background:var(--ac);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:'IBM Plex Sans';font-size:12.5pt;font-weight:700}
.pt-item .t{flex:1;font-size:11.8pt;color:var(--ink);font-weight:600;
  line-height:1.32}
.pt-item .pc{flex:0 0 auto;font-size:9.4pt;color:var(--muted);font-weight:600;
  white-space:nowrap}
.pt-item .hit{display:block;font-size:10pt;color:var(--muted);font-weight:400;
  margin-top:3px}

/* reference, staple, offline */
.pt-tools{display:grid;gap:9px;padding:26px 16px 0}
.pt-tool{display:flex;align-items:center;gap:13px;background:#fff;
  border:2px solid #E2DCD1;border-radius:12px;padding:14px 16px;
  text-decoration:none;color:var(--ink);font-size:11.5pt;font-weight:600;
  min-height:58px;font-family:inherit;text-align:left;width:100%;cursor:pointer}
.pt-tool small{display:block;font-weight:400;color:var(--muted);font-size:10pt;
  margin-top:2px}
.pt-tool:active{background:var(--soft)}
.pt-tool .ic{flex:0 0 22px;color:var(--M)}

/* ===================================================================
   A session, as a short deck of slides
   =================================================================== */
/* The white of the slide runs to the foot bar, so a short slide does not
   leave a band of background floating under it. */
.pt-deck{background:#fff}
.pt-deck.one{min-height:calc(100vh - 132px)}
.pt-slide{padding:24px 18px 30px;font-size:12pt}
.pt-slide > h3.sh:first-child{margin-top:0;font-size:16pt}
.pt-slide .sop{padding-bottom:12px;margin-bottom:14px}
.pt-slide .sop .num{font-size:38pt;min-width:50px}
.pt-slide .sop h2{font-size:22pt}
.pt-slide .cover,.pt-slide .udiv{display:none}

/* With JavaScript the deck shows one slide at a time. Without it every
   slide simply shows in order, so nothing is ever hidden from a student. */
.pt-deck.one .pt-slide{display:none}
.pt-deck.one .pt-slide.on{display:block;animation:pt-in .18s ease-out}
@keyframes pt-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pt-deck.one + .pt-prevwrap{display:none}

.pt-slide table.tb{font-size:11pt}
.pt-slide table.tb th,.pt-slide table.tb td{padding:9px 10px}
.pt-slide .cpp{font-size:10.6pt}
.pt-slide .ln{font-size:9.4pt;width:22px;margin-right:11px}
/* A long C++ line wraps rather than scrolling sideways, and the wrapped part
   is indented so it reads as a continuation and not as a new line. */
.pt-slide .lt{padding-left:1.6em;text-indent:-1.6em}
.pt-slide .slotc{font-size:10.2pt}
.pt-slide .figcap{font-size:10.4pt}
.pt-slide .calb,.pt-slide .wd{font-size:11.8pt}
.pt-slide ol.steps li{font-size:12pt}
.pt-slide .ser,.pt-slide .sxsc{font-size:10.4pt}
.pt-slide .imgslot.half{max-width:100%}

/* Figures are vector and stay vector. On a narrow screen a 30-column
   breadboard shrunk to fit is unreadable, so it pans instead. */
.pt-slide .fig{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0;
  background:
    linear-gradient(to right,#fff 30%,#fff0) left center,
    linear-gradient(to left,#fff 30%,#fff0) right center,
    radial-gradient(farthest-side at 0 50%,#16293d20,#16293d00) left center,
    radial-gradient(farthest-side at 100% 50%,#16293d20,#16293d00) right center;
  background-size:40px 100%,40px 100%,13px 100%,13px 100%;
  background-repeat:no-repeat;background-attachment:local,local,scroll,scroll}
.pt-slide svg.bb{max-width:none;width:100%;min-width:440px}

/* previous-session link, shown only in the no-JavaScript fallback */
.pt-prevwrap{padding:18px 16px 0}
.pt-jump{display:flex;gap:9px;align-items:center;background:#fff;border-radius:12px;
  padding:14px 16px;text-decoration:none;color:var(--ink);font-weight:600;
  font-size:11pt;border:2px solid #E2DCD1}

/* ---------- the bar at the foot that drives the deck ---------- */
.pt-foot{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;
  border-top:1px solid #E2DCD1;display:flex;align-items:center;gap:10px;
  padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 14px #16293d12}
body:not(.js) .pt-foot{display:none}
.pt-foot button{font-family:inherit;cursor:pointer;border:none;background:none}
.pt-foot .pv{flex:0 0 46px;height:46px;border-radius:12px;background:var(--soft);
  color:var(--ink);display:flex;align-items:center;justify-content:center}
.pt-foot .pv[disabled]{opacity:.32}
.pt-count{flex:0 0 auto;display:flex;align-items:center;gap:7px;height:46px;
  padding:0 12px;border-radius:12px;background:var(--soft);color:var(--ink);
  font-size:10.5pt;font-weight:700;white-space:nowrap}
.pt-count .ic{color:var(--muted)}
.pt-dots{display:none;flex:1;gap:5px;justify-content:center;align-items:center}
.pt-dots .dot{width:9px;height:9px;border-radius:50%;background:#D9D2C6;padding:0}
.pt-dots .dot.on{background:var(--ink);transform:scale(1.28)}
.pt-foot .nx{flex:1;height:46px;border-radius:12px;background:var(--ink);
  color:#fff;font-size:11.5pt;font-weight:700;display:flex;align-items:center;
  justify-content:center;gap:6px;text-decoration:none}
.pt-foot .nx svg{transform:rotate(180deg)}
/* min-width:0 lets the long session title actually truncate instead of
   pushing the counter out of the bar. */
.pt-foot .nx.done{display:none;flex-direction:column;gap:0;align-items:flex-start;
  justify-content:center;padding:0 16px;background:var(--ok);min-width:0;
  overflow:hidden}
.pt-foot .nx.done .l{font-size:8.6pt;letter-spacing:1.4px;text-transform:uppercase;
  opacity:.85;font-weight:700}
.pt-foot .nx.done .t{display:block;width:100%;font-size:11pt;font-weight:700;
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-foot.end .nx:not(.done){display:none}
.pt-foot.end .nx.done{display:flex}

/* ---------- the contents sheet ---------- */
.pt-sheet{position:fixed;inset:0;z-index:40;background:#16293d66;
  display:flex;align-items:flex-end}
.pt-sheet .sh-in{background:#fff;width:100%;max-height:74vh;overflow-y:auto;
  border-radius:18px 18px 0 0;padding:18px 16px calc(20px + env(safe-area-inset-bottom));
  max-width:820px;margin:0 auto}
.sh-h{font-size:9pt;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin:0 0 10px}
.sh-l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sh-l button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font-family:inherit;font-size:11.5pt;color:var(--ink);background:var(--soft);
  border:none;border-radius:11px;padding:13px 14px;cursor:pointer;min-height:54px;
  font-weight:600}
.sh-l button.on{background:var(--ink);color:#fff}
.sh-l .mi{flex:0 0 26px;height:26px;border-radius:50%;background:#fff;
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:10pt;font-weight:700}

/* ===================================================================
   Laptop
   =================================================================== */
@media (min-width:860px){
  .pt-wrap{padding-top:20px}
  .pt-hero{border-radius:18px;padding:56px 44px}
  .pt-hero h1{font-size:54pt}
  .pt-levels{grid-template-columns:repeat(3,1fr);padding:16px 0}
  .pt-lvlhead{border-radius:18px;padding:32px 34px 0}
  .pt-lvlhead h1{font-size:40pt}
  .pt-find{padding-left:0;padding-right:0}
  .pt-unit{margin-left:0;margin-right:0;padding:22px 24px 8px}
  .pt-grid{grid-template-columns:1fr 1fr}
  .pt-tools{padding-left:0;padding-right:0}
  .pt-deck{border-radius:18px;box-shadow:0 1px 3px #16293d18;overflow:hidden}
  /* On a laptop the card hugs its slide. Stretching a four-line title slide
     to the height of the window leaves a screen of empty white. */
  .pt-deck.one{min-height:0}
  .pt-slide{padding:34px 48px 40px}
  .pt-slide svg.bb{min-width:0;max-width:620px}
  .pt-slide .fig{overflow-x:visible;background:none}
  .pt-foot{border-radius:16px 16px 0 0;max-width:820px;margin:0 auto;
    border:1px solid #E2DCD1;border-bottom:none}
  .pt-dots{display:flex}
  .pt-foot .nx{flex:0 0 auto;padding:0 22px}
  .pt-foot .nx.done{flex:0 0 auto;max-width:280px}
  .pt-prevwrap{padding-left:0;padding-right:0}
}

@media print{
  .pt-bar,.pt-foot,.pt-tools,.pt-find,.pt-sheet,.pt-rail{display:none}
  .pt-deck.one .pt-slide{display:block}
}