/* ==========================================================================
   LX Blocks · lx.css · v1.0.0
   Instructional design components for web courses.

    1. Tokens          6. Page & text blocks
    2. Base            7. Explore blocks
    3. Utilities       8. Practice blocks
    4. Buttons         9. Course shell
    5. Feedback       10. Motion, loading, print

   Pair with lx.js. Author markup for every block is in BLOCKS.md.
   ========================================================================== */


/* 1. Tokens ================================================================
   Set these on :root to re-theme a course. Soft tints derive from the accent. */

:root {
  --lx-accent: #c2410c;
  --lx-on-accent: #ffffff;

  --lx-bg: #ffffff;
  --lx-surface: #f6f5f2;
  --lx-surface-2: #ebe8e3;
  --lx-border: #dad6cf;
  --lx-text: #26292c;
  --lx-heading: #15171a;
  --lx-muted: #5c6166;

  /* Status colors: all 4.5:1 or better on white */
  --lx-success: #1b7a3a;
  --lx-success-soft: #e8f5ec;
  --lx-error: #c0282d;
  --lx-error-soft: #fcebeb;
  --lx-warning: #8f5800;
  --lx-warning-soft: #fdf3dc;
  --lx-info: #1f5fb8;
  --lx-info-soft: #e9f1fb;

  --lx-font-body: "Merriweather", Georgia, Cambria, "Times New Roman", serif;
  --lx-font-ui: "Lato", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --lx-font-heading: var(--lx-font-ui);
  --lx-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lx-text-size: 1.0625rem;
  --lx-leading: 1.75;

  --lx-measure: 46rem;
  --lx-wide: 66rem;
  --lx-gutter: 1rem;
  --lx-space: 2.75rem;

  --lx-radius: 12px;
  --lx-radius-sm: 8px;
  --lx-shadow: 0 1px 2px rgb(24 22 20 / .06), 0 8px 24px rgb(24 22 20 / .07);
  --lx-shadow-lg: 0 2px 6px rgb(24 22 20 / .08), 0 22px 48px rgb(24 22 20 / .16);
  --lx-ease: cubic-bezier(.2, .7, .2, 1);
  --lx-speed: 260ms;
  --lx-focus: var(--lx-accent);

  /* Icons, used as CSS masks so they take any color */
  --lx-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --lx-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --lx-i-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6v.1'/%3E%3C/svg%3E");
  --lx-i-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3M12 3a6 6 0 0 0-3.6 10.8c.7.6 1.1 1.4 1.1 2.3v.4h5v-.4c0-.9.4-1.7 1.1-2.3A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --lx-i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 17.6a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 16.8v.1'/%3E%3C/svg%3E");
  --lx-i-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V13M12 16.3v.1'/%3E%3C/svg%3E");
  --lx-i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M12 3.8l2.5 5.1 5.6.8-4 4 .9 5.6L12 16.6l-5 2.7.9-5.6-4-4 5.6-.8L12 3.8z'/%3E%3C/svg%3E");
  --lx-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

:root, .lx, .lx-block {
  --lx-accent-soft: color-mix(in srgb, var(--lx-accent) 8%, var(--lx-bg));
  --lx-accent-tint: color-mix(in srgb, var(--lx-accent) 18%, var(--lx-bg));
  --lx-accent-line: color-mix(in srgb, var(--lx-accent) 38%, var(--lx-bg));
  --lx-accent-strong: color-mix(in srgb, var(--lx-accent) 84%, #000);
}


/* 2. Base ==================================================================
   Everything is scoped to .lx (the lesson column) or .lx-block (any block),
   so the library can sit inside an LMS page or an existing site. */

.lx,
.lx-block {
  font-family: var(--lx-font-body);
  color: var(--lx-text);
  line-height: var(--lx-leading);
}

.lx {
  container: lx / inline-size;
  font-size: var(--lx-text-size);
  background: var(--lx-bg);
  padding: 0 var(--lx-gutter) 5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.lx *, .lx *::before, .lx *::after,
.lx-block *, .lx-block *::before, .lx-block *::after { box-sizing: border-box; }

.lx [hidden], .lx-block [hidden] { display: none !important; }

.lx ::selection { background: var(--lx-accent-tint); }

/* Element resets use :where() so they stay easy to override: the column rules below
   and every block's own styles win without specificity fights. */
.lx :where(h1, h2, h3, h4, h5, h6),
.lx-block :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--lx-font-heading);
  color: var(--lx-heading);
  line-height: 1.2;
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}
.lx h1 { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.1rem); font-weight: 900; line-height: 1.1; letter-spacing: -.015em; }
.lx h2 { font-size: clamp(1.55rem, 1.3rem + 1vw, 2rem); font-weight: 900; }
.lx h3, .lx-block h3 { font-size: 1.3rem; font-weight: 700; }
.lx h4, .lx-block h4 { font-size: 1.1rem; font-weight: 700; }

.lx :where(p, ul, ol, dl, dd, figure, blockquote, pre, table),
.lx-block :where(p, ul, ol, dl, dd, figure, blockquote, pre, table) { margin: 0; }

/* The column: direct children sit in a readable measure; blocks can go wide or full.
   These come after the resets above so they win at equal specificity. */
.lx > * { max-width: var(--lx-measure); margin-inline: auto; margin-block: 0; }
.lx > [data-width="wide"] { max-width: var(--lx-wide); }
.lx > [data-width="full"] { max-width: none; }
.lx > * + * { margin-block-start: 1.1em; }
.lx > :is(h2, h3) { margin-block-start: 2em; }
.lx > [data-lx],
.lx > [data-lx] + *,
.lx > .lx-table { margin-block-start: var(--lx-space); }
.lx > :first-child { margin-block-start: 0; }
.lx :where(ul, ol) { padding-inline-start: 1.35em; }
.lx :where(li + li) { margin-block-start: .45em; }
.lx :where(li)::marker { color: var(--lx-accent); }
.lx a { color: var(--lx-accent-strong); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.lx a:hover { text-decoration-thickness: 2px; }
.lx strong { font-weight: 700; color: var(--lx-heading); }
.lx img, .lx video { display: block; max-width: 100%; height: auto; }
.lx code {
  font-family: var(--lx-font-mono);
  font-size: .88em;
  background: var(--lx-surface);
  border: 1px solid var(--lx-border);
  border-radius: 5px;
  padding: .08em .35em;
}
.lx > hr { border: 0; width: 5rem; height: 3px; border-radius: 3px; background: var(--lx-accent-line); }
.lx > blockquote { border-left: 4px solid var(--lx-accent); padding-left: 1.25rem; font-style: italic; }

.lx :focus-visible, .lx-block :focus-visible { outline: 3px solid var(--lx-focus); outline-offset: 3px; }
.lx [tabindex="-1"]:focus:not(:focus-visible),
.lx-block [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Tables are styled everywhere inside .lx; lx.js adds a scroll wrapper. */
.lx table, .lx-block table { width: 100%; border-collapse: collapse; font: 400 .95rem/1.5 var(--lx-font-ui); }
.lx caption { caption-side: top; text-align: left; padding: 0 0 .6rem; font-weight: 700; color: var(--lx-heading); }
.lx :is(th, td) { padding: .7rem .9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--lx-border); }
.lx thead th { background: var(--lx-surface); font-weight: 900; color: var(--lx-heading); border-bottom: 2px solid var(--lx-accent-line); }
.lx tbody tr:nth-child(even) { background: color-mix(in srgb, var(--lx-surface) 55%, var(--lx-bg)); }
.lx-table { overflow-x: auto; border: 1px solid var(--lx-border); border-radius: var(--lx-radius); }
.lx-table caption { padding: .9rem .9rem .6rem; }
.lx-table tbody tr:last-child > * { border-bottom: 0; }


/* 3. Utilities ============================================================ */

.lx-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lx-flow > * + * { margin-block-start: .85em; }
.lx-flow > :is(h2, h3, h4, h5, h6) + * { margin-block-start: .5em; }
.lx-flow > .lx-eyebrow + * { margin-block-start: .35rem; }

.lx-eyebrow {
  margin: 0;
  font: 900 .78rem/1.3 var(--lx-font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lx-accent-strong);
}

.lx-hint { margin: 0; font: italic 400 .95rem/1.5 var(--lx-font-ui); color: var(--lx-muted); }

.lx-panel {
  background: var(--lx-bg);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  box-shadow: var(--lx-shadow);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.lx-icon {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lx-icon--grip { fill: currentColor; stroke: none; }


/* 4. Buttons ============================================================== */

.lx-btn {
  --_bg: var(--lx-accent);
  --_fg: var(--lx-on-accent);
  --_bd: var(--lx-accent);
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 2.75rem;
  padding: .6rem 1.3rem;
  border: 2px solid var(--_bd);
  border-radius: 999px;
  background: var(--_bg);
  color: var(--_fg);
  font: 700 1rem/1.2 var(--lx-font-ui);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--lx-speed), color var(--lx-speed), border-color var(--lx-speed), transform 120ms;
}
.lx-btn:not(:disabled, [aria-disabled="true"]):hover { --_bg: var(--lx-accent-strong); --_bd: var(--lx-accent-strong); }
.lx-btn:not(:disabled, [aria-disabled="true"]):active { transform: translateY(1px); }
.lx-btn--secondary { --_bg: transparent; --_fg: var(--lx-accent-strong); }
.lx-btn--secondary:not(:disabled, [aria-disabled="true"]):hover { --_bg: var(--lx-accent-soft); --_fg: var(--lx-accent-strong); }
.lx-btn--ghost { --_bg: transparent; --_fg: var(--lx-text); --_bd: transparent; text-decoration: underline; text-underline-offset: .2em; }
.lx-btn--ghost:not(:disabled, [aria-disabled="true"]):hover { --_bg: var(--lx-surface); --_bd: transparent; --_fg: var(--lx-heading); }
.lx-btn--icon { width: 2.75rem; padding: 0; }
.lx-btn--sm { min-height: 2.25rem; padding: .35rem .95rem; font-size: .9rem; }
.lx-btn:disabled, .lx-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

.lx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; }


/* 5. Feedback ============================================================= */

.lx-feedback {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--lx-muted);
  border-radius: 0 var(--lx-radius-sm) var(--lx-radius-sm) 0;
  background: var(--lx-surface);
  font: 400 1rem/1.6 var(--lx-font-ui);
  animation: lx-fade-in var(--lx-speed) var(--lx-ease);
}
.lx-feedback > * + * { margin-top: .6em; }
.lx-feedback__title { display: flex; align-items: center; gap: .5rem; font-weight: 900; color: var(--lx-heading); }
.lx-feedback--correct { background: var(--lx-success-soft); border-color: var(--lx-success); }
.lx-feedback--correct .lx-feedback__title { color: var(--lx-success); }
.lx-feedback--incorrect { background: var(--lx-error-soft); border-color: var(--lx-error); }
.lx-feedback--incorrect .lx-feedback__title { color: var(--lx-error); }
.lx-feedback--neutral { background: var(--lx-info-soft); border-color: var(--lx-info); }
.lx-feedback--neutral .lx-feedback__title { color: var(--lx-info); }

/* Correct / incorrect marks used across practice blocks */
.lx-mark { flex: none; width: 1.4rem; height: 1.4rem; }
.is-correct > .lx-mark,
.is-answer > .lx-mark { background: var(--lx-success); -webkit-mask: var(--lx-i-check) center / contain no-repeat; mask: var(--lx-i-check) center / contain no-repeat; }
.is-incorrect > .lx-mark { background: var(--lx-error); -webkit-mask: var(--lx-i-x) center / contain no-repeat; mask: var(--lx-i-x) center / contain no-repeat; }
/* In matching and sequence the mark only takes up room once there's something to show. */
:is(.lx-match__item, .lx-seq__item):not(.is-correct, .is-incorrect) > .lx-mark { display: none; }


/* 6. Page & text blocks =================================================== */

/* Lesson header ----------------------------------------------------------- */
.lx > [data-lx="lesson-header"] { max-width: none; margin-inline: calc(var(--lx-gutter) * -1); }
[data-lx="lesson-header"] {
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) var(--lx-gutter) clamp(2rem, 1.5rem + 3vw, 3.5rem);
  background: linear-gradient(180deg, var(--lx-accent-soft), var(--lx-bg));
}
[data-lx="lesson-header"] > * { max-width: var(--lx-measure); margin-inline: auto; }
[data-lx="lesson-header"] > * + * { margin-top: 1rem; }
.lx-lesson-header__text > * + * { margin-top: 1rem; }
.lx-lesson-header__text > .lx-eyebrow + h1 { margin-top: .75rem; }
[data-lx="lesson-header"] h1 + p { font: 400 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.55 var(--lx-font-ui); color: var(--lx-muted); }
[data-lx="lesson-header"] img { width: 100%; border-radius: var(--lx-radius); box-shadow: var(--lx-shadow-lg); }
.lx-lesson-header--media {
  display: grid;
  gap: 2rem;
  align-items: center;
}
.lx-lesson-header--media > * { max-width: none; margin: 0; }
.lx-lesson-header--media > .lx-lesson-header__media { aspect-ratio: 4 / 3; object-fit: cover; }
@container lx (min-width: 50rem) {
  .lx-lesson-header--media {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 5cqi, 4rem);
    padding-inline: max(var(--lx-gutter), (100% - var(--lx-wide)) / 2);
  }
}

/* Objectives -------------------------------------------------------------- */
[data-lx="objectives"] {
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  background: var(--lx-surface);
  border-top: 4px solid var(--lx-accent);
  border-radius: 0 0 var(--lx-radius) var(--lx-radius);
}
[data-lx="objectives"] > :is(h2, h3, h4) {
  font: 900 .82rem/1.3 var(--lx-font-ui);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lx-accent-strong);
}
[data-lx="objectives"] > p { margin-top: .75rem; }
[data-lx="objectives"] > :is(ul, ol) { list-style: none; padding: 0; margin-top: 1.1rem; display: grid; gap: .8rem; }
[data-lx="objectives"] li { position: relative; margin: 0; padding-left: 2.35rem; }
[data-lx="objectives"] li::before,
[data-lx="objectives"] li::after { content: ""; position: absolute; left: 0; top: .22em; width: 1.45rem; height: 1.45rem; }
[data-lx="objectives"] li::before { border-radius: 50%; background: var(--lx-accent); }
[data-lx="objectives"] li::after { background: var(--lx-on-accent); -webkit-mask: var(--lx-i-check) center / 62% no-repeat; mask: var(--lx-i-check) center / 62% no-repeat; }

/* Callout ----------------------------------------------------------------- */
[data-lx="callout"] {
  --_c: var(--lx-info);
  --_soft: var(--lx-info-soft);
  --_icon: var(--lx-i-info);
  position: relative;
  padding: 1.2rem 1.4rem 1.25rem 3.7rem;
  background: var(--_soft);
  border-radius: var(--lx-radius);
  font-size: 1rem;
}
[data-lx="callout"]::before {
  content: "";
  position: absolute;
  left: 1.3rem; top: 1.3rem;
  width: 1.5rem; height: 1.5rem;
  background: var(--_c);
  -webkit-mask: var(--_icon) center / contain no-repeat;
  mask: var(--_icon) center / contain no-repeat;
}
[data-lx="callout"] > * + * { margin-top: .75em; }
[data-lx="callout"] > .lx-callout__label + * { margin-top: .2rem; }
[data-lx="callout"][data-variant="tip"] { --_c: var(--lx-success); --_soft: var(--lx-success-soft); --_icon: var(--lx-i-bulb); }
[data-lx="callout"][data-variant="warning"] { --_c: var(--lx-warning); --_soft: var(--lx-warning-soft); --_icon: var(--lx-i-alert); }
[data-lx="callout"][data-variant="important"] { --_c: var(--lx-error); --_soft: var(--lx-error-soft); --_icon: var(--lx-i-flag); }
[data-lx="callout"][data-variant="takeaway"] { --_c: var(--lx-accent-strong); --_soft: var(--lx-accent-soft); --_icon: var(--lx-i-star); border: 1px solid var(--lx-accent-line); }
.lx-callout__label { font: 900 .78rem/1.3 var(--lx-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--_c); }

/* Statement --------------------------------------------------------------- */
[data-lx="statement"] {
  padding-block: .5rem;
  font: 700 clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem)/1.4 var(--lx-font-heading);
  color: var(--lx-heading);
  text-align: center;
  text-wrap: balance;
}
[data-lx="statement"]::before,
[data-lx="statement"]::after { content: ""; display: block; width: 4.5rem; height: 4px; margin: 0 auto 1.5rem; border-radius: 4px; background: var(--lx-accent); }
[data-lx="statement"]::after { margin: 1.5rem auto 0; }
[data-lx="statement"][data-variant="bar"] { text-align: left; padding: .25rem 0 .25rem 1.5rem; border-left: 6px solid var(--lx-accent); }
[data-lx="statement"][data-variant="bar"]::before,
[data-lx="statement"][data-variant="bar"]::after { content: none; }

/* Quote ------------------------------------------------------------------- */
[data-lx="quote"] {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "quote quote" "photo cite";
  align-items: center;
  column-gap: 1rem;
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--lx-surface);
  border-radius: var(--lx-radius);
}
[data-lx="quote"] blockquote { grid-area: quote; margin: 0; font: italic 400 clamp(1.15rem, 1.05rem + .4vw, 1.3rem)/1.6 var(--lx-font-body); color: var(--lx-heading); }
[data-lx="quote"] blockquote::before { content: "\201C"; display: block; height: 2.2rem; font: 900 4.5rem/1 var(--lx-font-ui); color: var(--lx-accent); }
[data-lx="quote"] blockquote > * + * { margin-top: .75em; }
[data-lx="quote"] > img { grid-area: photo; width: 3.5rem; height: 3.5rem; margin-top: 1.25rem; border-radius: 50%; object-fit: cover; }
[data-lx="quote"] figcaption { grid-area: cite; margin-top: 1.25rem; font: 700 1rem/1.4 var(--lx-font-ui); color: var(--lx-heading); }
[data-lx="quote"]:not(:has(> img)) figcaption { grid-column: 1 / -1; }
[data-lx="quote"] figcaption small { display: block; font-size: .9rem; font-weight: 400; color: var(--lx-muted); }

/* Image ------------------------------------------------------------------- */
[data-lx="image"] img { width: 100%; border-radius: var(--lx-radius); }
[data-lx="image"] figcaption,
[data-lx="video"] figcaption { margin-top: .75rem; font: 400 .92rem/1.5 var(--lx-font-ui); color: var(--lx-muted); text-align: center; }
.lx > [data-lx="image"][data-width="full"] { margin-inline: calc(var(--lx-gutter) * -1); }
[data-lx="image"][data-width="full"] img { border-radius: 0; }

/* Media + text ------------------------------------------------------------ */
[data-lx="media-text"] { display: grid; gap: 1.5rem; align-items: center; }
[data-lx="media-text"] > :is(img, figure) { width: 100%; }
[data-lx="media-text"] img { width: 100%; border-radius: var(--lx-radius); }
[data-lx="media-text"] > :not(img, figure) > * + * { margin-top: .85em; }
@container lx (min-width: 40rem) {
  [data-lx="media-text"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4cqi, 3rem); }
  [data-lx="media-text"][data-align="right"] > :is(img, figure) { order: 2; }
}

/* Video ------------------------------------------------------------------- */
[data-lx="video"] :is(iframe, video) { display: block; width: 100%; border: 0; border-radius: var(--lx-radius); background: #000; box-shadow: var(--lx-shadow); }
[data-lx="video"] iframe { aspect-ratio: 16 / 9; height: auto; }
[data-lx="video"] details { margin-top: 1rem; border: 1px solid var(--lx-border); border-radius: var(--lx-radius-sm); background: var(--lx-surface); }
[data-lx="video"] summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1.1rem;
  font: 700 .95rem/1.3 var(--lx-font-ui);
  color: var(--lx-heading);
  cursor: pointer;
  list-style: none;
}
[data-lx="video"] summary::-webkit-details-marker { display: none; }
[data-lx="video"] summary::before {
  content: ""; width: 1rem; height: 1rem;
  background: currentColor;
  -webkit-mask: var(--lx-i-chevron) center / contain no-repeat;
  mask: var(--lx-i-chevron) center / contain no-repeat;
  rotate: -90deg;
  transition: rotate var(--lx-speed) var(--lx-ease);
}
[data-lx="video"] details[open] summary::before { rotate: 0deg; }
[data-lx="video"] details > :not(summary) { padding: 0 1.1rem 1rem; font: 400 .95rem/1.65 var(--lx-font-ui); }
[data-lx="video"] details > :not(summary) + :not(summary) { padding-top: 0; }

/* Steps (static numbered list) ------------------------------------------- */
ol[data-lx="steps"] { list-style: none; padding: 0; counter-reset: lx-step; display: grid; gap: 1.5rem; }
ol[data-lx="steps"] > li { position: relative; margin: 0; padding-left: 3.5rem; min-height: 2.4rem; counter-increment: lx-step; }
ol[data-lx="steps"] > li::before {
  content: counter(lx-step);
  position: absolute; left: 0; top: -.1rem;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lx-accent);
  color: var(--lx-on-accent);
  font: 900 1.05rem/1 var(--lx-font-ui);
}
ol[data-lx="steps"] > li:not(:last-child)::after {
  content: ""; position: absolute;
  left: calc(1.2rem - 1px); top: 2.55rem; bottom: -1.4rem;
  width: 2px; background: var(--lx-accent-line);
}
ol[data-lx="steps"] > li > strong:first-child { display: block; font: 700 1.1rem/1.4 var(--lx-font-ui); margin-bottom: .2rem; }

/* Lesson navigation ------------------------------------------------------- */
[data-lx="lesson-nav"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding-top: 2rem; border-top: 1px solid var(--lx-border); }
[data-lx="lesson-nav"] a {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  font: 700 1.05rem/1.35 var(--lx-font-ui);
  color: var(--lx-heading);
  text-decoration: none;
  transition: border-color var(--lx-speed), box-shadow var(--lx-speed);
}
[data-lx="lesson-nav"] a:hover { border-color: var(--lx-accent); box-shadow: var(--lx-shadow); }
[data-lx="lesson-nav"] a::before { content: "Previous"; font: 900 .75rem/1.2 var(--lx-font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--lx-accent-strong); }
[data-lx="lesson-nav"] a[rel~="next"] { grid-column: 2; text-align: right; }
[data-lx="lesson-nav"] a[rel~="next"]::before { content: "Next"; }


/* 7. Explore blocks ======================================================= */

/* Accordion --------------------------------------------------------------- */
.lx-accordion__list { border-top: 1px solid var(--lx-border); }
[data-lx="accordion"] > :not(.lx-accordion__list) + .lx-accordion__list { margin-top: 1.25rem; }
.lx-accordion__item { border-bottom: 1px solid var(--lx-border); }
.lx-accordion__heading { font-size: inherit !important; }
.lx-accordion__trigger {
  display: flex; align-items: center; gap: 1rem;
  width: 100%;
  padding: 1.15rem .25rem;
  background: none;
  border: 0;
  text-align: left;
  font: 700 1.15rem/1.35 var(--lx-font-heading);
  color: var(--lx-heading);
  cursor: pointer;
}
.lx-accordion__trigger:hover { color: var(--lx-accent-strong); }
.lx-accordion__title { flex: 1; }
.lx-accordion__icon { position: relative; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--lx-accent-soft); transition: background-color var(--lx-speed); }
.lx-accordion__icon::before,
.lx-accordion__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: .8rem; height: 2px;
  margin: -1px 0 0 -.4rem;
  border-radius: 2px;
  background: var(--lx-accent-strong);
  transition: transform var(--lx-speed) var(--lx-ease), background-color var(--lx-speed);
}
.lx-accordion__icon::after { transform: rotate(90deg); }
.lx-accordion__item.is-open .lx-accordion__icon { background: var(--lx-accent); }
.lx-accordion__item.is-open .lx-accordion__icon::before,
.lx-accordion__item.is-open .lx-accordion__icon::after { background: var(--lx-on-accent); }
.lx-accordion__item.is-open .lx-accordion__icon::after { transform: rotate(0deg); }
.lx-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--lx-speed) var(--lx-ease); }
.lx-accordion__item.is-open .lx-accordion__panel { grid-template-rows: 1fr; }
.lx-accordion__clip { min-height: 0; overflow: hidden; }
.lx-accordion__content { padding: 0 .25rem 1.5rem; }

/* Tabs -------------------------------------------------------------------- */
[data-lx="tabs"] > :not(.lx-tabs__bar, .lx-tabs__panels) + .lx-tabs__bar { margin-top: 1.25rem; }
.lx-tabs__bar { border-bottom: 2px solid var(--lx-border); }
.lx-tabs__list { position: relative; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.lx-tabs__list::-webkit-scrollbar { display: none; }
.lx-tabs__tab {
  flex: none;
  margin-bottom: -2px;
  padding: .85rem 1.1rem;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 6px 6px 0 0;
  font: 700 1rem/1.3 var(--lx-font-ui);
  color: var(--lx-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--lx-speed), border-color var(--lx-speed), background-color var(--lx-speed);
}
.lx-tabs__tab:hover { color: var(--lx-heading); background: var(--lx-surface); }
.lx-tabs__tab[aria-selected="true"] { color: var(--lx-accent-strong); border-bottom-color: var(--lx-accent); }
.lx-tabs__tab:focus-visible { outline-offset: -3px; }
.lx-tabs__panel { padding-top: 1.5rem; animation: lx-fade-in var(--lx-speed) var(--lx-ease); }
.lx-tabs__panel:focus-visible { outline-offset: 6px; }

/* Flashcards -------------------------------------------------------------- */
[data-lx="flashcards"] > :not(.lx-flashcards__grid, .lx-flashcards__deck, .lx-flashcards__nav) + :is(.lx-flashcards__grid, .lx-flashcards__deck) { margin-top: 1.5rem; }
.lx-flashcards__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); gap: 1.25rem; }
.lx-card { position: relative; perspective: 1400px; }
.lx-card__inner { display: grid; min-height: 15rem; height: 100%; transform-style: preserve-3d; transition: transform .6s var(--lx-ease); }
.lx-card.is-flipped .lx-card__inner { transform: rotateY(180deg); }
.lx-card__face {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; justify-content: center; gap: .6rem;
  padding: 1.5rem 1.4rem 3.25rem;
  border-radius: var(--lx-radius);
  text-align: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: var(--lx-shadow);
}
.lx-card__front { background: var(--lx-bg); border: 1px solid var(--lx-border); border-top: 4px solid var(--lx-accent); }
.lx-card__back { background: var(--lx-accent); color: var(--lx-on-accent); transform: rotateY(180deg); font: 400 1rem/1.6 var(--lx-font-ui); }
.lx-card__back :is(h2, h3, h4, strong, a) { color: inherit; }
.lx-card__title { font-size: 1.25rem !important; font-weight: 900 !important; }
.lx-card__face img { max-height: 8rem; width: auto; margin-inline: auto; border-radius: var(--lx-radius-sm); object-fit: contain; }
.lx-card__face > * { margin: 0 !important; }
.lx-card__flip {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  padding: .9rem;
  background: transparent;
  border: 0;
  border-radius: var(--lx-radius);
  color: var(--lx-muted);
  cursor: pointer;
}
.lx-card.is-flipped .lx-card__flip { color: var(--lx-on-accent); }
.lx-card__hint { display: inline-flex; align-items: center; gap: .35rem; font: 900 .74rem/1 var(--lx-font-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.lx-card__hint .lx-icon { width: 1rem; height: 1rem; }
@media (hover: hover) {
  .lx-card { transition: transform var(--lx-speed) var(--lx-ease); }
  .lx-card:hover { transform: translateY(-3px); }
}
.lx-flashcards__deck { display: grid; max-width: 25rem; margin-inline: auto; }
.lx-flashcards__deck::before {
  content: ""; grid-area: 1 / 1;
  border-radius: var(--lx-radius);
  background: var(--lx-surface-2);
  border: 1px solid var(--lx-border);
  transform: translate(10px, 10px) rotate(2deg);
}
.lx-flashcards__deck > .lx-card {
  grid-area: 1 / 1;
  visibility: hidden;
  opacity: 0;
  transform: translateX(1.5rem);
  transition: opacity var(--lx-speed) var(--lx-ease), transform var(--lx-speed) var(--lx-ease), visibility 0s linear var(--lx-speed);
}
.lx-flashcards__deck > .lx-card.is-before { transform: translateX(-1.5rem); }
.lx-flashcards__deck > .lx-card.is-current { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.lx-flashcards__deck .lx-card__inner { min-height: 17rem; }
.lx-flashcards__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.75rem; }
.lx-flashcards__count { min-width: 4.5rem; margin: 0; text-align: center; font: 700 .95rem/1 var(--lx-font-ui); color: var(--lx-muted); }

/* Hotspots (labeled graphic) --------------------------------------------- */
[data-lx="hotspots"] { container: lx-hotspots / inline-size; }
[data-lx="hotspots"] > :not(.lx-hotspots__stage, figcaption) + .lx-hotspots__stage { margin-top: 1.25rem; }
.lx-hotspots__stage, .lx-hotspots__canvas { position: relative; }
.lx-hotspots__canvas > img { width: 100%; border-radius: var(--lx-radius); box-shadow: var(--lx-shadow); }
[data-lx="hotspots"] figcaption { margin-top: .75rem; font: 400 .92rem/1.5 var(--lx-font-ui); color: var(--lx-muted); text-align: center; }
.lx-hotspots__marker {
  position: absolute; z-index: 2;
  width: 2.25rem; height: 2.25rem;
  translate: -50% -50%;
  display: grid; place-items: center;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--lx-accent);
  color: var(--lx-on-accent);
  box-shadow: 0 2px 10px rgb(0 0 0 / .35);
  font: 900 .95rem/1 var(--lx-font-ui);
  cursor: pointer;
  transition: transform .2s var(--lx-ease), background-color .2s;
}
.lx-hotspots__marker::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 3px solid var(--lx-accent); animation: lx-pulse 2.2s var(--lx-ease) infinite; pointer-events: none; }
.lx-hotspots__marker.is-visited { background: var(--lx-accent-strong); }
.lx-hotspots__marker.is-visited::after { display: none; }
.lx-hotspots__marker:hover { transform: scale(1.12); }
.lx-hotspots__marker .lx-icon { stroke-width: 3; transition: rotate .25s var(--lx-ease); }
.lx-hotspots__marker[aria-expanded="true"] { background: var(--lx-heading); transform: scale(1.12); }
.lx-hotspots__marker[aria-expanded="true"] .lx-icon { rotate: 45deg; }
.lx-hotspots__pop {
  position: absolute; z-index: 3;
  width: min(21rem, 88%);
  padding: 1.25rem 1.25rem .9rem;
  background: var(--lx-bg);
  border-top: 4px solid var(--lx-accent);
  border-radius: var(--lx-radius);
  box-shadow: var(--lx-shadow-lg);
  animation: lx-pop-in .2s var(--lx-ease);
}
.lx-hotspots__panel { font: 400 .98rem/1.6 var(--lx-font-ui); }
.lx-hotspots__panel > :is(h2, h3, h4, h5, h6):first-child { font-size: 1.15rem; padding-right: 2.25rem; }
.lx-hotspots__close {
  position: absolute; top: .6rem; right: .6rem;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--lx-surface);
  color: var(--lx-text);
  cursor: pointer;
}
.lx-hotspots__close:hover { background: var(--lx-surface-2); }
.lx-hotspots__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--lx-border); }
.lx-hotspots__count { font: 700 .85rem/1 var(--lx-font-ui); color: var(--lx-muted); }
@container lx-hotspots (max-width: 34rem) {
  .lx-hotspots__pop { position: relative; width: auto; margin-top: 1rem; box-shadow: var(--lx-shadow); border: 1px solid var(--lx-border); border-top: 4px solid var(--lx-accent); }
  .lx-hotspots__marker { width: 1.9rem; height: 1.9rem; font-size: .8rem; border-width: 2px; }
}

/* Process ----------------------------------------------------------------- */
.lx-process__deck { display: grid; }
[data-lx="process"] > :not(.lx-process__deck, .lx-process__nav) + .lx-process__deck { margin-top: 1.25rem; }
.lx-process__card {
  grid-area: 1 / 1;
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem);
  background: var(--lx-bg);
  border: 1px solid var(--lx-border);
  border-radius: var(--lx-radius);
  box-shadow: var(--lx-shadow);
  visibility: hidden;
  opacity: 0;
  transform: translateX(2rem);
  transition: opacity .35s var(--lx-ease), transform .35s var(--lx-ease), visibility 0s linear .35s;
}
.lx-process__card.is-before { transform: translateX(-2rem); }
.lx-process__card.is-current { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.lx-process__card img { border-radius: var(--lx-radius-sm); }
.lx-process__card > :is(h2, h3, h4, h5, h6) { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); font-weight: 900; }
.lx-process__card--intro,
.lx-process__card--summary { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.lx-process__card--intro { background: var(--lx-accent-soft); border-color: var(--lx-accent-line); }
.lx-process__card--summary { border-top: 4px solid var(--lx-success); }
.lx-process__card :is(.lx-process__card--intro, .lx-process__card--summary) .lx-actions,
.lx-process__card--intro .lx-actions,
.lx-process__card--summary .lx-actions { justify-content: center; }
.lx-process__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.25rem; }
.lx-process__dots { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.lx-process__dots li { width: .6rem; height: .6rem; margin: 0; border-radius: 50%; background: var(--lx-border); transition: background-color .2s, transform .2s; }
.lx-process__dots li.is-done { background: var(--lx-accent-line); }
.lx-process__dots li.is-current { background: var(--lx-accent); transform: scale(1.35); }

/* Timeline ---------------------------------------------------------------- */
[data-lx="timeline"] > :not(.lx-timeline__list) + .lx-timeline__list { margin-top: 1.5rem; }
.lx-timeline__list { position: relative; list-style: none; margin: 0; padding: 0; }
.lx-timeline__list::before { content: ""; position: absolute; left: calc(.575rem - 1px); top: .6rem; bottom: .6rem; width: 2px; background: var(--lx-accent-line); }
.lx-timeline__item { position: relative; margin: 0; padding-left: 2.75rem; }
.lx-timeline__item + .lx-timeline__item { margin-top: 2.25rem; }
.lx-timeline__item::before { content: ""; position: absolute; left: 0; top: .3rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--lx-bg); border: 3px solid var(--lx-accent); }
.lx-timeline__date { margin: 0 0 .3rem; font: 900 .85rem/1.3 var(--lx-font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--lx-accent-strong); }
.lx-timeline__body img { border-radius: var(--lx-radius-sm); }
.lx-timeline--animate .lx-timeline__item { opacity: 0; transform: translateY(1rem); transition: opacity .6s var(--lx-ease), transform .6s var(--lx-ease); }
.lx-timeline--animate .lx-timeline__item.is-visible { opacity: 1; transform: none; }

/* Carousel ---------------------------------------------------------------- */
[data-lx="carousel"] > :not(.lx-carousel__track, .lx-carousel__controls) + .lx-carousel__track { margin-top: 1.25rem; }
.lx-carousel__track {
  position: relative;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--lx-radius);
}
.lx-carousel__track::-webkit-scrollbar { display: none; }
.lx-carousel__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.lx-carousel__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--lx-radius); }
[data-lx="carousel"][data-fit="contain"] .lx-carousel__slide img { object-fit: contain; background: var(--lx-surface); }
.lx-carousel__slide figcaption { margin-top: .9rem; padding-inline: 1rem; font: 400 1rem/1.55 var(--lx-font-ui); text-align: center; }
.lx-carousel__controls { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }
.lx-carousel__dots { display: flex; gap: .15rem; }
.lx-carousel__dot { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; }
.lx-carousel__dot::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--lx-border); transition: background-color .2s, transform .2s; }
.lx-carousel__dot:hover::before { background: var(--lx-accent-line); }
.lx-carousel__dot[aria-current="true"]::before { background: var(--lx-accent); transform: scale(1.35); }

/* Compare (before / after) ------------------------------------------------ */
.lx-compare__stage {
  --pos: 50%;
  position: relative;
  overflow: hidden;
  border-radius: var(--lx-radius);
  box-shadow: var(--lx-shadow);
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.lx-compare__stage img { display: block; width: 100%; pointer-events: none; -webkit-user-drag: none; }
.lx-compare__after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.lx-compare__after img { width: 100%; height: 100%; object-fit: cover; }
.lx-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .15); pointer-events: none; }
.lx-compare__knob {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--lx-heading);
  box-shadow: 0 2px 10px rgb(0 0 0 / .3);
}
.lx-compare__knob .lx-icon { width: 1rem; height: 1rem; stroke-width: 3; }
.lx-compare__stage:has(.lx-compare__range:focus-visible) .lx-compare__knob { outline: 3px solid var(--lx-focus); outline-offset: 3px; }
.lx-compare__tag {
  position: absolute; top: .75rem;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgb(0 0 0 / .66);
  color: #fff;
  font: 900 .75rem/1.2 var(--lx-font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
.lx-compare__tag--before { left: .75rem; }
.lx-compare__tag--after { right: .75rem; }
[data-lx="compare"] figcaption { margin-top: .75rem; font: 400 .92rem/1.5 var(--lx-font-ui); color: var(--lx-muted); text-align: center; }

/* Reveal ------------------------------------------------------------------ */
[data-lx="reveal"] { padding: clamp(1.25rem, 1rem + 2vw, 2rem); background: var(--lx-surface); border-radius: var(--lx-radius); }
.lx-reveal__prompt { font-size: 1.05rem; color: var(--lx-heading); }
.lx-reveal__panel {
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--lx-bg);
  border-left: 4px solid var(--lx-accent);
  border-radius: 0 var(--lx-radius-sm) var(--lx-radius-sm) 0;
  animation: lx-fade-in .3s var(--lx-ease);
}
[data-lx="reveal"] .lx-actions { margin-top: 1.25rem; }

/* Glossary term ----------------------------------------------------------- */
.lx-term { position: relative; }
.lx-term__btn {
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline dotted var(--lx-accent) 2px;
  text-underline-offset: .22em;
  cursor: help;
}
.lx-term__btn:hover, .lx-term__btn[aria-expanded="true"] { color: var(--lx-accent-strong); text-decoration-style: solid; }
.lx-term__pop {
  position: absolute; left: 0; top: calc(100% + .45rem); z-index: 30;
  display: block;
  width: max-content;
  max-width: min(21rem, 86vw);
  translate: var(--shift, 0px) 0;
  padding: .85rem 1rem;
  border-radius: var(--lx-radius-sm);
  background: var(--lx-heading);
  color: #fff;
  box-shadow: var(--lx-shadow-lg);
  font: 400 .92rem/1.55 var(--lx-font-ui);
  font-style: normal;
  text-align: left;
  white-space: normal;
  animation: lx-pop-in .15s var(--lx-ease);
}
.lx-term__pop strong { color: #fff; }


/* 8. Practice blocks ====================================================== */

/* Knowledge check (quiz) -------------------------------------------------- */
.lx-quiz__stem { font-size: 1.1rem; color: var(--lx-heading); }
.lx-quiz__hint { margin-top: .6rem; }
.lx-quiz__choices { display: grid; gap: .65rem; min-width: 0; margin: 1.25rem 0 0; padding: 0; border: 0; }
.lx-choice {
  position: relative;
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .9rem 1rem;
  background: var(--lx-bg);
  border: 2px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  font: 400 1rem/1.5 var(--lx-font-ui);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.lx-choice:hover { border-color: var(--lx-accent-line); background: var(--lx-accent-soft); }
.lx-choice:has(:checked) { border-color: var(--lx-accent); background: var(--lx-accent-soft); }
.lx-choice:has(:focus-visible) { outline: 3px solid var(--lx-focus); outline-offset: 2px; }
.lx-choice:has(:disabled) { cursor: default; }
.lx-choice:has(:disabled):hover { border-color: var(--lx-border); background: var(--lx-bg); }
.lx-choice__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lx-choice__control {
  position: relative;
  flex: none;
  width: 1.35rem; height: 1.35rem;
  margin-top: .08rem;
  border: 2px solid var(--lx-muted);
  border-radius: 50%;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.lx-choice__input[type="checkbox"] + .lx-choice__control { border-radius: 5px; }
.lx-choice__input:checked + .lx-choice__control { border-color: var(--lx-accent); background: var(--lx-accent); box-shadow: inset 0 0 0 3px var(--lx-bg); }
.lx-choice__input[type="checkbox"]:checked + .lx-choice__control { box-shadow: none; }
.lx-choice__input[type="checkbox"]:checked + .lx-choice__control::after { content: ""; position: absolute; inset: 1px; background: var(--lx-on-accent); -webkit-mask: var(--lx-i-check) center / contain no-repeat; mask: var(--lx-i-check) center / contain no-repeat; }
.lx-choice__text { flex: 1; min-width: 0; }
.lx-choice.is-correct, .lx-choice.is-correct:hover { border-color: var(--lx-success); background: var(--lx-success-soft); }
.lx-choice.is-incorrect, .lx-choice.is-incorrect:hover { border-color: var(--lx-error); background: var(--lx-error-soft); }
.lx-choice.is-answer, .lx-choice.is-answer:hover { border-color: var(--lx-success); border-style: dashed; }
.lx-choice__note { margin: .4rem 0 .35rem 3.25rem; padding-left: .85rem; border-left: 3px solid var(--lx-border); font: 400 .95rem/1.55 var(--lx-font-ui); }

/* Fill in the blank ------------------------------------------------------- */
[data-lx="fill-blank"] .lx-blank-body p { line-height: 2.2; }
.lx-blank { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.lx-blank__input {
  max-width: 100%;
  margin: 0 .1em;
  padding: .15em .45em;
  border: 0;
  border-bottom: 2px solid var(--lx-accent);
  border-radius: 4px 4px 0 0;
  background: var(--lx-accent-soft);
  font: 700 .95em/1.3 var(--lx-font-ui);
  color: var(--lx-accent-strong);
}
.lx-blank__input::placeholder { color: var(--lx-muted); font-weight: 400; }
.lx-blank .lx-mark { width: 1.1em; height: 1.1em; display: none; }
.lx-blank.is-correct .lx-mark, .lx-blank.is-incorrect .lx-mark { display: inline-block; }
.lx-blank.is-correct .lx-blank__input { color: var(--lx-success); border-color: var(--lx-success); background: var(--lx-success-soft); }
.lx-blank.is-incorrect .lx-blank__input { color: var(--lx-error); border-color: var(--lx-error); background: var(--lx-error-soft); }
.lx-blank.is-revealed .lx-blank__input { color: var(--lx-heading); border-bottom-style: dashed; border-color: var(--lx-muted); background: var(--lx-surface); }

/* Matching ---------------------------------------------------------------- */
.lx-match { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: .75rem 1.25rem; margin-top: 1.25rem; }
.lx-match__col { display: grid; align-content: start; gap: .65rem; min-width: 0; }
.lx-match__item {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  width: 100%; min-height: 3.1rem;
  padding: .65rem .85rem;
  background: var(--lx-bg);
  border: 2px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  font: 400 .98rem/1.45 var(--lx-font-ui);
  color: var(--lx-text);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.lx-match__col--left .lx-match__item { font-weight: 700; color: var(--lx-heading); }
.lx-match__item:hover { border-color: var(--lx-accent-line); }
.lx-match__item[aria-pressed="true"] { border-color: var(--lx-accent); background: var(--lx-accent-soft); box-shadow: 0 0 0 3px var(--lx-accent-tint); }
.lx-match__item { min-width: 0; }
.lx-match__text { flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.lx-match__badge {
  flex: none;
  width: 1.65rem; height: 1.65rem;
  display: grid; place-items: center;
  border: 2px dashed var(--lx-border);
  border-radius: 50%;
  font: 900 .8rem/1 var(--lx-font-ui);
  color: #fff;
}
.lx-match__item[data-pair] { border-color: var(--_pair); background: color-mix(in srgb, var(--_pair) 7%, var(--lx-bg)); }
.lx-match__item[data-pair] .lx-match__badge { border: 0; background: var(--_pair); }
.lx-match__item[data-color="1"] { --_pair: #2f5fb3; }
.lx-match__item[data-color="2"] { --_pair: #7443b5; }
.lx-match__item[data-color="3"] { --_pair: #0e7a73; }
.lx-match__item[data-color="4"] { --_pair: #a8327a; }
.lx-match__item[data-color="5"] { --_pair: #8a5a14; }
.lx-match__item[data-color="6"] { --_pair: #3f4ab5; }
.lx-match__item[data-color="7"] { --_pair: #4a5568; }
.lx-match__item[data-color="8"] { --_pair: #5f7a14; }
.lx-match__item.is-correct { border-color: var(--lx-success); background: var(--lx-success-soft); }
.lx-match__item.is-incorrect { border-color: var(--lx-error); background: var(--lx-error-soft); }
.lx-match__item.is-locked { cursor: default; }
/* Phones: equal columns, and the pair badge moves onto the card's corner to free up width. */
@container lx (max-width: 30rem) {
  .lx-match { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .lx-match__item { padding: .6rem .65rem; font-size: .9rem; }
  .lx-match__badge { position: absolute; top: -.6rem; right: -.6rem; width: 1.4rem; height: 1.4rem; font-size: .72rem; }
  .lx-match__badge:empty { display: none; }
}

/* Sorting activity -------------------------------------------------------- */
.lx-sort__deck { display: grid; justify-items: center; gap: .85rem; padding: 1.25rem 0 1.5rem; }
.lx-sort__count { margin: 0; font: 700 .85rem/1 var(--lx-font-ui); letter-spacing: .04em; color: var(--lx-muted); }
.lx-sort__pile { display: grid; width: min(100%, 20rem); }
.lx-sort__pile.has-more::before,
.lx-sort__pile.has-more::after { content: ""; grid-area: 1 / 1; border-radius: var(--lx-radius); background: var(--lx-surface-2); border: 1px solid var(--lx-border); }
.lx-sort__pile.has-more::before { transform: translate(7px, 7px) rotate(2.5deg); }
.lx-sort__pile.has-more::after { transform: translate(-5px, 5px) rotate(-2deg); }
.lx-sort__card {
  grid-area: 1 / 1;
  position: relative; z-index: 1;
  display: grid; place-items: center;
  min-height: 8.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--lx-bg);
  border: 2px solid var(--lx-accent);
  border-radius: var(--lx-radius);
  box-shadow: var(--lx-shadow);
  font: 700 1.1rem/1.4 var(--lx-font-ui);
  color: var(--lx-heading);
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .3s var(--lx-ease), box-shadow .2s, border-color .2s;
}
.lx-sort__card.is-dragging { cursor: grabbing; transition: none; box-shadow: var(--lx-shadow-lg); z-index: 5; }
.lx-sort__card.is-wrong { border-color: var(--lx-error); animation: lx-shake .45s; }
.lx-sort__msg { min-height: 1.4em; margin: 0; font: 700 .95rem/1.4 var(--lx-font-ui); text-align: center; }
.lx-sort__msg.is-correct { color: var(--lx-success); }
.lx-sort__msg.is-incorrect { color: var(--lx-error); }
.lx-sort__bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; }
.lx-sort__bin {
  padding: .5rem;
  background: var(--lx-surface);
  border: 2px dashed var(--lx-border);
  border-radius: var(--lx-radius);
  transition: border-color .15s, background-color .15s, transform .15s;
}
.lx-sort__bin.is-over { border-color: var(--lx-accent); background: var(--lx-accent-soft); transform: scale(1.02); }
.lx-sort__bin-btn {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; min-height: 3.25rem;
  padding: .7rem .9rem;
  background: var(--lx-bg);
  border: 0;
  border-radius: var(--lx-radius-sm);
  box-shadow: 0 1px 2px rgb(0 0 0 / .08);
  font: 900 1rem/1.3 var(--lx-font-ui);
  color: var(--lx-heading);
  text-align: left;
  cursor: pointer;
}
.lx-sort__bin-btn:hover { color: var(--lx-accent-strong); }
.lx-sort__bin-count { display: grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .45rem; border-radius: 999px; background: var(--lx-accent-soft); color: var(--lx-accent-strong); font-size: .85rem; }
.lx-sort__placed { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: .6rem .3rem .3rem; list-style: none; }
.lx-sort__placed:empty { display: none; }
.lx-sort__chip { margin: 0 !important; padding: .3rem .7rem; background: var(--lx-bg); border: 1px solid var(--lx-border); border-radius: 999px; font: 400 .85rem/1.3 var(--lx-font-ui); animation: lx-pop-in .25s var(--lx-ease); }
.lx-sort__done { display: grid; justify-items: center; gap: .5rem; padding: 1.5rem 1rem 1.75rem; text-align: center; }
.lx-sort__done .lx-actions { margin-top: .75rem; }
.lx-sort__score { font: 900 1.4rem/1.3 var(--lx-font-ui); color: var(--lx-heading); }

/* Sequence (put in order) ------------------------------------------------- */
.lx-seq__list { display: grid; gap: .6rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
.lx-seq__item {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  margin: 0 !important;
  padding: .5rem .6rem .5rem .35rem;
  background: var(--lx-bg);
  border: 2px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  font: 400 1rem/1.45 var(--lx-font-ui);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.lx-seq__grip { flex: none; display: grid; place-items: center; width: 2rem; height: 2.5rem; border-radius: 6px; color: var(--lx-muted); cursor: grab; touch-action: none; }
.lx-seq__grip:hover { background: var(--lx-surface); color: var(--lx-heading); }
.lx-seq__pos { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--lx-surface-2); font: 900 .85rem/1 var(--lx-font-ui); color: var(--lx-heading); }
.lx-seq__text { flex: 1; min-width: 0; }
.lx-seq__moves { display: flex; gap: .3rem; }
.lx-seq__move { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--lx-border); border-radius: 50%; background: var(--lx-bg); color: var(--lx-text); cursor: pointer; }
.lx-seq__move .lx-icon { width: 1rem; height: 1rem; }
.lx-seq__move:not(:disabled):hover { border-color: var(--lx-accent); color: var(--lx-accent-strong); }
.lx-seq__move:disabled { opacity: .3; cursor: default; }
.lx-seq__item.is-dragging { z-index: 2; border-color: var(--lx-accent); box-shadow: var(--lx-shadow-lg); background: var(--lx-accent-soft); }
.lx-seq__item.is-dragging .lx-seq__grip { cursor: grabbing; }
.lx-seq__item.is-correct { border-color: var(--lx-success); background: var(--lx-success-soft); }
.lx-seq__item.is-correct .lx-seq__pos { background: var(--lx-success); color: #fff; }
.lx-seq__item.is-incorrect { border-color: var(--lx-error); background: var(--lx-error-soft); }
.lx-seq__item.is-incorrect .lx-seq__pos { background: var(--lx-error); color: #fff; }

/* Branching scenario ------------------------------------------------------ */
[data-lx="scenario"] { padding: clamp(1rem, .75rem + 2vw, 2rem); background: var(--lx-surface); border-radius: var(--lx-radius); }
.lx-scenario__intro { padding: 1rem .5rem; text-align: center; }
.lx-scenario__intro .lx-actions { justify-content: center; }
.lx-scenario__log { display: grid; gap: 1rem; }
.lx-scenario__msg { display: flex; align-items: flex-end; gap: .75rem; max-width: min(100%, 38rem); animation: lx-rise .35s var(--lx-ease); }
.lx-scenario__msg--you { margin-left: auto; flex-direction: row-reverse; }
.lx-scenario__avatar {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--_avatar, var(--lx-accent));
  color: #fff;
  font: 900 .95rem/1 var(--lx-font-ui);
}
.lx-scenario__avatar img { width: 100%; height: 100%; object-fit: cover; }
.lx-scenario__bubble {
  padding: .85rem 1.15rem;
  background: var(--lx-bg);
  border-radius: 18px 18px 18px 4px;
  box-shadow: var(--lx-shadow);
  font-size: 1rem;
  line-height: 1.65;
}
.lx-scenario__bubble > * + * { margin-top: .6em; }
.lx-scenario__msg--you .lx-scenario__bubble { background: var(--lx-accent); color: var(--lx-on-accent); border-radius: 18px 18px 4px 18px; font-family: var(--lx-font-ui); }
.lx-scenario__speaker { font: 900 .74rem/1.2 var(--lx-font-ui) !important; letter-spacing: .09em; text-transform: uppercase; color: var(--lx-muted); }
.lx-scenario__msg--you .lx-scenario__speaker { color: var(--lx-on-accent); opacity: .85; }
.lx-scenario__speaker + * { margin-top: .3rem !important; }
.lx-scenario__narration { max-width: 34rem; margin-inline: auto; font-style: italic; color: var(--lx-muted); text-align: center; animation: lx-rise .35s var(--lx-ease); }
.lx-scenario__narration > * + * { margin-top: .6em; }
.lx-scenario__coach {
  padding: .85rem 1.1rem;
  background: var(--lx-info-soft);
  border-left: 4px solid var(--lx-info);
  border-radius: 0 var(--lx-radius-sm) var(--lx-radius-sm) 0;
  font: 400 .95rem/1.55 var(--lx-font-ui);
  animation: lx-rise .35s var(--lx-ease);
}
.lx-scenario__coach > * + * { margin-top: .35rem; }
.lx-scenario__coach .lx-eyebrow { color: var(--lx-info); }
.lx-scenario__choices { display: grid; justify-items: end; gap: .6rem; margin-left: auto; max-width: min(100%, 34rem); animation: lx-rise .35s var(--lx-ease); }
.lx-scenario__choices .lx-eyebrow { color: var(--lx-muted); }
.lx-scenario__choice {
  padding: .8rem 1.1rem;
  background: var(--lx-bg);
  border: 2px solid var(--lx-accent);
  border-radius: 18px 18px 4px 18px;
  font: 700 .98rem/1.45 var(--lx-font-ui);
  color: var(--lx-accent-strong);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.lx-scenario__choice:hover { background: var(--lx-accent); color: var(--lx-on-accent); }
.lx-scenario__end {
  padding: 1.5rem;
  background: var(--lx-bg);
  border-top: 5px solid var(--lx-warning);
  border-radius: var(--lx-radius);
  box-shadow: var(--lx-shadow);
  animation: lx-rise .35s var(--lx-ease);
}
.lx-scenario__end .lx-eyebrow { color: var(--lx-warning); }
.lx-scenario__end--success { border-top-color: var(--lx-success); }
.lx-scenario__end--success .lx-eyebrow { color: var(--lx-success); }
.lx-scenario__end--fail { border-top-color: var(--lx-error); }
.lx-scenario__end--fail .lx-eyebrow { color: var(--lx-error); }

/* Reflection -------------------------------------------------------------- */
[data-lx="reflection"] { padding: clamp(1.25rem, 1rem + 2vw, 2rem); background: var(--lx-surface); border-radius: var(--lx-radius); }
.lx-reflection__prompt { font-size: 1.05rem; color: var(--lx-heading); }
.lx-reflection__input {
  display: block;
  width: 100%; min-height: 8.5rem;
  margin-top: 1rem;
  padding: .9rem 1rem;
  background: var(--lx-bg);
  border: 2px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  font: 400 1rem/1.6 var(--lx-font-ui);
  color: var(--lx-text);
  resize: vertical;
}
.lx-reflection__input:focus { border-color: var(--lx-accent); }
.lx-reflection__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .85rem; }
.lx-reflection__status { margin: 0; font: 400 .85rem/1.4 var(--lx-font-ui); color: var(--lx-muted); }
.lx-reflection__model {
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
  background: var(--lx-bg);
  border-left: 4px solid var(--lx-accent);
  border-radius: 0 var(--lx-radius-sm) var(--lx-radius-sm) 0;
  animation: lx-fade-in .3s var(--lx-ease);
}

/* Checklist --------------------------------------------------------------- */
[data-lx="checklist"] { padding: clamp(1.25rem, 1rem + 1.5vw, 1.75rem); background: var(--lx-bg); border: 1px solid var(--lx-border); border-radius: var(--lx-radius); box-shadow: var(--lx-shadow); }
[data-lx="checklist"] > * + * { margin-top: .75rem; }
.lx-checklist__list { display: grid; gap: .15rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.lx-checklist__item { margin: 0 !important; }
.lx-checklist__label { display: flex; align-items: flex-start; gap: .85rem; padding: .6rem .55rem; border-radius: var(--lx-radius-sm); font: 400 1rem/1.5 var(--lx-font-ui); cursor: pointer; }
.lx-checklist__label:hover { background: var(--lx-surface); }
.lx-checklist__label:has(:focus-visible) { outline: 3px solid var(--lx-focus); outline-offset: 1px; }
.lx-checklist__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lx-checklist__box { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-top: .02rem; border: 2px solid var(--lx-muted); border-radius: 6px; color: transparent; transition: background-color .15s, border-color .15s; }
.lx-checklist__box .lx-icon { width: 1rem; height: 1rem; stroke-width: 3.2; }
.lx-checklist__input:checked + .lx-checklist__box { background: var(--lx-success); border-color: var(--lx-success); color: #fff; }
.lx-checklist__item.is-checked .lx-checklist__text { color: var(--lx-muted); }
.lx-checklist__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.lx-checklist__bar { flex: 1; height: .5rem; overflow: hidden; border-radius: 999px; background: var(--lx-surface-2); }
.lx-checklist__bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--lx-success); transition: width .35s var(--lx-ease); }
.lx-checklist__progress { margin: 0; font: 700 .88rem/1 var(--lx-font-ui); color: var(--lx-muted); white-space: nowrap; }

/* Self-rating ------------------------------------------------------------- */
[data-lx="rating"] { padding: clamp(1.25rem, 1rem + 2vw, 2rem); background: var(--lx-surface); border-radius: var(--lx-radius); }
.lx-rating__prompt { font-size: 1.05rem; color: var(--lx-heading); }
.lx-rating__scale { display: grid; grid-template-columns: repeat(var(--_n, 5), minmax(0, 1fr)); gap: .5rem; margin: 1.25rem 0 0; padding: 0; border: 0; min-width: 0; }
.lx-rating__opt {
  position: relative;
  display: grid; place-items: center;
  min-height: 3rem;
  background: var(--lx-bg);
  border: 2px solid var(--lx-border);
  border-radius: var(--lx-radius-sm);
  font: 900 1.1rem/1 var(--lx-font-ui);
  color: var(--lx-heading);
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.lx-rating__opt:hover { border-color: var(--lx-accent-line); }
.lx-rating__opt:has(:checked) { background: var(--lx-accent); border-color: var(--lx-accent); color: var(--lx-on-accent); }
.lx-rating__opt:has(:focus-visible) { outline: 3px solid var(--lx-focus); outline-offset: 2px; }
.lx-rating__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.lx-rating__ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: .5rem; font: 400 .85rem/1.3 var(--lx-font-ui); color: var(--lx-muted); }
.lx-rating__feedback { margin-top: 1.25rem; padding: 1rem 1.25rem; background: var(--lx-bg); border-left: 4px solid var(--lx-accent); border-radius: 0 var(--lx-radius-sm) var(--lx-radius-sm) 0; font: 400 1rem/1.6 var(--lx-font-ui); animation: lx-fade-in .3s var(--lx-ease); }
.lx-rating__feedback > * + * { margin-top: .6em; }

/* Continue gate ----------------------------------------------------------- */
[data-lx="continue"] { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.lx-continue__btn { min-width: 11rem; font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; }
.lx-continue__hint { margin: 0; font: 400 .9rem/1.4 var(--lx-font-ui); color: var(--lx-muted); text-align: center; }
.lx-continue__hint:empty { display: none; }
[data-lx="continue"].is-done { display: none; }


/* 9. Course shell ========================================================= */

.lx-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .6rem 1rem;
  border-radius: var(--lx-radius-sm);
  background: var(--lx-heading);
  color: #fff;
  font: 700 .95rem/1 var(--lx-font-ui);
  text-decoration: none;
}
.lx-skip:focus { top: 1rem; }

.lx-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 1.25rem;
  padding: .7rem var(--lx-gutter);
  background: color-mix(in srgb, var(--lx-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--lx-border);
  font-family: var(--lx-font-ui);
}
/* Keep revealed content and #anchors from landing under the sticky top bar. */
.lx-topbar ~ .lx > * { scroll-margin-top: 4.5rem; }
.lx-topbar__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font: 900 .95rem/1.3 var(--lx-font-ui); color: var(--lx-heading); white-space: nowrap; text-overflow: ellipsis; }
.lx-topbar [data-lx="progress"] { flex: 0 1 22rem; }
/* On phones, leave the course title room instead of letting the bar take the whole row. */
@media (max-width: 40rem) { .lx-topbar [data-lx="progress"] { flex-basis: 13rem; } }

[data-lx="progress"] { display: flex; align-items: center; gap: .85rem; font: 700 .85rem/1.3 var(--lx-font-ui); color: var(--lx-muted); }
.lx-progress__bar { flex: 1; min-width: 5rem; height: .45rem; overflow: hidden; border-radius: 999px; background: var(--lx-surface-2); }
.lx-progress__bar > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--lx-accent); transition: width .5s var(--lx-ease); }
.lx-progress__label { margin: 0; white-space: nowrap; }


/* 10. Motion, loading, print ============================================= */

@keyframes lx-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lx-pop-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes lx-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lx-pulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes lx-shake {
  10%, 90% { translate: -2px 0; }
  20%, 80% { translate: 4px 0; }
  30%, 50%, 70% { translate: -7px 0; }
  40%, 60% { translate: 7px 0; }
}
@keyframes lx-failsafe { to { visibility: visible; } }

/* Hide interactive blocks until lx.js has built them (pages add .lx-js to <html>
   in the head). If the script never runs, they appear anyway after 3 seconds. */
.lx-js :is([data-lx="accordion"], [data-lx="tabs"], [data-lx="flashcards"], [data-lx="hotspots"],
  [data-lx="process"], [data-lx="timeline"], [data-lx="carousel"], [data-lx="compare"], [data-lx="reveal"],
  [data-lx="quiz"], [data-lx="fill-blank"], [data-lx="matching"], [data-lx="sort"], [data-lx="sequence"],
  [data-lx="scenario"], [data-lx="reflection"], [data-lx="checklist"], [data-lx="rating"],
  [data-lx="continue"]):not([data-lx-ready]) {
  visibility: hidden;
  animation: lx-failsafe 0s linear 3s forwards;
}
/* Content behind a Continue gate stays out of sight until the gate is built. */
.lx-js [data-lx="continue"]:not([data-lx-ready]) ~ * {
  visibility: hidden;
  animation: lx-failsafe 0s linear 3s forwards;
}

@media (prefers-reduced-motion: reduce) {
  .lx *, .lx *::before, .lx *::after,
  .lx-block *, .lx-block *::before, .lx-block *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .lx-card__inner, .lx-card.is-flipped .lx-card__inner, .lx-card__back { transform: none; }
  .lx-card.is-flipped .lx-card__front,
  .lx-card:not(.is-flipped) .lx-card__back { visibility: hidden; }
}

@media print {
  .lx-topbar, .lx-skip, [data-lx="continue"], .lx-actions, .lx-process__nav, .lx-carousel__controls, .lx-flashcards__nav { display: none !important; }
  .lx .lx-accordion__panel { grid-template-rows: 1fr !important; }
  .lx .lx-tabs__panel[hidden], .lx [data-lx-gated][hidden] { display: block !important; }
  .lx-process__card, .lx-flashcards__deck > .lx-card { visibility: visible !important; opacity: 1 !important; transform: none !important; grid-area: auto !important; }
  .lx-hotspots__marker::after { display: none; }
  .lx-timeline--animate .lx-timeline__item { opacity: 1 !important; transform: none !important; }
}

/* 9. Course options: font and layout ======================================
   Set by build_course.py on <html> from [course font=sans layout=slides].
   Hand-written pages can add the same attributes. */

/* font=sans: body text in the UI face instead of the serif. */
html[data-font="sans"] { --lx-font-body: var(--lx-font-ui); --lx-text-size: 1.125rem; --lx-leading: 1.6; }

/* layout=slides: every section is one wide slide, shown one at a time with Back and Next.
   Without JavaScript the slides stack and the page still reads top to bottom.

   The page is a column: top bar, the stage (main.lx, which grows to fill the window), deck bar.
   The visible slide fills the stage, so nothing needs to know the bars' heights.

   Inside a slide, content is anchored top left so the title sits in the same place on every
   slide. Three compositions, chosen by what the slide holds:
     stacked   a title over blocks at the wide measure (tables, quizzes, tabs, media, figures)
     split     a title in the left column and reading text in the right (text-only slides)
     lead      title and intro text on the left, one figure on the right (a figure with a lead-in)
   Below a 60rem container the split and lead compositions stack. */
html[data-layout="slides"] {
  --lx-stage: 72rem;                        /* the slide's outer width: the wide measure plus padding */
  --lx-prose: 40rem;                        /* reading text on a slide, about 70 characters at 18px */
  --lx-figure: 54rem;                       /* a figure on its own, sized to fit the stage height */
  --lx-slide-pad-x: clamp(.25rem, 2.5cqi, 2.5rem);
  --lx-slide-pad-y: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --lx-topbar-h: 3.75rem;                   /* nominal: scroll-margin only */
  /* The second color marks the slides: the rule under every title, the statement bars, the
     opener's rule, the position and progress lines. [course accent2=#…] sets --lx-accent-2 on
     :root; without it every use falls back to the accent. Its tint for the accent surface: */
  --lx-accent-2-on-accent: color-mix(in srgb, var(--lx-accent-2, var(--lx-accent)) 35%, #fff);
  /* Spacing scale on a slide: tight / base / block / section */
  --lx-s-tight: .75rem;
  --lx-s-base: 1rem;
  --lx-s-block: 2rem;
  --lx-s-section: 3rem;
}
html[data-layout="slides"] body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
html[data-layout="slides"] .lx { flex: 1 0 auto; display: flex; flex-direction: column; padding: 0 var(--lx-gutter); }
html[data-layout="slides"] .lx > .lx-slide {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--lx-stage);
  margin-inline: auto;
  margin-block: 0;
  padding: var(--lx-slide-pad-y) var(--lx-slide-pad-x) 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
html[data-layout="slides"] .lx > .lx-slide + .lx-slide { border-top: 1px solid var(--lx-border); } /* only visible without JS */
html[data-lx-deck] .lx > .lx-slide + .lx-slide { border-top: 0; }

/* Inside a slide: a title, prose at a reading measure, blocks across the stage. */
.lx-slide > * { max-width: var(--lx-wide); margin-inline: 0; margin-block: 0; }
.lx-slide > :is(p, ul, ol, dl, blockquote, [data-lx="reveal"], [data-lx="callout"], ol[data-lx="steps"]) { max-width: var(--lx-prose); }
.lx-slide > :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]) { max-width: var(--lx-figure); }
.lx-slide > [data-width="full"] { max-width: none; }
.lx-slide > * + * { margin-block-start: var(--lx-s-base); }
.lx-slide > [data-lx],
.lx-slide > [data-lx] + *,
.lx-slide > .lx-table,
.lx-slide > .lx-table + * { margin-block-start: var(--lx-s-block); }
.lx-slide > h2 {
  font-size: clamp(2.1rem, 1.45rem + 2.3vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.025em;
  max-width: 22ch;
}
.lx-slide > h2::after { content: ""; display: block; width: 4.5rem; height: 6px; margin-top: var(--lx-s-base); border-radius: 3px; background: var(--lx-accent-2, var(--lx-accent)); }
.lx-slide > h2 + * { margin-block-start: var(--lx-s-block); }
.lx-slide > h3 { margin-block-start: var(--lx-s-section); }
.lx-slide > [data-lx="callout"] { font-size: 1.0625rem; }
.lx-slide :is(th, td) { padding: .6rem .9rem; }

/* A statement alone on a slide is the slide: centered, large. Beside other content it keeps
   the slide's left axis and one rule above it. */
.lx-slide > [data-lx="statement"] { max-width: 36ch; text-align: left; font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }
.lx-slide > [data-lx="statement"]::before { margin-inline: 0; }
.lx-slide > [data-lx="statement"]::after { content: none; }
.lx-slide > [data-lx="statement"]::before, .lx-slide > [data-lx="statement"]::after { width: 4.5rem; height: 6px; border-radius: 3px; background: var(--lx-accent-2, var(--lx-accent)); }
.lx-slide > [data-lx="statement"][data-variant="bar"] { max-width: var(--lx-prose); border-left-color: var(--lx-accent-2, var(--lx-accent)); }
.lx-slide > [data-lx="statement"]:only-child { max-width: 36ch; margin-inline: auto; text-align: center; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.9rem); line-height: 1.2; letter-spacing: -.02em; }
.lx-slide > [data-lx="statement"]:only-child::before { margin-inline: auto; }
.lx-slide > [data-lx="statement"]:only-child::after { content: ""; }
html[data-layout="slides"] .lx > .lx-slide:has(> [data-lx="statement"]:only-child) { justify-content: center; }

.lx-slide > [data-lx="media-text"] { max-width: none; }
.lx-slide > [data-lx="media-text"] > :not(img, figure) { max-width: var(--lx-prose); }
.lx-slide > [data-lx="lesson-nav"] { max-width: var(--lx-wide); margin-block-start: var(--lx-s-section); }
/* With the deck built, the deck bar carries "Next lesson" and "Start the course". */
html[data-lx-deck] .lx-slide > [data-lx="lesson-nav"] { display: none; }

/* Split and lead compositions (wide containers only). The DOM order is unchanged:
   title, then text, then figure; only the columns move. */
@container lx (min-width: 60rem) {
  .lx-slide:has(> h2:first-child):not(:has(> :not(h2, p, ul, ol, dl, blockquote, [data-lx="reveal"], [data-lx="callout"], [data-lx="statement"], ol[data-lx="steps"], [data-lx="lesson-nav"]))) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 5cqi, 4rem);
    align-content: start;
  }
  .lx-slide:has(> h2:first-child):not(:has(> :not(h2, p, ul, ol, dl, blockquote, [data-lx="reveal"], [data-lx="callout"], [data-lx="statement"], ol[data-lx="steps"], [data-lx="lesson-nav"]))) > h2 { grid-column: 1; grid-row: 1 / span 40; max-width: none; }
  .lx-slide:has(> h2:first-child):not(:has(> :not(h2, p, ul, ol, dl, blockquote, [data-lx="reveal"], [data-lx="callout"], [data-lx="statement"], ol[data-lx="steps"], [data-lx="lesson-nav"]))) > :not(h2) { grid-column: 2; }
  .lx-slide:has(> h2:first-child):not(:has(> :not(h2, p, ul, ol, dl, blockquote, [data-lx="reveal"], [data-lx="callout"], [data-lx="statement"], ol[data-lx="steps"], [data-lx="lesson-nav"]))) > h2 + * { margin-block-start: .55rem; } /* first baseline level with the title's cap height */

  .lx-slide:has(> h2:first-child):has(> h2 ~ p):has(> :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]):last-child):not(:has(> :not(h2, p, ul, ol, [data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]))) {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
    column-gap: clamp(2rem, 5cqi, 4rem);
    align-content: start;
  }
  .lx-slide:has(> h2:first-child):has(> h2 ~ p):has(> :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]):last-child):not(:has(> :not(h2, p, ul, ol, [data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]))) > :not([data-lx]) { grid-column: 1; }
  .lx-slide:has(> h2:first-child):has(> h2 ~ p):has(> :is([data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]):last-child):not(:has(> :not(h2, p, ul, ol, [data-lx="hotspots"], [data-lx="compare"], [data-lx="image"]))) > [data-lx] { grid-column: 2; grid-row: 1 / span 40; max-width: none; margin-block-start: .55rem; }
}

/* The first slide is the lesson's opener: the course color, edge to edge, the title large. */
html[data-layout="slides"] .lx > .lx-slide:has(> [data-lx="lesson-header"]) { padding: 0; width: calc(100% + 2 * var(--lx-gutter)); max-width: none; margin-inline: calc(var(--lx-gutter) * -1); justify-content: stretch; }
.lx-slide > [data-lx="lesson-header"] {
  max-width: none;
  margin-block-start: 0;
  flex: 1;
  display: grid;
  align-content: center;
  padding-block: clamp(2.5rem, 6vh, 5rem);
  padding-inline: max(var(--lx-gutter), (100% - var(--lx-stage)) / 2 + var(--lx-slide-pad-x));
  background: var(--lx-accent);
  color: var(--lx-on-accent);
}
.lx-slide > [data-lx="lesson-header"] > * { max-width: var(--lx-wide); margin-inline: 0; }
.lx-slide > [data-lx="lesson-header"] :is(p, .lx-eyebrow) { color: color-mix(in srgb, var(--lx-on-accent) 88%, var(--lx-accent)); }
.lx-slide > [data-lx="lesson-header"] .lx-eyebrow { font-size: .85rem; }
.lx-slide > [data-lx="lesson-header"] h1 { color: var(--lx-on-accent); max-width: 14ch; font-size: clamp(2.75rem, 1.4rem + 4.6vw, 5.5rem); line-height: 1; letter-spacing: -.03em; }
.lx-slide > [data-lx="lesson-header"] h1::before { content: ""; display: block; width: 4.5rem; height: 6px; margin-bottom: 1.5rem; border-radius: 3px; background: var(--lx-accent-2-on-accent); }
.lx-slide > [data-lx="lesson-header"] .lx-eyebrow + h1 { margin-top: 1.5rem; }
.lx-slide > [data-lx="lesson-header"] h1 + p { max-width: 34rem; margin-top: 1.25rem; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.5; }
.lx-slide > .lx-lesson-header--media > * { max-width: none; }
.lx-slide > .lx-lesson-header--media img { box-shadow: 0 2px 6px rgb(0 0 0 / .18), 0 24px 56px rgb(0 0 0 / .32); }
@container lx (min-width: 50rem) {
  .lx-slide > .lx-lesson-header--media { padding-inline: max(var(--lx-gutter), (100% - var(--lx-stage)) / 2 + var(--lx-slide-pad-x)); }
}

/* Top bar on slides: the course color carries the title. */
html[data-layout="slides"] .lx-topbar {
  gap: 1.5rem;
  padding: .85rem var(--lx-gutter);
  background: var(--lx-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--lx-on-accent) 18%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--lx-on-accent);
}
html[data-layout="slides"] .lx-topbar__title { color: var(--lx-on-accent); font-size: 1.05rem; }
.lx-topbar__lesson { font-weight: 400; color: color-mix(in srgb, var(--lx-on-accent) 88%, var(--lx-accent)); }
.lx-topbar__lesson::before { content: " · "; opacity: .6; }
html[data-layout="slides"] .lx-topbar [data-lx="progress"] { color: var(--lx-on-accent); }
html[data-layout="slides"] .lx-topbar .lx-progress__bar { background: color-mix(in srgb, var(--lx-on-accent) 28%, transparent); }
html[data-layout="slides"] .lx-topbar .lx-progress__bar > span { background: var(--lx-accent-2-on-accent); }
html[data-layout="slides"] .lx ::selection { background: color-mix(in srgb, var(--lx-accent-2, var(--lx-accent)) 22%, var(--lx-bg)); }
html[data-layout="slides"] .lx-topbar :focus-visible { outline: 3px solid var(--lx-on-accent); outline-offset: 3px; }
html[data-layout="slides"] .lx-topbar ~ .lx > * { scroll-margin-top: var(--lx-topbar-h); }

/* The deck bar: Back, where you are, Next. A three-column grid keeps the count centered
   whatever sits at the ends (Next, Next lesson, Start the course, or nothing). */
.lx-deck,
.lx-deck *, .lx-deck *::before, .lx-deck *::after { box-sizing: border-box; }
.lx-deck {
  position: sticky; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 1rem;
  min-height: 4.25rem;
  padding: .6rem var(--lx-gutter);
  background: color-mix(in srgb, var(--lx-bg) 96%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-top: 1px solid var(--lx-border);
  font-family: var(--lx-font-ui);
}
.lx-deck::before { content: ""; position: absolute; left: 0; top: -1px; height: 4px; width: 100%; transform: scaleX(var(--_pos, 0)); transform-origin: left; background: var(--lx-accent-2, var(--lx-accent)); transition: transform .4s var(--lx-ease); }
.lx-deck__start { display: flex; justify-content: flex-start; }
.lx-deck__end { display: flex; justify-content: flex-end; }
.lx-deck__mid { min-width: 0; text-align: center; }
.lx-deck__count { margin: 0; font: 700 .9rem/1.3 var(--lx-font-ui); color: var(--lx-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lx-deck__hint { margin: .15rem 0 0; font: 400 .85rem/1.3 var(--lx-font-ui); color: var(--lx-muted); text-wrap: balance; }
.lx-deck__hint:empty { display: none; }
.lx-deck [hidden] { display: none !important; }
.lx-deck .lx-btn { min-width: 7.5rem; white-space: nowrap; }
.lx-deck .lx-btn:disabled { opacity: .35; }
.lx-deck :focus-visible { outline: 3px solid var(--lx-focus); outline-offset: 3px; }
.lx-deck ::selection { background: var(--lx-accent-tint); }

@media (max-width: 40rem) {
  html[data-layout="slides"] .lx > .lx-slide { padding-block: 1.5rem 1.5rem; }
  html[data-layout="slides"] .lx > .lx-slide:has(> [data-lx="lesson-header"]) { padding: 0; }
  .lx-slide > [data-lx="lesson-header"] { padding-block: 3rem; }
  .lx-slide > [data-lx="lesson-header"] h1 { max-width: none; }
  html[data-layout="slides"] .lx-topbar { gap: 1rem; padding: .7rem var(--lx-gutter); }
  html[data-layout="slides"] .lx-topbar__title { white-space: normal; font-size: .95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lx-topbar__lesson { display: none; }
  html[data-layout="slides"] .lx-topbar .lx-progress__label { display: none; }
  html[data-layout="slides"] .lx-topbar [data-lx="progress"] { flex: 0 0 5.5rem; }
  .lx-deck { column-gap: .75rem; padding-inline: var(--lx-gutter); }
  .lx-deck .lx-btn { min-width: 0; padding-inline: .9rem; }
  .lx-deck__count { font-size: .8rem; }
  .lx-deck__hint { font-size: .8rem; }
}

@keyframes lx-slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lx-slide.is-entering { animation: lx-slide-in .32s var(--lx-ease) both; }
@media (prefers-reduced-motion: reduce) { .lx-slide.is-entering { animation: none; } }