/* kc-lesson-skin.css — the lesson player (<kc-lesson-runner>, kc-lesson-v2.js)
   dressed in the Knowledge Center design: full-screen dark player, progress
   segments, buddy speech bubble, A/B/C option cards, the Continue bar.

   Scope: everything here sits under `.kc3-player`, the design's full-screen
   player frame that kc/learn.html draws around the runner. The runner's own
   stylesheets (kc-lesson-v2.css, kc-lesson-beats.css, kc-lesson-tutor.css)
   still do the structural work — the one-beat-per-screen stage, the tutor
   sheet, the reduced-motion and forced-colours rules — and are not edited.

   /center does not load kc-theme.css, so the tokens those stylesheets read
   (--text, --surface, --r-14, --fs-15 …) are defined here, mapped onto the
   design's own colour tokens (--t-*). The shell re-maps --t-* for the Aurora
   look and for light/dark, so the player follows the member's Personalise
   choices exactly as the design's own screens do. */

.kc3-player {
  /* The design's type. Aurora swaps Comfortaa/Nunito for Geist, as the shell
     does for the design's inline styles. */
  --kc3-sans: Nunito, system-ui, sans-serif;
  --kc3-display: Comfortaa, Nunito, sans-serif;
  --kc3-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Colour tokens the runner's stylesheets read, onto the design's. */
  --bg: var(--t-F6F1EC, #F6F1EC);
  --surface: var(--t-FBF8F4, #FBF8F4);
  --surface-2: var(--t-EEE8E3, #EEE8E3);
  --text: var(--t-24233A, #24233A);
  --text-2: var(--t-4B4860, #4B4860);
  --text-3: var(--t-8C8797, #8C8797);
  --border: var(--t-E7DFD8, #E7DFD8);
  --border-strong: var(--t-D6CFC9, #D6CFC9);
  --blue-600: var(--t-2434DE, #2434DE);
  --blue-050: var(--t-EEF0FD, #EEF0FD);
  --blue-100: var(--t-E4E7FD, #E4E7FD);
  --blue-fg: var(--t-1B2A9E, #1B2A9E);
  --teal-500: var(--t-17A58C, #17A58C);
  --teal-600: var(--t-0B6B5A, #0B6B5A);
  --teal-100: var(--t-DDF3EE, #DDF3EE);
  --amber-500: var(--t-E8A93A, #E8A93A);
  --amber-100: var(--t-FBEBC8, #FBEBC8);
  --rose-500: #D9573B;
  --rose-100: var(--t-FBE3D6, #FBE3D6);
  --acc: var(--t-2434DE, #2434DE);
  --acc-ink: #FFFFFF;
  --on-acc: #FFFFFF;
  --acc-ring: rgba(124, 140, 255, .55);
  --acc-quiet: var(--t-EEF0FD, #EEF0FD);
  --track: var(--t-E7E0DA, #E7E0DA);
  --ink1: var(--t-24233A, #24233A);
  --ink2: var(--t-4B4860, #4B4860);
  --ink3: var(--t-8C8797, #8C8797);
  --plate: var(--t-FBF8F4, #FBF8F4);
  --quiet: var(--t-EEE8E3, #EEE8E3);
  --inset: var(--t-F3EDE7, #F3EDE7);
  --rule: var(--t-E7DFD8, #E7DFD8);
  --crit: #D9573B;
  --crit-tint: var(--t-FBE3D6, #FBE3D6);
  --blur: none;

  /* Scale tokens, the same values kc-theme.css gives them. */
  --font-sans: var(--kc3-sans);
  --font-display: var(--kc3-display);
  --font-mono: var(--kc3-mono);
  --fs-9: 9px; --fs-9-5: 9.5px; --fs-10-5: 10.5px; --fs-11: 11px; --fs-11-5: 11.5px;
  --fs-12: 12px; --fs-12-5: 12.5px; --fs-13: 13px; --fs-13-5: 13.5px; --fs-14: 14px;
  --fs-14-5: 14.5px; --fs-15: 15px; --fs-16: 16px; --fs-22: 22px; --fs-26: 26px; --fs-34: 34px;
  --r-12: 12px; --r-14: 14px; --r-16: 16px; --r-18: 18px; --r-20: 20px; --r-999: 999px;
  --bw-1: 1px; --bw-1-5: 1.5px; --bw-2: 2px; --bw-4: 4px;
  --motion-fast: 90ms; --motion-base: 140ms; --motion-slow: 200ms; --motion-step: 0ms;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --ease-press: var(--ease);
  --target-min: 44px;
  --shadow-sm: 0 1px 3px rgba(36, 35, 58, .06);
  --shadow-md: none;
  --shadow-lg: 0 30px 60px -24px rgba(20, 18, 30, .5);
  --shadow: 0 30px 60px -24px rgba(20, 18, 30, .5);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--acc-ring);

  /* No XP flies to a header indicator here: the award shows in the feedback
     and in the frame's session chip. */
  --kc-v2-fly-display: none;
  color: var(--text);
  font-family: var(--kc3-sans);
}
:root[data-look="aurora"] .kc3-player {
  --kc3-sans: "Geist", system-ui, sans-serif;
  --kc3-display: "Geist", system-ui, sans-serif;
}

/* ------------------------------------------------------------ layout -- */

/* The frame's scroll column holds the buddy row and the runner; the runner
   fills the rest so its footer can sit on the bottom edge like the design's
   Continue bar, and stick there while a long step scrolls under it. */
.kc3-player kc-lesson-runner {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: var(--kc3-sans);
  /* The runner scrolls itself into view on every beat; this keeps the buddy
     row above it in view too. */
  scroll-margin-top: 220px;
}
.kc3-player .kc-v2-runner {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  color: var(--text);
  font-family: var(--kc3-sans);
}
.kc3-player .kc-v2-card {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.kc3-player .kc-v2-step {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* The frame owns the exit and section track. Keep the lesson title and the
   runner's real step/beat count visible in a compact row: an accessible dialog
   name alone cannot orient a sighted reader. The runner remains the source of
   truth, including short-lesson completion and one-beat-per-screen progress. */
.kc3-player .kc-v2-top,
.kc3-player .kc-v2-runner[data-beat-screen] .kc-v2-top {
  display: block;
  margin: 0 0 16px;
  padding: 0;
}
.kc3-player .kc-v2-back { display: none; }
.kc3-player .kc-v2-title,
.kc3-player .kc-v2-runner[data-beat-screen] h1.kc-v2-title {
  margin: 0 0 6px;
  color: var(--text);
  font: 600 16px/1.4 var(--kc3-sans);
  max-width: none;
  white-space: normal;
  text-wrap: pretty;
}
.kc3-player .kc-v2-step-progress,
.kc3-player .kc-v2-runner[data-beat-screen] .kc-v2-step-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.kc3-player .kc-v2-step-count {
  color: var(--text-2);
  font: 500 12px/1.4 var(--kc3-sans);
}
.kc3-player .kc-sr-only,
.kc3-player .kc-v2-meta,
.kc3-player .kc-v2-section-progress {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.kc3-player .kc-v2-context {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--t-EEF0FD, #EEF0FD);
  color: var(--t-1B2A9E, #1B2A9E);
  font: 600 14px/1.45 var(--kc3-sans);
}

.kc3-player .kc-v2-loading,
.kc3-player .kc-v2-error,
.kc3-player .kc-v2-unknown {
  padding: 18px 20px;
  border: 1px solid var(--t-E7DFD8, #E7DFD8);
  border-radius: 18px;
  background: var(--t-FBF8F4, #FBF8F4);
  color: var(--t-4B4860, #4B4860);
  font: 600 15px/1.55 var(--kc3-sans);
}

/* ------------------------------------------------------------- type -- */

.kc3-player .kc-v2-eyebrow,
.kc3-player .kc-v2-checkpoint-position {
  margin: 0 0 6px;
  color: var(--kc-ink-acc, var(--t-2434DE, #2434DE));
  font: 500 11px/1.4 var(--kc3-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.kc3-player .kc-v2-checkpoint-position { color: var(--t-5E5A6E, #5E5A6E); }
.kc3-player .kc-v2-heading {
  max-width: none;
  margin: 0 0 4px;
  color: var(--t-24233A, #24233A);
  font: 600 26px/1.3 var(--kc3-display);
  text-wrap: balance;
}
:root[data-look="aurora"] .kc3-player .kc-v2-heading { font-weight: 500; letter-spacing: -.03em; }
.kc3-player .kc-v2-prose,
.kc3-player .kc-v2-stem,
.kc3-player .kc-v2-note,
.kc3-player .kc-v2-model,
.kc3-player .kc-v2-readback,
.kc3-player .kc-v2-sort-help {
  max-width: none;
  color: var(--t-4B4860, #4B4860);
  font: 500 16px/1.6 var(--kc3-sans);
}
.kc3-player .kc-v2-note,
.kc3-player .kc-v2-sort-help { font-size: 14px; }
.kc3-player .kc-v2-stem { margin: 0 0 10px; }

/* ---------------------------------------------- one beat per screen -- */

/* The design's "Read" panel: one card, the part in it. */
.kc3-player .kc-v2-beatline {
  margin-top: 18px;
  padding: 24px 26px;
  gap: 14px;
  border-radius: 24px;
  background: var(--t-FBF8F4, #FBF8F4);
  box-shadow: 0 1px 3px rgba(36, 35, 58, .06);
}
.kc3-player .kc-v2-beatline .kc-v2-beat,
.kc3-player .kc-v2-beatline .kc-v2-beat-spacer {
  max-width: none;
  font: 500 17px/1.7 var(--kc3-sans);
}
.kc3-player .kc-v2-beatline .kc-v2-beat { color: var(--t-24233A, #24233A); }
.kc3-player .kc-v2-beat-count {
  color: var(--t-8C8797, #8C8797);
  font: 500 11px/1.4 var(--kc3-mono);
  letter-spacing: .14em;
}
.kc3-player .kc-v2-beat-pip { height: 6px; }
.kc3-player .kc-v2-beat-pip[data-state="kept"],
.kc3-player .kc-v2-beat-pip[data-state="current"] { height: 6px; }
.kc3-player .kc-v2-takeaway {
  max-width: none;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--t-F3EDE7, #F3EDE7);
  color: var(--t-24233A, #24233A);
  font: 600 18px/1.55 var(--kc3-display);
}
:root[data-look="aurora"] .kc3-player .kc-v2-takeaway { font-weight: 500; letter-spacing: -.01em; }
.kc3-player .kc-v2-takeaway strong { font-weight: 800; }
.kc3-player .kc-v2-boundary {
  max-width: none;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1.5px dashed var(--t-D6CFC9, #D6CFC9);
  border-radius: 14px;
  background: transparent;
  color: var(--t-4B4860, #4B4860);
  font: 500 14px/1.6 var(--kc3-sans);
}
.kc3-player .kc-v2-beat-pledge {
  border-radius: 12px;
  font: 600 14px/1.5 var(--kc3-sans);
}
.kc3-player .kc-v2-beat-pledge-label { font: 500 10.5px/1.4 var(--kc3-mono); letter-spacing: .14em; }

/* --------------------------------------------- the A/B/C option cards -- */

.kc3-player .kc-v2-options,
.kc3-player .kc-v2-bands {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
  counter-reset: kc3-key;
}
.kc3-player .kc-v2-option,
.kc3-player .kc-v2-band {
  counter-increment: kc3-key;
  min-height: 62px;
  padding: 12px 18px;
  gap: 12px;
  border: 2px solid var(--t-E7DFD8, #E7DFD8);
  border-radius: 16px;
  background: var(--t-FBF8F4, #FBF8F4);
  box-shadow: 0 4px 0 var(--t-E7DFD8, #E7DFD8);
  color: var(--t-24233A, #24233A);
  font: 700 16px/1.4 var(--kc3-sans);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s;
}
.kc3-player .kc-v2-option:disabled { cursor: default; }
.kc3-player .kc-v2-option:not(:disabled):active,
.kc3-player .kc-v2-band:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--t-E7DFD8, #E7DFD8); }
/* The letter tile. The runner's tick is kept in the DOM (aria-hidden) and
   replaced by the design's A/B/C key, counted in reading order. */
.kc3-player .kc-v2-option-mark {
  width: 30px;
  height: 30px;
  flex: none;
  border: 1.5px solid var(--t-E7DFD8, #E7DFD8);
  border-radius: 9px;
  background: transparent;
  color: var(--t-4B4860, #4B4860);
  font: 700 13px/1 var(--kc3-mono);
}
.kc3-player .kc-v2-option-mark .kc-v2-mark { display: none; }
.kc3-player .kc-v2-option-mark::before { content: counter(kc3-key, upper-alpha); }
.kc3-player .kc-v2-option-text { font: inherit; }

/* Chosen, not yet checked. */
.kc3-player .kc-v2-option[aria-checked="true"],
.kc3-player .kc-v2-band[aria-pressed="true"] {
  border-color: var(--t-2434DE, #2434DE);
  background: var(--t-EEF0FD, #EEF0FD);
  box-shadow: 0 4px 0 var(--t-C3C9F5, #C3C9F5);
}
.kc3-player .kc-v2-option[aria-checked="true"] .kc-v2-option-mark,
.kc3-player .kc-v2-band[aria-pressed="true"] .kc-v2-option-mark {
  border-color: var(--t-2434DE, #2434DE);
  background: var(--t-2434DE, #2434DE);
  color: #FFFFFF;
}
/* Checked: the server's verdict on the chosen row. */
.kc3-player .kc-v2-option[data-verdict="correct"] {
  border-color: var(--t-17A58C, #17A58C);
  background: var(--t-DDF3EE, #DDF3EE);
  box-shadow: 0 4px 0 var(--t-9ED9CC, #9ED9CC);
}
.kc3-player .kc-v2-option[data-verdict="correct"] .kc-v2-option-mark {
  border-color: var(--t-17A58C, #17A58C);
  background: var(--t-17A58C, #17A58C);
  color: #FFFFFF;
}
.kc3-player .kc-v2-option[data-verdict="wrong"] {
  border-color: #D9573B;
  background: var(--t-FBE3D6, #FBE3D6);
  box-shadow: 0 4px 0 var(--t-EDB7A6, #EDB7A6);
}
.kc3-player .kc-v2-option[data-verdict="wrong"] .kc-v2-option-mark {
  border-color: #D9573B;
  background: #D9573B;
  color: #FFFFFF;
}
.kc3-player .kc-v2-option-state {
  color: var(--t-4B4860, #4B4860);
  font: 500 10px/1 var(--kc3-mono);
  letter-spacing: .14em;
}
.kc3-player .kc-v2-option[data-verdict="correct"] .kc-v2-option-state { color: var(--t-0B6B5A, #0B6B5A); }
.kc3-player .kc-v2-option[data-verdict="wrong"] .kc-v2-option-state { color: var(--t-8E2F17, #8E2F17); }

/* Put-in-order and the diagram, as the same cards. */
.kc3-player .kc-v2-sort { gap: 10px; margin-top: 16px; }
.kc3-player .kc-v2-sort-item,
.kc3-player .kc-v2-node {
  min-height: 62px;
  padding: 12px 18px;
  border: 2px solid var(--t-E7DFD8, #E7DFD8);
  border-radius: 16px;
  background: var(--t-FBF8F4, #FBF8F4);
  box-shadow: 0 4px 0 var(--t-E7DFD8, #E7DFD8);
  color: var(--t-24233A, #24233A);
  font: 700 16px/1.4 var(--kc3-sans);
}
.kc3-player .kc-v2-sort-number {
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--t-E7DFD8, #E7DFD8);
  border-radius: 9px;
  background: transparent;
  color: var(--t-4B4860, #4B4860);
  font: 700 13px/1 var(--kc3-mono);
}
.kc3-player .kc-v2-diagram { gap: 10px; margin-top: 16px; }
.kc3-player .kc-v2-node { text-align: left; cursor: pointer; }
.kc3-player .kc-v2-node[aria-expanded="true"] {
  border-color: var(--t-2434DE, #2434DE);
  background: var(--t-EEF0FD, #EEF0FD);
  box-shadow: 0 4px 0 var(--t-C3C9F5, #C3C9F5);
}
.kc3-player .kc-v2-node-detail { color: var(--t-4B4860, #4B4860); font: 500 15px/1.55 var(--kc3-sans); }
.kc3-player .kc-v2-edge {
  margin: 0;
  padding-left: 22px;
  color: var(--t-8C8797, #8C8797);
  font: 500 11px/1.4 var(--kc3-mono);
  letter-spacing: .08em;
}
.kc3-player .kc-v2-terms { gap: 8px; margin-top: 16px; }
.kc3-player .kc-v2-term {
  min-height: 40px;
  padding: 7px 14px;
  border: 1.5px solid var(--t-E7DFD8, #E7DFD8);
  border-radius: 999px;
  background: var(--t-FBF8F4, #FBF8F4);
  color: var(--t-1B2A9E, #1B2A9E);
  font: 700 14px/1.3 var(--kc3-sans);
  cursor: pointer;
}
.kc3-player .kc-v2-definition {
  border-radius: 14px;
  background: var(--t-EEF0FD, #EEF0FD);
  color: var(--t-24233A, #24233A);
  font: 500 14px/1.55 var(--kc3-sans);
}
.kc3-player .kc-v2-textarea {
  margin-top: 16px;
  padding: 14px 16px;
  border: 2px solid var(--t-E7DFD8, #E7DFD8);
  border-radius: 16px;
  background: var(--t-FBF8F4, #FBF8F4);
  color: var(--t-24233A, #24233A);
  font: 500 16px/1.6 var(--kc3-sans);
}
.kc3-player .kc-v2-model {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--t-F3EDE7, #F3EDE7);
}

/* Visible keyboard focus. kc-lesson-v2.css draws focus as a box-shadow ring,
   which the cards' own shadow above would otherwise replace. */
.kc3-player .kc-v2-option:focus-visible,
.kc3-player .kc-v2-band:focus-visible,
.kc3-player .kc-v2-node:focus-visible,
.kc3-player .kc-v2-sort-item:focus-visible,
.kc3-player .kc-v2-term:focus-visible,
.kc3-player .kc-v2-primary:focus-visible,
.kc3-player .kc-v2-secondary:focus-visible,
.kc3-player .kc-v2-later:focus-visible,
.kc3-player .kc-v2-help-open:focus-visible,
.kc3-player .kc-v2-textarea:focus-visible {
  outline: 2px solid #7C8CFF;
  outline-offset: 3px;
}

/* ------------------------------------------------------- feedback -- */

.kc3-player .kc-v2-feedback {
  margin-top: 18px;
  padding: 16px 18px;
  border: 2px solid var(--t-EDB7A6, #EDB7A6);
  border-radius: 18px;
  background: var(--t-FBE3D6, #FBE3D6);
  color: var(--t-8E2F17, #8E2F17);
}
.kc3-player .kc-v2-feedback[data-correct="true"] {
  border-color: var(--t-9ED9CC, #9ED9CC);
  background: var(--t-DDF3EE, #DDF3EE);
  color: var(--t-0B6B5A, #0B6B5A);
}
.kc3-player .kc-v2-feedback-title {
  gap: 12px;
  margin: 0 0 6px;
  color: inherit;
  font: 800 18px/1.3 var(--kc3-sans);
}
.kc3-player .kc-v2-feedback-title .kc-v2-mark {
  width: 36px;
  height: 36px;
  flex: none;
  padding: 7px;
  box-sizing: border-box;
  border-radius: 50%;
  background: var(--t-FBF8F4, #FBF8F4);
}
.kc3-player .kc-v2-feedback-body {
  color: inherit;
  font: 600 14px/1.5 var(--kc3-sans);
}
.kc3-player .kc-v2-static-award {
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--t-FBEBC8, #FBEBC8);
  color: var(--t-7A5200, #7A5200);
  font: 800 13px/1.3 var(--kc3-sans);
}

/* ----------------------------------------------- "ask to explain" -- */

/* The design's hint button: a dashed pill. */
.kc3-player .kc-v2-help { margin-block-start: 18px; }
.kc3-player .kc-v2-help-open,
.kc3-player .kc-v2-help[data-quiet="true"] .kc-v2-help-open {
  inline-size: auto;
  min-height: 44px;
  gap: 8px;
  padding: 7px 18px 7px 14px;
  border: 1.5px dashed var(--kc-acc-line, #9AA3F2);
  border-radius: 22px;
  background-color: var(--t-EEF0FD, #EEF0FD);
  color: var(--t-1B2A9E, #1B2A9E);
  font-family: var(--kc3-sans);
}
.kc3-player .kc-v2-help[data-quiet="true"] .kc-v2-help-open {
  border-color: var(--t-D6CFC9, #D6CFC9);
  background-color: transparent;
  color: var(--t-4B4860, #4B4860);
}
.kc3-player .kc-v2-help-mark { color: currentColor; }
.kc3-player .kc-v2-help-mark .kc-v2-mark { width: 16px; height: 16px; }
.kc3-player .kc-v2-help-label,
.kc3-player .kc-v2-help[data-quiet="true"] .kc-v2-help-label { font: 700 14px/1.3 var(--kc3-sans); }
/* The note is quieter by size and weight, not by fading: faded, the
   accent ink drops under 4.5:1 on the pill's tint. */
.kc3-player .kc-v2-help-note { color: inherit; opacity: 1; font: 500 12px/1.35 var(--kc3-sans); }
@media (hover: hover) {
  .kc3-player .kc-v2-help-open:hover { border-color: var(--t-2434DE, #2434DE); background-color: var(--t-E4E7FD, #E4E7FD); }
  .kc3-player .kc-v2-help[data-quiet="true"] .kc-v2-help-open:hover { background-color: var(--t-EEE8E3, #EEE8E3); border-color: var(--t-BDB6B1, #BDB6B1); }
}
.kc3-player .kc-v2-tutor-sheet {
  border-radius: 22px;
  box-shadow: 0 30px 60px -24px rgba(20, 18, 30, .5);
}

/* ------------------------------------------------ the Continue bar -- */

/* The runner's footer becomes the design's bottom bar: on the bottom edge,
   2px rule across the full width, the primary on the right, "Previous part"
   or "Come back later" on the left. It sticks while a long step scrolls. */
.kc3-player .kc-v2-footer {
  position: sticky;
  bottom: 0;
  z-index: 4;
  margin-top: auto;
  /* The design's bar is 880 wide over a 700 column. */
  margin-inline: calc((min(700px, 100vw) - min(880px, 100vw)) / 2);
  padding: 18px 0 24px;
  border-top: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}
.kc3-player .kc-v2-step > :not(.kc-v2-footer):nth-last-child(2) { margin-bottom: 26px; }
.kc3-player .kc-v2-footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 2px solid var(--t-E7DFD8, #E7DFD8);
  background: var(--t-F6F1EC, #F6F1EC);
  transition: background-color .2s;
}
/* The bar takes the verdict's colour, as the design's does. */
.kc3-player .kc-v2-step:has(.kc-v2-feedback[data-correct="true"]) .kc-v2-footer::before {
  border-top-color: var(--t-9ED9CC, #9ED9CC);
  background: var(--t-DDF3EE, #DDF3EE);
}
.kc3-player .kc-v2-step:has(.kc-v2-feedback[data-correct="false"]) .kc-v2-footer::before {
  border-top-color: var(--t-EDB7A6, #EDB7A6);
  background: var(--t-FBE3D6, #FBE3D6);
}
.kc3-player .kc-v2-footer .kc-v2-primary {
  order: 2;
  flex: 0 0 auto;
  min-width: 200px;
  min-height: 56px;
  height: auto;
  padding: 0 28px;
  border: 0;
  border-radius: 14px;
  background: var(--t-2434DE, #2434DE);
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--t-1A27A6, #1A27A6);
  font: 800 17px/1.2 var(--kc3-sans);
  letter-spacing: .02em;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}
.kc3-player .kc-v2-footer .kc-v2-primary:not(:disabled):active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--t-1A27A6, #1A27A6);
}
.kc3-player .kc-v2-footer .kc-v2-primary:disabled {
  background: var(--t-E7E0DA, #E7E0DA);
  box-shadow: 0 4px 0 var(--t-D2C9C1, #D2C9C1);
  color: var(--t-9C958F, #9C958F);
  cursor: not-allowed;
}
/* The Aurora look paints the design's primary buttons with its gradient —
   the member's accent's, fitted for the white label, when Personalise has
   one (--au-grad, set by kc-personalise.js). */
:root[data-look="aurora"] .kc3-player .kc-v2-footer .kc-v2-primary:not(:disabled) {
  background: var(--au-grad, linear-gradient(135deg, #5362F4 0%, #6931CC 60%, #16B1C8 130%));
  box-shadow: 0 8px 24px -10px var(--au-glow, rgba(91, 108, 255, .85)), inset 0 1px 0 rgba(255, 255, 255, .35);
}
/* Right: green Continue. Not quite, with a second try left: the red retry. */
.kc3-player .kc-v2-step:has(.kc-v2-feedback[data-correct="true"]) .kc-v2-footer .kc-v2-primary:not(:disabled) {
  background: var(--t-17A58C, #17A58C);
  box-shadow: 0 4px 0 var(--t-0E7C68, #0E7C68);
}
/* Aurora's green is a neon; white on it does not read, so its ink is dark. */
:root[data-look="aurora"] .kc3-player .kc-v2-step:has(.kc-v2-feedback[data-correct="true"]) .kc-v2-footer .kc-v2-primary:not(:disabled) { color: #04160E; }
.kc3-player .kc-v2-step .kc-v2-footer .kc-v2-primary[data-action^="retry"]:not(:disabled) {
  background: #D9573B;
  box-shadow: 0 4px 0 #A83D25;
}
.kc3-player .kc-v2-footer .kc-v2-secondary,
.kc3-player .kc-v2-footer .kc-v2-later {
  order: 1;
  margin-right: auto;
  min-height: 44px;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--t-FBF8F4, #FBF8F4);
  color: var(--t-24233A, #24233A);
  font: 700 14px/1 var(--kc3-sans);
  cursor: pointer;
}
@media (hover: hover) {
  .kc3-player .kc-v2-footer .kc-v2-secondary:hover,
  .kc3-player .kc-v2-footer .kc-v2-later:hover { background: var(--t-EEE8E3, #EEE8E3); }
}
/* A link-style secondary inside the step (the video's "full episode"). */
.kc3-player .kc-v2-step > a.kc-v2-secondary {
  align-self: flex-start;
  margin-top: 10px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--t-FBF8F4, #FBF8F4);
  color: var(--t-1B2A9E, #1B2A9E);
  font: 700 14px/1 var(--kc3-sans);
}

/* ------------------------------------ checkpoints, recap, celebration -- */

.kc3-player .kc-v2-summary {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: 18px;
  background: var(--t-DDF3EE, #DDF3EE);
}
.kc3-player .kc-v2-summary h3,
.kc3-player .kc-v2-recap-block h3 {
  color: var(--t-24233A, #24233A);
  font: 700 18px/1.3 var(--kc3-display);
}
.kc3-player .kc-v2-summary .kc-v2-prose { color: var(--t-24233A, #24233A); font-size: 15px; }
.kc3-player .kc-v2-recap-block { border-top-color: var(--t-E7DFD8, #E7DFD8); }
.kc3-player .kc-v2-quote {
  border-left-color: var(--t-2434DE, #2434DE);
  background: var(--t-EEF0FD, #EEF0FD);
  color: var(--t-24233A, #24233A);
  font: 600 15px/1.6 var(--kc3-sans);
}
.kc3-player .kc-v2-source { border-bottom-color: var(--t-E7DFD8, #E7DFD8); }
.kc3-player .kc-v2-source a { color: var(--t-1B2A9E, #1B2A9E); font: 700 14px/1.45 var(--kc3-sans); }
.kc3-player .kc-v2-source-meta { color: var(--t-8C8797, #8C8797); font: 500 12px/1.5 var(--kc3-mono); }
.kc3-player .kc-v2-xp-total {
  padding: 14px 16px;
  border: 2px solid var(--t-E8A93A, #E8A93A);
  border-radius: 18px;
  background: var(--t-FBF8F4, #FBF8F4);
  color: var(--t-24233A, #24233A);
  font: 700 15px/1.4 var(--kc3-sans);
}
.kc3-player .kc-v2-celebration {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--t-DDF3EE, #DDF3EE);
  color: var(--t-0B6B5A, #0B6B5A);
  font: 800 15px/1.4 var(--kc3-sans);
}
.kc3-player .kc-v2-video-facade,
.kc3-player .kc-v2-video-player,
.kc3-player .kc-v2-video-fallback {
  margin-top: 16px;
  border-radius: 22px;
  background: var(--t-FBF8F4, #FBF8F4);
  box-shadow: 0 18px 40px -24px rgba(20, 18, 30, .6);
}
.kc3-player .kc-v2-video-title { color: var(--t-24233A, #24233A); font: 700 16px/1.4 var(--kc3-sans); }

/* ---------------------------------------------------- narrow widths -- */

@media (max-width: 680px) {
  .kc3-player .kc-v2-heading { font-size: 22px; }
  .kc3-player .kc-v2-beatline { padding: 18px; }
  .kc3-player .kc-v2-footer,
  .kc3-player .kc-v2-runner[data-beat-screen] .kc-v2-footer {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    margin-inline: 0;
  }
  .kc3-player .kc-v2-footer .kc-v2-primary { flex: 1 1 auto; min-width: 0; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .kc3-player .kc-v2-option,
  .kc3-player .kc-v2-band,
  .kc3-player .kc-v2-footer::before,
  .kc3-player .kc-v2-footer .kc-v2-primary { transition: none; }
}

/* ----------------------------------------------------------- personalise --
   A chosen wallpaper is the player's ground too (plain, no stars: this is a
   reading surface). kc-personalise.js sets --t-F6F1EC to it and
   stamps data-wall; Stone keeps the design's warm ground. */
:root[data-wall]:not([data-wall="stone"]) .kc3-player { background: var(--t-F6F1EC) !important; }