@font-face{font-family:Montserrat;font-style:normal;font-weight:100 900;src:url(/assets/montserrat.ttf) format("truetype")}

/* The slides' look (D44): white, greyscale re-weighted for a projector, Montserrat, every word students
   read 44 px or more, headings 64 px. The same rules the outline page drew its slides with. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #ffffff; }
#deck { position: fixed; left: 0; top: 0; width: 1440px; height: 1080px; transform-origin: 0 0; }
#blank { position: fixed; inset: 0; display: none; z-index: 10; }
#blank.black { display: block; background: #000000; }
#blank.white { display: block; background: #ffffff; }

.sl { position: absolute; inset: 0; box-sizing: border-box; padding: 44px 40px; background: #ffffff; color: #1a1a1a;
  font-family: Montserrat, Arial, sans-serif; font-size: 44px; line-height: 1.22; display: none; flex-direction: column; gap: 22px; }
.sl.on { display: flex; }
.sl * { margin: 0; box-sizing: border-box; }
.sl .top { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.sl .tt { font-size: 64px; font-weight: 700; line-height: 1.1; }
.sl .pr { font-style: italic; }
.sl p { text-wrap: pretty; }                      /* no lone last word on a line */
.sl .grey { color: #55595e; }
.sl b { font-weight: 700; }
.sl sub { font-size: 0.66em; vertical-align: -0.2em; line-height: 0; }
.sl canvas { display: block; }
.later { visibility: hidden; }
.gone { visibility: hidden; }
.slow { transition: visibility 0s linear 1.6s; }   /* words that wait for the picture to finish moving */

/* a moving picture across the slide, with words under it: together, centred in the space left */
.sl .body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.sl .pic { align-self: center; }
.sl .under { display: flex; justify-content: center; gap: 60px; text-align: center; }

/* the hook: a picture on the left, a few lines on the right */
.sl .hk { display: grid; grid-template-columns: 640px 1fr; gap: 48px; align-items: center; flex: 1; min-height: 0; }
.sl .tx { display: flex; flex-direction: column; gap: 28px; }

/* a simulation: the box and its control on the left, the counter and the key on the right */
.sl .sim { display: grid; grid-template-columns: 880px 1fr; gap: 48px; flex: 1; min-height: 0; }
.sl .sim.wide { grid-template-columns: 1fr; gap: 18px; }
.sl .sim .left { display: flex; flex-direction: column; gap: 22px; }
.sl .sim .right { display: flex; flex-direction: column; gap: 34px; }
.sl .sim .below { display: grid; grid-template-columns: 880px 1fr; gap: 48px; }
.sl .ctl { display: flex; flex-direction: column; gap: 8px; cursor: pointer; touch-action: none; }
.sl .ctl .nm { font-weight: 600; }
.sl .trk { position: relative; height: 44px; margin: 0 22px; }
.sl .trk .ln { position: absolute; left: 0; right: 0; top: 19px; height: 6px; background: #8c8c8c; border-radius: 3px; }
.sl .trk .fill { position: absolute; left: 0; top: 17px; height: 10px; background: #1a1a1a; border-radius: 5px; }
.sl .trk .tick { position: absolute; top: 8px; width: 4px; height: 28px; margin-left: -2px; background: #1a1a1a; }
.sl .trk .knob { position: absolute; top: 2px; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; background: #1a1a1a; }
.sl .stops { position: relative; height: 54px; }
.sl .stops span { position: absolute; top: 0; white-space: nowrap; color: #55595e; }
.sl .stops span.here { color: #1a1a1a; font-weight: 700; }
.sl .stops span:first-child { left: 0; }
.sl .stops span:nth-child(2) { left: 50%; transform: translateX(-50%); }
.sl .stops span:last-child { right: 0; }
.sl .read { display: flex; flex-direction: column; gap: 0; }
.sl .read .lb { font-weight: 600; line-height: 1.16; }
.sl .read .num { font-size: 120px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sl .read .num.small { font-size: 96px; }
.sl .key { display: flex; flex-direction: column; gap: 14px; }
.sl .key .row { display: grid; grid-template-columns: 72px 1fr; align-items: center; column-gap: 14px; line-height: 1.16; }
.sl .key svg { display: block; justify-self: center; }
.sl .sim.wide .below .right { padding-top: 0; }
.sl .keyrow { display: flex; gap: 60px; justify-content: center; }
.sl .keyrow .row { display: flex; align-items: center; gap: 16px; }

/* ---- the whole deck (9 Oct): the outline page's slide rules, carried over ---- */
.dim { opacity: 0.4; }                                  /* earlier rows of a chain */
.sl .notes { display: none; }
#notes { position: fixed; left: 0; right: 0; bottom: 0; display: none; z-index: 9; padding: 14px 24px;
  background: #1a1a1a; color: #ffffff; font: 20px/1.4 Montserrat, Arial, sans-serif; }
#notes.on { display: block; }
#notes b { margin-right: 12px; color: #c8c8c8; }

/* the boxes in the top corner: a timer, the Retrieval box, the question's marks */
.sl .timer, .sl .ret, .sl .mbox { font-weight: 700; border: 3px solid #1a1a1a; border-radius: 10px; padding: 0 18px;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.sl .timer { font-size: 56px; cursor: pointer; min-width: 196px; text-align: center; }
.sl .timer.paused { border-style: dashed; }
.sl .timer.done { background: #1a1a1a; color: #ffffff; }
.sl .ret, .sl .mbox { font-size: 44px; }

/* a drawing from the kit, shown at its own size */
.sl .fig { align-self: center; line-height: 0; }
.sl .fig svg, .sl svg.wpic { display: block; }
.sl .body.top0 { justify-content: flex-start; }

/* the Do Now (D51): smaller type, the header band, three columns */
.sl.dense { font-size: 36px; gap: 18px; }
.sl.dense .tt { font-size: 56px; }
.sl.dense .timer { font-size: 48px; min-width: 168px; }
.sl .band { border: 3px solid #1a1a1a; border-radius: 10px; padding: 14px 24px; display: flex; flex-direction: column; gap: 2px; }
.sl .band .row { display: flex; justify-content: space-between; gap: 24px; }
.sl .lbl { color: #55595e; font-weight: 600; }
.sl .n { font-weight: 800; margin-right: 14px; }
.sl .cols { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sl .col { border: 3px solid #1a1a1a; border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; }
.sl .cq { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.sl .ol { display: flex; flex-direction: column; gap: 2px; }
.sl .ol b { font-weight: 800; margin-right: 12px; }
.sl .mk { font-weight: 700; }
.sl .tab { margin-top: auto; border-top: 3px solid #1a1a1a; background: #e4e6e9; padding: 8px 20px; font-size: 30px; font-weight: 700; white-space: nowrap; }

/* the skill question: data centred, the working in its own box */
.sl .eq { font-size: 52px; font-weight: 700; }
.sl .data { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sl table { border-collapse: collapse; }
.sl th, .sl td { padding: 4px 28px; text-align: center; vertical-align: middle; }
.sl thead th { border-bottom: 3px solid #1a1a1a; font-weight: 700; }
.sl .work { align-self: center; margin-top: 26px; border: 3px solid #1a1a1a; border-radius: 10px; padding: 26px 44px;
  display: grid; grid-template-columns: max-content max-content; gap: 22px 48px; }
.sl .work .res { font-weight: 700; }
.sl .work .all { grid-column: 1 / -1; }

/* whiteboard questions: the options, a letter each; pictures beside or above them */
.sl .wo { display: flex; flex-direction: column; gap: 16px; }
.sl .wo b { font-weight: 800; margin-right: 18px; }
.sl .wo.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.sl .side { display: grid; grid-template-columns: 900px 1fr; gap: 40px; align-items: center; }
.sl .side2 { display: grid; grid-template-columns: 560px 1fr; gap: 56px; align-items: center; }
.sl .sidefig { display: grid; grid-template-columns: auto 1fr; gap: 56px; align-items: center; }
.sl .gapline { align-self: center; font-size: 60px; font-weight: 700; margin: 30px 0; }
.sl .blank { display: inline-block; min-width: 560px; border-bottom: 4px solid #1a1a1a; text-align: center; font-weight: 700; }
.sl .blank.short { min-width: 300px; }
.sl .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sl .card { border: 3px solid #1a1a1a; border-radius: 10px; padding: 22px 28px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.sl .card.left { text-align: left; }
.sl .answer { font-weight: 700; }
.sl .kq { border: 3px solid #1a1a1a; border-radius: 10px; padding: 18px 26px; display: flex; flex-direction: column; gap: 4px; }
.sl .kq b { font-weight: 700; }
.sl .big { font-size: 80px; font-weight: 700; text-align: center; }
.sl .quote { border: 3px solid #1a1a1a; border-radius: 10px; padding: 18px 26px; font-style: italic; }

/* teaching slides: key terms, lines built up a click at a time, what it isn't */
.sl .terms { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 64px; padding-left: 40px; }
.sl .term { border-left: 8px solid #1a1a1a; padding-left: 32px; display: flex; flex-direction: column; gap: 6px; }
.sl .term b { font-size: 72px; font-weight: 700; line-height: 1.1; }
.sl .lines { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding-left: 40px; }
.sl .lines.top0 { justify-content: flex-start; padding-top: 20px; }
.sl .lines .l { font-size: 56px; }
.sl .lines .l b { font-weight: 700; }
.sl .no2 { font-size: 72px; font-weight: 700; }
.sl .strk { position: relative; color: #55595e; }
.sl .strk i { position: absolute; left: -8px; right: -8px; top: 54%; height: 6px; background: #1a1a1a; }
.sl .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.sl .cmp .card { text-align: left; gap: 14px; }
.sl .cmp h3 { font-size: 52px; font-weight: 700; }

/* the B(m)LT frame (D47, D53): B, L and T one size, the m small; words click in, key words bold */
.sl .blt { display: grid; grid-template-columns: 132px minmax(0, 1fr); border: 3px solid #1a1a1a; border-radius: 10px; line-height: 1.16; }
.sl .blt > .tg { border-right: 3px solid #1a1a1a; display: flex; align-items: center; justify-content: center;
  font-size: 60px; font-weight: 700; padding: 10px 0; }
.sl .blt > .tg small { font-size: 34px; font-weight: 400; margin-left: 2px; align-self: center; }
.sl .blt > .w { padding: 18px 24px; min-height: 96px; display: flex; align-items: center; }
.sl .blt > .tg:not(:nth-last-child(2)), .sl .blt > .w:not(:last-child) { border-bottom: 3px solid #1a1a1a; }
.sl .blt b { font-weight: 700; }
.sl .blt .k { font-weight: 700; }

/* the answer slides (D53): only the answers, numbered as on the page; a click per row */
.sl .ans { display: grid; grid-template-columns: 40px 78px 92px minmax(0, 1fr); column-gap: 16px; row-gap: 22px; line-height: 1.16; }
.sl .ans .q { font-weight: 800; }
.sl .ans .p { font-weight: 600; }
.sl .ans .wide { grid-column: span 2; }
.sl .ans .full { grid-column: 2 / -1; }
.sl .k { font-weight: 700; }
.sl .no { color: #55595e; }
.sl .afig { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; }

/* the page slide: the two pages drawn small, the task box's words beside them */
.sl .hk .fig { align-self: center; }

/* the preview's own first page: for checking, not part of a lesson */
.sl.cover { font-size: 32px; gap: 16px; }
.sl.cover ol { columns: 2; column-gap: 60px; padding-left: 44px; line-height: 1.5; }
.sl.cover .keys { color: #55595e; }

.sl .ctl{display:none}.sl .sim{align-items:center}.sl .notes{display:none}canvas{outline:none}
/* Compact website framing; the original canvas geometry and model are unchanged. */
#deck{height:910px}
.sl{padding:32px 40px;gap:18px}
.sl .body{justify-content:flex-start;gap:18px}
.sl[data-move^="sim:"]{height:860px}
.sl .sim{flex:none;align-items:center;margin-top:18px}