/* Lesson video player. Every rule is scoped to the player (.lesson-player, or
   :where(.lesson-player) in front, which scopes without adding specificity), and page-only
   rules sit under body.tutorial-page (or .tutorial-embed / .tutorial-render), so loading this
   sheet in the Lab changes nothing outside the player.
   Only the frame lives here: the controls under it and the page around it are the site's, in
   styles.css ("Lesson player"), on theme.css's roles. The frame itself (.lesson-frame) has one
   look of its own in every theme and every mode: a warm dark room, sticker cards with a dark edge and a hard shadow, one
   loud colour (the site's lime; sky is the second series), its own two fonts and icons. Big questions are told apart by
   their icon and number, apps by their icon and written name. What a person previews is what a
   poster or a recording shows. No visible label is smaller than 12px at any width. */
/* The frame's two fonts are declared once, for the site and the frame, in /field-study/fonts/fonts.css. */

.lesson-player { min-width: 0; }
.lesson-player *, .lesson-player *::before, .lesson-player *::after { box-sizing: border-box; }
/* Every frame is a pure function of time (a recording is taken frame by frame): no CSS
   transitions or animations inside the picture, whatever the page around it sets. */
:where(.lesson-player) .lesson-frame, :where(.lesson-player) .lesson-frame *, :where(.lesson-player) .lesson-frame *::before, :where(.lesson-player) .lesson-frame *::after { transition: none !important; animation: none !important; }

/* ---- The frame's look: tokens ---------------------------------------------------------------
   One loud colour, the same as the course website's (theme.css): --tone (lime) is the coloured word,
   the strip, the main series, the number; --app-tone (lime) the strip's app badge and the move card;
   --second (sky) the second series and the row a caption talks about. The data-tone and data-app
   attributes stay in the markup (scenes.mjs, arc.json) and no longer change a colour: the icon and the
   number tell the eight questions apart, the icon and the written name the apps. Bright fills
   carry dark text (--ink); cream text never sits on a loud fill. The room is never darker than
   --night-900 and cards are --night-700, so the dark edge reads. Edges and shadows are sized from
   the frame, so they survive a small screen. --lp-tilt (1, or 0 to measure boxes level) scales
   every resting tilt. */
:where(.lesson-player) .lesson-frame {
  --night-950: #0c0520; --night-900: #12082a; --night-700: #26174f; --night-600: #382568;
  --cream: #fff6e5; --cream-dim: #cdbfe3; --cream-faint: #9587b3; --ink: #07030f;
  --lime: #c6ff3d; --sky: #3df0ff; --danger: #ff5d5d;
  --tone: var(--lime); --app-tone: var(--lime); --second: var(--sky);
  --lp-stripe: repeating-linear-gradient(135deg, var(--lime) 0 8px, var(--cream) 8px 16px);
  --ol: clamp(3px, 0.4cqi, 5px); --ol-thin: clamp(2px, 0.26cqi, 3.5px);
  --pop: clamp(4px, 0.55cqi, 7px); --pop-lg: clamp(6px, 0.95cqi, 12px);
  --r: clamp(12px, 1.7cqi, 22px); --r-lg: clamp(18px, 2.8cqi, 36px);
  --display: 'Bricolage Grotesque', ui-rounded, 'Avenir Next', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --lp-land: #382568; --lp-blank-hi: rgba(61, 240, 255, 0.62); --lp-added: #3df0ff;
  --lp-tilt: 1;
  --lp-strip: clamp(44px, 7cqi, 90px);
  container: lesson / inline-size;
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--night-900);
  color: var(--cream);
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}
:where(.lesson-player .lesson-frame p) { margin: 0; }

/* ---- Frame: a 16:9 picture with the caption band under it; tall on a phone ---- */
:where(.lesson-player) .lesson-stage {
  position: relative; aspect-ratio: 16 / 7.2; overflow: hidden;
  background:
    radial-gradient(75% 95% at 88% -12%, rgba(56, 37, 104, 0.85), transparent 62%),
    radial-gradient(60% 95% at -8% 30%, rgba(61, 240, 255, 0.11), transparent 60%),
    var(--night-900);
}
:where(.lesson-player) .lesson-caption {
  display: flex; align-items: center; justify-content: center;
  margin: 0; aspect-ratio: 16 / 1.8; padding: 0 4cqi;
  background: var(--night-950); border-top: var(--ol) solid var(--ink);
  font-size: clamp(18px, 3.5cqi, 46px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; text-align: center;
  text-wrap: balance; overflow-wrap: anywhere;
}
:where(.lesson-player) .lesson-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The strip on top of every scene: the app's badge, the big question and the lesson's place in it,
   and one dot per scene. One line, never wrapped; every scene starts below it. On the first scene
   its words are left off (the card under it says the question). */
:where(.lesson-player) .lesson-strip {
  position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: var(--lp-strip);
  display: flex; align-items: center; gap: 1.2cqi; padding: 0 2.4cqi;
  font-family: var(--mono); font-size: clamp(12px, 1.75cqi, 22px); font-weight: 700; letter-spacing: 0.12em; color: var(--tone);
}
:where(.lesson-player) .lesson-strip .lv-badge { --size: clamp(30px, 4.6cqi, 58px); }
:where(.lesson-player) .lesson-strip-words { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: clip; text-transform: uppercase; }
:where(.lesson-player) .lesson-strip-first .lesson-strip-words { visibility: hidden; }
:where(.lesson-player) .lesson-strip-dots { flex: 0 0 auto; display: flex; align-items: center; gap: 0.7cqi; margin-left: auto; }
:where(.lesson-player) .lesson-strip-dot { width: clamp(8px, 1.3cqi, 16px); height: clamp(8px, 1.3cqi, 16px); border: var(--ol-thin) solid var(--ink); border-radius: 50%; background: var(--night-600); }
:where(.lesson-player) .lesson-strip-dot.is-on { background: var(--tone); }
:where(.lesson-player) .lesson-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(var(--lp-strip) + 0.6cqi) 5cqi 3cqi;
  font-size: clamp(12px, 1.9cqi, 26px);
  line-height: 1.22;
  will-change: opacity;
}
/* A scene: an optional head row of small labels, the picture, an optional line under it. */
:where(.lesson-player) .lp-head { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.6em; margin-bottom: 0.7em; }
/* (safe: a picture taller than its room starts at the top and never runs up under the head row.) */
:where(.lesson-player) .lp-body { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; justify-content: safe center; }
:where(.lesson-player) .lp-note { flex: 0 0 auto; margin: 0.6em 0 0; font-size: clamp(13px, 2cqi, 26px); font-weight: 700; color: var(--cream-dim); overflow-wrap: anywhere; }
:where(.lesson-player) .lp-center { align-items: center; text-align: center; }
/* The small labels. "Example: ..." is the striped chip on the first card; another app's data,
   "How it works" and a note are quiet chips at the top left of a picture. */
:where(.lesson-player) .lp-chip {
  display: inline-block; padding: 0.22em 0.75em; border: var(--ol-thin) solid var(--ink); border-radius: 999px;
  background: var(--night-600); color: var(--cream);
  font-size: clamp(12px, 1.7cqi, 22px); font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase;
}
:where(.lesson-player) .lp-chip-how { background: var(--tone); color: var(--ink); }
:where(.lesson-player) .lp-chip-example { background: var(--lp-stripe); color: var(--ink); }
:where(.lesson-player) .lp-chips .lp-chip { background: var(--tone); color: var(--ink); }

/* ---- Icons and badges (icons.mjs) ---- */
:where(.lesson-player) .lv-icon { flex: none; display: block; overflow: visible; }
:where(.lesson-player) .lv-icon path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
:where(.lesson-player) .lv-icon .lv-ink { stroke: var(--ink); }
:where(.lesson-player) .lv-icon .lv-tube-ink { stroke-width: 9.5; }
:where(.lesson-player) .lv-icon .lv-core { stroke: var(--tone); stroke-width: 5; }
:where(.lesson-player) .lv-icon .lv-line { stroke-width: 3; }
:where(.lesson-player) .lv-icon .lv-shape { fill: var(--tone); stroke: var(--ink); stroke-width: 3; }
:where(.lesson-player) .lv-icon .lv-paper { fill: var(--cream); stroke: var(--ink); stroke-width: 3; }
:where(.lesson-player) .lv-icon .lv-spark { stroke: var(--cream); stroke-width: 2.6; }
/* Two shapes, so an app is never taken for a question: an app is a rounded tile in the app's
   colour, a question a round sticker in the question's. On a badge the tile carries the colour,
   so the drawing turns to paper and ink. */
:where(.lesson-player) .lv-badge {
  --size: clamp(44px, 8.6cqi, 110px);
  flex: none; display: inline-grid; place-items: center; width: var(--size); height: var(--size);
  border: var(--ol) solid var(--ink); border-radius: 26%; background: var(--app-tone);
  box-shadow: var(--pop) var(--pop) 0 var(--ink); transform: rotate(calc(var(--lp-tilt) * -6deg));
}
:where(.lesson-player) .lv-badge.lv-idea { border-radius: 50%; background: var(--tone); transform: rotate(calc(var(--lp-tilt) * 5deg)); }
:where(.lesson-player) .lv-badge .lv-icon { width: 70%; height: 70%; }
:where(.lesson-player) .lv-badge .lv-shape { fill: var(--cream); }
:where(.lesson-player) .lv-badge .lv-core { stroke: var(--cream); }
:where(.lesson-player) .lv-badge .lv-paper { fill: var(--night-700); }
:where(.lesson-player) .lv-badge .lv-spark { stroke: var(--ink); }
@container lesson (max-width: 520px) {
  /* (A container cannot restyle itself from its own query: the stage carries the phone's strip height.) */
  :where(.lesson-player) .lesson-stage { --lp-strip: 42px; aspect-ratio: 4 / 4.4; }
  :where(.lesson-player) .lesson-caption { aspect-ratio: auto; min-height: 3.5em; padding: 0.5em 0.8em; font-size: 19px; }
  :where(.lesson-player) .lesson-scene { padding: calc(var(--lp-strip) + 4px) 14px 12px; font-size: 13px; }
  /* The longest question ("Where do people get stuck?") fits one line at 360: tighter letters and dots. */
  :where(.lesson-player) .lesson-strip { padding: 0 12px; gap: 8px; letter-spacing: 0.02em; }
  :where(.lesson-player) .lesson-strip-dots { gap: 3px; }
  /* The page or the sheet around the player says the place in words; here only the question fits. */
  :where(.lesson-player) .lesson-strip-step { display: none; }
  :where(.lesson-player) .lesson-strip-dot { width: 6px; height: 6px; border-width: 1px; }
  :where(.lesson-player) .lp-head { margin-bottom: 0.45em; }
}
/* The narrowest frames (under the Lab's sheet on a small phone): the strip's letters close up, so
   the longest question still stands whole beside the dots. */
@container lesson (max-width: 340px) {
  :where(.lesson-player) .lesson-strip { padding: 0 10px; gap: 6px; letter-spacing: 0; }
  :where(.lesson-player) .lesson-strip .lv-badge { --size: 30px; }
  :where(.lesson-player) .lesson-strip-dots { gap: 2px; }
  :where(.lesson-player) .lesson-strip-dot { width: 5px; height: 5px; }
}

/* ---- question: the first card ---- */
/* Four things and no more: the question's round sticker hanging off the corner, the big question
   in its colour, the lesson's own question in the largest type (one word coloured) and the
   striped example chip. Rows sit well apart: a tilted line's box is taller than its ink. */
:where(.lesson-player) .lp-q {
  position: relative; display: grid; justify-items: start; gap: clamp(12px, 2.4cqi, 32px);
  width: min(100%, 78cqi); padding: 3cqi 4.4cqi 3.2cqi;
  background: var(--night-700); border: var(--ol) solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--ink);
  transform: rotate(calc(var(--lp-tilt) * -1.5deg)); text-align: left;
}
:where(.lesson-player) .lp-q-sticker { position: absolute; top: -2.6cqi; right: -2.2cqi; --size: clamp(48px, 9.5cqi, 122px); transform: rotate(calc(var(--lp-tilt) * 12deg)); }
:where(.lesson-player) .lp-q-big { margin-right: 8cqi; font-size: clamp(16px, 3cqi, 38px); font-weight: 800; line-height: 1.1; color: var(--tone); }
:where(.lesson-player) .lp-q-title { font-size: clamp(28px, 6.6cqi, 84px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
:where(.lesson-player) .lp-hl { color: var(--tone); text-shadow: 0.05em 0.05em 0 var(--ink); white-space: nowrap; }
/* A hyphenated word never breaks at its hyphen. */
:where(.lesson-player) .lp-nobr { white-space: nowrap; }
:where(.lesson-player) .lp-hl-wait { color: inherit; text-shadow: none; }
/* The path film's first card: a drawn box holding the entrance's own words, where a lesson has its example chip. */
:where(.lesson-player) .lp-q-box {
  min-width: min(100%, 15em); padding: 0.5em 0.9em; border: var(--ol-thin) dashed var(--cream-faint); border-radius: var(--r);
  background: var(--night-950); color: var(--cream-dim); font-size: clamp(13px, 2.1cqi, 27px); font-weight: 700;
}
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-q { width: calc(100% - 8px); padding: 16px 16px 16px; gap: 12px; }
  :where(.lesson-player) .lp-q-sticker { top: -20px; right: -8px; }
  :where(.lesson-player) .lp-q-big { margin-right: 44px; }
  :where(.lesson-player) .lp-q-title { font-size: 32px; }
}

/* ---- number: the big-number reveal ---- */
/* Nothing but the number or numbers, their units and labels, and one line. One value at full
   size; two side by side, the second in the second colour; three at the smaller size. */
:where(.lesson-player) .lp-number { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 0.5em clamp(16px, 5cqi, 64px); max-width: 100%; }
:where(.lesson-player) .lp-number-1 { --lp-num: clamp(64px, 17cqi, 218px); }
:where(.lesson-player) .lp-number-2 { --lp-num: clamp(56px, 12cqi, 154px); }
:where(.lesson-player) .lp-number-3 { --lp-num: clamp(44px, 9cqi, 116px); }
:where(.lesson-player) .lp-number-1:has(.lp-number-long) { --lp-num: clamp(56px, 13.5cqi, 172px); }
:where(.lesson-player) .lp-number-value { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.2cqi, 16px); min-width: 0; }
:where(.lesson-player) .lp-number-figure { display: flex; align-items: baseline; justify-content: center; gap: 0.5em; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
:where(.lesson-player) .lp-number-display {
  display: block; font-size: var(--lp-num); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 0.9; letter-spacing: -0.04em;
  color: var(--tone); -webkit-text-stroke: 0.03em var(--ink); paint-order: stroke fill; text-shadow: 0.045em 0.045em 0 var(--ink);
  transform: rotate(calc(var(--lp-tilt) * -3deg));
}
:where(.lesson-player) .lp-number-value:nth-child(2) .lp-number-display { color: var(--second); }
/* A unit wraps only between its words, never inside one ("teams" stays whole). */
:where(.lesson-player) .lp-number-unit { max-width: 8em; font-size: clamp(15px, 2.8cqi, 36px); font-weight: 800; line-height: 1.05; color: var(--cream-dim); text-align: left; white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; }
:where(.lesson-player) .lp-number-unit-short { white-space: nowrap; }
:where(.lesson-player) .lp-number-1 .lp-number-unit-short { font-size: calc(var(--lp-num) * 0.34); letter-spacing: -0.02em; }
:where(.lesson-player) .lp-number-unit-long { align-self: center; }
:where(.lesson-player) .lp-number-label { position: relative; z-index: 1; max-width: 15em; font-size: clamp(13px, 2.2cqi, 28px); font-weight: 700; color: var(--cream-dim); }
:where(.lesson-player) .lp-number-line { position: relative; z-index: 1; margin-top: clamp(10px, 2.6cqi, 34px); max-width: 27em; font-size: clamp(15px, 2.8cqi, 36px); font-weight: 800; line-height: 1.15; text-wrap: balance; }
:where(.lesson-player) .lp-number-line .lp-tag { font-size: max(12px, 0.7em); vertical-align: 0.15em; }
/* The one burst of a video: dots thrown from behind the number as it lands. */
:where(.lesson-player) .lp-burst { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
:where(.lesson-player) .lp-burst circle { stroke: var(--ink); stroke-width: 2; }
:where(.lesson-player) .lp-burst-0 { fill: var(--tone); }
:where(.lesson-player) .lp-burst-1 { fill: var(--second); }
:where(.lesson-player) .lp-burst-2 { fill: var(--cream); }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-number { flex-direction: column; align-items: center; gap: 12px; }
  :where(.lesson-player) .lp-number-1 { --lp-num: 96px; }
  :where(.lesson-player) .lp-number-2 { --lp-num: 58px; }
  :where(.lesson-player) .lp-number-3 { --lp-num: 46px; }
  :where(.lesson-player) .lp-number-1:has(.lp-number-long) { --lp-num: 60px; }
  :where(.lesson-player) .lp-number-2:has(.lp-number-long) { --lp-num: 46px; }
  :where(.lesson-player) .lp-number-value { gap: 2px; }
  :where(.lesson-player) .lp-number-unit { font-size: 15px; max-width: 7em; }
  :where(.lesson-player) .lp-number-1 .lp-number-unit-short { font-size: 28px; }
  :where(.lesson-player) .lp-number-label { font-size: 13px; }
  :where(.lesson-player) .lp-number-line { margin-top: 12px; font-size: 15px; }
}

/* ---- move: the end card (no button in it: the door is under the frame) ---- */
:where(.lesson-player) .lp-move {
  --tone: var(--app-tone);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4cqi;
  width: min(100%, 84cqi); padding: 3.2cqi 4.2cqi;
  background: var(--night-700); border: var(--ol) solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--ink);
  transform: rotate(calc(var(--lp-tilt) * 1deg)); text-align: left;
}
:where(.lesson-player) .lp-move-badge { --size: clamp(64px, 15cqi, 190px); transform: rotate(calc(var(--lp-tilt) * -7deg)); }
:where(.lesson-player) .lp-move-badge.lv-idea { transform: rotate(calc(var(--lp-tilt) * 7deg)); }
:where(.lesson-player) .lp-move-words { display: grid; gap: 1.4cqi; justify-items: start; min-width: 0; }
:where(.lesson-player) .lp-move-eyebrow { font-family: var(--mono); font-size: clamp(12px, 1.75cqi, 22px); font-weight: 700; letter-spacing: 0.12em; color: var(--cream-dim); }
:where(.lesson-player) .lp-move-app { color: var(--app-tone); }
:where(.lesson-player) .lp-move-title { font-size: clamp(22px, 4.8cqi, 62px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; text-wrap: balance; overflow-wrap: anywhere; }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-move { grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: start; width: calc(100% - 8px); padding: 18px 16px; }
  :where(.lesson-player) .lp-move-words { gap: 8px; }
  :where(.lesson-player) .lp-move-title { font-size: 27px; }
}

/* ---- path: the eight questions in order, then the apps (the path film) ---- */
/* The one place where all eight question colours are on screen together: they are the content. */
:where(.lesson-player) .lp-path { display: flex; flex-direction: column; justify-content: center; gap: clamp(12px, 2.6cqi, 34px); width: 100%; height: 100%; font-size: clamp(13px, 2.1cqi, 27px); }
:where(.lesson-player) .lp-path-questions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 2cqi, 26px); margin: 0; padding: 0; list-style: none; }
:where(.lesson-player) .lp-path-item {
  display: flex; align-items: center; gap: 0.7em; min-width: 0; padding: 0.55em 0.7em;
  background: var(--night-700); border: var(--ol) solid var(--ink); border-radius: var(--r); box-shadow: var(--pop) var(--pop) 0 var(--ink);
  font-weight: 800; line-height: 1.1;
}
:where(.lesson-player) .lp-path-item .lv-badge { --size: clamp(30px, 5.2cqi, 66px); }
:where(.lesson-player) .lp-path-words { display: flex; flex-direction: column; gap: 0.15em; min-width: 0; }
:where(.lesson-player) .lp-path-n { font-family: var(--mono); font-size: max(12px, 0.8em); letter-spacing: 0.08em; color: var(--tone); }
:where(.lesson-player) .lp-path-short { min-width: 0; overflow-wrap: anywhere; }
:where(.lesson-player) .lp-path-with-apps .lp-path-questions { display: flex; justify-content: center; gap: clamp(8px, 1.8cqi, 24px); }
:where(.lesson-player) .lp-path-with-apps .lp-path-item { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:where(.lesson-player) .lp-path-with-apps .lp-path-words { display: none; }
/* The apps the lessons open, one column each in one row, however many there are (five: IndustrialPM joined at question 8). */
:where(.lesson-player) .lp-path-apps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: clamp(10px, 1.8cqi, 24px); margin: 0; padding: 0; list-style: none; }
:where(.lesson-player) .lp-path-app {
  display: flex; flex-direction: column; align-items: center; gap: 0.6em; padding: 0.9em 0.5em 0.7em;
  background: var(--night-700); border: var(--ol) solid var(--ink); border-radius: var(--r); box-shadow: var(--pop) var(--pop) 0 var(--ink);
  font-size: 1.05em; font-weight: 800; text-align: center; min-width: 0; overflow-wrap: anywhere;
}
:where(.lesson-player) .lp-path-app .lv-badge { --size: clamp(40px, 8.6cqi, 110px); }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-path { font-size: 13px; gap: 10px; }
  :where(.lesson-player) .lp-path-questions { grid-template-columns: 1fr 1fr; gap: 7px 8px; }
  :where(.lesson-player) .lp-path-item { padding: 5px 6px; gap: 7px; border-radius: 10px; }
  :where(.lesson-player) .lp-path-words { flex-direction: row; align-items: baseline; gap: 0.4em; }
  :where(.lesson-player) .lp-path-with-apps .lp-path-questions { gap: 5px; }
  :where(.lesson-player) .lp-path-apps { grid-auto-flow: row; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* An odd one out (the fifth, IndustrialPM) takes the whole last line, so its name stays on one line. */
  :where(.lesson-player) .lp-path-app:last-child:nth-child(odd) { grid-column: 1 / -1; }
  :where(.lesson-player) .lp-path-app { flex-direction: row; justify-content: flex-start; padding: 8px 10px; gap: 10px; font-size: 14px; }
}

/* ---- card ---- */
/* A lone card takes at least half the stage on a wide frame: it is the whole picture. */
:where(.lesson-player) .lp-card {
  display: flex; flex-direction: column; gap: 0.6em;
  width: fit-content; min-width: min(100%, 20em); max-width: min(100%, 40em); padding: 1em 1.3em 1.1em;
  background: var(--night-700); border: var(--ol) solid var(--ink); border-radius: var(--r-lg);
  box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--ink);
  font-size: clamp(14px, 2.9cqi, 38px); text-align: left;
}
:where(.lesson-player) .lp-card-heading { font-family: var(--mono); font-size: max(12px, 0.62em); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tone); }
:where(.lesson-player) .lp-chips { display: flex; flex-wrap: wrap; gap: 0.4em; }
:where(.lesson-player) .lp-card-line { display: flex; flex-direction: column; gap: 0.1em; padding-left: 0.65em; border-left: 0.22em solid transparent; border-radius: 0.11em; }
:where(.lesson-player) .lp-card-label { font-family: var(--mono); font-size: max(12px, 0.58em); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }
:where(.lesson-player) .lp-card-text { font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
:where(.lesson-player) .lp-glow { padding: 0 0.12em; border-radius: 0.2em; }
:where(.lesson-player) .lp-glow-on { background: var(--tone); color: var(--ink); }
:where(.lesson-player) .lp-glow-was { color: var(--tone); }
:where(.lesson-player) .lp-mark-limit { border-left-color: var(--danger); }
:where(.lesson-player) .lp-mark-lit { border-left-color: var(--tone); }
:where(.lesson-player) .lp-mark-dim .lp-card-text { color: var(--cream-faint); }
/* A form's ticked box: the box with its dark edge, the tick drawing in over it. */
:where(.lesson-player) .lp-mark-tick { flex-direction: row; align-items: center; gap: 0.55em; padding-left: 0; border-left: 0; }
:where(.lesson-player) .lp-card-box { flex: 0 0 1.25em; height: 1.25em; padding: 0.12em; border: var(--ol) solid var(--ink); border-radius: 0.28em; background: var(--night-950); box-shadow: 0.08em 0.08em 0 var(--ink); }
:where(.lesson-player) .lp-mark-tick .lp-state path { stroke-width: 3.6; }
/* One short thing on the card: set large, a degree off level, so the stage is used. */
:where(.lesson-player) .lp-card-solo { max-width: min(100%, 22em); padding: 1.1em 1.4em 1.2em; font-size: clamp(18px, 3.7cqi, 48px); line-height: 1.12; transform: rotate(calc(var(--lp-tilt) * -1deg)); }
/* Two red lines on a card: each its own row, well apart, the card at least half the stage wide. */
:where(.lesson-player) .lp-card-solo:has(.lp-card-line + .lp-card-line) { gap: 0.75em; min-width: min(100%, 13em); }
:where(.lesson-player) .lp-card-solo .lp-chip { font-size: clamp(12px, 1.9cqi, 24px); }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-card { width: calc(100% - 8px); min-width: 0; font-size: 16px; padding: 0.85em 0.95em; }
  :where(.lesson-player) .lp-card-solo { font-size: 22px; padding: 0.9em 1em; }
}

/* ---- list ---- */
/* Rows are stickers. Tags are chips: Known mint, Guess sun, Missing red, each with dark text. */
:where(.lesson-player) .lp-list { display: flex; flex-direction: column; gap: 0.55em; width: 100%; font-size: clamp(12px, 2.05cqi, 27px); }
:where(.lesson-player) .lp-list-heading { display: flex; align-items: center; gap: 0.7em; font-size: 1.25em; font-weight: 800; }
:where(.lesson-player) .lp-list-heading .lv-badge { --size: 2em; }
:where(.lesson-player) .lp-list-tall { font-size: clamp(12px, 1.7cqi, 22px); gap: 0.4em; }
:where(.lesson-player) .lp-list-tall .lp-rows { gap: 0.4em 0.7em; }
:where(.lesson-player) .lp-list-tall .lp-row { padding: 0.26em 0.75em; }
:where(.lesson-player) .lp-list-taller { font-size: clamp(12px, 1.5cqi, 19px); gap: 0.3em; line-height: 1.12; }
:where(.lesson-player) .lp-list-taller .lp-rows { gap: 0.26em 0.7em; }
:where(.lesson-player) .lp-list-taller .lp-row { padding: 0.12em 0.75em; }
:where(.lesson-player) .lp-list-taller .lp-tag { padding: 0.06em 0.6em; }
:where(.lesson-player) .lp-address { display: flex; align-items: center; gap: 0.5em; padding: 0.45em 0.8em; border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: var(--night-950); }
:where(.lesson-player) .lp-address-dot { flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--tone); }
:where(.lesson-player) .lp-address-name { flex: none; font-family: var(--mono); font-size: max(12px, 0.8em); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tone); }
:where(.lesson-player) .lp-address-pill { height: 0.5em; border-radius: 999px; background: var(--night-600); }
:where(.lesson-player) .lp-w40 { width: 40%; } :where(.lesson-player) .lp-w20 { width: 20%; } :where(.lesson-player) .lp-w25 { width: 25%; }
:where(.lesson-player) .lp-rows { display: flex; flex-direction: column; gap: 0.5em 0.8em; padding: 0 var(--pop) var(--pop) 0; }
:where(.lesson-player) .lp-tiles .lp-rows { display: grid; grid-template-columns: 1fr 1fr; }
:where(.lesson-player) .lp-row {
  display: flex; align-items: center; gap: 0.7em; min-width: 0; padding: 0.42em 0.85em;
  background: var(--night-700); border: var(--ol) solid var(--ink); border-radius: var(--r); box-shadow: var(--pop) var(--pop) 0 var(--ink);
}
:where(.lesson-player) .lp-row-lit { background: var(--night-600); border-color: var(--tone); }
:where(.lesson-player) .lp-row-mark { flex: 0 0 1.35em; height: 1.35em; }
:where(.lesson-player) .lp-state { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
:where(.lesson-player) .lp-state path, :where(.lesson-player) .lp-state circle { stroke-width: 3.2; stroke-dasharray: 1; }
:where(.lesson-player) .lp-state .lp-state-ink { stroke: var(--ink); stroke-width: 7; }
:where(.lesson-player) .lp-state-tick .lp-state-core { stroke: var(--cream); }
:where(.lesson-player) .lp-state-cross .lp-state-core { stroke: var(--danger); }
:where(.lesson-player) .lp-state-pending .lp-state-core { stroke: var(--cream-faint); }
:where(.lesson-player) .lp-state-lit .lp-state-core { stroke: var(--tone); fill: var(--tone); }
:where(.lesson-player) .lp-state-dim .lp-state-core { stroke: var(--cream-faint); }
:where(.lesson-player) .lp-row-body { display: flex; flex-direction: column; gap: 0.08em; flex: 1; min-width: 0; }
:where(.lesson-player) .lp-row-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15em 0.9em; }
:where(.lesson-player) .lp-row-label { font-weight: 800; overflow-wrap: anywhere; }
:where(.lesson-player) .lp-row-swatch { display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.5em; border: var(--ol-thin) solid var(--ink); border-radius: 30%; vertical-align: -0.08em; }
:where(.lesson-player) .lp-row-value { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tone); overflow-wrap: anywhere; }
:where(.lesson-player) .lp-row-empty { min-width: 6em; height: 0.8em; border-bottom: var(--ol-thin) dashed var(--cream-faint); }
:where(.lesson-player) .lp-row-meta { font-size: max(12px, 0.78em); font-weight: 600; color: var(--cream-dim); overflow-wrap: anywhere; }
:where(.lesson-player) .lp-tag {
  flex: 0 0 auto; display: inline-block; padding: 0.14em 0.65em; border: var(--ol-thin) solid var(--ink); border-radius: 999px;
  background: var(--night-600); color: var(--cream); font-size: max(12px, 0.72em); font-weight: 800; letter-spacing: 0.02em; white-space: nowrap;
}
:where(.lesson-player) .lp-tone-known { background: var(--cream); color: var(--ink); }
:where(.lesson-player) .lp-tone-live { background: var(--tone); color: var(--ink); }
/* A guess is drawn open: the shape and the word say it, not a colour. */
:where(.lesson-player) .lp-tone-guess { background: transparent; color: var(--cream); border: var(--ol-thin) dashed var(--cream); }
:where(.lesson-player) .lp-tone-missing { background: var(--danger); color: var(--ink); }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-list { font-size: 13px; gap: 0.4em; }
  :where(.lesson-player) .lp-tiles .lp-rows { grid-template-columns: 1fr; }
  :where(.lesson-player) .lp-rows { gap: 5px 6px; }
  :where(.lesson-player) .lp-row { padding: 0.28em 0.6em; gap: 0.5em; border-radius: 10px; }
  :where(.lesson-player) .lp-list-dense { font-size: 12px; gap: 0.25em; }
  :where(.lesson-player) .lp-list-dense .lp-rows { gap: 3px 5px; }
  :where(.lesson-player) .lp-list-dense .lp-row { padding: 0.08em 0.5em; line-height: 1.15; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  :where(.lesson-player) .lp-list-dense.lp-tiles .lp-rows { grid-template-columns: 1fr 1fr; }
  /* Tagged tiles stack one to a line on a phone: two to a line, a chip squeezes its name into broken letters. */
  :where(.lesson-player) .lp-list-dense.lp-tiles:has(.lp-tag) .lp-rows { grid-template-columns: 1fr; }
}

/* ---- compare ---- */
/* Two sticker cards, tilted a degree each way; the lit one wears its title as a band in the tone. */
:where(.lesson-player) .lp-compare { display: flex; flex-direction: column; gap: 0.7em; width: 100%; font-size: clamp(12px, 2.35cqi, 30px); perspective: 900px; }
:where(.lesson-player) .lp-compare-label { font-weight: 800; color: var(--cream-dim); }
:where(.lesson-player) .lp-panels { display: grid; gap: 1.3em; padding: 0 var(--pop-lg) var(--pop-lg) 0; }
:where(.lesson-player) .lp-panels-2 { grid-template-columns: 1fr 1fr; }
:where(.lesson-player) .lp-panels-3 { grid-template-columns: 1fr 1fr 1fr; gap: 1em; }
:where(.lesson-player) .lp-panel {
  display: flex; flex-direction: column; gap: 0.4em; min-width: 0; padding: 0.8em 1em 0.9em; overflow: hidden;
  background: var(--night-700); border: var(--ol) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--ink);
}
:where(.lesson-player) .lp-panel:first-child { transform: rotate(calc(var(--lp-tilt) * -1deg)); }
:where(.lesson-player) .lp-panel:last-child { transform: rotate(calc(var(--lp-tilt) * 1deg)); }
:where(.lesson-player) .lp-panel-title { font-family: var(--mono); font-size: max(12px, 0.72em); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); overflow-wrap: anywhere; }
:where(.lesson-player) .lp-panel-lit .lp-panel-title { margin: -1.12em -1.4em 0.2em; padding: 0.62em 1.4em 0.5em; background: var(--tone); color: var(--ink); }
:where(.lesson-player) .lp-panel-value { font-size: 2.3em; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1.05; color: var(--tone); overflow-wrap: anywhere; }
:where(.lesson-player) .lp-panel-lines { display: flex; flex-direction: column; gap: 0.32em; }
:where(.lesson-player) .lp-panel-line { display: flex; align-items: baseline; gap: 0.4em; font-weight: 700; overflow-wrap: anywhere; }
:where(.lesson-player) .lp-panel-line-text { min-width: 0; }
:where(.lesson-player) .lp-panel-line-hl { color: var(--second); font-weight: 800; }
:where(.lesson-player) .lp-panel-tick { flex: none; align-self: center; width: 0.95em; height: 0.95em; }
:where(.lesson-player) .lp-panel-tick .lv-core { stroke: var(--second); }
:where(.lesson-player) .lp-panel-then { transform-origin: top; }
:where(.lesson-player) .lp-panel-risk { color: var(--danger); font-weight: 800; }
:where(.lesson-player) .lp-panel-bar { display: flex; flex-direction: column; gap: 0.3em; }
:where(.lesson-player) .lp-panel-dots { display: flex; flex-wrap: wrap; gap: 0.3em; }
:where(.lesson-player) .lp-panel-dots-grid { display: grid; gap: 0.35em; }
:where(.lesson-player) .lp-dot { width: 0.85em; height: 0.85em; border: var(--ol-thin) solid var(--ink); border-radius: 50%; background: var(--tone); }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-compare { font-size: 13px; gap: 0.5em; }
  :where(.lesson-player) .lp-panels, :where(.lesson-player) .lp-panels-3 { grid-template-columns: 1fr; gap: 9px; }
  :where(.lesson-player) .lp-panels-2.lp-panels { grid-template-columns: 1fr 1fr; gap: 10px; }
  :where(.lesson-player) .lp-panel { padding: 0.5em 0.7em 0.6em; border-radius: 12px; gap: 0.25em; }
  :where(.lesson-player) .lp-panel:first-child, :where(.lesson-player) .lp-panel:last-child { transform: none; }
  :where(.lesson-player) .lp-panel-lit .lp-panel-title { margin: -0.75em -1em 0.15em; padding: 0.5em 1em 0.4em; }
  :where(.lesson-player) .lp-panel-value { font-size: 1.7em; }
}

/* ---- bars (and the bar inside a compare panel) ---- */
/* The track is a pill; the fill is the tone with a rounded end. The row the caption talks about
   is in the second colour: its fill, its name and its value. */
:where(.lesson-player) .lp-bars { display: flex; flex-direction: column; gap: 0.62em; width: 100%; font-size: clamp(13px, 2.3cqi, 30px); }
:where(.lesson-player) .lp-bars-label { margin-bottom: 0.2em; font-size: max(13px, 0.86em); font-weight: 800; color: var(--cream-dim); }
:where(.lesson-player) .lp-bar-row { display: grid; grid-template-columns: minmax(6em, 30%) 1fr minmax(4.5em, auto); align-items: center; gap: 0.8em; }
:where(.lesson-player) .lp-bar-name { font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
:where(.lesson-player) .lp-bar-track { position: relative; display: block; height: 1.25em; border: var(--ol) solid var(--ink); border-radius: 999px; background: var(--night-600); overflow: hidden; }
:where(.lesson-player) .lp-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; min-width: 0; border-right: var(--ol) solid var(--ink); border-radius: 0 999px 999px 0; background: var(--tone); }
:where(.lesson-player) .lp-bar-fill.lp-bar-none { border-right: 0; }
:where(.lesson-player) .lp-bar-display { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
:where(.lesson-player) .lp-bar-hl .lp-bar-fill { background: var(--second); }
:where(.lesson-player) .lp-bar-hl .lp-bar-name, :where(.lesson-player) .lp-bar-hl .lp-bar-display { color: var(--second); }
:where(.lesson-player) .lp-bar-meta { display: block; font-size: max(12px, 0.68em); font-weight: 700; line-height: 1.15; color: var(--cream-dim); white-space: normal; }
:where(.lesson-player) .lp-bar-part { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-right: var(--ol-thin) solid var(--ink); border-radius: 0 999px 999px 0; background: var(--second); }
:where(.lesson-player) .lp-bar-mark { position: absolute; z-index: 1; top: 0; bottom: 0; width: 0; border-left: var(--ol-thin) dashed var(--cream); }
:where(.lesson-player) .lp-bars-mark-label { margin-top: 0.1em; font-size: max(12px, 0.8em); font-weight: 700; color: var(--cream-dim); }
:where(.lesson-player) .lp-panel-bar .lp-bar-display { text-align: left; white-space: normal; overflow-wrap: break-word; }
/* A gauge: one bar, large, and the level it is read against as a red line named where it stands. */
:where(.lesson-player) .lp-bars-solo { gap: 0.8em; font-size: clamp(16px, 3.4cqi, 44px); }
:where(.lesson-player) .lp-bars-solo .lp-bar-row { grid-template-columns: minmax(4.5em, 18%) 1fr auto; padding-top: 1.6em; }
:where(.lesson-player) .lp-bars-solo .lp-bar-track { height: 1.7em; overflow: visible; }
:where(.lesson-player) .lp-bars-solo .lp-bar-fill { border-radius: 999px; }
:where(.lesson-player) .lp-bars-solo .lp-bar-mark { top: -0.45em; bottom: -0.45em; border-left: 0.13em solid var(--danger); }
:where(.lesson-player) .lp-bar-mark-label { position: absolute; bottom: calc(100% + 0.3em); left: -0.07em; font-size: max(13px, 0.6em); font-weight: 800; line-height: 1.1; color: color-mix(in srgb, var(--danger) 70%, var(--cream)); white-space: nowrap; }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-bars { font-size: 15px; gap: 0.45em; }
  :where(.lesson-player) .lp-bars-label { font-size: 13px; }
  :where(.lesson-player) .lp-bar-row { grid-template-columns: 1fr auto; grid-template-areas: "name display" "track track"; gap: 0.12em 0.6em; }
  :where(.lesson-player) .lp-bar-row .lp-bar-name { grid-area: name; }
  :where(.lesson-player) .lp-bar-row .lp-bar-display { grid-area: display; }
  :where(.lesson-player) .lp-bar-row .lp-bar-track { grid-area: track; height: 0.95em; }
  :where(.lesson-player) .lp-bars-solo { font-size: 18px; }
  :where(.lesson-player) .lp-bars-solo .lp-bar-row { padding-top: 0; }
  :where(.lesson-player) .lp-bars-solo .lp-bar-row .lp-bar-track { height: 1.3em; margin-top: 1.6em; }
}

/* ---- curve ---- */
/* Each line is two strokes, the dark edge under the colour. The second line is a row of beads, so
   colour is never the only difference. Every line is named at its end, with its value, beside a
   dot; that replaces a legend row. Axes and free lines are cream-faint: a dark line would vanish. */
:where(.lesson-player) .lp-curve { --lp-ends: 25%; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.35em; width: 100%; height: 100%; font-size: clamp(12px, 1.9cqi, 24px); }
:where(.lesson-player) .lp-tone-0 { --series: var(--tone); }
:where(.lesson-player) .lp-tone-1 { --series: var(--second); }
:where(.lesson-player) .lp-tone-2 { --series: var(--danger); }
:where(.lesson-player) .lp-chart { position: relative; min-height: 0; display: flex; flex-direction: column; }
:where(.lesson-player) .lp-plot { position: relative; flex: 1 1 auto; min-height: 0; margin: 0.9em var(--lp-ends) 0 0; }
:where(.lesson-player) .lp-ends { position: absolute; top: 0; bottom: 0; right: 0; width: var(--lp-ends); }
:where(.lesson-player) .lp-chart-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:where(.lesson-player) .lp-axis { stroke: var(--cream-faint); stroke-width: 3; stroke-linecap: round; }
:where(.lesson-player) .lp-marker { stroke: var(--cream-faint); stroke-width: 3; stroke-linecap: round; }
:where(.lesson-player) .lp-level { stroke: var(--cream-faint); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
:where(.lesson-player) .lp-level-label {
  position: absolute; left: 0; padding: 0.12em 0.6em; border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: var(--night-600);
  font-size: max(12px, 0.8em); font-weight: 700; color: var(--cream); white-space: nowrap; transform: translateY(-125%);
}
:where(.lesson-player) .lp-level-label.lp-level-right { left: auto; right: 0; }
:where(.lesson-player) .lp-band { fill: var(--night-700); stroke: var(--night-600); stroke-width: 3; stroke-dasharray: 8 8; }
:where(.lesson-player) .lp-band-label {
  position: absolute; top: 0.3em; margin-left: 0.4em; padding: 0.1em 0.55em; border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: var(--night-600);
  font-size: max(12px, 0.8em); font-weight: 700; color: var(--cream); white-space: nowrap;
}
:where(.lesson-player) .lp-area stop { stop-color: var(--series); }
:where(.lesson-player) .lp-series-ink { fill: none; stroke: var(--ink); stroke-width: 13; stroke-linejoin: round; stroke-linecap: round; }
:where(.lesson-player) .lp-series { fill: none; stroke: var(--series); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; }
:where(.lesson-player) .lp-series.lp-style-dashed { stroke-dasharray: 2 15; }
:where(.lesson-player) .lp-end-dot { position: absolute; z-index: 1; width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; border: var(--ol-thin) solid var(--ink); border-radius: 50%; background: var(--cream); }
:where(.lesson-player) .lp-end {
  position: absolute; z-index: 1; right: 0; width: calc(100% - 1.6em); display: flex; flex-direction: column; align-items: flex-end; gap: 0.05em;
  text-align: right; line-height: 1.05; transform: translateY(-50%);
}
:where(.lesson-player) .lp-end-swatch { display: none; flex: none; align-self: center; width: 1.6em; height: 0; border-top: 4px solid var(--series); border-radius: 4px; }
:where(.lesson-player) .lp-end-swatch.lp-style-dashed { border-top-style: dotted; }
:where(.lesson-player) .lp-end-value { font-size: clamp(16px, 3.2cqi, 40px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--series); text-shadow: 0.06em 0.06em 0 var(--ink); }
:where(.lesson-player) .lp-end-name { font-size: clamp(12px, 1.9cqi, 24px); font-weight: 800; overflow-wrap: anywhere; }
:where(.lesson-player) .lp-end-bare .lp-end-name { color: var(--series); }
:where(.lesson-player) .lp-magnify { position: absolute; z-index: 2; width: 3.4em; height: 3.4em; border: var(--ol) solid var(--cream); border-radius: 50%; box-shadow: 0 0 0 var(--ol-thin) var(--ink), inset 0 0 0 var(--ol-thin) var(--ink); opacity: 0; transform: translate(-50%, -50%); transform-origin: 0 0; }
:where(.lesson-player) .lp-ticks { position: relative; height: 1.5em; margin-right: var(--lp-ends); }
:where(.lesson-player) .lp-tick { position: absolute; top: 0.15em; font-family: var(--mono); font-size: max(12px, 0.85em); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cream-dim); white-space: nowrap; transform: translateX(-50%); }
:where(.lesson-player) .lp-tick-end { transform: translateX(-100%); }
:where(.lesson-player) .lp-tick-start { transform: none; }
:where(.lesson-player) .lp-ticks-two { height: 2.9em; }
:where(.lesson-player) .lp-tick-low { top: 1.5em; }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-curve { --lp-ends: 8px; font-size: 12px; }
  :where(.lesson-player) .lp-plot { margin-top: 0.5em; }
  :where(.lesson-player) .lp-ends { position: static; width: auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1em 1.1em; }
  :where(.lesson-player) .lp-end { position: static; width: auto; flex-direction: row; align-items: baseline; gap: 0.4em; text-align: left; transform: none; }
  :where(.lesson-player) .lp-end-swatch { display: block; }
  :where(.lesson-player) .lp-end-value { order: 2; font-size: 15px; }
  :where(.lesson-player) .lp-end-name { font-size: 13px; }
  :where(.lesson-player) .lp-series-ink { stroke-width: 7; }
  :where(.lesson-player) .lp-series { stroke-width: 4; }
  :where(.lesson-player) .lp-series.lp-style-dashed { stroke-dasharray: 1 8; }
  :where(.lesson-player) .lp-axis, :where(.lesson-player) .lp-marker, :where(.lesson-player) .lp-level { stroke-width: 2; }
  :where(.lesson-player) .lp-tick { letter-spacing: 0; }
}

/* ---- timeline ---- */
/* Marks are pills in the tone on a cream-faint lane; a moved mark leaves a dashed ghost. */
/* Lanes are tracks (a band with a dark edge), so two or three lanes still fill a wide stage. */
:where(.lesson-player) .lp-timeline { display: flex; flex-direction: column; gap: 1.3em; width: 100%; font-size: clamp(12px, 2.45cqi, 32px); --lp-candle: max(12px, 2cqi); }
:where(.lesson-player) .lp-lane-row { display: grid; grid-template-columns: minmax(5.5em, 20%) 1fr; align-items: center; gap: 1em; }
:where(.lesson-player) .lp-lane-name { font-weight: 800; overflow-wrap: anywhere; }
:where(.lesson-player) .lp-lane { position: relative; height: 3.7em; }
:where(.lesson-player) .lp-lane-base { position: absolute; left: 0; right: 0; top: 1.85em; height: 0.6em; border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: color-mix(in srgb, var(--cream-faint) 45%, var(--night-700)); }
:where(.lesson-player) .lp-candle { position: absolute; top: 0.15em; height: 2.1em; width: var(--lp-candle); border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: var(--tone); transform-origin: bottom; }
:where(.lesson-player) .lp-candle-ghost { background: transparent; border: var(--ol-thin) dashed var(--cream-faint); }
/* Measured from the lane's bottom in its own font, so at any size it sits just under the lane's
   base line (2.2em of the lane's 3.7em) and above the next row. */
:where(.lesson-player) .lp-candle-label { position: absolute; z-index: 1; top: calc(100% - 1.45em); font-family: var(--mono); font-size: max(12px, 0.7em); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tone); white-space: nowrap; }
:where(.lesson-player) .lp-change { position: absolute; top: 0.75em; height: 1.5em; width: max(7px, 0.75cqi); border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: var(--second); }
:where(.lesson-player) .lp-change-label { position: absolute; z-index: 1; top: -0.85em; font-family: var(--mono); font-size: max(12px, 0.7em); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--second); white-space: nowrap; }
:where(.lesson-player) .lp-change-tail { position: absolute; top: 0.95em; height: 1.1em; border-radius: 0 999px 999px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--second) 70%, transparent), transparent); transform-origin: left center; }
:where(.lesson-player) .lp-change-faint { background: var(--cream-faint); }
:where(.lesson-player) .lp-change-tail.lp-change-faint { background: linear-gradient(90deg, color-mix(in srgb, var(--cream-faint) 60%, transparent), transparent); }
/* One lane alone: larger, its name above it, so the stage is used. */
:where(.lesson-player) .lp-timeline-solo { font-size: clamp(14px, 3.5cqi, 46px); }
:where(.lesson-player) .lp-timeline-solo .lp-lane-row { grid-template-columns: 1fr; gap: 0.5em; }
:where(.lesson-player) .lp-timeline-solo .lp-lane:has(.lp-change-label) { margin-top: 0.9em; }
:where(.lesson-player) .lp-lane-axis .lp-lane { height: 0.9em; }
:where(.lesson-player) .lp-axis-tick { position: absolute; top: 0; width: 3px; height: 0.8em; border-radius: 3px; background: var(--second); opacity: 0.7; }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-timeline { font-size: 14px; gap: 0.6em; }
  :where(.lesson-player) .lp-timeline-solo { font-size: 16px; }
  :where(.lesson-player) .lp-lane-row { grid-template-columns: 1fr; gap: 0.2em; }
  /* The lane's name sits above it here: a change's week label above the lane gets its own room. */
  :where(.lesson-player) .lp-lane:has(.lp-change-label) { margin-top: 1.1em; }
}

/* ---- flow ---- */
/* Nodes are sticker pills joined by tubes; the highlighted way is in the second colour. */
:where(.lesson-player) .lp-flow { position: relative; width: 100%; height: 100%; font-size: clamp(12px, 1.9cqi, 25px); }
:where(.lesson-player) .lp-flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:where(.lesson-player) .lp-node {
  position: absolute; z-index: 1; transform-origin: 0 0; width: max-content; max-width: 27%; padding: 0.5em 0.95em;
  background: var(--night-700); border: var(--ol) solid var(--ink); border-radius: var(--r); box-shadow: var(--pop) var(--pop) 0 var(--ink);
  font-weight: 800; line-height: 1.12; text-align: center; overflow-wrap: break-word;
  transform: translate(-50%, -50%);
}
:where(.lesson-player) .lp-link-ink { fill: none; stroke: var(--ink); stroke-linecap: round; }
:where(.lesson-player) .lp-link { fill: none; stroke: var(--cream-dim); stroke-linecap: round; }
:where(.lesson-player) .lp-link-dashed { stroke: var(--cream-faint); stroke-dasharray: 2 10; }
:where(.lesson-player) .lp-link-hi { stroke: var(--second); }
:where(.lesson-player) .lp-link-pulse { stroke: var(--cream); }
:where(.lesson-player) .lp-arrow { fill: var(--cream-dim); stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
:where(.lesson-player) .lp-arrow-hi { fill: var(--second); }
:where(.lesson-player) .lp-flow-dot { fill: var(--tone); stroke: var(--ink); stroke-width: 1.5; }
:where(.lesson-player) .lp-flow-dot-hi { fill: var(--second); }
:where(.lesson-player) .lp-leak {
  position: absolute; z-index: 2; padding: 0.12em 0.6em; border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: var(--night-600);
  font-size: max(12px, 0.85em); font-weight: 800; color: var(--cream); white-space: nowrap; transform: translate(-50%, -50%);
}
:where(.lesson-player) .lp-leak-hi { background: var(--danger); color: var(--ink); }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-flow { font-size: 12px; }
  :where(.lesson-player) .lp-node { max-width: 44%; padding: 0.4em 0.6em; border-radius: 10px; }
  :where(.lesson-player) .lp-flow-row .lp-node { max-width: 31%; }
  :where(.lesson-player) .lp-flow-square .lp-node { max-width: 34%; }
}

/* ---- map ---- */
/* The map sits on a sticker tile, a degree off level. Its data colours stay Geo's own legend
   colours, so the video matches what a person sees in Geo; land with no data is --night-600. */
:where(.lesson-player) .lp-map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9em, 32%); gap: 1.6em; width: 100%; height: 100%; font-size: clamp(12px, 1.8cqi, 23px); }
:where(.lesson-player) .lp-map-area { position: relative; min-height: 0; min-width: 0; }
/* Sized by the scene (scenes.mjs) to the largest box of the map's own proportions that fits the
   area with room for its edge and shadow; no container of its own, so the frame's sizes hold. */
:where(.lesson-player) .lp-map-fit {
  position: absolute; inset: 0 var(--pop-lg) var(--pop-lg) 0; margin: auto;
  border: var(--ol) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--pop-lg) var(--pop-lg) 0 var(--ink);
  background: var(--night-950); overflow: hidden; box-sizing: content-box;
  transform: rotate(calc(var(--lp-tilt) * -1deg));
}
:where(.lesson-player) .lp-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
:where(.lesson-player) .lp-map-next { opacity: 0; }
:where(.lesson-player) .lp-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* A drawn area is a tube: the dark edge under the sun line. */
:where(.lesson-player) .lp-map-ink { fill: none; stroke: var(--ink); stroke-width: 1.15; stroke-dasharray: 1; stroke-linejoin: round; }
:where(.lesson-player) .lp-map-box { fill: color-mix(in srgb, var(--second) 28%, transparent); stroke: var(--second); stroke-width: 0.5; stroke-dasharray: 1; stroke-linejoin: round; }
:where(.lesson-player) .lp-map-outline { fill: none; stroke: var(--second); stroke-width: 0.5; stroke-dasharray: 1; stroke-linejoin: round; }
:where(.lesson-player) .lp-map-draw { fill: none; stroke: var(--second); stroke-width: 0.55; stroke-dasharray: 1; stroke-linejoin: round; }
:where(.lesson-player) .lp-map-shade { fill: var(--night-950); opacity: 0; }
:where(.lesson-player) .lp-map-pin {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 0.25em; padding: 0.1em 0.6em 0.1em 0.3em; border: var(--ol-thin) solid var(--ink); border-radius: 999px;
  background: var(--cream); color: var(--ink); font-size: max(12px, 0.95em); font-weight: 800; white-space: nowrap;
}
:where(.lesson-player) .lp-map-pin .lv-icon { width: 1.15em; height: 1.15em; }
:where(.lesson-player) .lp-map-pin .lv-shape { fill: var(--tone); }
:where(.lesson-player) .lp-map-badge { position: absolute; z-index: 2; top: 0.6em; left: 0.6em; padding: 0.2em 0.8em; border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: var(--tone); color: var(--ink); font-weight: 800; }
:where(.lesson-player) .lp-map-legend { display: grid; grid-template-rows: auto auto; align-content: center; gap: 0.6em; min-width: 0; padding: 0 var(--pop) var(--pop) 0; }
:where(.lesson-player) .lp-map-place { font-family: var(--mono); font-size: max(12px, 0.85em); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tone); }
:where(.lesson-player) .lp-map-legend-block {
  grid-row: 2; grid-column: 1; display: flex; flex-direction: column; gap: 0.35em; padding: 0.6em 0.8em 0.7em;
  border: var(--ol) solid var(--ink); border-radius: var(--r); background: var(--night-700); box-shadow: var(--pop) var(--pop) 0 var(--ink);
}
:where(.lesson-player) .lp-map-legend-pulse { border-color: var(--second); }
:where(.lesson-player) .lp-map-legend-next { opacity: 0; }
:where(.lesson-player) .lp-map-legend-title { font-size: 1.22em; font-weight: 800; line-height: 1.05; }
:where(.lesson-player) .lp-map-legend-source { align-self: flex-start; font-size: max(12px, 0.85em); font-weight: 700; color: var(--cream-dim); }
:where(.lesson-player) .lp-map-source-lit { padding: 0 0.35em; border-radius: 0.3em; background: var(--second); color: var(--ink); }
:where(.lesson-player) .lp-map-stops { display: flex; flex-direction: column; gap: 0.22em; }
:where(.lesson-player) .lp-map-stop { display: flex; align-items: center; gap: 0.5em; font-size: max(12px, 0.95em); font-weight: 700; }
:where(.lesson-player) .lp-map-swatch { flex: 0 0 1em; height: 1em; border: var(--ol-thin) solid var(--ink); border-radius: 30%; }
/* Blank cells: the map's hatch, dark crossed by thin stripes. */
:where(.lesson-player) .lp-map-swatch-blank { background: repeating-linear-gradient(135deg, var(--night-950) 0 0.16em, var(--lp-blank-hi) 0.16em 0.26em); }
:where(.lesson-player) .lp-map-legend-rows { grid-template-rows: none; grid-auto-rows: auto; }
:where(.lesson-player) .lp-map-legend-rows .lp-map-legend-block { grid-row: auto; }
:where(.lesson-player) .lp-map-row {
  display: flex; flex-direction: column; gap: 0.05em; padding: 0.4em 0.75em; border: var(--ol) solid var(--ink); border-radius: var(--r);
  background: var(--night-700); box-shadow: var(--pop) var(--pop) 0 var(--ink); font-weight: 700; overflow-wrap: anywhere;
}
:where(.lesson-player) .lp-map-row-value { font-size: 1.12em; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--tone); }
:where(.lesson-player) .lp-map-row-lit { border-color: var(--second); }
:where(.lesson-player) .lp-map-row-lit .lp-map-row-value { color: var(--second); }
@container lesson (max-width: 520px) {
  :where(.lesson-player) .lp-map { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 0.5em; font-size: 12px; }
  :where(.lesson-player) .lp-map-legend { gap: 0.3em; }
  :where(.lesson-player) .lp-map-legend-block { padding: 0.35em 0.6em 0.4em; gap: 0.2em; border-radius: 10px; }
  :where(.lesson-player) .lp-map-legend-title { font-size: 1.1em; }
  :where(.lesson-player) .lp-map-stops { display: grid; grid-template-columns: 1fr 1fr; gap: 0.12em 0.6em; }
  :where(.lesson-player) .lp-map-row { padding: 0.2em 0.6em; border-radius: 10px; }
  /* Two or more rows under a phone's map stand side by side, so the map keeps its size. */
  :where(.lesson-player) .lp-map-legend-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.lesson-player) .lp-map-legend-rows > :not(.lp-map-row) { grid-column: 1 / -1; }
}

/* ---- people ---- */
/* Each person is a head over a rounded body, both with the dark edge. Waiting: a quiet body.
   Answering: the tone, and two ticks. */
:where(.lesson-player) .lp-people { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; width: 100%; height: 100%; font-size: clamp(12px, 2cqi, 26px); }
:where(.lesson-player) .lp-people-area { padding: 0.15em 0.75em; border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: var(--night-600); color: var(--cream); font-size: max(12px, 0.85em); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
:where(.lesson-player) .lp-people-idea { max-width: 92%; padding: 0.45em 1em; border: var(--ol) solid var(--ink); border-radius: var(--r); background: var(--night-700); box-shadow: var(--pop) var(--pop) 0 var(--ink); font-size: 1.2em; font-weight: 800; text-align: center; }
:where(.lesson-player) .lp-people-grid { position: relative; display: grid; grid-template-columns: repeat(var(--lp-per-row, 6), 2.3em); gap: 1.7em 1.7em; padding-top: 1.5em; font-size: 1.5em; }
:where(.lesson-player) .lp-person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.12em; }
:where(.lesson-player) .lp-person-head { width: 1.05em; height: 1.05em; border: var(--ol-thin) solid var(--ink); border-radius: 50%; background: var(--cream-faint); }
:where(.lesson-player) .lp-person-body { width: 2.1em; height: 1.15em; border: var(--ol-thin) solid var(--ink); border-radius: 1.05em 1.05em 0.25em 0.25em; background: var(--night-600); }
:where(.lesson-player) .lp-person-lit .lp-person-head { background: var(--cream); }
:where(.lesson-player) .lp-person-lit .lp-person-body { background: var(--tone); }
:where(.lesson-player) .lp-person-spark { position: absolute; top: -0.35em; right: -0.55em; width: 0.8em; height: 0.8em; overflow: visible; fill: none; stroke: var(--cream); stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
:where(.lesson-player) .lp-person-lit .lp-person-spark { opacity: 1; }
:where(.lesson-player) .lp-person-ask {
  position: absolute; left: 50%; top: -1.55em; min-width: 1.4em; padding: 0 0.3em;
  border: var(--ol-thin) solid var(--ink); border-radius: 999px; background: var(--cream); color: var(--ink);
  font-weight: 800; font-size: max(12px, 0.8em); text-align: center; opacity: 0; transform: translate(-50%, 0);
}
:where(.lesson-player) .lp-people-ping { position: absolute; left: 50%; top: 55%; width: 6em; height: 6em; border: var(--ol) solid var(--second); border-radius: 50%; opacity: 0; pointer-events: none; }
@container lesson (max-width: 520px) { :where(.lesson-player) .lp-people { font-size: 13px; gap: 0.7em; } :where(.lesson-player) .lp-people-grid { gap: 1.7em 0.9em; font-size: 1.25em; } }

/* ---- player.html in render mode (a poster or a recording): the frame alone, on the night room ---- */
body.tutorial-render { margin: 0; background: #12082a; overflow: hidden; }
body.tutorial-render .lesson-player-render .lesson-frame { width: 1280px; height: 720px; }