/* AI Learn — the hub, the course page and the lesson player (roadmap Plan 21).
 *
 * Page-scoped plain CSS, like 37-lab.css: loaded only by the /ailearn templates, so no Tailwind
 * rebuild is needed and scripts/build_light_theme.py picks it up by its number.
 */

:root {
  --al-accent: 56, 189, 248;     /* sky-400 — the "learning path" colour */
  --al-ok: 16, 185, 129;
  --al-warn: 245, 158, 11;
  --al-bad: 244, 63, 94;
}

/* The player needs the room a 16:9 clip and a practice frame want. */
#site-main.al-wide { max-width: 88rem; }

/* ── shared chrome ────────────────────────────────────────────────────────── */
.al-crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.8rem; font-size: 0.8rem; color: #94a3b8; }
.al-crumbs a { color: #cbd5e1; }
.al-crumbs a:hover { color: #f8fafc; }

.al-head { margin-bottom: 1.4rem; }
.al-eyebrow { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--al-accent)); }
.al-title { margin: 0.2rem 0 0.4rem; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 700; color: #f8fafc; }
.al-lead { max-width: 46rem; margin: 0; font-size: 0.95rem; line-height: 1.6; color: #cbd5e1; }
.al-source { margin: 0.3rem 0 0; font-size: 0.72rem; color: #64748b; }
.al-empty { font-size: 0.9rem; color: #94a3b8; }

.al-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.5rem;
  padding: 0.35rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.al-btn:hover { background: rgba(255, 255, 255, 0.1); }
.al-btn:disabled { opacity: 0.5; cursor: default; }
/* FILLED, not a translucent tint: the primary action is the brightest thing in its row. */
.al-btn--primary {
  border-color: transparent;
  background: linear-gradient(180deg, rgb(56, 189, 248), rgb(14, 165, 233));
  color: #04121f;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 6px 18px -8px rgba(56, 189, 248, 0.8);
}
.al-btn--primary:hover { background: linear-gradient(180deg, rgb(125, 211, 252), rgb(56, 189, 248)); }
.al-btn--primary:disabled { box-shadow: none; }
/* Help, not an alternative to answering — so each keeps its own colour and a real outline
   instead of the near-invisible grey text they were ("hint and notes buttons too subtle"). */
.al-btn--ghost { min-height: 2.3rem; padding: 0.3rem 0.8rem; font-size: 0.84rem; font-weight: 600; }
.al-btn--hint { border-color: rgba(var(--al-warn), 0.5); background: rgba(var(--al-warn), 0.12); color: #fcd34d; }
.al-btn--hint:hover { background: rgba(var(--al-warn), 0.22); color: #fde68a; }
.al-btn--notes { border-color: rgba(167, 139, 250, 0.5); background: rgba(167, 139, 250, 0.12); color: #c4b5fd; }
.al-btn--notes:hover { background: rgba(167, 139, 250, 0.22); color: #ddd6fe; }
/* Back is the one quiet button on the page: it undoes rather than advances. */
.al-stage-actions [data-al-back] { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #cbd5e1; }
.al-stage-actions [data-al-back]:hover { background: rgba(255, 255, 255, 0.09); color: #f1f5f9; }

/* `ui_icon` emits the glyph straight onto the <svg>, and an <svg> with no size collapses — a
   button carrying one showed nothing at all ("back and next still have no symbols"). The rule
   lives in the bundle too, since ui_icon is site-wide; it is repeated here so these pages are
   right whichever of the two lands first. */
.ui-ico { display: inline-block; flex: none; width: 1.05em; height: 1.05em; vertical-align: -0.15em; }

/* Every icon in the player: the site's Lucide set, in the caller's own colour. */
.al-ico { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.al-ico svg { width: 1.05em; height: 1.05em; }
.al-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

/* ── hub ──────────────────────────────────────────────────────────────────── */
.al-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.al-course-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.15s, background 0.15s;
}
.al-course-card:hover { border-color: rgba(var(--al-accent), 0.5); background: rgba(var(--al-accent), 0.07); }
.al-course-card a { display: block; padding: 1.1rem 1.2rem; }
.al-course-card h2 { margin: 0 0 0.3rem; font-size: 1.1rem; font-weight: 700; color: #f8fafc; }
.al-course-meta { margin: 0; font-size: 0.8rem; color: #94a3b8; }

/* ── course page ──────────────────────────────────────────────────────────── */
.al-units { display: grid; gap: 1.1rem; }
.al-unit { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; padding: 1rem 1.1rem; }
.al-unit-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0 0 0.7rem; font-size: 1.05rem; font-weight: 700; color: #f1f5f9; }
.al-unit-n {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.6rem;
  background: rgba(var(--al-accent), 0.18);
  color: #e0f2fe;
  font-size: 0.85rem;
}
.al-unit-weeks { margin-left: auto; font-size: 0.72rem; font-weight: 500; color: #64748b; }
/* A unit's / subunit's own way in, so "I want unit 3" is one click rather than hunting for unit
   3's first lesson. */
.al-scope-go {
  flex: none;
  padding: 0.2rem 0.7rem;
  border: 1px solid rgba(var(--al-accent), 0.42);
  border-radius: 999px;
  background: rgba(var(--al-accent), 0.14);
  font-size: 0.74rem;
  font-weight: 700;
  white-space: nowrap;
  color: #e0f2fe;
}
.al-scope-go:hover { border-color: rgba(var(--al-accent), 0.7); background: rgba(var(--al-accent), 0.26); }
.al-unit-weeks + .al-scope-go { margin-left: 0.6rem; }
.al-scope-go--sub { margin-left: 0.6rem; padding: 0.1rem 0.6rem; font-size: 0.7rem; }
.al-sub-cov + .al-scope-go--sub { margin-left: 0.6rem; }
/* Always visible, never hover-only: "buttons are missing" is not answered by a button you have
   to find. It is quieter than the unit's and the rows' so the three levels stay legible. */
.al-scope-go--sub { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #cbd5e1; }
.al-scope-go--sub:hover { border-color: rgba(var(--al-accent), 0.6); background: rgba(var(--al-accent), 0.2); color: #e0f2fe; }

.al-window {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  border: 1px dashed rgba(var(--al-warn), 0.45);
  border-radius: 1rem;
  background: rgba(var(--al-warn), 0.05);
  color: #fde68a;
  font-size: 0.9rem;
}
.al-window:hover { background: rgba(var(--al-warn), 0.1); }
.al-window-tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.al-window-title { font-weight: 600; color: #fef3c7; }
.al-window-weeks { margin-left: auto; font-size: 0.72rem; color: #a16207; }

.al-sub { margin-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 0.5rem; }
.al-sub > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.35rem 0; cursor: pointer; font-size: 0.92rem; color: #e2e8f0; }
.al-sub-code { min-width: 2.4rem; font-variant-numeric: tabular-nums; font-weight: 700; color: rgb(var(--al-accent)); }
.al-sub-title { font-weight: 600; }
.al-sub-flag { padding: 0.05rem 0.45rem; border: 1px solid rgba(var(--al-ok), 0.45); border-radius: 999px; font-size: 0.66rem; font-weight: 700; color: #6ee7b7; }
.al-sub-cov { margin-left: auto; font-size: 0.7rem; color: #64748b; }

/* A subunit with nothing to do yet is a heading, not a section — it must not compete with one
   that has a lesson in it. */
.al-sub.is-empty > summary { opacity: 0.62; }

/* The curriculum folds away: open by default it buried the one row a reader can click under
   eight bullets, and the page read as a syllabus rather than a course. */
.al-syllabus { margin: 0.1rem 0 0.5rem 3rem; }
.al-syllabus > summary { padding: 0.2rem 0; cursor: pointer; font-size: 0.75rem; color: #64748b; }
.al-syllabus > summary:hover { color: #94a3b8; }
.al-syllabus-n { margin-left: 0.4rem; color: #475569; }
.al-bullets { margin: 0.2rem 0 0.6rem 1rem; padding: 0; list-style: disc; font-size: 0.82rem; line-height: 1.6; color: #94a3b8; }
.al-coming { margin: 0.2rem 0 0.4rem 3rem; font-size: 0.82rem; color: #64748b; }

/* The hero: the first thing on a course page is the thing you do. */
.al-start {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.2rem 1rem;
  margin-bottom: 1.2rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid rgba(var(--al-accent), 0.4);
  border-radius: 1rem;
  background: rgba(var(--al-accent), 0.1);
}
.al-start:hover { border-color: rgba(var(--al-accent), 0.65); background: rgba(var(--al-accent), 0.16); }
.al-start-kicker { grid-column: 1; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--al-accent)); }
.al-start-name { grid-column: 1; font-size: 1.05rem; font-weight: 700; color: #f8fafc; }
.al-start-note { grid-column: 1; font-size: 0.75rem; color: #94a3b8; }
.al-start-go {
  grid-column: 2; grid-row: 1 / span 3;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(var(--al-accent), 0.55);
  border-radius: 999px;
  font-size: 0.85rem; font-weight: 700; white-space: nowrap;
  color: #e0f2fe; background: rgba(var(--al-accent), 0.22);
}
@media (max-width: 30rem) {
  .al-start { grid-template-columns: minmax(0, 1fr); }
  .al-start-go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.5rem; }
}

.al-lessons { display: grid; gap: 0.3rem; margin: 0.2rem 0 0.5rem; padding: 0; list-style: none; }
.al-lesson { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.al-lesson-link { display: flex; align-items: center; gap: 0.6rem; flex: 1 1 18rem; min-height: 2.5rem; padding: 0.3rem 0.6rem; border-radius: 0.6rem; }
.al-lesson-link:hover { background: rgba(255, 255, 255, 0.05); }
.al-lesson-mark { width: 1.1rem; color: #475569; font-size: 0.9rem; }
.al-lesson.is-started .al-lesson-mark { color: rgb(var(--al-warn)); }
.al-lesson.is-done .al-lesson-mark { color: rgb(var(--al-ok)); }
.al-lesson-name { font-size: 0.9rem; font-weight: 600; color: #e2e8f0; }
.al-lesson-meta { margin-left: auto; font-size: 0.72rem; color: #64748b; }
/* A row needs a verb or it reads as a table entry rather than a way in. */
.al-lesson-go {
  padding: 0.15rem 0.6rem;
  border: 1px solid rgba(var(--al-accent), 0.4);
  border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; white-space: nowrap;
  color: #e0f2fe; background: rgba(var(--al-accent), 0.14);
}
.al-lesson-link:hover .al-lesson-go { border-color: rgba(var(--al-accent), 0.7); background: rgba(var(--al-accent), 0.26); }
.al-lesson.is-coming { padding: 0.3rem 0.6rem; opacity: 0.55; }
.al-lesson-soon { font-size: 0.72rem; color: #64748b; }
/* A teacher's extras sit after the student-facing link and stay smaller than it — "Assign" was
   once the only verb here, which taught the reader that a lesson has to be assigned first. */
.al-lesson-tools { display: flex; gap: 0.7rem; padding-right: 0.3rem; font-size: 0.72rem; }
.al-lesson-tools a { color: #94a3b8; }
.al-lesson-tools a:hover { color: #c7d2fe; }

/* ── the player ───────────────────────────────────────────────────────────── */
.al-player { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
/* The RAIL is the part that scrolls, not the whole column — with the column scrolling, the
   "Full lesson" links at its foot were clipped mid-word and sat over the page's own buttons. */
/* ⚠️ 11rem, not 2rem. `100dvh - 2rem` is right only once the column is PINNED; at rest it sits
   ~150 px down the page (header + breadcrumbs), so that cap never bound and the last line of the
   rail ran off the bottom of the window and under the floating Ask-AI button. This fits at rest
   and merely leaves some slack when pinned, which nobody notices. The padding keeps the last row
   clear of that button when the rail is scrolled to its end. */
.al-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; max-height: calc(100dvh - 11rem); }
.al-side > * { flex: none; }
.al-side-scroll {
  flex: 1 1 auto;
  min-height: 3rem;
  padding-bottom: 3rem;
  overflow-y: auto;
  display: grid;
  gap: 0.6rem;
  align-content: start;
  /* A row cut by the scroll edge should read as "more below", not as a broken half-line. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
}
.al-preview { margin: 0; padding: 0.3rem 0.6rem; border: 1px solid rgba(var(--al-warn), 0.5); border-radius: 0.5rem; font-size: 0.75rem; color: #fcd34d; }
.al-lesson-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: #f8fafc; }
.al-covers { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; line-height: 1.45; color: #94a3b8; }
.al-covers span { margin-right: 0.35rem; font-variant-numeric: tabular-nums; font-weight: 700; color: rgb(var(--al-accent)); }
.al-bar { height: 0.3rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.al-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: rgb(var(--al-accent)); transition: width 0.3s ease; }
.al-progress { margin: 0; font-size: 0.75rem; color: #94a3b8; }
.al-rail ol { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.al-rail-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.2rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  background: none;
  color: #cbd5e1;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
}
.al-rail-btn:hover { background: rgba(255, 255, 255, 0.05); }
.al-rail-item.is-on .al-rail-btn { border-color: rgba(var(--al-accent), 0.5); background: rgba(var(--al-accent), 0.12); color: #f8fafc; }
.al-rail-mark { width: 1rem; color: #475569; }
.al-rail-ico { color: #64748b; }
.al-rail-ico svg { width: 0.95rem; height: 0.95rem; }
.al-rail-item.is-on .al-rail-ico { color: rgb(var(--al-accent)); }
.al-rail-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-sidelink { margin: 0; font-size: 0.75rem; color: #94a3b8; }
.al-sidelink a { color: #a5b4fc; }

.al-stage { min-width: 0; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 1rem; padding: 1.1rem 1.2rem; background: rgba(255, 255, 255, 0.02); }
.al-stage-head { display: grid; gap: 0.3rem; margin-bottom: 0.9rem; }
.al-stage-head h2 { margin: 0; font-size: 1.15rem; font-weight: 700; color: #f8fafc; }
.al-stage-kind { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--al-accent)); }
/* The sticky bar floats over the end of the block, so the block needs room under its own last
   line — without it a frame's final answer box sat behind Back / Next. */
.al-stage-body { min-height: 12rem; padding-bottom: 1.2rem; }
.al-stage-body:focus { outline: none; }
/* Sticky, because measured at a 768 px viewport this row sat at y=702 — on screen by 66 px, and
   off it on any shorter window or taller block. Back and Next are how you move; they cannot be
   something you scroll to find. */
.al-stage-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem -1.2rem -1.1rem;
  padding: 0.75rem 1.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0 0 1rem 1rem;
  background: rgba(15, 23, 42, 0.86);
  backdrop-filter: blur(8px);
}
.al-stage-count { margin: 0 auto; font-size: 0.75rem; color: #64748b; font-variant-numeric: tabular-nums; }

/* blocks */
.al-video video { display: block; width: 100%; max-height: 62vh; border-radius: 0.8rem 0.8rem 0 0; background: #000; cursor: pointer; }
/* The clip's own transport. The native bar advertised the whole FILE — median 22:17 against a
   median clip of 2:52, and one 0:30 clip inside a 22:30 file. Here the bar's full width IS the
   clip, and the chapters are ticks on it. */
.al-vbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: none;
  border-radius: 0 0 0.8rem 0.8rem;
  background: rgba(255, 255, 255, 0.04);
}
.al-vbtn { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid rgba(var(--al-accent), 0.45); border-radius: 999px; background: rgba(var(--al-accent), 0.2); color: #e0f2fe; cursor: pointer; }
.al-vbtn:hover { background: rgba(var(--al-accent), 0.32); }
.al-vbtn .al-ico svg { width: 1rem; height: 1rem; }
.al-vseek { flex: 1 1 auto; min-width: 0; height: 0.35rem; margin: 0; appearance: none; border-radius: 999px; background: rgba(255, 255, 255, 0.14); cursor: pointer; }
.al-vseek::-webkit-slider-thumb { appearance: none; width: 0.85rem; height: 0.85rem; border: none; border-radius: 999px; background: rgb(var(--al-accent)); }
.al-vseek::-moz-range-thumb { width: 0.85rem; height: 0.85rem; border: none; border-radius: 999px; background: rgb(var(--al-accent)); }
.al-vtime { flex: none; font-size: 0.75rem; color: #94a3b8; font-variant-numeric: tabular-nums; }
/* Ticks sit ON the seek bar, so a chapter is a place in the clip rather than a pill beside it. */
.al-vticks { position: absolute; left: calc(0.8rem + 2.1rem + 0.7rem); right: calc(0.8rem + 3.4rem); top: 50%; height: 0; pointer-events: none; }
.al-vtick { position: absolute; top: -0.42rem; width: 0.18rem; height: 0.84rem; padding: 0; transform: translateX(-50%); border: none; border-radius: 999px; background: rgba(255, 255, 255, 0.55); cursor: pointer; pointer-events: auto; }
.al-vtick:hover { background: #fff; }
.al-vtick-label { position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%); padding: 0.15rem 0.45rem; border-radius: 0.4rem; background: rgba(15, 23, 42, 0.95); color: #e2e8f0; font-size: 0.68rem; white-space: nowrap; opacity: 0; transition: opacity 0.12s; pointer-events: none; }
.al-vtick:hover .al-vtick-label, .al-vtick:focus-visible .al-vtick-label { opacity: 1; }
.al-video-end { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
/* ⛔ A visualisation's graph is drawn to fill its stage, and at full height the slider, the play
   bar and the readout cards all sat below the fold — so the block read as a picture and nobody
   knew it could be touched ("the try section's controls are only visible when scrolling down",
   Yosef 2026-09-19). Capping the GRAPH brings the controls up; the svg keeps its own
   preserveAspectRatio, so it only gets smaller, never cropped. */
.al-stage .lx-visualization .lv-stage { max-height: min(32vh, 290px); }
.al-stage .lx-visualization .lv-graph { max-height: min(32vh, 290px); }
.al-stage .lx-visualization .lv-readout { gap: 0.5rem; }

.al-unavailable { padding: 1rem; border: 1px dashed rgba(255, 255, 255, 0.15); border-radius: 0.7rem; font-size: 0.85rem; color: #94a3b8; }
.al-caption { margin: 0.4rem 0 0; font-size: 0.78rem; color: #94a3b8; }
/* A frame must not look like a second website sitting in the lesson. No border, no card of its
   own, no background — whatever is inside it is simply the block's content. The chrome INSIDE
   (the practice page's header, buttons and stats row) is stripped server-side by `embed`. */
.al-frame { display: block; width: 100%; border: 0; border-radius: 0.8rem; background: transparent; }
.al-frame--practice { min-height: 24rem; }
.al-frame--code { min-height: 40rem; }
.al-frame--sim { min-height: 30rem; }

/* Reading text sits in a box DARKER than the page behind it — a paragraph floating on the
   starfield is hard to read, and a lighter card makes it worse (Yosef, 2026-09-19: "when
   presenting text, the box needs to have darker background than the website"). */
.al-prose {
  padding: 1.05rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 0.9rem;
  background: rgba(0, 0, 0, 0.55);
  font-size: 1.06rem;
  line-height: 1.8;
  color: #eef3fa;
}
.al-prose > :first-child { margin-top: 0; }
.al-prose > :last-child { margin-bottom: 0; }
.al-prose h3 { margin: 1.2rem 0 0.45rem; font-size: 1rem; font-weight: 700; color: #f1f5f9; }
.al-prose p { margin: 0 0 0.8rem; }
/* Markers, not bare lines — a summary's three points read as a list or as nothing. */
.al-prose ul { list-style: disc; }
.al-prose ol { list-style: decimal; }
.al-prose ul, .al-prose ol { margin: 0 0 0.9rem 1.35rem; padding: 0; }
.al-prose li { margin-bottom: 0.35rem; }
.al-prose li::marker { color: rgb(var(--al-accent)); }
.al-prose strong { color: #f1f5f9; }
.al-prose table { width: 100%; margin: 0.7rem 0 1rem; border-collapse: collapse; font-size: 0.9rem; background: rgba(255, 255, 255, 0.02); border-radius: 0.5rem; overflow: hidden; }
.al-prose th, .al-prose td { padding: 0.45rem 0.7rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; }
.al-prose th { background: rgba(255, 255, 255, 0.04); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.al-prose tr:last-child td { border-bottom: 0; }
.al-prose code { padding: 0.08rem 0.35rem; border-radius: 0.3rem; background: rgba(125, 211, 252, 0.12); color: #bae6fd; font-size: 0.88em; }
.al-prose pre { margin: 0.6rem 0 0.9rem; padding: 0.8rem 0.9rem; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.6rem; background: rgba(0, 0, 0, 0.42); overflow-x: auto; }
.al-prose pre code { padding: 0; background: none; color: #cbd5e1; }
/* ── the end-of-lesson review ─────────────────────────────────────────────── */
.al-review { display: grid; gap: 0.9rem; }
.al-review-score {
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(var(--al-accent), 0.32);
  border-radius: 0.9rem;
  background: rgba(0, 0, 0, 0.5);
}
.al-review-score .al-fb-head { margin-bottom: 0.6rem; font-size: 1.05rem; color: #f1f5f9; }
.al-review-bar { height: 0.45rem; border-radius: 999px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.al-review-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgb(var(--al-accent)), rgb(var(--al-ok))); }
.al-review-weak {
  padding: 0.9rem 1.1rem;
  border: 1px solid rgba(var(--al-warn), 0.3);
  border-radius: 0.9rem;
  background: rgba(0, 0, 0, 0.5);
}
.al-review-weak h3 { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fcd34d; }
.al-review-weak ul { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.al-review-jump {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.03);
  color: #e2e8f0;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.al-review-jump:hover { border-color: rgba(var(--al-accent), 0.5); background: rgba(var(--al-accent), 0.12); }
.al-review-jump-name { flex: 1 1 auto; font-weight: 600; }
.al-review-jump-mark { flex: none; font-size: 0.8rem; color: #fcd34d; font-variant-numeric: tabular-nums; }
.al-review-jump .al-ico { color: rgb(var(--al-accent)); }
.al-review-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.2rem; }
.al-btn--slides { border-color: rgba(var(--al-ok), 0.45); background: rgba(var(--al-ok), 0.12); color: #6ee7b7; }
.al-btn--slides:hover { background: rgba(var(--al-ok), 0.22); color: #a7f3d0; }

/* The summary closes a lesson, so it reads as a result rather than as one more paragraph. */
.al-prose--summary { border-color: rgba(var(--al-ok), 0.28); background: linear-gradient(180deg, rgba(16, 185, 129, 0.07), rgba(2, 6, 20, 0.66)); }
.al-loading { margin: 0; font-size: 0.85rem; color: #64748b; }
/* ⛔ The handout opens with a figure, and at full height it filled the screen — the step read as
   "almost displays nothing" because no sentence was in view. Capped, so the notes start on the
   first screen; the figure is still legible and still clickable to full size. */
/* ⚠️ Cap the MEDIA, never the <figure>. A max-height on the figure clamps its box while its
   children keep their own size, so the caption escaped and painted 250 px down the page, on top
   of the notes — which is worse than the figure being tall. A handout figure can be an <img>, an
   <svg> or a looping <video> (an inline animation), so all three are named. */
.al-handout figure { display: flex; flex-direction: column; align-items: center; margin: 0.9rem 0; }
.al-handout img, .al-handout svg, .al-handout video {
  max-width: 100%;
  max-height: min(32vh, 300px);
  width: auto;
  height: auto;
  object-fit: contain;
}
.al-handout figcaption { margin-top: 0.4rem; font-size: 0.82rem; color: #94a3b8; text-align: center; }
.al-hint { margin: 0.6rem 0 0; font-size: 0.8rem; color: #94a3b8; }
.al-hint.is-error { color: #fda4af; }
.al-notes-h { margin: 0.8rem 0 0.3rem; font-size: 0.95rem; font-weight: 700; color: #f1f5f9; }

/* The question card. 78 of the course's 215 blocks are one of these, so it is the single
   most-seen thing in AI Learn — it was a bare heading, body text, "1 MARK(S)" in small caps and
   an empty box. Now: a head that says what this is and what it is worth, the prompt at reading
   size with room around it, and a bordered card so a question reads as a thing to do. */
.al-exercise {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.9rem;
  background: rgba(2, 6, 20, 0.62);   /* darker than the stage, like every reading box here */
}
.al-ex-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.al-ex-kind { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--al-accent)); }
.al-ex-marks { margin-left: auto; padding: 0.1rem 0.6rem; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: #94a3b8; }
/* What the question is worth, under the question — not floating in a band of its own. */
.al-ex-worth { display: flex; align-items: center; gap: 0.35rem; margin: -0.2rem 0 0; font-size: 0.78rem; font-weight: 600; color: #94a3b8; }
.al-ex-worth .al-ico { color: rgb(var(--al-accent)); }
.al-prompt { font-size: 1.02rem; line-height: 1.7; color: #f1f5f9; }
.al-prompt code { padding: 0.08rem 0.35rem; border-radius: 0.3rem; background: rgba(125, 211, 252, 0.12); color: #bae6fd; }
.al-prompt > :first-child { margin-top: 0; }
.al-prompt > :last-child { margin-bottom: 0; }
.al-marks { margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; }
/* Check on the left, help on the right — a hierarchy, not three equal slabs. */
.al-actions--ex { align-items: center; }
.al-help-group { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-left: auto; }
.al-options { display: grid; gap: 0.3rem; margin: 0; padding: 0; border: 0; }
.al-option { display: flex; align-items: flex-start; gap: 0.5rem; min-height: 2.5rem; padding: 0.35rem 0.5rem; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.6rem; cursor: pointer; }
.al-option:hover { background: rgba(255, 255, 255, 0.04); }
.al-option input { margin-top: 0.25rem; width: 1.05rem; height: 1.05rem; }
.al-option-letter { font-weight: 700; color: rgb(var(--al-accent)); }
.al-option-text { font-size: 0.9rem; color: #e2e8f0; }
/* An input is a WELL — it must read as darker than the card around it, or it looks like another
   panel rather than somewhere to type ("answer field background is too light", 2026-09-19). */
.al-answer {
  width: 100%;
  padding: 0.65rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  color: #f1f5f9;
  font: inherit;
  font-size: 0.98rem;
  line-height: 1.6;
  resize: vertical;
}
.al-answer::placeholder { color: #64748b; }
.al-answer:focus { outline: none; border-color: rgba(var(--al-accent), 0.6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(var(--al-accent), 0.18); }
.al-options .al-option { background: rgba(0, 0, 0, 0.32); }
.al-feedback { padding: 0.6rem 0.8rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 0.7rem; font-size: 0.88rem; line-height: 1.6; color: #cbd5e1; }
.al-feedback.is-right { border-color: rgba(var(--al-ok), 0.5); background: rgba(var(--al-ok), 0.08); }
.al-feedback.is-partial { border-color: rgba(var(--al-warn), 0.5); background: rgba(var(--al-warn), 0.07); }
.al-feedback.is-hint { border-color: rgba(var(--al-accent), 0.5); background: rgba(var(--al-accent), 0.07); }
.al-feedback.is-error { border-color: rgba(var(--al-bad), 0.5); color: #fda4af; }
.al-fb-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.35rem; font-weight: 700; color: #f1f5f9; }
.al-feedback.is-right .al-fb-head { color: #6ee7b7; }
.al-feedback.is-partial .al-fb-head { color: #fcd34d; }
.al-feedback.is-hint .al-fb-head { color: #7dd3fc; }
.al-feedback.is-error .al-fb-head { color: #fda4af; }
.al-verdict { margin: 0 0 0.3rem; font-weight: 700; color: #f1f5f9; }
.al-reason { margin: 0 0 0.4rem; }
.al-again { margin: 0; font-size: 0.82rem; color: #fcd34d; }
.al-solution { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.al-solution h4 { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 0.3rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }

.al-cp-item { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.al-cp-item:last-of-type { border-bottom: 0; }

.al-complete { margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(var(--al-ok), 0.45); border-radius: 0.9rem; background: rgba(var(--al-ok), 0.07); }
.al-complete h3 { margin: 0 0 0.4rem; font-size: 1.1rem; font-weight: 700; color: #6ee7b7; }
.al-complete p { margin: 0 0 0.35rem; font-size: 0.9rem; color: #d1fae5; }
.al-levelup { font-weight: 700; color: #fcd34d !important; }
.al-rank { color: #bae6fd !important; }

/* `hidden` has to win over every display above (the trap at 13-account.css:117). */
.al-video-end[hidden], .al-feedback[hidden], .al-actions[hidden] { display: none; }

/* ── phones ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .al-player { grid-template-columns: 1fr; }
  /* min-width: 0 — without it the horizontally scrolling rail below sets the grid column's
     min-content width and the whole page grows wider than the phone. */
  .al-side { position: static; max-height: none; min-width: 0; }
  .al-rail, .al-rail ol { min-width: 0; }
  /* The column's scroll machinery is desktop-only: on one column the page scrolls instead. */
  .al-side-scroll { overflow: visible; padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
  /* ONE scrolling row, not a wrapped grid: three rows of anonymous icons read as a puzzle, a
     single strip reads as "where you are". Each button keeps its name as its accessible label. */
  .al-rail ol { display: flex; flex-wrap: nowrap; gap: 0.25rem; overflow-x: auto; padding-bottom: 0.2rem; scrollbar-width: thin; }
  .al-rail-item { flex: none; }
  .al-rail-btn { width: auto; min-height: 2.75rem; }
  .al-rail-name { display: none; }
}
@media (max-width: 640px) {
  .al-stage { padding: 0.9rem; }
  .al-btn { min-height: 2.75rem; }
  .al-option { min-height: 2.75rem; }
  .al-frame--practice, .al-frame--code { min-height: 70vh; }
  /* Back / Next stay at the END of the stage on a phone, not stuck to the bottom of the
     viewport: a sticky bar there covers the block's own Check / Hint / Notes row, and the site's
     own tab bar already occupies that edge. */
  .al-stage-actions { position: static; margin: 1.1rem -0.9rem -0.9rem; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); backdrop-filter: none; }
  .al-lesson-meta { margin-left: 0; width: 100%; }
}
/* ── the teacher's Progress tab (roadmap Plan 21) ─────────────────────────── */
.progress-panel { display: grid; gap: 0.9rem; }
.pg-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 0.7rem; }
.pg-wrap { min-width: 0; }
.pg-scroll { max-width: 100%; overflow-x: auto; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.pg-table th, .pg-table td { padding: 0.4rem 0.55rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); text-align: left; vertical-align: top; }
.pg-name-h { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.pg-lesson-h { min-width: 8.5rem; max-width: 12rem; }
.pg-lesson-unit { display: block; font-size: 0.66rem; font-weight: 700; color: rgb(var(--al-accent)); }
.pg-lesson-name { display: block; font-size: 0.78rem; font-weight: 600; color: #e2e8f0; }
.pg-classbar { display: block; height: 0.25rem; margin: 0.3rem 0 0.15rem; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.pg-classbar span { display: block; height: 100%; border-radius: 999px; background: rgb(var(--al-ok)); }
.pg-classnum { font-size: 0.66rem; font-weight: 500; color: #64748b; }
.pg-name a { font-weight: 600; color: #e2e8f0; white-space: nowrap; }
.pg-name a:hover { color: #f8fafc; }
.pg-cell { text-align: center; font-variant-numeric: tabular-nums; }
.pg-mark { display: block; font-size: 1rem; color: #475569; }
.pg-cell.is-started .pg-mark { color: rgb(var(--al-warn)); }
.pg-cell.is-done .pg-mark { color: rgb(var(--al-ok)); }
.pg-score { display: block; font-size: 0.7rem; color: #94a3b8; }
.pg-help { padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pg-help[hidden] { display: none; }
.pg-help-list { display: grid; gap: 0.3rem; margin: 0.4rem 0 0; padding: 0; list-style: none; }
.pg-help-item { font-size: 0.85rem; color: #cbd5e1; }
.pg-help-link { margin-left: 0.5rem; font-size: 0.75rem; color: #a5b4fc; }
@media (max-width: 640px) {
  /* Touch targets: 44 px wherever a finger lands. The two links are inline inside a sentence,
     so they take the height as padding rather than as a line box. */
  .pg-filters .teacher-btn-mini,
  .pg-filters .teacher-select-mini { min-height: 2.75rem; }
  .pg-name a, .pg-help-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.35rem; }
  .pg-lesson-h { min-width: 7rem; }
}


/* ── light mode: the surfaces the generator cannot reason about ───────────────
   `build_light_theme.py` maps a dark colour to a light one mechanically, which is right almost
   everywhere and wrong for a WELL: it turned the answer field's `rgba(0,0,0,.5)` into
   `rgb(255 255 255/.5)`, i.e. whiter than the card it sits in, so the field vanished. A well has
   to stay recessed in both themes. These are hand-written (the builder skips a selector that
   already names `data-theme`) and carry one extra class so they beat the generated rule, which
   is emitted after them. */
html[data-theme="light"] .al-exercise .al-answer,
html[data-theme="light"] .al-stage .al-answer {
  border-color: rgb(15 23 42 / 0.16);
  background: rgb(15 23 42 / 0.05);
  box-shadow: inset 0 1px 3px rgb(15 23 42 / 0.10);
  color: rgb(28 41 66);
}
html[data-theme="light"] .al-stage .al-prose,
html[data-theme="light"] .al-stage .al-exercise,
html[data-theme="light"] .al-stage .al-review-score,
html[data-theme="light"] .al-stage .al-review-weak {
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.05);
}
html[data-theme="light"] .al-stage .al-prose { color: rgb(30 45 70); }

/* ▼▼ LIGHT THEME — GENERATED by scripts/build_light_theme.py from the rules above. Do not edit by hand: run the builder. Hand tuning goes in 36-theme-light.css. ▼▼ */
html[data-theme="light"] .al-crumbs{color:rgb(61 75 94)}
html[data-theme="light"] .al-crumbs a{color:rgb(48 65 85)}
html[data-theme="light"] .al-crumbs a:hover{color:rgb(38 66 94)}
html[data-theme="light"] .al-eyebrow{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-title{color:rgb(38 66 94)}
html[data-theme="light"] .al-lead{color:rgb(48 65 85)}
html[data-theme="light"] .al-source{color:rgb(87 101 122)}
html[data-theme="light"] .al-empty{color:rgb(61 75 94)}
html[data-theme="light"] .al-btn{border-color:rgb(15 23 42/0.18);background-color:rgb(15 23 42/0.05);color:rgb(44 63 88)}
html[data-theme="light"] .al-btn:hover{background-color:rgb(15 23 42/0.1)}
html[data-theme="light"] .al-btn--primary{box-shadow:0px 6px 18px -8px rgb(15 23 42/0.2)}
html[data-theme="light"] .al-btn--hint{color:rgb(126 96 0)}
html[data-theme="light"] .al-btn--hint:hover{color:rgb(117 94 0)}
html[data-theme="light"] .al-btn--notes{color:rgb(28 0 132)}
html[data-theme="light"] .al-btn--notes:hover{color:rgb(23 0 133)}
html[data-theme="light"] .al-stage-actions [data-al-back]{border-color:rgb(15 23 42/0.168);background-color:rgb(15 23 42/0.04);color:rgb(48 65 85)}
html[data-theme="light"] .al-stage-actions [data-al-back]:hover{background-color:rgb(15 23 42/0.09);color:rgb(38 66 94)}
html[data-theme="light"] .al-course-card{border-color:rgb(15 23 42/0.14);background-color:rgb(15 23 42/0.03)}
html[data-theme="light"] .al-course-card h2{color:rgb(38 66 94)}
html[data-theme="light"] .al-course-meta{color:rgb(61 75 94)}
html[data-theme="light"] .al-unit{border-color:rgb(15 23 42/0.112)}
html[data-theme="light"] .al-unit-title{color:rgb(38 66 94)}
html[data-theme="light"] .al-unit-n{color:rgb(1 79 132)}
html[data-theme="light"] .al-unit-weeks{color:rgb(87 101 122)}
html[data-theme="light"] .al-scope-go{color:rgb(1 79 132)}
html[data-theme="light"] .al-scope-go--sub{border-color:rgb(15 23 42/0.18);background-color:rgb(15 23 42/0.05);color:rgb(48 65 85)}
html[data-theme="light"] .al-scope-go--sub:hover{color:rgb(1 79 132)}
html[data-theme="light"] .al-window{color:rgb(117 94 0)}
html[data-theme="light"] .al-window-title{color:rgb(117 94 0)}
html[data-theme="light"] .al-sub{border-top-color:rgb(15 23 42/0.084)}
html[data-theme="light"] .al-sub > summary{color:rgb(44 63 88)}
html[data-theme="light"] .al-sub-code{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-sub-flag{color:rgb(16 111 73)}
html[data-theme="light"] .al-sub-cov{color:rgb(87 101 122)}
html[data-theme="light"] .al-syllabus > summary{color:rgb(87 101 122)}
html[data-theme="light"] .al-syllabus > summary:hover{color:rgb(61 75 94)}
html[data-theme="light"] .al-bullets{color:rgb(61 75 94)}
html[data-theme="light"] .al-coming{color:rgb(87 101 122)}
html[data-theme="light"] .al-start-kicker{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-start-name{color:rgb(38 66 94)}
html[data-theme="light"] .al-start-note{color:rgb(61 75 94)}
html[data-theme="light"] .al-start-go{color:rgb(1 79 132)}
html[data-theme="light"] .al-lesson-link:hover{background-color:rgb(15 23 42/0.05)}
html[data-theme="light"] .al-lesson.is-started .al-lesson-mark{color:color-mix(in srgb,rgb(var(--al-warn)) 44%,#0f172a)}
html[data-theme="light"] .al-lesson.is-done .al-lesson-mark{color:color-mix(in srgb,rgb(var(--al-ok)) 44%,#0f172a)}
html[data-theme="light"] .al-lesson-name{color:rgb(44 63 88)}
html[data-theme="light"] .al-lesson-meta{color:rgb(87 101 122)}
html[data-theme="light"] .al-lesson-go{color:rgb(1 79 132)}
html[data-theme="light"] .al-lesson-soon{color:rgb(87 101 122)}
html[data-theme="light"] .al-lesson-tools a{color:rgb(61 75 94)}
html[data-theme="light"] .al-lesson-tools a:hover{color:rgb(0 27 133)}
html[data-theme="light"] .al-preview{color:rgb(126 96 0)}
html[data-theme="light"] .al-lesson-title{color:rgb(38 66 94)}
html[data-theme="light"] .al-covers{color:rgb(61 75 94)}
html[data-theme="light"] .al-covers span{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-bar{background-color:rgb(15 23 42/0.08)}
html[data-theme="light"] .al-progress{color:rgb(61 75 94)}
html[data-theme="light"] .al-rail-btn{color:rgb(48 65 85)}
html[data-theme="light"] .al-rail-btn:hover{background-color:rgb(15 23 42/0.05)}
html[data-theme="light"] .al-rail-item.is-on .al-rail-btn{color:rgb(38 66 94)}
html[data-theme="light"] .al-rail-ico{color:rgb(87 101 122)}
html[data-theme="light"] .al-rail-item.is-on .al-rail-ico{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-sidelink{color:rgb(61 75 94)}
html[data-theme="light"] .al-sidelink a{color:rgb(1 24 131)}
html[data-theme="light"] .al-stage{border-color:rgb(15 23 42/0.126);background-color:rgb(15 23 42/0.02)}
html[data-theme="light"] .al-stage-head h2{color:rgb(38 66 94)}
html[data-theme="light"] .al-stage-kind{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-stage-actions{border-top-color:rgb(15 23 42/0.126);background-color:rgb(244 245 249/0.86)}
html[data-theme="light"] .al-stage-count{color:rgb(87 101 122)}
html[data-theme="light"] .al-video video{background-color:rgb(255 255 255)}
html[data-theme="light"] .al-vbar{border-color:rgb(15 23 42/0.126);background-color:rgb(15 23 42/0.04)}
html[data-theme="light"] .al-vbtn{color:rgb(1 79 132)}
html[data-theme="light"] .al-vseek{background-color:rgb(15 23 42/0.14)}
html[data-theme="light"] .al-vtime{color:rgb(61 75 94)}
html[data-theme="light"] .al-vtick-label{background-color:rgb(244 245 249/0.95);color:rgb(44 63 88)}
html[data-theme="light"] .al-unavailable{border-color:rgb(15 23 42/0.18);color:rgb(61 75 94)}
html[data-theme="light"] .al-caption{color:rgb(61 75 94)}
html[data-theme="light"] .al-prose{border-color:rgb(15 23 42/0.098);background-color:rgb(255 255 255/0.55);color:rgb(28 60 104)}
html[data-theme="light"] .al-prose h3{color:rgb(38 66 94)}
html[data-theme="light"] .al-prose li::marker{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-prose strong{color:rgb(38 66 94)}
html[data-theme="light"] .al-prose table{background-color:rgb(15 23 42/0.02)}
html[data-theme="light"] .al-prose th,html[data-theme="light"] .al-prose td{border-bottom-color:rgb(15 23 42/0.112)}
html[data-theme="light"] .al-prose th{background-color:rgb(15 23 42/0.04);color:rgb(61 75 94)}
html[data-theme="light"] .al-prose code{color:rgb(1 87 132)}
html[data-theme="light"] .al-prose pre{border-color:rgb(15 23 42/0.112);background-color:rgb(255 255 255/0.42)}
html[data-theme="light"] .al-prose pre code{color:rgb(48 65 85)}
html[data-theme="light"] .al-review-score{background-color:rgb(255 255 255/0.5)}
html[data-theme="light"] .al-review-score .al-fb-head{color:rgb(38 66 94)}
html[data-theme="light"] .al-review-bar{background-color:rgb(15 23 42/0.1)}
html[data-theme="light"] .al-review-weak{background-color:rgb(255 255 255/0.5)}
html[data-theme="light"] .al-review-weak h3{color:rgb(126 96 0)}
html[data-theme="light"] .al-review-jump{border-color:rgb(15 23 42/0.14);background-color:rgb(15 23 42/0.03);color:rgb(44 63 88)}
html[data-theme="light"] .al-review-jump-mark{color:rgb(126 96 0)}
html[data-theme="light"] .al-review-jump .al-ico{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-btn--slides{color:rgb(16 111 73)}
html[data-theme="light"] .al-btn--slides:hover{color:rgb(13 112 66)}
html[data-theme="light"] .al-prose--summary{background-image:linear-gradient(180deg, rgba(16, 185, 129, 0.07), rgb(251 251 253/0.66))}
html[data-theme="light"] .al-loading{color:rgb(87 101 122)}
html[data-theme="light"] .al-handout figcaption{color:rgb(61 75 94)}
html[data-theme="light"] .al-hint{color:rgb(61 75 94)}
html[data-theme="light"] .al-hint.is-error{color:rgb(133 0 16)}
html[data-theme="light"] .al-notes-h{color:rgb(38 66 94)}
html[data-theme="light"] .al-exercise{border-color:rgb(15 23 42/0.126);background-color:rgb(251 251 253/0.62)}
html[data-theme="light"] .al-ex-kind{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-ex-marks{border-color:rgb(15 23 42/0.18);color:rgb(61 75 94)}
html[data-theme="light"] .al-ex-worth{color:rgb(61 75 94)}
html[data-theme="light"] .al-ex-worth .al-ico{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-prompt{color:rgb(38 66 94)}
html[data-theme="light"] .al-prompt code{color:rgb(1 87 132)}
html[data-theme="light"] .al-marks{color:rgb(87 101 122)}
html[data-theme="light"] .al-option{border-color:rgb(15 23 42/0.14)}
html[data-theme="light"] .al-option:hover{background-color:rgb(15 23 42/0.04)}
html[data-theme="light"] .al-option-letter{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .al-option-text{color:rgb(44 63 88)}
html[data-theme="light"] .al-answer{border-color:rgb(15 23 42/0.168);background-color:rgb(255 255 255/0.5);box-shadow:inset 0px 1px 3px rgb(15 23 42/0.144);color:rgb(38 66 94)}
html[data-theme="light"] .al-answer::placeholder{color:rgb(87 101 122)}
html[data-theme="light"] .al-answer:focus{box-shadow:inset 0px 1px 3px rgb(15 23 42/0.144),0px 0px 0px 3px color-mix(in srgb,rgba(var(--al-accent), 0.18) 62%,#0f172a)}
html[data-theme="light"] .al-options .al-option{background-color:rgb(255 255 255/0.32)}
html[data-theme="light"] .al-feedback{border-color:rgb(15 23 42/0.168);color:rgb(48 65 85)}
html[data-theme="light"] .al-feedback.is-error{color:rgb(133 0 16)}
html[data-theme="light"] .al-fb-head{color:rgb(38 66 94)}
html[data-theme="light"] .al-feedback.is-right .al-fb-head{color:rgb(16 111 73)}
html[data-theme="light"] .al-feedback.is-partial .al-fb-head{color:rgb(126 96 0)}
html[data-theme="light"] .al-feedback.is-hint .al-fb-head{color:rgb(0 90 133)}
html[data-theme="light"] .al-feedback.is-error .al-fb-head{color:rgb(133 0 16)}
html[data-theme="light"] .al-verdict{color:rgb(38 66 94)}
html[data-theme="light"] .al-again{color:rgb(126 96 0)}
html[data-theme="light"] .al-solution{border-top-color:rgb(15 23 42/0.14)}
html[data-theme="light"] .al-solution h4{color:rgb(61 75 94)}
html[data-theme="light"] .al-cp-item{border-bottom-color:rgb(15 23 42/0.098)}
html[data-theme="light"] .al-complete h3{color:rgb(16 111 73)}
html[data-theme="light"] .al-complete p{color:rgb(10 115 61)}
html[data-theme="light"] .al-levelup{color:rgb(126 96 0)!important}
html[data-theme="light"] .al-rank{color:rgb(1 87 132)!important}
html[data-theme="light"] .pg-table th,html[data-theme="light"] .pg-table td{border-bottom-color:rgb(15 23 42/0.112)}
html[data-theme="light"] .pg-name-h{color:rgb(61 75 94)}
html[data-theme="light"] .pg-lesson-unit{color:color-mix(in srgb,rgb(var(--al-accent)) 44%,#0f172a)}
html[data-theme="light"] .pg-lesson-name{color:rgb(44 63 88)}
html[data-theme="light"] .pg-classbar{background-color:rgb(15 23 42/0.08)}
html[data-theme="light"] .pg-classnum{color:rgb(87 101 122)}
html[data-theme="light"] .pg-name a{color:rgb(44 63 88)}
html[data-theme="light"] .pg-name a:hover{color:rgb(38 66 94)}
html[data-theme="light"] .pg-cell.is-started .pg-mark{color:color-mix(in srgb,rgb(var(--al-warn)) 44%,#0f172a)}
html[data-theme="light"] .pg-cell.is-done .pg-mark{color:color-mix(in srgb,rgb(var(--al-ok)) 44%,#0f172a)}
html[data-theme="light"] .pg-score{color:rgb(61 75 94)}
html[data-theme="light"] .pg-help{border-top-color:rgb(15 23 42/0.112)}
html[data-theme="light"] .pg-help-item{color:rgb(48 65 85)}
html[data-theme="light"] .pg-help-link{color:rgb(1 24 131)}
/* ▲▲ LIGHT THEME END ▲▲ */