/* tish-learn baseline — hand-written semantic styles for the app shell,
   directives (mr-*, pick-*, dir-*, ll-*), and lesson typography.
   Utility classes for one-off layout live in /utilities.css (generated). */

:root {
  --bg: oklch(0.11 0 0);
  --surface: oklch(0.14 0 0);
  --surface-hover: oklch(0.18 0 0);
  --border: oklch(0.22 0 0);
  --text: oklch(0.92 0 0);
  --text-muted: oklch(0.55 0 0);
  --primary: oklch(0.72 0.18 295);
  --primary-soft: oklch(0.72 0.18 295 / 0.18);
  --accent: oklch(0.85 0.18 95);
  --success: oklch(0.78 0.22 145);
  --success-soft: oklch(0.78 0.22 145 / 0.15);
  --error: oklch(0.65 0.25 25);
  --error-soft: oklch(0.65 0.25 25 / 0.15);
  --warn: oklch(0.78 0.18 70);
  --warn-soft: oklch(0.78 0.18 70 / 0.15);
  /* Thin scrollbars on dark surfaces (main column, code, tables, …) */
  --scrollbar-thumb: oklch(0.4 0 0 / 0.55);
  --scrollbar-thumb-hover: oklch(0.5 0 0 / 0.75);
  --scrollbar-track: oklch(0.16 0 0 / 0.35);
  --scrollbar-size: 7px;
  --scrollbar-radius: 999px;
  /* Text selection — tishlang.com hero lavender + black text (see tishlang-web globals.css) */
  --selection-bg: #a881ff;
  --selection-fg: #000000;
}

.theme-light {
  --bg: oklch(0.98 0 0);
  --surface: oklch(1 0 0);
  --surface-hover: oklch(0.95 0 0);
  --border: oklch(0.85 0 0);
  --text: oklch(0.18 0 0);
  --text-muted: oklch(0.45 0 0);
  --primary-soft: oklch(0.72 0.18 295 / 0.15);
  --scrollbar-thumb: oklch(0.5 0 0 / 0.28);
  --scrollbar-thumb-hover: oklch(0.4 0 0 / 0.42);
  --scrollbar-track: oklch(0.9 0 0 / 0.45);
}

* { box-sizing: border-box; }

/* Match tishlang-web: primary-tint fill + black selected text */
::selection,
*::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}
::-moz-selection,
*::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

html, body {
  margin: 0;
  height: 100%;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.6; }

/* Themed thin scrollbars (Firefox + WebKit) on overflow surfaces */
.ll-main,
.ll-sidebar,
.ll-lesson-body .code-block,
.ll-lesson-body .md-table-scroll,
.ll-error-body,
.ll-unknown-directive pre,
.mr-diff-table,
.dir-callout-body {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

.ll-main::-webkit-scrollbar,
.ll-sidebar::-webkit-scrollbar,
.ll-lesson-body .code-block::-webkit-scrollbar,
.ll-lesson-body .md-table-scroll::-webkit-scrollbar,
.ll-error-body::-webkit-scrollbar,
.ll-unknown-directive pre::-webkit-scrollbar,
.mr-diff-table::-webkit-scrollbar,
.dir-callout-body::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.ll-main::-webkit-scrollbar-track,
.ll-sidebar::-webkit-scrollbar-track,
.ll-lesson-body .code-block::-webkit-scrollbar-track,
.ll-lesson-body .md-table-scroll::-webkit-scrollbar-track,
.ll-error-body::-webkit-scrollbar-track,
.ll-unknown-directive pre::-webkit-scrollbar-track,
.mr-diff-table::-webkit-scrollbar-track,
.dir-callout-body::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--scrollbar-radius);
}

.ll-main::-webkit-scrollbar-thumb,
.ll-sidebar::-webkit-scrollbar-thumb,
.ll-lesson-body .code-block::-webkit-scrollbar-thumb,
.ll-lesson-body .md-table-scroll::-webkit-scrollbar-thumb,
.ll-error-body::-webkit-scrollbar-thumb,
.ll-unknown-directive pre::-webkit-scrollbar-thumb,
.mr-diff-table::-webkit-scrollbar-thumb,
.dir-callout-body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.ll-main::-webkit-scrollbar-thumb:hover,
.ll-sidebar::-webkit-scrollbar-thumb:hover,
.ll-lesson-body .code-block::-webkit-scrollbar-thumb:hover,
.ll-lesson-body .md-table-scroll::-webkit-scrollbar-thumb:hover,
.ll-error-body::-webkit-scrollbar-thumb:hover,
.ll-unknown-directive pre::-webkit-scrollbar-thumb:hover,
.mr-diff-table::-webkit-scrollbar-thumb:hover,
.dir-callout-body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  background-clip: padding-box;
}

.ll-main::-webkit-scrollbar-corner,
.ll-sidebar::-webkit-scrollbar-corner,
.ll-lesson-body .code-block::-webkit-scrollbar-corner,
.ll-lesson-body .md-table-scroll::-webkit-scrollbar-corner,
.ll-error-body::-webkit-scrollbar-corner,
.ll-unknown-directive pre::-webkit-scrollbar-corner,
.mr-diff-table::-webkit-scrollbar-corner,
.dir-callout-body::-webkit-scrollbar-corner {
  background: transparent;
}

/* App shell */
.ll-app { display: flex; flex-direction: column; min-height: 100vh; }
/* /sandbox route: full-screen embed of SandboxIde from tish-ide-panels. */
.ll-app-sandbox { height: 100vh; min-height: 100vh; overflow: hidden; }
.ll-app-sandbox > .pg-root { flex: 1; min-height: 0; }

/* SSG prerender: hide static HTML once the Lattish app has mounted. */
.ll-learn-app-mounted .ll-prerender-root { display: none !important; }
/* Chapter pages ship a full static shell + a hidden #app until handoff, so we
   do not paint two stacked .ll-app layouts (CLS + double contentful paint). */
body:has(#ll-prerender-root.ll-prerender-shell):not(.ll-learn-app-mounted) #app {
  display: none;
}
/* Chapter pages: full .ll-app shell (matches LearnApp first paint). */
.ll-prerender-root.ll-prerender-shell {
  max-width: none;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
/* Legacy / non-shell prerender fragments (if any) */
.ll-prerender-root:not(.ll-prerender-shell) {
  max-width: 52rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}
.ll-island-placeholder {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0.75rem 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.ll-island-hint { margin: 0; }
.ll-header {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--border);
  background: var(--surface); position: sticky; top: 0; z-index: 10;
}
.ll-brand { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 1rem; cursor: pointer; }
a.ll-brand { text-decoration: none; color: inherit; }
.ll-brand-emoji { color: var(--primary); }
.ll-brand-text { letter-spacing: -0.02em; }
.ll-tracks { display: flex; gap: 0.25rem; margin-left: 1.5rem; }
.ll-track-btn {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.75rem; border: none; background: transparent;
  color: var(--text-muted); border-radius: 6px; font-size: 0.85rem;
}
a.ll-track-btn { text-decoration: none; color: inherit; }
.ll-track-btn:hover { background: var(--surface-hover); color: var(--text); }
.ll-track-btn-active { background: var(--primary-soft); color: var(--text); }
.ll-track-emoji { font-size: 0.9rem; }
.ll-header-right { margin-left: auto; }
.ll-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 32px;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
}
.ll-theme-toggle:hover { color: var(--text); border-color: var(--text-muted); }
.ll-theme-icon { font-size: 0.95rem; line-height: 1; }
.ll-theme-label { line-height: 1; }
/* SSG header: theme is non-interactive until the SPA mounts. */
.ll-theme-toggle-static { pointer-events: none; opacity: 0.9; }
@media (max-width: 720px) {
  .ll-theme-label { display: none; }
  .ll-theme-toggle { padding: 0; width: 32px; justify-content: center; }
}

.ll-body { flex: 1; display: flex; min-height: 0; }
.ll-sidebar {
  width: 280px; flex-shrink: 0;
  border-right: 1px solid var(--border); background: var(--surface);
  overflow-y: auto; padding: 1rem 0.5rem;
  /* Avoid scroll anchoring when the active chapter / list updates (was jumping
     to the end of the list then snapping back after client-side nav). */
  overflow-anchor: none;
}
.ll-sidebar-empty, .ll-sidebar-error { padding: 1rem 0.75rem; font-size: 0.8rem; color: var(--text-muted); }
.ll-sidebar-error { color: var(--error); }
.ll-sidebar-tree { display: flex; flex-direction: column; gap: 1rem; }
.ll-sidebar-group { display: flex; flex-direction: column; gap: 0.15rem; }
.ll-sidebar-group-title {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); padding: 0 0.75rem; margin-bottom: 0.35rem;
}
/* Roadmap — dot column; connectors only *between* dots (no line past first/last) */
.ll-sidebar-group-list {
  --ll-node-d: 10px;
  --ll-rail-w: 2px;
  --ll-after-node: 0.45rem;
  /* Node uses margin-left: -(node + after); line must sit on dot center (-after - node/2). */
  --ll-rail-line-left: calc(
    -1 * var(--ll-after-node) - var(--ll-node-d) / 2 - var(--ll-rail-w) / 2
  );
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  position: relative;
  margin-left: 0.5rem;
  padding: 0.15rem 0 0.35rem calc(var(--ll-node-d) + var(--ll-after-node));
}
.ll-sidebar-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.1rem 0;
}
.ll-sidebar-step:not(:first-child)::before {
  content: "";
  position: absolute;
  left: var(--ll-rail-line-left);
  top: 0;
  bottom: 50%;
  width: var(--ll-rail-w);
  background: var(--border);
  border-radius: 1px;
  pointer-events: none;
  z-index: 0;
}
.ll-sidebar-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: var(--ll-rail-line-left);
  top: 50%;
  bottom: 0;
  width: var(--ll-rail-w);
  background: var(--border);
  border-radius: 1px;
  pointer-events: none;
  z-index: 0;
}
.ll-sidebar-step-nested .ll-chap {
  font-size: 0.82rem;
  padding-left: 0.65rem;
}
.ll-road-node {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: var(--ll-node-d);
  height: var(--ll-node-d);
  box-sizing: border-box;
  border-radius: 50%;
  margin-left: calc(-1 * var(--ll-node-d) - var(--ll-after-node));
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: 0 0 0 1px var(--surface);
  pointer-events: none;
}
.ll-road-node-done {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--surface);
}
.ll-road-node-current {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--primary);
  border-color: var(--primary);
}
.ll-chap {
  display: block; flex: 1; min-width: 0; text-align: left;
  padding: 0.35rem 0.5rem; border: none; background: transparent;
  color: var(--text); border-radius: 5px; font-size: 0.85rem; line-height: 1.3;
}
a.ll-chap { text-decoration: none; color: inherit; box-sizing: border-box; }
.ll-chap:hover { background: var(--surface-hover); }
.ll-chap-current { background: var(--primary-soft); }
.ll-chap-done { color: var(--text-muted); }
/* Nested chapters: indent row only (rail stays aligned) */
.ll-chap-nested {
  font-size: 0.82rem;
}

.ll-main {
  flex: 1; min-width: 0; overflow-y: auto;
  overflow-anchor: none;
}

/* Home */
.ll-home { max-width: 880px; margin: 0 auto; padding: 4rem 1.5rem; }
.ll-home-title { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.5rem 0; }
.ll-home-tagline {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 2.5rem 0;
}
.ll-home-tracks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.ll-track-card {
  padding: 1.25rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.ll-track-card:hover { transform: translateY(-2px); border-color: var(--primary); }
.ll-track-card-emoji { font-size: 1.75rem; margin-bottom: 0.5rem; }
.ll-track-card-title { font-size: 1.05rem; font-weight: 600; }
.ll-track-card-subtitle { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.25rem; }

/* Track index — same column width + centering as lesson articles (`.ll-lesson`) */
.ll-track-page { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem; }
.ll-track-page-title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.ll-track-page-blurb {
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0.5rem 0 2rem 0;
}
.ll-track-section { margin-bottom: 2.25rem; }
.ll-track-section-title { font-size: 1rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.65rem 0; }
.ll-roadmap {
  --ll-node-d: 1.875rem;
  --ll-rail-w: 2px;
  --ll-after-node: 0.65rem;
  --ll-rail-line-left: calc(
    -1 * var(--ll-after-node) - var(--ll-node-d) / 2 - var(--ll-rail-w) / 2
  );
  position: relative;
  width: 100%;
  padding: 0.35rem 0.5rem 0.5rem calc(var(--ll-node-d) + var(--ll-after-node));
}
.ll-roadmap-step {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 0;
  cursor: pointer;
  border-radius: 8px;
  padding-right: 0.5rem;
  transition: background 0.12s;
}
.ll-roadmap-step:not(:first-child)::before {
  content: "";
  position: absolute;
  left: var(--ll-rail-line-left);
  top: 0;
  bottom: 50%;
  width: var(--ll-rail-w);
  background: var(--border);
  border-radius: 1px;
  pointer-events: none;
  z-index: 0;
}
.ll-roadmap-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: var(--ll-rail-line-left);
  top: 50%;
  bottom: 0;
  width: var(--ll-rail-w);
  background: var(--border);
  border-radius: 1px;
  pointer-events: none;
  z-index: 0;
}
.ll-roadmap-step:hover { background: var(--surface-hover); }
.ll-roadmap-node {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: var(--ll-node-d);
  height: var(--ll-node-d);
  box-sizing: border-box;
  border-radius: 50%;
  margin-left: calc(-1 * var(--ll-node-d) - var(--ll-after-node));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text-muted);
  background: var(--bg);
  border: 2px solid var(--border);
  box-shadow: 0 0 0 1px var(--bg);
  pointer-events: none;
}
.ll-roadmap-node-2d {
  font-size: 0.58rem;
  letter-spacing: -0.04em;
}
.ll-roadmap-step-done .ll-roadmap-node {
  background: var(--primary);
  border-color: var(--primary);
  color: oklch(0.11 0 0);
}
.ll-roadmap-main { flex: 1; min-width: 0; }
.ll-roadmap-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--text);
}
.ll-roadmap-title { font-weight: 500; }
.ll-roadmap-sum {
  margin: 0.25rem 0 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.ll-roadmap-step-done .ll-roadmap-title { color: var(--text-muted); }

/* Lesson */
.ll-lesson { max-width: 760px; margin: 0 auto; padding: 2rem 1.5rem; font-size: 16px; line-height: 1.65; }
.ll-lesson-header { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; }
.ll-lesson-trail { display: flex; gap: 0.75rem; align-items: center; font-size: 0.8rem; color: var(--text-muted); }
.ll-lesson-back { border: none; background: transparent; color: var(--primary); font-size: 0.8rem; cursor: pointer; padding: 0; }
a.ll-lesson-back { text-decoration: none; color: var(--primary); }
.ll-lesson-chapter { font-family: "JetBrains Mono", ui-monospace, monospace; }
.ll-lesson-title { font-size: 2rem; letter-spacing: -0.02em; margin: 0.25rem 0 0 0; }
.ll-lesson-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.ll-mark-done {
  padding: 0.4rem 0.85rem; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); border-radius: 6px; font-size: 0.85rem;
  cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.ll-mark-done:hover { color: var(--text); border-color: var(--text-muted); }
.ll-mark-done-on { background: var(--success-soft); color: var(--success); border-color: var(--success); }
.ll-mark-done-on:hover {
  background: color-mix(in oklch, var(--error) 10%, transparent);
  color: var(--error);
  border-color: color-mix(in oklch, var(--error) 50%, transparent);
}
.ll-mark-done-static { pointer-events: none; opacity: 0.88; }

/* Capstones: full IDE deferred to end of lesson (after reading / quizzes) */
.ll-lesson-sandbox-end {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.ll-lesson-sandbox-end-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem 0;
  color: var(--text);
}
.ll-lesson-sandbox-end-body { margin-top: 0.25rem; }

/* Prev/next chapter footer (mirrors tishlang.com /docs nav) */
.ll-prev-next {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.ll-prev-next-cell { flex: 1; min-width: 0; display: flex; }
.ll-prev-next-cell-right { justify-content: flex-end; }
.ll-prev-next-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  max-width: 100%;
  min-width: 0;
}
.ll-prev-next-link:hover {
  border-color: var(--primary);
  background: color-mix(in oklch, var(--primary) 8%, var(--surface));
}
.ll-prev-next-stack {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.ll-prev-next-stack-right { text-align: right; align-items: flex-end; }
.ll-prev-next-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.ll-prev-next-title {
  font-size: 0.9rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.ll-prev-next-arrow {
  font-size: 1.1rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color 0.15s, transform 0.15s;
}
.ll-prev-next-link:hover .ll-prev-next-arrow {
  color: var(--primary);
}
.ll-prev-next-prev:hover .ll-prev-next-arrow { transform: translateX(-2px); }
.ll-prev-next-next:hover .ll-prev-next-arrow { transform: translateX(2px); }

.ll-lesson-body h1, .ll-lesson-body h2, .ll-lesson-body h3 { letter-spacing: -0.015em; margin-top: 2rem; }
.ll-lesson-body h1 { font-size: 1.75rem; }
.ll-lesson-body h2 { font-size: 1.35rem; }
.ll-lesson-body h3 { font-size: 1.1rem; }
.ll-lesson-body p { margin: 0.85rem 0; }
.ll-lesson-body ul, .ll-lesson-body ol { padding-left: 1.5rem; }
.ll-lesson-body code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.85em; padding: 0.1rem 0.35rem;
  background: var(--surface-hover); border-radius: 4px;
}
.ll-lesson-body .code-block {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 8px; padding: 1rem;
  overflow-x: auto;
  font-size: 0.85rem;
  -webkit-overflow-scrolling: touch;
}
.ll-lesson-body .code-block code {
  background: transparent; padding: 0;
  display: block;
  min-width: min-content;
  white-space: pre;
}
.ll-lesson-body a { color: var(--primary); text-decoration: underline; text-decoration-color: color-mix(in oklch, var(--primary) 40%, transparent); text-underline-offset: 2px; }
.ll-lesson-body a:hover { text-decoration-color: var(--primary); }
.ll-lesson-body a.ll-link-ext::after {
  content: " ↗";
  font-size: 0.85em;
  color: var(--text-muted);
  text-decoration: none;
}
.ll-md > * { margin-top: 0; margin-bottom: 0.85rem; }
.ll-md > *:last-child { margin-bottom: 0; }
.ll-lesson-body .md-quote {
  margin: 0 0 0.85rem 0;
  padding: 0.5rem 0.9rem;
  color: var(--text-muted);
  border-left: 3px solid color-mix(in oklch, var(--accent) 70%, transparent);
  background: color-mix(in oklch, var(--bg) 80%, var(--surface));
  border-radius: 0 6px 6px 0;
}
.ll-lesson-body .md-quote > *:last-child { margin-bottom: 0; }
.ll-lesson-body .md-quote a { color: var(--text); }
.ll-lesson-body .md-hr {
  border: 0;
  height: 1px;
  margin: 1.25rem 0;
  background: var(--border);
}
.ll-lesson-body .md-table-scroll {
  margin: 1rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.ll-lesson-body .md-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.92em;
}
.ll-lesson-body .md-table th,
.ll-lesson-body .md-table td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.ll-lesson-body .md-table th {
  background: var(--surface);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: 0;
}
.ll-lesson-body .md-table tr:nth-child(even) td {
  background: var(--surface);
}

.ll-loading, .ll-error { padding: 3rem 1.5rem; text-align: center; color: var(--text-muted); }
.ll-error { color: var(--error); }

.ll-error-card {
  margin: 2rem auto;
  max-width: 640px;
  background: var(--surface);
  border: 1px solid color-mix(in oklch, var(--error) 35%, var(--border));
  border-left: 4px solid var(--error);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.ll-error-head {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.5rem;
}
.ll-error-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 999px;
  background: var(--error); color: oklch(0.98 0 0);
  font-weight: 700; font-size: 0.8rem; line-height: 1;
}
.ll-error-title { font-weight: 600; color: var(--error); font-size: 0.95rem; }
.ll-error-body {
  margin: 0 0 0.55rem 0;
  background: color-mix(in oklch, var(--bg) 60%, var(--error-soft));
  border: 1px solid color-mix(in oklch, var(--error) 25%, var(--border));
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.ll-error-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.4rem 0.55rem;
  border-left: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  border-radius: 0 4px 4px 0;
}
.ll-unknown-directive { margin: 1rem 0; padding: 0.75rem; background: var(--warn-soft); border: 1px dashed var(--warn); border-radius: 6px; }
.ll-unknown-directive-name { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.8rem; color: var(--warn); }

/* MiniRunner */
.mr-root { display: flex; flex-direction: column; gap: 0.5rem; margin: 1.25rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mr-editor {
  height: clamp(180px, 32vh, 360px);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
  /* Become a flex column so the .pg-editor inside actually fills, instead of
     collapsing to its intrinsic content height in a block container. */
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mr-editor > * { min-height: 0; }
.mr-controls { display: flex; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.mr-run { padding: 0.4rem 1.1rem; border: none; background: var(--primary); color: oklch(0.11 0 0); border-radius: 6px; font-weight: 600; font-size: 0.85rem; }
.mr-run:hover { filter: brightness(1.1); }
.mr-strip { padding: 0.75rem; font-size: 0.85rem; }
.mr-strip-idle { color: var(--text-muted); }
.mr-strip-out { background: var(--bg); }
.mr-strip-err {
  background: var(--error-soft);
  color: var(--text);
  border-top: 1px solid color-mix(in oklch, var(--error) 35%, transparent);
}
.mr-strip-ok { display: flex; align-items: center; gap: 0.5rem; background: var(--success-soft); color: var(--success); font-weight: 600; }
.mr-checkmark { font-size: 1.2rem; }
.mr-strip-fail {
  background: var(--error-soft);
  border-top: 1px solid color-mix(in oklch, var(--error) 35%, transparent);
}
.mr-strip-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.25rem; }
.mr-pre { margin: 0; white-space: pre-wrap; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.8rem; }

/* Error strip — friendly, structured */
.mr-err-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.mr-err-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 999px;
  background: var(--error); color: oklch(0.98 0 0);
  font-weight: 700; font-size: 0.8rem; line-height: 1;
}
.mr-err-title { font-weight: 600; color: var(--error); font-size: 0.85rem; }
.mr-err-body {
  background: color-mix(in oklch, var(--bg) 65%, var(--error-soft));
  border: 1px solid color-mix(in oklch, var(--error) 25%, var(--border));
  border-radius: 6px;
  padding: 0.5rem 0.6rem;
  color: var(--text);
  margin: 0 0 0.4rem 0;
  white-space: pre-wrap;
  font-size: 0.78rem;
  line-height: 1.45;
}
.mr-err-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  padding: 0.4rem 0.55rem;
  border-left: 2px solid color-mix(in oklch, var(--accent) 70%, transparent);
  background: color-mix(in oklch, var(--bg) 80%, transparent);
  border-radius: 0 4px 4px 0;
}

/* Diff strip — line-aligned with markers */
.mr-diff-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 0.4rem;
}
.mr-diff-title { font-weight: 600; color: var(--error); font-size: 0.85rem; }
.mr-diff-hint { font-size: 0.75rem; color: var(--text-muted); }
.mr-diff-table-head, .mr-diff-row {
  display: grid;
  grid-template-columns: 1.2rem 2rem 1fr 1.2rem 1fr;
  gap: 0.5rem;
  align-items: start;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  padding: 0.15rem 0.3rem;
}
.mr-diff-table-head {
  font-family: inherit;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.25rem;
  padding-bottom: 0.3rem;
}
.mr-diff-table {
  background: color-mix(in oklch, var(--bg) 70%, transparent);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem;
  max-height: 240px;
  overflow: auto;
}
.mr-diff-row { border-radius: 3px; }
.mr-diff-match { color: var(--text-muted); }
.mr-diff-bad {
  background: color-mix(in oklch, var(--error) 12%, transparent);
  color: var(--text);
}
.mr-diff-mark { font-weight: 700; text-align: center; }
.mr-diff-match .mr-diff-mark { color: var(--success); }
.mr-diff-bad .mr-diff-mark { color: var(--error); }
.mr-diff-num { color: var(--text-muted); text-align: right; }
.mr-diff-actual, .mr-diff-expected { white-space: pre-wrap; word-break: break-word; }
.mr-diff-arrow { color: var(--text-muted); text-align: center; }

/* PickAssembler */
.pick-root { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin: 1.25rem 0; }
.pick-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 1rem; min-height: 3rem; background: var(--bg); border: 1px dashed var(--border); border-radius: 8px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.95rem; }
.pick-slot { display: inline-block; padding: 0.3rem 0.75rem; border-radius: 6px; border: 1px solid var(--border); font-family: inherit; background: transparent; color: var(--text-muted); }
.pick-slot-empty { min-width: 2rem; text-align: center; }
.pick-slot-filled { background: var(--primary-soft); border-color: var(--primary); color: var(--text); cursor: pointer; }
.pick-tray { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pick-chip { padding: 0.45rem 0.85rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-hover); color: var(--text); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.95rem; transition: transform 0.1s, border-color 0.1s; }
.pick-chip:hover { border-color: var(--primary); transform: translateY(-1px); }
.pick-chip-used { opacity: 0.3; cursor: default; }
.pick-chip-used:hover { transform: none; border-color: var(--border); }
.pick-chip-chosen { background: var(--primary-soft); border-color: var(--primary); }
.pick-controls { display: flex; gap: 0.5rem; }
.pick-check { padding: 0.45rem 1rem; border: none; background: var(--primary); color: oklch(0.11 0 0); border-radius: 6px; font-weight: 600; }
.pick-check:hover { filter: brightness(1.1); }
.pick-reset { padding: 0.45rem 0.85rem; border: 1px solid var(--border); background: transparent; color: var(--text-muted); border-radius: 6px; }
.pick-reset:hover { color: var(--text); border-color: var(--text-muted); }
.pick-result { padding: 0.6rem 0.75rem; border-radius: 6px; font-size: 0.9rem; }
.pick-result-ok { background: var(--success-soft); color: var(--success); font-weight: 600; }
.pick-result-fail { background: var(--error-soft); color: var(--error); }
.pick-template { margin: 0; padding: 0.5rem 0.75rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.9rem; white-space: pre-wrap; background: var(--bg); border-radius: 6px; color: var(--text); }
.pick-blank-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; }
.pick-blank-label { font-size: 0.8rem; color: var(--text-muted); }
.pick-blank-options { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.pick-chip .hl-keyword, .pick-slot .hl-keyword { color: var(--primary); font-weight: 600; }
.pick-chip .hl-string, .pick-slot .hl-string { color: var(--accent); }
.pick-chip .hl-storage, .pick-slot .hl-storage { color: var(--primary); font-weight: 600; }
.pick-chip .hl-number, .pick-slot .hl-number { color: var(--warn); }
.pick-chip .hl-punctuation, .pick-slot .hl-punctuation { color: var(--text-muted); }

/* Directives: Callout */
.dir-callout { margin: 1.25rem 0; padding: 0.85rem 1rem 0.85rem 1.1rem; border-left: 3px solid var(--primary); background: var(--surface); border-radius: 0 8px 8px 0; }
.dir-callout-info { border-left-color: var(--primary); }
.dir-callout-tip { border-left-color: var(--success); }
.dir-callout-warn { border-left-color: var(--warn); }
.dir-callout-danger { border-left-color: var(--error); }
.dir-callout-note { border-left-color: var(--text-muted); }
.dir-callout-title { font-weight: 600; font-size: 0.9rem; margin-bottom: 0.35rem; }
.dir-callout-body p:first-child { margin-top: 0; }
.dir-callout-body p:last-child { margin-bottom: 0; }

/* Directives: Exercise */
.dir-exercise { margin: 1.5rem 0; }
.dir-exercise-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.dir-exercise-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.5rem; background: var(--primary-soft); color: var(--primary); border-radius: 4px; font-weight: 600; }
.dir-exercise-hint { font-size: 0.8rem; color: var(--text-muted); }

/* Directives: Quiz */
.dir-quiz { margin: 1.5rem 0; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.quiz-prompt { font-weight: 500; margin-bottom: 0.75rem; }
.quiz-opts { display: flex; flex-direction: column; gap: 0.4rem; }
.quiz-opt { text-align: left; padding: 0.6rem 0.85rem; border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 6px; font-size: 0.9rem; }
.quiz-opt:hover { border-color: var(--primary); background: var(--surface-hover); }
.quiz-opt-correct { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.quiz-opt-wrong { background: var(--error-soft); border-color: var(--error); color: var(--error); }
.quiz-opt-correct-hint { border-color: var(--success); }
.quiz-feedback { margin-top: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.85rem; }
.quiz-feedback-ok { background: var(--success-soft); color: var(--success); font-weight: 600; }
.quiz-feedback-fail { background: var(--error-soft); color: var(--error); }

/* Directives: Sandbox */
.dir-sandbox { margin: 1.5rem 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.dir-sandbox-header { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
.dir-sandbox-badge { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; }
.dir-sandbox-run { padding: 0.4rem 1rem; border: none; background: var(--primary); color: oklch(0.11 0 0); border-radius: 6px; font-weight: 600; font-size: 0.85rem; }

/* Definite heights + CSS-variable-driven splits so panes are draggable
   without triggering Lattish re-renders. --sb-left/--sb-term are written
   directly to the body element by Sandbox.tish during the drag. */
.dir-sandbox-body {
  display: flex;
  flex-direction: column;
  height: clamp(360px, 55vh, 560px);
  min-height: 0;
  --sb-left: 50;
  --sb-term: 35;
}

/* All pane wrappers must be flex columns with min-height: 0 so the inner
   .pg-editor / .pg-terminal / .pg-preview can fill them via `flex: 1`.
   A plain block wrapper would let those panels collapse to content height. */
.dir-sandbox-editor,
.dir-sandbox-terminal,
.dir-sandbox-preview {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.dir-sandbox-editor > *,
.dir-sandbox-terminal > *,
.dir-sandbox-preview > * { min-height: 0; min-width: 0; }

/* Console mode: editor on top, draggable horizontal handle, terminal below. */
.dir-sandbox-console .dir-sandbox-editor { flex: 1; }
.dir-sandbox-console .dir-sandbox-terminal {
  flex: 0 0 auto;
  height: calc(var(--sb-term) * 1%);
  min-height: 80px;
  border-top: 1px solid var(--border);
}

/* IDE mode: editor (left) | preview + terminal (right). */
.dir-sandbox-ide .dir-sandbox-body {
  flex-direction: row;
  height: clamp(440px, 65vh, 680px);
}
.dir-sandbox-ide .dir-sandbox-left {
  flex: 0 0 auto;
  width: calc(var(--sb-left) * 1%);
  min-width: 200px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dir-sandbox-ide .dir-sandbox-right {
  flex: 1;
  min-width: 200px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dir-sandbox-ide .dir-sandbox-editor { flex: 1; }
.dir-sandbox-ide .dir-sandbox-preview { flex: 1; }
.dir-sandbox-ide .dir-sandbox-terminal {
  flex: 0 0 auto;
  height: calc(var(--sb-term) * 1%);
  min-height: 80px;
}

/* Resize handles. Thin invisible strips that highlight on hover, lit up
   while dragging via the dir-sandbox-resizing-* class on <body>. */
.dir-sandbox-resize-v,
.dir-sandbox-resize-h {
  flex: 0 0 auto;
  background: var(--border);
  transition: background 0.15s;
  position: relative;
  z-index: 5;
}
.dir-sandbox-resize-v {
  width: 6px;
  cursor: col-resize;
}
.dir-sandbox-resize-h {
  height: 6px;
  cursor: row-resize;
}
.dir-sandbox-resize-v:hover,
.dir-sandbox-resize-h:hover,
.dir-sandbox-resizing-v .dir-sandbox-resize-v,
.dir-sandbox-resizing-h .dir-sandbox-resize-h {
  background: var(--primary);
}
/* Keep the cursor consistent across the page during a drag, and prevent
   accidental text selection / iframe interaction. */
.dir-sandbox-resizing-v,
.dir-sandbox-resizing-v * { cursor: col-resize !important; user-select: none !important; }
.dir-sandbox-resizing-h,
.dir-sandbox-resizing-h * { cursor: row-resize !important; user-select: none !important; }
.dir-sandbox-resizing-v iframe,
.dir-sandbox-resizing-h iframe { pointer-events: none; }

/* Directives: Project */
.dir-project { margin: 0.5rem 0 2rem 0; padding: 1.5rem; background: linear-gradient(135deg, var(--primary-soft), var(--surface)); border: 1px solid var(--primary); border-radius: 12px; }
.dir-project-meta { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.dir-project-chip { font-size: 0.75rem; padding: 0.2rem 0.55rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); }
.dir-project-title { font-size: 1.75rem; margin: 0; letter-spacing: -0.02em; }
.dir-project-summary { color: var(--text-muted); margin: 0.5rem 0 1rem 0; }