/*
  Seriously Scientific Tutor: the slide kit, shared by every deck.

  Every slide is drawn on a fixed 1920 x 1080 canvas. slide-kit.js scales
  the whole canvas to fit the window, like a picture, so nothing can reflow
  or spill off on any screen. Sizes in this file are canvas pixels.

  Sections:
  1. Colours and fonts      6. Builds (click by click)
  2. The window and bar     7. Shared pieces: chips, cards, highlighter
  3. Slides and moving      8. Layouts, one block each
  4. The three moods        9. Diagrams and widgets
  5. The step rail         10. Reduced motion and print
*/

/* ---------- 1. Colours and fonts ---------- */
:root {
  --ink: #1A0C08;            /* deep space: headings, outlines, shadows */
  --ink-2: #3D2318;          /* body text */
  --muted: #6B5146;          /* captions */
  --line: #E6DCD2;           /* fine lines */
  --paper: #FFFFFF;          /* teaching slides */
  --cream: #FFFBEA;          /* think and big question slides */
  --peach: #FDF3EC;          /* orange boxes */
  --peach-2: #FBE1CF;        /* substrate fill */
  --sky: #F3F8FB;            /* blue boxes */
  --sky-2: #DCEBF5;          /* enzyme fill */
  --orange: #A8461A;         /* supernova, safe for text */
  --orange-hi: #CD5A24;      /* supernova, large or decorative only */
  --blue: #185A84;           /* diagram lines and blue text */
  --blue-hi: #4A9FD4;        /* decorative on dark */
  --yellow: #FADB67;         /* highlight: fills only, never text on light */
  --star: #F7FAFC;           /* text on dark */
  --star-2: #E9DFD7;
  --star-3: #C9B8AD;
  --pink: #F2A0A8;           /* jelly in kitchen demos */

  /* the five session steps */
  --s-recall: #185A84;
  --s-check: #5C6B2E;
  --s-teach: #A8461A;
  --s-practise: #2F7D4F;
  --s-wrap: #6B4E9B;
  /* lighter versions for the progress bar on the dark background */
  --seg-recall: #4A9FD4;
  --seg-check: #9BAA5E;
  --seg-teach: #E07A45;
  --seg-practise: #5DB383;
  --seg-wrap: #A889D6;

  --letterbox: #120805;
  --chrome: #22140E;
  --chrome-line: #4A2E22;
  --chrome-muted: #C9B8AD;

  --f-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body {
  height: 100%;
  margin: 0;
  background: var(--letterbox);
  color: var(--star);
  font-family: var(--f-body);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.kit-defs { position: absolute; width: 0; height: 0; }

/* ---------- 2. The window and the control bar ---------- */
.kit-viewport {
  flex: 1;
  min-height: 0;
  padding-block: 16px 6px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.kit-fit { position: relative; width: 100%; height: 100%; }
.kit-deck {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  background: var(--paper);
  touch-action: pan-y;
}
.kit-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 6px 10px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--letterbox);
  font-size: 14px;
}
.kit-btn {
  min-width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--chrome-line);
  background: var(--chrome);
  color: var(--star);
  font-weight: 600;
  font-size: 14px;
}
.kit-btn:hover { border-color: var(--yellow); }
.kit-btn:disabled { opacity: .4; cursor: default; }
.kit-btn svg { width: 18px; height: 18px; }
.kit-btn.is-muted .wave { display: none; }
.kit-btn:not(.is-muted) .cross { display: none; }
.kit-count { font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; font-weight: 600; color: var(--chrome-muted); }
.kit-progress { flex: 1; display: flex; gap: 4px; min-width: 0; height: 44px; align-items: stretch; }
.kit-progress button { flex: 1; min-width: 0; border: 0; background: none; padding: 0; position: relative; }
.kit-progress button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 19px;
  height: 6px;
  border-radius: 3px;
  background: var(--seg);
  opacity: .3;
  transition: opacity .25s, transform .25s;
}
.kit-progress button.seen::before { opacity: .75; }
.kit-progress button[aria-current="true"]::before { opacity: 1; transform: scaleY(1.9); }
.kit-hint { color: var(--chrome-muted); white-space: nowrap; }
.kit-hint kbd { font: 600 12px var(--f-body); border: 1px solid var(--chrome-line); border-radius: 5px; padding: 2px 6px; background: var(--chrome); }
@media (max-width: 1000px) { .kit-hint { display: none; } }
@media (max-width: 600px) { .kit-label { display: none; } .kit-progress { gap: 2px; } }
.is-fs .kit-viewport { padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px); }
.is-fs .kit-deck { border-radius: 0; box-shadow: none; }
.is-fs .kit-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: rgba(18, 8, 5, .92); transition: transform .35s var(--ease-out), opacity .35s; }
.is-fs.idle .kit-bar { transform: translateY(100%); opacity: 0; }
.is-fs.idle { cursor: none; }

/* ---------- 3. Slides and moving between them ---------- */
.slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transform: translateX(96px);
  color-scheme: light;
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), visibility 0s linear .6s;
}
.slide.is-past { transform: translateX(-96px); }
.slide.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--ease-out), transform .6s var(--ease-out), visibility 0s;
}
/* Animations on slides you can't see are paused, so they cost nothing */
.slide:not(.is-active) * { animation-play-state: paused !important; }

/* The frame: margins and the vertical flow every slide shares.
   Inside the margins there are 1680 x 912 pixels to use */
.frame {
  position: absolute;
  inset: 0;
  padding: 88px 120px 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.frame > .grow { flex: 1; min-height: 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 52px; flex: none; }
.title {
  margin: 0;
  font: 700 80px/1.05 var(--f-display);
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
  flex: none;
}
.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex: none; }
.body-text { margin: 0; font-size: 36px; line-height: 1.4; color: var(--ink); }
.note { margin: 0; font-size: 26px; line-height: 1.35; color: var(--muted); }
.slide b, .slide strong { font-weight: 700; }

/* ---------- 4. The three moods ---------- */
.bg-paper { background: var(--paper); color: var(--ink-2); }   /* teaching */
.bg-cream { background: var(--cream); color: var(--ink-2); }   /* questions to think about */
.bg-dark { background: var(--ink); color: var(--star); }       /* titles, dividers, the big finish */
.bg-dark .title { color: var(--star); }
.bg-dark .note { color: var(--star-3); }

/* ---------- 5. The step rail: which part of the session we're in ---------- */
.rail { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; align-items: center; }
.rail li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  border-radius: 999px;
  font: 700 21px/1 var(--f-body);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.rail .dot { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--c); background: transparent; flex: none; }
.rail .done .dot { background: var(--c); }
.rail .now { background: var(--c); color: #FFFFFF; padding: 0 20px 0 14px; border: 3px solid var(--ink); }
.rail .now .dot { border-color: #FFFFFF; background: #FFFFFF; width: 14px; height: 14px; }
.rail li:not(.now) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bg-dark .rail .dot { box-shadow: 0 0 0 2px rgba(247, 250, 252, .35); }
.bg-dark .rail .now { border-color: var(--yellow); }

/* ---------- 6. Builds: things that arrive one click at a time ----------
   data-build="1" arrives on the first click, "2" on the second and so on.
   data-anim chooses how: rise (the default), pop, fade, mark (the
   highlighter) or draw (an SVG line drawing itself). --i staggers a
   group that arrives together. */
[data-build] { opacity: 0; transform: translateY(32px); transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
[data-build].shown { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 90ms); }
[data-build][data-anim="pop"] { transform: scale(.5); transform-box: fill-box; transform-origin: center; transition: opacity .25s, transform .6s var(--ease-spring); }
[data-build][data-anim="pop"].shown { transform: none; }
[data-build][data-anim="fade"] { transform: none; }
[data-build][data-anim="mark"] { opacity: 1; transform: none; transition: background-size .7s var(--ease-out); }
[data-build][data-anim="draw"] { opacity: 1; transform: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease-out); }
[data-build][data-anim="draw"].shown { stroke-dashoffset: 0; }
/* Round line ends would leave a dot behind before the line draws, so they start flat */
[data-build][data-anim="draw"]:not(.shown) { stroke-linecap: butt; opacity: 0; }
@keyframes kit-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kit-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes kit-breathe { 50% { opacity: .45; } }
/* An SVG line that draws itself every time its slide appears */
.draw-enter { stroke-dasharray: 1; stroke-dashoffset: 0; }
.slide.is-active .draw-enter { animation: kit-draw 1s var(--ease-out) both; }

/* ---------- 7. Shared pieces ---------- */
/* Chip: the slide's label, coloured by its session step */
.chip {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  font: 700 22px/1 var(--f-body);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--c, var(--orange));
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  white-space: nowrap;
}
.chip.recall { --c: var(--s-recall); }
.chip.check { --c: var(--s-check); }
.chip.teach { --c: var(--s-teach); }
.chip.practise { --c: var(--s-practise); }
.chip.wrap { --c: var(--s-wrap); }
.chip.outline { background: transparent; color: var(--yellow); border-color: var(--yellow); box-shadow: none; }
.bg-dark .chip:not(.outline) { border-color: var(--yellow); box-shadow: 4px 4px 0 var(--yellow); }

/* Sticker: a tilted yellow label for big picture, think and kitchen demo slides */
.sticker {
  display: inline-flex;
  align-items: center;
  height: 56px;
  padding: 0 24px;
  border-radius: 12px;
  font: 700 26px/1 var(--f-display);
  text-transform: uppercase;
  letter-spacing: .02em;
  background: var(--yellow);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: rotate(-3deg);
  white-space: nowrap;
}

/* Card: a box with a thick outline and a hard shadow */
.card { background: var(--paper); border: 3px solid var(--ink); border-radius: 24px; box-shadow: 10px 10px 0 var(--ink); padding: 32px 40px; }
.card.sky { background: var(--sky); }
.card.peach { background: var(--peach); }
.card.cream { background: var(--cream); }
.card p { margin: 0; font-size: 38px; line-height: 1.35; color: var(--ink); }
.card h3 { margin: 0 0 12px; font: 700 40px/1.1 var(--f-display); color: var(--ink); }
.card .label { display: block; margin: 0 0 12px; font: 700 24px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.card.sky .label { color: var(--blue); }

/* Highlighter: a yellow swipe behind key words */
.mark {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% 52%;
  transition: background-size .7s var(--ease-out);
  padding: 0 .08em;
  margin: 0 -.08em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.mark.on, .mark.shown { background-size: 100% 52%; }

/* Supplement and AHL tags beside a title */
.tag-s {
  display: inline-grid;
  place-items: center;
  min-width: 56px;
  height: 48px;
  padding: 0 12px;
  margin-left: 16px;
  vertical-align: 12px;
  border-radius: 12px;
  border: 3px solid var(--ink);
  background: var(--sky-2);
  color: var(--blue);
  font: 700 26px var(--f-body);
  letter-spacing: .04em;
}

kbd { font: 700 .8em var(--f-body); border: 2px solid currentColor; border-radius: 8px; padding: .05em .4em; }

/* Buttons inside slides */
.pill-btn {
  height: 60px;
  padding: 0 22px;
  border-radius: 14px;
  border: 3px solid var(--ink);
  background: var(--paper);
  font: 700 26px var(--f-body);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .15s, box-shadow .15s, background .2s;
}
.pill-btn:hover { background: var(--yellow); }
.pill-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.pill-btn.dark { background: var(--ink); color: var(--star); }
.pill-btn.dark:hover { background: var(--ink-2); }
.pill-btn svg { width: 24px; height: 24px; }

/* ---------- 8. Layouts ---------- */

/* Title slide */
.title-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; max-width: 980px; position: relative; z-index: 2; }
.mega { margin: 0; font: 700 236px/.9 var(--f-display); letter-spacing: -.045em; color: var(--star); }
.mega.long { font-size: 168px; }
.title-lede { margin: 0; font: 500 48px/1.2 var(--f-display); color: var(--star-2); max-width: 860px; }
.title-meta { margin: 0; font-size: 30px; color: var(--star-3); }
.press { margin: 0 0 4px; font-size: 28px; color: var(--star-3); position: relative; z-index: 2; }
.slide.is-active .press { animation: kit-breathe 2.4s ease-in-out 1.2s infinite; }
.title-art { position: absolute; right: 90px; top: 200px; width: 820px; height: 760px; overflow: visible; z-index: 1; }
.motes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.motes i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); opacity: .5; }
.slide.is-active .motes i { animation: kit-drift var(--d) ease-in-out infinite alternate; }
@keyframes kit-drift { to { transform: translate(22px, -30px); } }

/* Recall: questions with answers that arrive one at a time */
.qa { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; counter-reset: qa; }
.qa li { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 28px; align-items: start; counter-increment: qa; }
.qa li::before {
  content: counter(qa);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 32px var(--f-display);
  background: var(--c, var(--s-recall));
  color: #FFFFFF;
  border: 3px solid var(--ink);
}
.qa .q { margin: 0; font-size: 44px; line-height: 1.25; color: var(--ink); font-weight: 500; }
.qa .a { grid-column: 2; margin: 10px 0 0; justify-self: start; font-size: 36px; line-height: 1.3; color: var(--ink); background: var(--sky); border: 3px solid var(--ink); border-radius: 16px; padding: 10px 22px; box-shadow: 5px 5px 0 var(--ink); }

/* Big question: one huge question, the answer arrives underneath */
.big-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: center; }
.big-grid.no-art { grid-template-columns: minmax(0, 1fr); }
.big-text { display: flex; flex-direction: column; gap: 40px; }
.q-big { margin: 0; font: 700 112px/1.02 var(--f-display); letter-spacing: -.035em; color: var(--ink); text-wrap: balance; }
.q-big.smaller { font-size: 92px; }
.q-next { margin: 0; font: 700 58px/1.12 var(--f-display); letter-spacing: -.02em; color: var(--orange); text-wrap: balance; }

/* Two columns */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split.wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.split.wide-right { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }

/* Points: short statements beside a diagram, each its own click */
.points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.points li { font-size: 36px; line-height: 1.35; color: var(--ink); padding-left: 44px; position: relative; }
.points li::before { content: ""; position: absolute; left: 0; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: var(--c, var(--orange-hi)); border: 3px solid var(--ink); }

/* Cause chains: a short line, an arrow, the next line */
.chains { display: flex; flex-direction: column; gap: 32px; }
.chain h3 { margin: 0 0 12px; font: 700 40px/1.1 var(--f-display); color: var(--ink); }
.chain ol { list-style: none; margin: 0; padding: 0; }
.chain li { font-size: 32px; line-height: 1.3; color: var(--ink); }
.chain li + li::before { content: "\2193"; display: block; font-weight: 700; color: var(--c, var(--ink)); line-height: 1; margin: 3px 0 3px 4px; font-size: 30px; }

/* Definitions to learn */
.defs { display: flex; flex-direction: column; gap: 44px; padding-right: 10px; }
.def { position: relative; }
.def p { font-size: 50px; line-height: 1.3; font-weight: 500; }
.def.small p { font-size: 40px; }
.def .sticker { position: absolute; right: 36px; top: -30px; }

/* Video slot: a place for one of Deyne's short practical videos */
.video-slot {
  position: relative;
  height: 100%;
  border: 4px dashed var(--orange);
  border-radius: 24px;
  background: var(--peach);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 120px;
  text-align: center;
}
.video-slot p { margin: 0; font-size: 34px; line-height: 1.4; color: var(--ink); max-width: 1200px; }
.video-slot .note { font-size: 28px; }
.video-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 20px; }
/* A filled slot holds a real video file: no dashed border or peach, and the video
   keeps its own shape, as wide as the slot and never taller (7 November 2026) */
.video-slot.filled { border: 0; background: none; padding: 0; }
.video-slot video { display: block; width: 100%; height: auto; max-height: 100%; border-radius: 20px; background: var(--ink); }

/* In the lab: a practical drawn as our own picture (9 November 2026). The picture and its
   results table sit on the left, the method on the right. Each step arrives on a click, with
   its number (.lab-badge) on the picture. Each deck draws and animates its own apparatus:
   never the same practical twice. --lab-h sets the picture's height */
.lab-grid { display: grid; grid-template-columns: 1040px minmax(0, 1fr); gap: 48px; align-items: start; }
.lab-left { display: flex; flex-direction: column; gap: 28px; }
.lab-pic { position: relative; width: 1040px; height: var(--lab-h, 470px); }
.lab-pic svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lab-right { display: flex; flex-direction: column; gap: 36px; }
.lab-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; counter-reset: lab; }
.lab-steps li { counter-increment: lab; position: relative; padding-left: 70px; font-size: 34px; line-height: 1.3; color: var(--ink); min-height: 48px; }
.lab-steps li::before { content: counter(lab); position: absolute; left: 0; top: -1px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--orange); color: #FFFFFF; font: 700 28px/1 var(--f-display); border: 3px solid var(--ink); box-sizing: border-box; }
.lab-badge circle { fill: var(--orange); stroke: var(--ink); stroke-width: 3; }
.lab-badge text { font: 700 28px var(--f-display); fill: #FFFFFF; }
/* The one safety line, in the title row */
.lab-safety { max-width: 400px; text-align: right; }
/* A results table on its side: one row of times, one of readings */
table.data.lab-row th { width: 250px; padding: 0 20px; text-align: left; border-bottom: 0; border-right: 3px solid var(--ink); font-size: 26px; }
table.data.lab-row tr + tr th, table.data.lab-row tr + tr td { border-top: 3px solid var(--ink); }
table.data.lab-row td { height: 62px; font-size: 32px; }
table.data.lab-row tr:first-child td { color: var(--muted); }

/* Kitchen demo introduction (9 November 2026): the sticker, an Optional extra label and what
   the demo reinforces in the top row; then three cards (good to know, you need, method) and
   the fair test strip. The prediction comes on the next slide, with .picks */
.kd-top { display: flex; align-items: center; gap: 22px; }
.opt-tag { display: inline-flex; align-items: center; height: 48px; padding: 0 20px; border-radius: 999px; border: 3px dashed var(--ink); background: var(--paper); font: 700 22px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); white-space: nowrap; }
.kd-why { font-size: 26px; color: var(--muted); white-space: nowrap; }
.kd-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; align-items: stretch; flex: none; }
.kd-cols .card { padding: 26px 30px 30px; }
.kd-list, .kd-steps { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.kd-list { list-style: none; padding: 0; }
.kd-list li { font-size: 34px; line-height: 1.3; color: var(--ink); padding-left: 30px; position: relative; }
.kd-list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--orange-hi)); border: 2px solid var(--ink); }
.kd-steps { padding-left: 46px; }
.kd-steps li { font-size: 34px; line-height: 1.3; color: var(--ink); padding-left: 6px; }
.kd-steps li::marker { font: 700 34px var(--f-display); color: var(--orange); }
/* "An adult does this", on any step with a knife, scissors, hot water or spirit */
.kd-adult { display: inline-block; margin-left: 8px; padding: 2px 12px; border-radius: 8px; background: var(--yellow); color: var(--ink); font: 700 24px var(--f-body); vertical-align: 3px; }
.kd-fair { display: flex; gap: 48px; align-items: baseline; background: var(--paper); border: 3px solid var(--ink); border-radius: 20px; box-shadow: 8px 8px 0 var(--ink); padding: 18px 32px; flex: none; }
.kd-fair p { margin: 0; font-size: 32px; line-height: 1.3; color: var(--ink); }

/* Section divider, such as Practise */
.divider { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; position: relative; z-index: 2; }
.divider .mega { font-size: 180px; }

/* Homework card on a dark slide */
.hw { background: var(--paper); border: 3px solid var(--yellow); border-radius: 24px; box-shadow: 10px 10px 0 var(--yellow); padding: 30px 40px; max-width: 1100px; }
.hw small { display: block; font: 700 22px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.hw p { margin: 0; font-size: 36px; line-height: 1.35; color: var(--ink); }

/* Tasks: a numbered list of what to do */
.tasks { margin: 0; padding-left: 48px; display: flex; flex-direction: column; gap: 14px; }
.tasks li { font-size: 32px; line-height: 1.35; color: var(--ink); padding-left: 8px; }
.tasks li::marker { font: 700 32px var(--f-display); color: var(--orange); }

/* Tables */
table.data { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 34px; font-variant-numeric: tabular-nums; border: 3px solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 8px 8px 0 var(--ink); background: var(--paper); }
.data th { background: var(--peach); font: 700 28px/1.2 var(--f-body); color: var(--ink); padding: 16px 12px; text-align: center; border-bottom: 3px solid var(--ink); }
.data td { padding: 0 12px; height: 66px; text-align: center; color: var(--ink); border-top: 1px solid var(--line); }
.data tbody tr:first-child td { border-top: 0; }
.data th + th, .data td + td { border-left: 1px solid var(--line); }
.data td.blank { background: repeating-linear-gradient(135deg, #FFFFFF 0 10px, #FAF6F1 10px 20px); }
/* A table of words rather than numbers: left-aligned, like the IELTS and IB decks use */
table.data.left td, table.data.left th { text-align: left; padding-left: 28px; padding-right: 20px; }
.data .rv { display: inline-block; font-weight: 700; color: var(--s-practise); }
.data tr.flash td { animation: kit-rowflash 1.1s ease both; animation-delay: calc(var(--i, 0) * 220ms + 100ms); }
@keyframes kit-rowflash { 0%, 100% { background: transparent; } 30% { background: var(--yellow); } }

/* ---------- 9. Diagrams and widgets ---------- */

/* Colour roles, the same on every slide */
.enz { fill: var(--sky-2); stroke: var(--blue); stroke-width: 6; stroke-linejoin: round; }
.sub { fill: var(--peach-2); stroke: var(--orange); stroke-width: 6; stroke-linejoin: round; }
.prod { fill: var(--yellow); stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.other { fill: #E7E0F2; stroke: var(--s-wrap); stroke-width: 6; stroke-linejoin: round; }
.shadow { fill: var(--ink); }
.shadow-y { fill: var(--yellow); }
.svg-label { font: 600 30px var(--f-body); fill: var(--ink-2); }
.svg-label.b { font-weight: 700; fill: var(--ink); }
.leader { stroke: var(--ink-2); stroke-width: 3; }
.leader-dot { fill: var(--ink-2); }

/* Graphs: drawn by SlideKit.axes in slide-kit.js */
.axis { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tick { stroke: var(--ink); stroke-width: 3; }
.tick-l { font: 500 26px var(--f-body); fill: var(--muted); }
.tick-l.hi { fill: var(--orange); font-weight: 700; }
.ax-title { font: 600 28px var(--f-body); fill: var(--ink-2); }
.gridl { stroke: var(--line); stroke-width: 2; }
.g-line { fill: none; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke: var(--c, var(--blue)); }
.g-area { fill: var(--c, var(--sky-2)); fill-opacity: .8; }
.g-guide { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 8 8; }
.g-dot { fill: var(--yellow); stroke: var(--ink); stroke-width: 5; }
.g-tag rect { fill: var(--ink); }
.g-tag text { font: 700 26px var(--f-body); fill: var(--yellow); letter-spacing: .04em; }
.pt { fill: var(--yellow); stroke: var(--ink); stroke-width: 4; }
.pt.shown { transition-delay: calc(var(--i) * 220ms + 100ms); }
.fit-line { fill: none; stroke: var(--s-practise); stroke-width: 7; stroke-linecap: round; }

/* Enzyme fit, the lock and key: steps 1 fits, 2 reacts, 3 ready again */
.fit-stage { display: flex; flex-direction: column; gap: 12px; }
.fit-svg { width: 1680px; height: 560px; overflow: visible; display: block; }
.fit-foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.fit-foot p { margin: 0; font-size: 36px; color: var(--ink); }
.seq { display: flex; gap: 14px; list-style: none; margin: 0 0 6px; padding: 0; }
.seq li { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 8px; border-radius: 999px; border: 3px solid var(--line); font: 700 26px var(--f-body); color: var(--muted); transition: all .4s var(--ease-out); }
.seq b { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--line); color: var(--muted); font: 700 22px var(--f-display); transition: all .4s; }
.slide.at-1 .seq .p1, .slide.at-2 .seq .p2, .slide.at-3 .seq .p3 { border-color: var(--ink); color: var(--ink); background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.slide.at-1 .seq .p1 b, .slide.at-2 .seq .p2 b, .slide.at-3 .seq .p3 b { background: var(--ink); color: var(--yellow); }
.fit-svg .lbl { transition: opacity .4s; }
.sub-pos, .half-l, .half-r, .flash, .sub-new { transform-box: fill-box; transform-origin: center; }
.sub-pos { transform: translate(-520px, -130px) rotate(-14deg); transition: transform 1s var(--ease-spring); }
.slide.at-1 .sub-pos { transform: none; }
.slide.is-active .sub-bob { animation: kit-bob 2.4s ease-in-out infinite; }
.slide.at-1 .sub-pos .sub-bob { animation: none; }
@keyframes kit-bob { 50% { transform: translateY(-14px); } }
.sub-whole .shadow { transition: opacity .3s .6s; }
.slide.at-1 .sub-whole .shadow { opacity: 0; }
.slide.at-2 .sub-whole { opacity: 0; }
.halves { opacity: 0; transition: opacity .2s; }
.slide.at-2 .halves { opacity: 1; transition: opacity .1s; }
.slide.at-3 .halves { opacity: 0; transition: opacity .9s .2s; }
.half-l, .half-r { transition: transform 1.3s var(--ease-out); }
.slide.at-2 .half-l { transform: translate(-400px, -120px) rotate(-16deg); }
.slide.at-2 .half-r { transform: translate(400px, -120px) rotate(16deg); }
.slide.at-1 .lbl-sub, .slide.at-1 .lbl-site, .slide.at-1 .lbl-enz { opacity: 0; }
.lbl-complex, .lbl-unch { opacity: 0; }
.slide.at-1 .lbl-complex { opacity: 1; }
.slide.at-2 .lbl-complex { opacity: 0; }
.slide.at-3 .lbl-unch { opacity: 1; }
.sub-new { opacity: 0; transition: opacity .6s .5s; }
.slide.at-3 .sub-new { opacity: 1; }
.flash { fill: none; stroke: var(--yellow); stroke-width: 10; opacity: 0; }
.slide.at-1 .flash.f1 { animation: kit-flash .9s ease-out .7s both; }
.slide.at-2 .flash.f2 { animation: kit-flash .9s ease-out both; }
@keyframes kit-flash { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.4); } }

/* Title art: the enzyme on the title slide, docking and splitting on a loop */
.t-sub, .t-hl, .t-hr, .t-flash { transform-box: fill-box; transform-origin: center; }
.t-hl, .t-hr { opacity: 0; }
.t-flash { fill: none; stroke: var(--yellow); stroke-width: 8; opacity: 0; }
.slide.is-active .t-sub { animation: kit-t-sub 9s var(--ease-out) infinite; }
.slide.is-active .t-whole { animation: kit-t-whole 9s linear infinite; }
.slide.is-active .t-hl { animation: kit-t-hl 9s var(--ease-out) infinite; }
.slide.is-active .t-hr { animation: kit-t-hr 9s var(--ease-out) infinite; }
.slide.is-active .t-flash { animation: kit-t-flash 9s ease-out infinite; }
@keyframes kit-t-sub { 0% { transform: translate(-260px, -300px) rotate(-18deg); opacity: 0; } 8% { opacity: 1; } 34% { transform: none; } 100% { transform: none; opacity: 1; } }
@keyframes kit-t-whole { 0%, 51.9% { opacity: 1; } 52%, 100% { opacity: 0; } }
@keyframes kit-t-hl { 0%, 51.9% { opacity: 0; transform: none; } 52% { opacity: 1; transform: none; } 80% { opacity: 1; } 94%, 100% { opacity: 0; transform: translate(-300px, -250px) rotate(-24deg); } }
@keyframes kit-t-hr { 0%, 51.9% { opacity: 0; transform: none; } 52% { opacity: 1; transform: none; } 80% { opacity: 1; } 94%, 100% { opacity: 0; transform: translate(300px, -230px) rotate(22deg); } }
@keyframes kit-t-flash { 0%, 33% { opacity: 0; transform: scale(.4); } 36% { opacity: 1; } 50%, 100% { opacity: 0; transform: scale(2.4); } }
.glow { fill: none; stroke: var(--yellow); stroke-width: 6; transform-box: fill-box; transform-origin: center; opacity: 0; }
.slide.is-active .glow { animation: kit-glow 3s ease-out infinite; }
@keyframes kit-glow { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.8); } }

/* Thermometer */
.thermo { width: 300px; height: 700px; overflow: visible; }
.th-glass { fill: var(--paper); stroke: var(--ink); stroke-width: 6; }
.th-liq { fill: var(--orange-hi); }
.th-col { transform-box: fill-box; transform-origin: 50% 100%; }
.slide.is-active .th-col { animation: kit-fill-up 1.8s var(--ease-out) .3s both; }
@keyframes kit-fill-up { from { transform: scaleY(0); } to { transform: none; } }
.th-tick { stroke: var(--ink); stroke-width: 3; }
.th-l { font: 600 24px var(--f-body); fill: var(--muted); }
.th-tag { transform-box: fill-box; transform-origin: left center; }
.th-tag text { font: 700 34px var(--f-display); fill: var(--ink); }
.slide.is-active .th-tag { animation: kit-pop .6s var(--ease-spring) 1.8s both; }

/* Concept map: boxes placed with left, top and width; slide-widgets.js draws the links */
.map { position: relative; }
.map svg.links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.link { fill: none; stroke: var(--c); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.slide.is-active .link { animation: kit-draw .7s var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + 300ms); }
.map-h { position: absolute; top: 0; margin: 0; font: 700 22px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.node { position: absolute; padding: 16px 24px; background: var(--paper); border: 4px solid var(--c, var(--blue)); border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
.node b { display: block; font: 700 33px/1.15 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.node span { display: block; font-size: 30px; line-height: 1.25; color: var(--ink-2); margin-top: 4px; }
.node.centre { background: var(--orange); border-color: var(--ink); text-align: center; box-shadow: 10px 10px 0 var(--ink); display: flex; flex-direction: column; justify-content: center; }
.node.centre b { color: #FFFFFF; font-size: 52px; }
.node.centre span { color: #FFE9DC; }
.slide.is-active .node { animation: kit-pop .6s var(--ease-spring) both; animation-delay: calc(var(--i) * 140ms + 500ms); }
.slide.is-active .node.centre { animation-delay: .1s; }

/* True or false: slide-widgets.js adds the buttons */
.tf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: tf; }
.tf { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 28px; align-items: center; padding: 8px 22px 8px 16px; border-radius: 22px; border: 3px solid transparent; transition: background .35s, border-color .35s; counter-increment: tf; }
.tf::before { content: counter(tf); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 700 28px var(--f-display); background: var(--ink); color: var(--star); }
.tf-q { margin: 0; font-size: 36px; line-height: 1.25; color: var(--ink); font-weight: 500; }
.tf-btns { display: flex; gap: 16px; }
.tf-b { min-width: 170px; height: 58px; padding: 0 20px; border-radius: 14px; border: 3px solid var(--ink); background: var(--paper); font: 700 30px var(--f-body); color: var(--ink); box-shadow: 5px 5px 0 var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: transform .15s, box-shadow .15s, background .25s, color .25s, opacity .25s; }
.tf-b:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.tf-b:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); }
.tf-b svg { width: 30px; height: 30px; display: none; }
.tf-list.three .tf-btns { gap: 12px; }
/* Listening player */
.listen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.listen .pill-btn svg { width: 24px; height: 24px; }
.listen.is-playing .listen-play { background: var(--s-practise); }
.listen-note { font-size: 26px; color: var(--muted); }
.tf-list.three .tf-b { min-width: 0; padding: 0 16px; font-size: 26px; }
.tf-why { grid-column: 2 / 4; margin: 0; font-size: 30px; line-height: 1.25; color: var(--ink-2); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease-out), opacity .4s, margin .4s; }
.tf.revealed { background: var(--sky); border-color: var(--ink); }
.tf.revealed .tf-why { max-height: 100px; opacity: 1; margin-top: 6px; }
.tf.revealed .tf-b.is-answer { background: var(--s-practise); color: #FFFFFF; }
.tf.revealed .tf-b.is-answer .i-ok { display: block; }
.tf.revealed .tf-b.is-picked:not(.is-answer) { background: var(--orange); color: #FFFFFF; }
.tf.revealed .tf-b.is-picked:not(.is-answer) .i-no { display: block; }
.tf.revealed .tf-b:not(.is-answer):not(.is-picked) { opacity: .45; }
.tf-score { margin: 0; font-size: 32px; color: var(--muted); min-height: 44px; }

/* Prediction cards for kitchen demos: tap one, then the result arrives on the next click */
.picks { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 56px; }
.pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 20px 24px; border-radius: 24px; border: 3px solid var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .25s; text-align: center; }
.pick:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ink); }
.pick[aria-pressed="true"] { background: var(--cream); box-shadow: 8px 8px 0 var(--orange-hi); }
.pick-letter { position: absolute; left: 20px; top: 20px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--star); font: 700 32px var(--f-display); }
.pick-mine { position: absolute; left: 92px; top: 32px; font: 700 20px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--orange); opacity: 0; transition: opacity .2s; }
.pick[aria-pressed="true"] .pick-mine { opacity: 1; }
.pick-cap { font: 700 34px var(--f-display); color: var(--ink); }
.result { position: absolute; right: 18px; top: 20px; height: 50px; padding: 0 18px; border-radius: 999px; display: inline-flex; align-items: center; font: 700 24px var(--f-body); color: #FFFFFF; border: 3px solid var(--ink); background: var(--s-practise); }
.result.bad { background: var(--orange); }
.stack { display: grid; }
.stack > * { grid-area: 1 / 1; }
.predict-fb { margin: 0; font-size: 34px; color: var(--ink); align-self: center; transition: opacity .3s; }

/* Jelly pots for the pineapple demo */
.pot { width: 260px; height: 304px; overflow: visible; }
.pot-bg { fill: var(--sky); }
.pot-line { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.jelly-set { fill: var(--pink); }
.jelly-shine { fill: none; stroke: #FFE4E7; stroke-width: 8; stroke-linecap: round; opacity: .8; }
.jelly-runny { fill: #F8C9CE; opacity: 0; transition: opacity 1s .3s; }
.pineapple { fill: #F7C948; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; transition: transform 1.6s cubic-bezier(.5, 0, .75, 0) .4s; }
.pot-in { transform-box: fill-box; transform-origin: 50% 100%; }
.jelly-set, .jelly-shine { transition: opacity 1s .3s; }
/* When the result arrives: the runny pot loses its set jelly and the fruit sinks; the set pot wobbles */
.picks.revealed .goes-runny .jelly-set, .picks.revealed .goes-runny .jelly-shine { opacity: 0; }
.picks.revealed .goes-runny .jelly-runny { opacity: 1; }
.picks.revealed .goes-runny .pineapple { transform: translateY(118px); }
.slide.is-active .picks.revealed .stays-set .pot-in { animation: kit-wobble 1.4s ease-out .3s both; }
@keyframes kit-wobble { 0%, 100% { transform: none; } 20% { transform: skewX(5deg); } 40% { transform: skewX(-4deg); } 60% { transform: skewX(2.5deg); } 80% { transform: skewX(-1deg); } }

/* Flip cards for key words: slide-widgets.js builds the two faces */
.flips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 30px; padding: 6px 10px 0 0; }
.flip { position: relative; height: 170px; border: 0; padding: 0; background: none; perspective: 1400px; text-align: left; }
.flip-in { position: absolute; inset: 0; transition: transform .75s var(--ease-out); transform-style: preserve-3d; }
.flips.all .flip-in { transition-delay: calc(var(--i) * 70ms); }
.flip.flipped .flip-in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 18px 26px; border: 3px solid var(--ink); border-radius: 20px; box-shadow: 7px 7px 0 var(--ink); background: var(--paper); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.face.back { transform: rotateY(180deg); background: var(--peach); }
.face small { font: 700 18px var(--f-body); letter-spacing: .16em; color: var(--muted); }
.face.front strong { font: 700 38px/1.1 var(--f-display); color: var(--ink); letter-spacing: -.01em; }
.face.back strong { font: 600 36px/1.15 var(--f-body); color: var(--orange); }
.flip:hover .face.front { background: var(--sky); }

/* Your turn: a task card with word chips, and a timer */
.turn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: start; }
.task-q { margin: 0; font: 700 54px/1.12 var(--f-display); letter-spacing: -.02em; color: var(--ink); }
.task-help { margin: 16px 0; font-size: 32px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 16px; }
.word-chip { height: 66px; padding: 0 26px; border-radius: 999px; border: 3px solid var(--ink); background: var(--paper); font: 600 32px var(--f-body); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); display: inline-flex; align-items: center; gap: 10px; transition: background .2s, color .2s; }
.word-chip svg { width: 28px; height: 28px; display: none; }
.word-chip[aria-pressed="true"] { background: var(--s-practise); color: #FFFFFF; }
.word-chip[aria-pressed="true"] svg { display: block; }
.model { margin-top: 34px; }
.slide.at-1 .model .mark { background-size: 100% 52%; transition-delay: .6s; }
.timer { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.timer svg { width: 400px; height: 400px; display: block; }
.timer.small svg { width: 300px; height: 300px; }
.ring-bg { fill: var(--paper); stroke: #EFE3CC; stroke-width: 30; }
.ring-fg { fill: none; stroke: var(--s-practise); stroke-width: 30; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset .3s linear, stroke .3s; }
.ring-edge { fill: none; stroke: var(--ink); stroke-width: 4; }
.timer-text { font: 700 104px var(--f-display); fill: var(--ink); font-variant-numeric: tabular-nums; }
.timer.done .ring-fg { stroke: var(--orange); }
.slide.is-active .timer.done .timer-text { animation: kit-breathe 1s ease-in-out infinite; }
.timer-btns { display: flex; gap: 14px; }
.bg-dark .ring-bg { fill: #2A1810; stroke: #3D2318; }
.bg-dark .pill-btn.dark { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: none; }
.bg-dark .pill-btn.dark:hover { background: #FFE58A; }
.bg-dark .ring-edge { stroke: var(--yellow); }
.bg-dark .timer-text { fill: var(--star); }

/* Confidence check: got it, nearly or not yet */
.confidence { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.confidence li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.confidence p { margin: 0; font-size: 32px; line-height: 1.3; color: var(--star); }
.conf-btns { display: flex; gap: 10px; }
.conf-btns button { height: 54px; padding: 0 18px; border-radius: 999px; border: 3px solid var(--star-3); background: transparent; color: var(--star-2); font: 700 22px var(--f-body); }
.conf-btns button[aria-pressed="true"][data-v="got"] { background: var(--s-practise); border-color: var(--yellow); color: #FFFFFF; }
.conf-btns button[aria-pressed="true"][data-v="nearly"] { background: var(--yellow); border-color: var(--yellow); color: var(--ink); }
.conf-btns button[aria-pressed="true"][data-v="not"] { background: var(--orange); border-color: var(--yellow); color: #FFFFFF; }

/* The temperature lab: slide-widgets.js fills it */
.lab { display: grid; grid-template-columns: 1040px minmax(0, 1fr); gap: 48px; align-items: start; }
.lab-view { width: 1040px; height: 666px; border: 3px solid var(--ink); border-radius: 24px; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; background: var(--sky); }
.lab-view canvas { display: block; width: 1034px; height: 660px; }
.lab-panel { display: flex; flex-direction: column; gap: 16px; }
.lab-read { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.temp-out { font: 700 112px/1 var(--f-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.zone { display: inline-flex; align-items: center; height: 52px; padding: 0 20px; border-radius: 999px; background: var(--zc, var(--s-practise)); color: #FFFFFF; font: 700 22px var(--f-body); letter-spacing: .1em; text-transform: uppercase; border: 3px solid var(--ink); white-space: nowrap; transition: background .3s; }
.lab input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 60px; background: transparent; margin: 0; cursor: pointer; }
.lab input[type=range]::-webkit-slider-runnable-track { height: 24px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(90deg, #4A9FD4, #DCEBF5 35%, #FADB67 58%, #CD5A24); }
.lab input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 54px; height: 54px; margin-top: -18px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.lab input[type=range]::-moz-range-track { height: 18px; border-radius: 12px; border: 3px solid var(--ink); background: linear-gradient(90deg, #4A9FD4, #DCEBF5 35%, #FADB67 58%, #CD5A24); }
.lab input[type=range]::-moz-range-thumb { width: 48px; height: 48px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.lab input[type=range]:focus-visible { outline: 4px solid var(--blue); outline-offset: 6px; border-radius: 12px; }
.presets { display: flex; gap: 12px; flex-wrap: wrap; }
.presets .alt { margin-left: auto; background: var(--sky); }
.presets .alt.nudge { background: var(--yellow); animation: kit-nudge 1.2s ease-in-out infinite; }
@keyframes kit-nudge { 50% { transform: translateY(-4px); } }
.zone-text { margin: 0; font-size: 32px; line-height: 1.35; color: var(--ink); min-height: 128px; }
.mini { width: 100%; height: auto; display: block; }
.mini .tick-l { font-size: 22px; }
.mini-curve { fill: none; stroke: var(--ink-2); stroke-width: 4; stroke-linecap: round; }
.mini-opt { stroke: var(--orange); stroke-width: 3; stroke-dasharray: 6 6; }
.mini-dot { fill: var(--yellow); stroke: var(--ink); stroke-width: 4; transition: cx .25s, cy .25s; }

/* ---------- 10. Reduced motion and print ---------- */
/* Anyone whose device asks for less motion sees each final state at once */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .title-art *, .wrap-art *, .motes i, .press, .sub-bob { animation: none !important; }
}
/* Printing gives one slide per page with every build shown */
@media print {
  @page { size: 1920px 1080px; margin: 0; }
  html, body { height: auto; overflow: visible; background: #FFFFFF; display: block; }
  .kit-bar { display: none; }
  .kit-viewport { padding: 0; }
  .kit-fit { height: auto; }
  .kit-deck { position: static; transform: none !important; width: 1920px; height: auto; box-shadow: none; border-radius: 0; overflow: visible; }
  .slide { position: relative; visibility: visible !important; opacity: 1 !important; transform: none !important; width: 1920px; height: 1080px; break-after: page; page-break-after: always; }
  [data-build] { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .mark { background-size: 100% 52% !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}