/* ═══════════════════════════════════════════════════════
   ai-lab-lesson.css — HerAI AI Lab Lesson Styles
   Pink HerAI theme — match participant dashboard design
   ═══════════════════════════════════════════════════════ */

/* ── AI Lab Content Box ───────────────────────────── */
.ai-lab-content {
  --ai-bg:       #fff7fb;
  --ai-bg2:      #fff0f7;
  --ai-card:     #ffffff;
  --ai-border:   var(--fellow-line);
  --ai-border-s: rgba(246,51,146,.18);
  --ai-text:     #171827;
  --ai-text2:    #6f7282;
  --ai-text3:    #8e91a0;
  --ai-accent:   #f63392;
  --ai-font:     'Inter', sans-serif;
  --ai-mono:     'SF Mono', 'Space Mono', monospace;
  --ai-r:        12px;
  --ai-r-sm:     8px;

  background: var(--ai-bg);
  border: 1px solid var(--fellow-line);
  border-radius: 18px;
  color: var(--ai-text);
  font-family: var(--ai-font);
  line-height: 1.6;
  padding: 40px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(246,51,146,.06);
}

.ai-lab-content *,
.ai-lab-content *::before,
.ai-lab-content *::after { box-sizing: border-box; }

/* ── Prose ─────────────────────────────────────────── */
.ai-lab-content .prose {
  font-size: 15px;
  color: var(--ai-text2);
  line-height: 1.8;
  margin-bottom: 24px;
}
.ai-lab-content .prose strong { color: var(--ai-text); font-weight: 600; }
.ai-lab-content .prose em    { color: var(--ai-accent); font-style: normal; }
.ai-lab-content .prose code  {
  font-family: var(--ai-mono); font-size: 12px;
  color: var(--ai-accent);
  background: rgba(246,51,146,.08);
  padding: 1px 6px; border-radius: 4px;
}

/* ── Section Header ─────────────────────────────────── */
.ai-lab-content .sec-header {
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 22px; padding-bottom: 20px;
  border-bottom: 1px solid var(--ai-border);
}
.ai-lab-content .sec-num {
  font-family: var(--ai-mono); font-size: 12px; font-weight: 700;
  color: var(--ai-accent); letter-spacing: .04em;
  background: rgba(246,51,146,.08); border: 1px solid rgba(246,51,146,.18);
  padding: 4px 10px; border-radius: 6px; flex-shrink: 0; margin-top: 3px;
}
.ai-lab-content .sec-title {
  font-size: clamp(20px, 2.5vw, 26px); font-weight: 800;
  color: var(--ai-text); margin-bottom: 4px;
}
.ai-lab-content .sec-sub {
  font-size: 13px; color: var(--ai-text3); line-height: 1.55;
}

/* ── Worked Box ─────────────────────────────────────── */
.ai-lab-content .worked-box {
  background: var(--ai-bg2); border: 1px solid rgba(246,51,146,.14);
  border-radius: var(--ai-r); padding: 22px; margin: 20px 0;
  position: relative; overflow: hidden;
}
.ai-lab-content .worked-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ai-accent), #ff6b9d);
}
.ai-lab-content .wb-badge {
  font-family: var(--ai-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ai-accent); margin-bottom: 8px;
}
.ai-lab-content .wb-title {
  font-size: 16px; font-weight: 700; color: var(--ai-text);
  margin-bottom: 14px;
}

/* ── Math / Calc Chain ──────────────────────────────── */
.ai-lab-content .calc-chain {
  display: flex; flex-direction: column; gap: 8px;
}
.ai-lab-content .calc-step {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--ai-bg); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 12px 14px;
}
.ai-lab-content .cs-num-circle {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--ai-accent); color: #fff;
  font-family: var(--ai-mono); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}
.ai-lab-content .cs-content { flex: 1; }
.ai-lab-content .cs-label {
  font-size: 12px; font-weight: 600; color: var(--ai-text); margin-bottom: 6px;
}
.ai-lab-content .math-line {
  font-family: var(--ai-mono); font-size: 12px; line-height: 1.8;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px;
}
.ai-lab-content .math-term  { color: var(--ai-text); }
.ai-lab-content .math-term.blue   { color: #ff6b9d; }
.ai-lab-content .math-term.purple { color: var(--ai-accent); }
.ai-lab-content .math-term.green  { color: #34c759; }
.ai-lab-content .math-term.orange { color: #f59e0b; }
.ai-lab-content .math-op     { color: var(--ai-text3); }
.ai-lab-content .math-comment { font-size: 11px; color: var(--ai-text3); font-style: italic; }
.ai-lab-content .math-result { color: var(--ai-text); font-weight: 700; }
.ai-lab-content .math-result.red   { color: #ef4444; }
.ai-lab-content .math-result.green { color: #34c759; }

/* ── Problem Overview ───────────────────────────────── */
.ai-lab-content .problem-overview {
  display: flex; align-items: stretch; gap: 12px; margin: 20px 0;
}
.ai-lab-content .prob-card {
  flex: 1; background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r); padding: 18px;
  box-shadow: 0 2px 12px rgba(246,51,146,.04);
}
.ai-lab-content .prob-icon   { font-size: 26px; margin-bottom: 8px; }
.ai-lab-content .prob-num    { font-family: var(--ai-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--ai-text3); margin-bottom: 4px; }
.ai-lab-content .prob-title  { font-size: 15px; font-weight: 700; color: var(--ai-text); margin-bottom: 6px; }
.ai-lab-content .prob-desc   { font-size: 12px; color: var(--ai-text2); line-height: 1.6; }
.ai-lab-content .prob-arrow  { font-size: 24px; color: var(--ai-text3); flex-shrink: 0; align-self: center; }

/* ── Strategy Grid ──────────────────────────────────── */
.ai-lab-content .strategy-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0;
}
.ai-lab-content .strategy-card {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r); padding: 16px;
  box-shadow: 0 2px 12px rgba(246,51,146,.04);
  transition: all .2s;
}
.ai-lab-content .strategy-card:hover {
  border-color: rgba(246,51,146,.25); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(246,51,146,.08);
}
.ai-lab-content .sc-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.ai-lab-content .sc-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.ai-lab-content .sc-icon.word  { background: rgba(246,51,146,.1); color: var(--ai-accent); }
.ai-lab-content .sc-icon.sub   { background: rgba(34,197,94,.1); color: #22c55e; }
.ai-lab-content .sc-icon.char  { background: rgba(245,158,11,.1); color: #f59e0b; }
.ai-lab-content .sc-icon.morph { background: rgba(239,68,68,.1); color: #ef4444; }
.ai-lab-content .sc-title { font-size: 14px; font-weight: 700; color: var(--ai-text); }
.ai-lab-content .sc-desc  { font-size: 12px; color: var(--ai-text2); line-height: 1.6; }

/* ── Code Preview ─────────────────────────────────── */
.ai-lab-content .code-preview {
  font-family: var(--ai-mono); font-size: 11px;
  background: var(--ai-bg2); color: var(--ai-text2);
  border: 1px solid var(--ai-border); border-radius: var(--ai-r-sm);
  padding: 12px; margin-top: 10px; overflow-x: auto;
  white-space: pre-wrap; line-height: 1.7;
}

/* ── Example Chips ──────────────────────────────────── */
.ai-lab-content .example-chips {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.ai-lab-content .example-chip {
  font-size: 12px; background: var(--ai-card); border: 1px solid var(--ai-border-s);
  color: var(--ai-text2); padding: 6px 14px; border-radius: 99px;
  cursor: pointer; transition: all .2s;
}
.ai-lab-content .example-chip:hover {
  background: rgba(246,51,146,.08); border-color: rgba(246,51,146,.25);
  color: var(--ai-accent);
}

/* ── Playground box ─────────────────────────────────── */
.ai-lab-content .playground-box {
  background: var(--ai-card); border: 1px solid rgba(246,51,146,.14);
  border-radius: var(--ai-r); padding: 24px; margin: 24px 0;
  box-shadow: 0 4px 20px rgba(246,51,146,.05);
}
.ai-lab-content .playground-box h3 {
  font-size: 18px; font-weight: 700; color: var(--ai-text); margin-bottom: 14px;
}
.ai-lab-content .mode-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
}
.ai-lab-content .mode-tab {
  font-family: var(--ai-mono); font-size: 11px; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--ai-border);
  background: #fff; color: var(--ai-text3); cursor: pointer;
  transition: all .2s;
}
.ai-lab-content .mode-tab.active {
  background: rgba(246,51,146,.1); border-color: rgba(246,51,146,.25);
  color: var(--ai-accent);
}
.ai-lab-content .play-textarea {
  width: 100%; min-height: 80px;
  background: var(--ai-bg); border: 1px solid var(--ai-border-s);
  border-radius: var(--ai-r-sm); color: var(--ai-text);
  font-family: var(--ai-font); font-size: 14px;
  padding: 14px; resize: vertical; outline: none; margin-bottom: 12px;
  spellcheck: false;
}
.ai-lab-content .play-textarea:focus { border-color: var(--ai-accent); }

.ai-lab-content .token-output {
  background: var(--ai-bg); border: 1px solid var(--ai-border-s);
  border-radius: var(--ai-r-sm); padding: 14px; min-height: 40px;
  margin-bottom: 12px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.ai-lab-content .token-chip {
  font-family: var(--ai-mono); font-size: 12px;
  background: #fff; border: 1px solid var(--ai-border-s);
  color: var(--ai-text); padding: 4px 10px; border-radius: 6px;
}

.ai-lab-content .pg-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.ai-lab-content .pg-stat {
  background: var(--ai-bg); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 12px; text-align: center;
}
.ai-lab-content .pg-stat .pg-val {
  font-family: var(--ai-mono); font-size: 20px; font-weight: 700;
  color: var(--ai-text); margin-bottom: 2px;
}
.ai-lab-content .pg-stat .pg-lbl {
  font-size: 10px; color: var(--ai-text3); text-transform: uppercase;
  letter-spacing: .04em;
}

.ai-lab-content .morpho-panel {
  background: var(--ai-bg); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 14px; margin-top: 14px;
}
.ai-lab-content .morpho-panel h4 {
  font-family: var(--ai-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ai-text3); margin-bottom: 8px;
}
.ai-lab-content .morpho-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-family: var(--ai-mono); font-size: 12px; color: var(--ai-text2);
}
.ai-lab-content .morpho-tag {
  padding: 2px 8px; border-radius: 4px; font-size: 10px;
  background: rgba(246,51,146,.08); color: var(--ai-accent);
}

.ai-lab-content .play-actions {
  display: flex; gap: 8px; margin-top: 14px;
}
.ai-lab-content .play-actions button {
  font-family: var(--ai-mono); font-size: 11px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--ai-r-sm);
  border: 1px solid var(--ai-border-s); background: #fff;
  color: var(--ai-text2); cursor: pointer; transition: all .2s;
}
.ai-lab-content .play-actions button:hover {
  background: rgba(246,51,146,.06); color: var(--ai-accent);
  border-color: rgba(246,51,146,.25);
}

/* ── Section-level lesson-sec spacing ──────────────── */
.ai-lab-content .lesson-sec {
  margin-bottom: 60px;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
  .ai-lab-content {
    padding: 24px 18px; border-radius: 14px;
  }
  .ai-lab-content .strategy-grid { grid-template-columns: 1fr; }
  .ai-lab-content .problem-overview { flex-direction: column; }
  .ai-lab-content .pg-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════
   AI Lab Overview Pages (NLP, ML, CV, etc.)
   ═══════════════════════════════════════════════════════ */

/* ── CSS variable definitions for overview sections ── */
.ai-lab-overview {
  --ai-bg:       #fff7fb;
  --ai-bg2:      #fff0f7;
  --ai-card:     #ffffff;
  --ai-border:   rgba(244, 143, 188, 0.26);
  --ai-border-s: rgba(246,51,146,.18);
  --ai-border-m: rgba(246,51,146,.22);
  --ai-text:     #171827;
  --ai-text2:    #6f7282;
  --ai-text3:    #8e91a0;
  --ai-accent:   #f63392;
  --ai-mono:     'SF Mono', 'Space Mono', monospace;
  --ai-r:        12px;
  --ai-r-sm:     8px;
}

.ai-lab-overview .fellow-main {
  padding: 0 36px 30px;
  max-width: 1280px;
  margin: 0 auto;
}
.ai-lab-overview .lesson-topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  padding: 20px 0 16px; gap: 16px;
  border-bottom: 1px solid var(--fellow-line);
  background: transparent; position: relative;
}
.ai-lab-overview .lesson-topbar .fellow-actions {
  display: flex; align-items: center; gap: 12px;
}
.ai-lab-overview .lesson-topbar .fellow-user-button {
  min-width: 170px;
}

/* ── Overview hero ───────────────────────────────── */
.ai-overview-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 32px;
  margin-top: 24px;
  margin-bottom: 24px;
  border: 1px solid var(--fellow-line);
  border-radius: 20px;
  overflow: visible;
}
.ai-hero-copy {
  flex: 1;
  min-width: 0;
  padding-top: 6px;
}
.ai-hero-copy h1 {
  margin: 0 0 12px;
  font-size: clamp(2.7rem, 5vw, 4.5rem);
  line-height: .96;
  letter-spacing: -.045em;
  color: var(--ai-text);
  font-weight: 900;
}
.ai-hero-copy h1 span {
  color: var(--ai-accent);
}
.ai-hero-copy p {
  margin: 0 0 16px;
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ai-text2);
}
.ai-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
}
.ai-hero-meta span,
.ai-hero-meta b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ai-text3);
}
.ai-hero-meta i {
  color: var(--ai-accent);
}
.ai-hero-visual {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(42vw, 430px);
  margin-right: -12px;
}
.ai-hero-visual img {
  width: 100%;
  max-width: 430px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 50px rgba(246,51,146,.14));
}

/* ── Stats strip ────────────────────────────────── */
.ai-overview-stats {
  display: flex; gap: 32px;
  margin: 24px 0 8px;
}
.ai-overview-stats article {
  text-align: center;
}
.ai-overview-stats strong {
  display: block; font-size: 2.2rem; font-weight: 800;
  color: var(--fellow-pink); font-family: 'Space Grotesk', sans-serif;
}
.ai-overview-stats span {
  font-size: .78rem; color: #8e91a0; font-weight: 600; letter-spacing: .04em;
}

/* ── Pipeline Lab (section-level interactive) ─────── */
.ai-lab-content .pipeline-lab {
  background: var(--ai-card); border: 1px solid rgba(246,51,146,.14);
  border-radius: var(--ai-r); padding: 24px; margin: 20px 0;
  box-shadow: 0 4px 20px rgba(246,51,146,.05);
}
.ai-lab-content .pl-section {
  margin-bottom: 20px;
}
.ai-lab-content .pl-label {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ai-text3); margin-bottom: 8px;
}
.ai-lab-content .pl-input {
  width: 100%; min-height: 80px;
  background: var(--ai-bg); border: 1px solid var(--ai-border-s);
  border-radius: var(--ai-r-sm); color: var(--ai-text);
  font-family: var(--ai-font); font-size: .9rem;
  padding: 14px; resize: vertical; outline: none;
}
.ai-lab-content .pl-input:focus { border-color: var(--ai-accent); }

.ai-lab-content .pl-steps {
  display: grid; gap: 8px; margin-bottom: 20px;
}
.ai-lab-content .pl-step-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  background: var(--ai-bg); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm);
}
.ai-lab-content .pst-left {
  display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0;
}
.ai-lab-content .pst-toggle {
  position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0;
}
.ai-lab-content .pst-toggle input { opacity: 0; width: 0; height: 0; }
.ai-lab-content .pst-slider {
  position: absolute; cursor: pointer; inset: 0;
  background: #e2e0e7; border-radius: 22px; transition: .2s;
}
.ai-lab-content .pst-slider::before {
  content: ""; position: absolute; height: 16px; width: 16px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .2s;
}
.ai-lab-content .pst-toggle input:checked + .pst-slider {
  background: var(--ai-accent);
}
.ai-lab-content .pst-toggle input:checked + .pst-slider::before {
  transform: translateX(18px);
}
.ai-lab-content .pst-name {
  font-size: .84rem; font-weight: 700; color: var(--ai-text);
}
.ai-lab-content .pst-desc {
  font-size: .7rem; color: var(--ai-text3);
}
.ai-lab-content .pst-preview {
  font-family: var(--ai-mono); font-size: .72rem; color: var(--ai-text2);
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: 6px; padding: 6px 12px; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0;
}

.ai-lab-content .pl-output {
  background: var(--ai-bg); border: 1px solid rgba(246,51,146,.2);
  border-radius: var(--ai-r-sm); padding: 16px;
}
.ai-lab-content .pl-output h4 {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ai-accent); margin-bottom: 10px;
}
.ai-lab-content .pl-output-tokens {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ai-lab-content .pl-output-token {
  font-family: var(--ai-mono); font-size: 11px;
  background: rgba(246,51,146,.08); border: 1px solid rgba(246,51,146,.2);
  color: var(--ai-accent); padding: 4px 10px; border-radius: 6px;
}
.ai-lab-content .pl-output-stats {
  display: flex; gap: 20px; margin-top: 12px;
  font-family: var(--ai-mono); font-size: .72rem; color: var(--ai-text3);
}

/* ── Pipeline Visual ──────────────────────────────── */
.ai-lab-content .pipeline-visual {
  display: flex; align-items: flex-start; gap: 0; margin: 24px 0;
  flex-wrap: wrap; justify-content: center;
}
.ai-lab-content .pv-step {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 14px 16px; text-align: center;
  min-width: 100px; transition: all .2s;
  box-shadow: 0 2px 8px rgba(246,51,146,.02);
}
.ai-lab-content .pv-step.active {
  border-color: var(--ai-accent);
  background: rgba(246,51,146,.05);
  box-shadow: 0 4px 16px rgba(246,51,146,.06);
}
.ai-lab-content .pvs-icon { font-size: 1.3rem; color: var(--ai-accent); margin-bottom: 4px; }
.ai-lab-content .pvs-label { font-size: .66rem; font-weight: 800; color: var(--ai-text); }
.ai-lab-content .pvs-example {
  font-family: var(--ai-mono); font-size: .62rem; color: var(--ai-text3);
  margin-top: 4px; max-width: 130px; overflow: hidden; text-overflow: ellipsis;
}
.ai-lab-content .pv-arrow {
  font-size: 1.1rem; color: var(--ai-text3); padding: 16px 8px 0; flex-shrink: 0;
}

/* ── Interactive Box Buttons ──────────────────────── */
.ai-lab-content .ib-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: .74rem; font-weight: 700; padding: 9px 20px;
  border-radius: 8px; border: 1px solid var(--ai-border-s);
  background: #fff; color: var(--ai-text2);
  cursor: pointer; transition: all .18s;
}
.ai-lab-content .ib-btn:hover {
  background: rgba(246,51,146,.06); color: var(--ai-accent);
  border-color: rgba(246,51,146,.2);
}
.ai-lab-content .ib-btn.primary {
  background: var(--ai-accent); color: #fff; border-color: transparent;
}
.ai-lab-content .ib-btn.primary:hover { background: #e02d82; }
.ai-lab-content .ib-btn.danger {
  background: #ef4444; color: #fff; border-color: transparent;
}
.ai-lab-content .ib-btn.danger:hover { background: #dc2626; }

.ai-lab-content .ib-input {
  width: 100%; min-height: 50px; background: var(--ai-bg);
  border: 1px solid var(--ai-border-s); border-radius: var(--ai-r-sm);
  color: var(--ai-text); font-family: var(--ai-font); font-size: .82rem;
  padding: 10px 14px; resize: vertical; outline: none; margin-bottom: 8px;
}
.ai-lab-content .ib-input:focus { border-color: var(--ai-accent); }

/* ── Next Lesson CTA ──────────────────────────────── */
.ai-lab-content .next-lesson-cta {
  background: var(--ai-bg2); border: 1px solid rgba(246,51,146,.14);
  border-radius: var(--ai-r); padding: 36px; text-align: center; margin-top: 48px;
}
.ai-lab-content .nlc-label {
  font-family: var(--ai-mono); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ai-accent);
  margin-bottom: 8px; display: block;
}
.ai-lab-content .nlc-title {
  font-size: 1.4rem; font-weight: 800; color: var(--ai-text); margin-bottom: 8px;
}
.ai-lab-content .nlc-desc {
  font-size: .9rem; color: var(--ai-text2); margin-bottom: 20px; line-height: 1.6;
}
.ai-lab-content .nlc-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ai-accent); color: #fff; font-size: .9rem;
  font-weight: 700; padding: 14px 28px; border-radius: var(--ai-r-sm);
  text-decoration: none; transition: all .2s;
}
.ai-lab-content .nlc-btn:hover { background: #e02d82; transform: translateY(-2px); }

/* ── Interactive box (section demos) ──────────────── */
.ai-lab-content .interactive-box {
  background: var(--ai-card); border: 1px solid rgba(246,51,146,.12);
  border-radius: var(--ai-r); padding: 20px; margin: 20px 0;
}
.ai-lab-content .interactive-box h4 {
  font-size: .78rem; font-weight: 800; color: var(--ai-accent);
  margin-bottom: 10px; letter-spacing: .02em;
}
.ai-lab-content .interactive-box textarea {
  width: 100%; min-height: 60px; background: var(--ai-bg);
  border: 1px solid var(--ai-border-s); border-radius: var(--ai-r-sm);
  color: var(--ai-text); font-family: var(--ai-font); font-size: .85rem;
  padding: 12px; resize: vertical; outline: none; margin-bottom: 10px;
}
.ai-lab-content .interactive-box textarea:focus { border-color: var(--ai-accent); }
.ai-lab-content .interactive-box .demo-output {
  font-family: var(--ai-mono); font-size: .8rem; color: var(--ai-text2);
  background: var(--ai-bg); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 10px 14px; min-height: 36px;
}
.ai-lab-content .interactive-box .demo-actions {
  display: flex; gap: 8px; margin-top: 10px;
}
.ai-lab-content .interactive-box .demo-actions button {
  font-size: .7rem; font-weight: 700; padding: 6px 14px; border-radius: 6px;
  border: 1px solid var(--ai-border-s); background: #fff; color: var(--ai-text2);
  cursor: pointer; transition: all .15s;
}
.ai-lab-content .interactive-box .demo-actions button:hover {
  background: rgba(246,51,146,.06); color: var(--ai-accent);
  border-color: rgba(246,51,146,.2);
}
.ai-lab-content .comparison-table-wrap {
  overflow-x: auto; margin: 16px 0;
}
.ai-lab-content .comparison-table {
  width: 100%; border-collapse: collapse; font-size: .78rem;
}
.ai-lab-content .comparison-table th,
.ai-lab-content .comparison-table td {
  text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--ai-border);
}
.ai-lab-content .comparison-table th {
  font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ai-text3);
}
.ai-lab-content .comparison-table td { color: var(--ai-text); }
.ai-lab-content .comparison-table .tc-good { color: #22c55e; font-weight: 700; }
.ai-lab-content .comparison-table .tc-mid { color: #f59e0b; font-weight: 600; }

.ai-lab-content .lab-highlight i { color: var(--ai-accent) !important; }

/* ── Interactive Box Results ──────────────────────── */
.ai-lab-content .ibr-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ai-accent); margin-bottom: 8px;
}
.ai-lab-content .ibr-stats {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-family: var(--ai-mono); font-size: .72rem; color: var(--ai-text3);
  margin-bottom: 8px;
}
.ai-lab-content .ibr-stat span { color: var(--ai-accent); font-weight: 700; }

/* ── Stemming Steps Animation ─────────────────────── */
.ai-lab-content .stem-steps {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0;
}
.ai-lab-content .ss-step {
  background: var(--ai-card); border: 2px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 10px 16px;
  font-size: .76rem; font-weight: 600; color: var(--ai-text3);
  transition: all .25s; cursor: pointer; text-align: center; min-width: 80px;
}
.ai-lab-content .ss-step.active {
  border-color: var(--ai-accent); color: var(--ai-accent);
  background: rgba(246,51,146,.06); transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(246,51,146,.08);
}
.ai-lab-content .ss-step.result {
  border-color: #22c55e; color: #22c55e;
  background: rgba(34,197,94,.06);
}
.ai-lab-content .ss-step.result::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-right: 6px; }

/* ── Example Block + Tokens ───────────────────────── */
.ai-lab-content .example-block {
  background: var(--ai-bg); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 14px 16px; margin: 12px 0;
}
.ai-lab-content .ex-label {
  font-family: var(--ai-mono); font-size: .72rem; color: var(--ai-text2);
  margin-bottom: 10px; display: block;
}
.ai-lab-content .ex-tokens {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.ai-lab-content .ex-token {
  font-family: var(--ai-mono); font-size: .68rem; padding: 4px 10px;
  border-radius: 5px; font-weight: 600;
}
.ai-lab-content .ex-token.tok-word {
  background: rgba(246,51,146,.06); border: 1px solid rgba(246,51,146,.14); color: var(--ai-text);
}
.ai-lab-content .ex-token.tok-punct {
  background: rgba(255,255,255,.03); border: 1px solid var(--ai-border); color: var(--ai-text3);
}
.ai-lab-content .ex-token.tok-special {
  background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.2); color: #a855f7;
}
.ai-lab-content .ex-token.tok-suffix {
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.2); color: #f59e0b;
}
.ai-lab-content .ex-token.tok-prefix {
  background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.2); color: #22c55e;
}

/* ── Edge Cases ──────────────────────────────────── */
.ai-lab-content .edge-cases {
  display: grid; gap: 10px; margin: 16px 0;
}
.ai-lab-content .ec-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--ai-card);
  border: 1px solid var(--ai-border); border-radius: var(--ai-r-sm);
}
.ai-lab-content .ec-original {
  font-family: var(--ai-mono); font-size: .82rem; color: var(--ai-text);
  min-width: 120px;
}
.ai-lab-content .ec-arrow {
  color: var(--ai-text3); font-size: .8rem; flex-shrink: 0;
}
.ai-lab-content .ec-result {
  font-family: var(--ai-mono); font-size: .82rem; font-weight: 700; flex: 1;
}
.ai-lab-content .ec-result.ok {
  color: #22c55e;
}
.ai-lab-content .ec-result.ok::before { content: "\f00c  "; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.ai-lab-content .ec-result.wrong {
  color: #ef4444;
}
.ai-lab-content .ec-result.wrong::before { content: "\f00d  "; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.ai-lab-content .ec-note {
  font-size: .7rem; color: var(--ai-text3); font-style: italic;
}

/* ── Code Block ─────────────────────────────────── */
.ai-lab-content .code-block {
  background: var(--ai-bg); border: 1px solid var(--ai-border-s);
  border-radius: var(--ai-r); padding: 18px 20px; margin: 16px 0;
  overflow-x: auto;
}
.ai-lab-content .code-block pre { margin: 0; }
.ai-lab-content .code-block code {
  font-family: var(--ai-mono); font-size: .74rem; color: var(--ai-text2);
  line-height: 1.8; white-space: pre-wrap;
}

/* ── Info Box ────────────────────────────────────── */
.ai-lab-content .info-box {
  background: rgba(246,51,146,.04); border: 1px solid rgba(246,51,146,.14);
  border-radius: var(--ai-r-sm); padding: 16px 18px; margin: 16px 0;
  font-size: .84rem; color: var(--ai-text2); line-height: 1.7;
}
.ai-lab-content .info-box strong { color: var(--ai-accent); }

/* ── Property Cards ──────────────────────────────── */
.ai-lab-content .three-props {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0;
}
.ai-lab-content .prop-card {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r); padding: 18px;
}
.ai-lab-content .prop-num {
  font-family: var(--ai-mono); font-size: .64rem; font-weight: 800;
  color: var(--ai-accent); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 8px;
}
.ai-lab-content .prop-title {
  font-size: .9rem; font-weight: 700; color: var(--ai-text); margin-bottom: 6px;
}
.ai-lab-content .prop-desc {
  font-size: .76rem; color: var(--ai-text2); line-height: 1.6; margin-bottom: 10px;
}
.ai-lab-content .prop-note {
  font-size: .68rem; color: var(--ai-accent); font-weight: 600;
  font-family: var(--ai-mono);
}

/* ── Pros / Cons ─────────────────────────────────── */
.ai-lab-content .sc-pros-cons {
  display: flex; gap: 16px; margin-top: 10px;
}
.ai-lab-content .sc-pros, .ai-lab-content .sc-cons {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 4px;
  font-size: .7rem; color: var(--ai-text2);
}
.ai-lab-content .sc-pros li::before { content: "\f00c  "; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #22c55e; }
.ai-lab-content .sc-cons li::before { content: "\f00d  "; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #ef4444; }

/* ── Stem Token Display ───────────────────────────── */
.ai-lab-content .stem-token {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 4px 8px; border-radius: 6px; margin: 2px;
  background: var(--ai-card); border: 1px solid var(--ai-border);
}
.ai-lab-content .stem-original {
  font-family: var(--ai-mono); font-size: .68rem; color: var(--ai-text);
}
.ai-lab-content .stem-stemmed {
  font-family: var(--ai-mono); font-size: .7rem; font-weight: 700;
}
.ai-lab-content .stem-stemmed.changed { color: var(--ai-accent); }
.ai-lab-content .stem-stemmed.same { color: var(--ai-text3); }
.ai-lab-content .stem-arrow-sm {
  font-size: .6rem; color: var(--ai-text3);
}

/* ── Norm Diff ───────────────────────────────────── */
.ai-lab-content .nd-item {
  display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-family: var(--ai-mono); font-size: .72rem;
}
.ai-lab-content .nd-from {
  color: #ef4444; background: rgba(239,68,68,.06);
  padding: 2px 8px; border-radius: 4px;
}
.ai-lab-content .nd-to {
  color: #22c55e; background: rgba(34,197,94,.06);
  padding: 2px 8px; border-radius: 4px;
}

/* ── Stopword Highlight ──────────────────────────── */
.ai-lab-content .sw-highlight {
  background: rgba(239,68,68,.12) !important;
  border: 1px solid rgba(239,68,68,.25) !important;
  color: #ef4444 !important; cursor: pointer; padding: 2px 6px;
  border-radius: 4px; text-decoration: line-through;
}

/* ── Stem Batch Output ───────────────────────────── */
#stemBatchOutput {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;
}

@media (max-width: 768px) {
  .ai-lab-content .three-props { grid-template-columns: 1fr; }
  .ai-lab-content .stem-steps { flex-direction: column; }
  .ai-lab-content .pos-tag-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* ── POS Tag Grid ─────────────────────────────────── */
.ai-lab-content .pos-tag-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0;
}
.ai-lab-content .ptg-item {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 12px 14px;
  cursor: pointer; transition: all .18s;
}
.ai-lab-content .ptg-item:hover {
  border-color: var(--ai-accent); transform: translateY(-2px);
}
.ai-lab-content .ptg-name {
  font-size: .8rem; font-weight: 700; color: var(--ai-text); margin: 6px 0 2px;
}
.ai-lab-content .ptg-ex {
  font-size: .68rem; color: var(--ai-text3); font-family: var(--ai-mono);
}

.ai-lab-content .pos-badge {
  display: inline-block; font-family: var(--ai-mono); font-size: .58rem;
  font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 4px;
  color: #fff;
}
.ai-lab-content .pos-badge.noun   { background: #22c55e; }
.ai-lab-content .pos-badge.verb   { background: #ef4444; }
.ai-lab-content .pos-badge.adj    { background: #f59e0b; }
.ai-lab-content .pos-badge.adv    { background: #a855f7; }
.ai-lab-content .pos-badge.pron   { background: #3b82f6; }
.ai-lab-content .pos-badge.propn  { background: #14b8a6; }
.ai-lab-content .pos-badge.det    { background: #6366f1; }
.ai-lab-content .pos-badge.adp    { background: #f63392; }
.ai-lab-content .pos-badge.conj   { background: #8b5cf6; }
.ai-lab-content .pos-badge.num    { background: #06b6d4; }
.ai-lab-content .pos-badge.punct  { background: #6b7280; }
.ai-lab-content .pos-badge.aux    { background: #fb923c; }
.ai-lab-content .pos-badge.ner-per   { background: #3b82f6; }
.ai-lab-content .pos-badge.ner-org   { background: #22c55e; }
.ai-lab-content .pos-badge.ner-loc   { background: #f59e0b; }
.ai-lab-content .pos-badge.ner-date  { background: #a855f7; }
.ai-lab-content .pos-badge.ner-misc  { background: #6b7280; }
.ai-lab-content .pos-badge.ner-o     { background: var(--ai-text3); }

/* ── Ambiguity Demo ───────────────────────────────── */
.ai-lab-content .ambig-demo {
  display: flex; flex-direction: column; gap: 16px; margin: 12px 0;
}
.ai-lab-content .ad-sentence {
  background: var(--ai-bg); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 14px 16px;
}
.ai-lab-content .ad-label {
  font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ai-text3); margin-bottom: 8px;
}
.ai-lab-content .ad-tokens {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px;
}
.ai-lab-content .ad-token {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 4px; font-family: var(--ai-mono); font-size: .78rem; color: var(--ai-text);
}
.ai-lab-content .ad-token .pos-badge { font-size: .56rem; }
.ai-lab-content .ad-note {
  font-size: .7rem; color: var(--ai-text3); font-style: italic;
}

/* ── Viterbi Grid ─────────────────────────────────── */
.ai-lab-content .viterbi-grid {
  overflow-x: auto; margin: 16px 0;
}
.ai-lab-content .viterbi-table {
  border-collapse: collapse; font-family: var(--ai-mono); font-size: .7rem; width: 100%;
}
.ai-lab-content .viterbi-table th,
.ai-lab-content .viterbi-table td {
  padding: 8px 12px; border: 1px solid var(--ai-border); text-align: center;
}
.ai-lab-content .viterbi-table th {
  background: var(--ai-bg2); font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ai-text3);
}
.ai-lab-content .viterbi-table td { color: var(--ai-text2); }
.ai-lab-content .viterbi-table .vt-highlight {
  background: rgba(246,51,146,.08); color: var(--ai-accent); font-weight: 700;
}

/* ── POS Demo / Lab ───────────────────────────────── */
.ai-lab-content .pos-demo {
  background: var(--ai-card); border: 1px solid rgba(246,51,146,.14);
  border-radius: var(--ai-r); padding: 24px; margin: 20px 0;
}
.ai-lab-content .pos-demo h4 {
  font-size: 1rem; font-weight: 700; color: var(--ai-text); margin-bottom: 12px;
}
.ai-lab-content .pos-demo-input {
  width: 100%; min-height: 50px; background: var(--ai-bg);
  border: 1px solid var(--ai-border-s); border-radius: var(--ai-r-sm);
  color: var(--ai-text); font-family: var(--ai-font); font-size: .85rem;
  padding: 12px 14px; resize: vertical; outline: none; margin-bottom: 10px;
}
.ai-lab-content .pos-demo-input:focus { border-color: var(--ai-accent); }
.ai-lab-content .pos-demo-output {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0;
}
.ai-lab-content .pos-demo-token {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 8px 12px; background: var(--ai-card);
  border: 1px solid var(--ai-border); border-radius: 8px;
  font-family: var(--ai-mono); font-size: .8rem; color: var(--ai-text);
}
.ai-lab-content .pos-demo-actions {
  display: flex; gap: 8px; margin-top: 10px;
}

/* ── NER Result ───────────────────────────────────── */
.ai-lab-content .ner-result {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0;
}
.ai-lab-content .ner-token {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px; padding: 6px 10px; border-radius: 6px;
  background: var(--ai-card); border: 1px solid var(--ai-border);
  font-family: var(--ai-mono); font-size: .76rem;
}
.ai-lab-content .ner-tag {
  font-size: .54rem; font-weight: 800; letter-spacing: .06em; padding: 2px 6px;
  border-radius: 3px; color: #fff;
}
.ai-lab-content .ner-tag.B-PER, .ai-lab-content .ner-tag.I-PER { background: #3b82f6; }
.ai-lab-content .ner-tag.B-ORG, .ai-lab-content .ner-tag.I-ORG { background: #22c55e; }
.ai-lab-content .ner-tag.B-LOC, .ai-lab-content .ner-tag.I-LOC { background: #f59e0b; }
.ai-lab-content .ner-tag.B-DATE, .ai-lab-content .ner-tag.I-DATE { background: #a855f7; }
.ai-lab-content .ner-tag.B-MISC, .ai-lab-content .ner-tag.I-MISC { background: #6b7280; }

/* ── Quiz Section ─────────────────────────────────── */
.ai-lab-content .quiz-section {
  background: var(--ai-card); border: 1px solid rgba(246,51,146,.14);
  border-radius: var(--ai-r); padding: 24px; margin: 20px 0;
}
.ai-lab-content .quiz-section h4 {
  font-size: 1rem; font-weight: 700; color: var(--ai-accent); margin-bottom: 8px;
}
.ai-lab-content .quiz-question {
  margin-bottom: 16px; padding-bottom: 16px;
  border-bottom: 1px solid var(--ai-border);
}
.ai-lab-content .quiz-question h5 {
  font-size: .88rem; font-weight: 700; color: var(--ai-text); margin-bottom: 8px;
}
.ai-lab-content .quiz-option {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 8px; cursor: pointer; transition: all .15s;
  font-size: .82rem; color: var(--ai-text2);
}
.ai-lab-content .quiz-option:hover { background: rgba(246,51,146,.04); }
.ai-lab-content .quiz-option.correct {
  background: rgba(34,197,94,.08); color: #22c55e; font-weight: 700;
}
.ai-lab-content .quiz-option.wrong {
  background: rgba(239,68,68,.06); color: #ef4444;
}
.ai-lab-content .quiz-option input[type="radio"] { accent-color: var(--ai-accent); }
.ai-lab-content .quiz-result {
  margin-top: 16px; padding: 14px; border-radius: var(--ai-r-sm);
  background: rgba(34,197,94,.06); border: 1px solid rgba(34,197,94,.2);
  font-size: .88rem; font-weight: 700; color: #22c55e; text-align: center;
}

/* ── BoW Vector Demo ─────────────────────────────── */
.ai-lab-content .bow-vector-demo {
  display: flex; flex-direction: column; gap: 16px; margin: 20px 0;
}
.ai-lab-content .bvd-doc {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 16px;
}
.ai-lab-content .bvd-doc-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.ai-lab-content .bvd-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.ai-lab-content .bvd-label {
  font-size: .76rem; font-weight: 700; color: var(--ai-text);
}
.ai-lab-content .bvd-sentence {
  font-size: .82rem; color: var(--ai-text2); margin-bottom: 10px;
}
.ai-lab-content .bvd-sentence strong { color: var(--ai-accent); }
.ai-lab-content .bvd-vector {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.ai-lab-content .bvd-cell {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px; border-radius: 6px; border: 1px solid transparent;
  background: rgba(255,255,255,.02); min-width: 44px;
}
.ai-lab-content .bvd-cell.active {
  background: rgba(246,51,146,.06); border-color: rgba(246,51,146,.2);
}
.ai-lab-content .bvd-word {
  font-family: var(--ai-mono); font-size: .62rem; color: var(--ai-text3);
}
.ai-lab-content .bvd-count {
  font-family: var(--ai-mono); font-size: .78rem; font-weight: 700;
}

/* ── Sparse Visual ───────────────────────────────── */
.ai-lab-content .sparse-visual-wrap {
  margin: 16px 0; padding: 16px;
  background: var(--ai-bg); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); overflow-x: auto;
}
.ai-lab-content .sparse-visual-wrap h4 {
  font-size: .72rem; color: var(--ai-text3); margin-bottom: 10px;
}

/* ── Cosine Lab ───────────────────────────────────── */
.ai-lab-content .cosine-lab {
  background: var(--ai-card); border: 1px solid rgba(246,51,146,.14);
  border-radius: var(--ai-r); padding: 24px; margin: 20px 0;
}
.ai-lab-content .cosine-lab h4 {
  font-size: 1rem; font-weight: 700; color: var(--ai-text); margin-bottom: 12px;
}
.ai-lab-content .cl-inputs {
  display: grid; gap: 10px; margin-bottom: 14px;
}
.ai-lab-content .cl-doc-input {
  width: 100%; min-height: 40px; background: var(--ai-bg);
  border: 1px solid var(--ai-border-s); border-radius: var(--ai-r-sm);
  color: var(--ai-text); font-family: var(--ai-font); font-size: .8rem;
  padding: 10px 14px; resize: vertical; outline: none;
}
.ai-lab-content .cl-doc-input:focus { border-color: var(--ai-accent); }
.ai-lab-content .cl-sim-matrix {
  display: grid; gap: 6px; margin: 14px 0;
}
.ai-lab-content .cl-sim-row {
  display: flex; align-items: center; gap: 8px;
}
.ai-lab-content .cl-sim-label {
  font-size: .72rem; font-weight: 700; color: var(--ai-text); min-width: 24px;
}
.ai-lab-content .cl-sim-cell {
  flex: 1; text-align: center; padding: 10px 8px; border-radius: 8px;
  font-family: var(--ai-mono); font-size: .78rem; font-weight: 700;
  background: var(--ai-bg); border: 1px solid var(--ai-border); color: var(--ai-text3);
}
.ai-lab-content .cl-sim-cell.diagonal {
  background: rgba(246,51,146,.06); border-color: rgba(246,51,146,.14);
  color: var(--ai-accent);
}
.ai-lab-content .cl-actions {
  display: flex; gap: 8px; margin-top: 10px;
}


/* ── Lesson Hero (overview pages) ───────────────── */
.ai-lab-overview .lesson-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 32px; border: 1px solid var(--fellow-line);
  border-radius: 20px; margin-bottom: 24px;
}
.ai-lab-overview .lesson-hero-copy { flex: 1; min-width: 0; }
.ai-lab-overview .lesson-hero h1 {
  font-size: 2rem; font-weight: 900; color: #171827; margin: 0 0 8px;
  letter-spacing: -.01em; line-height: 1.15;
}
.ai-lab-overview .lesson-hero h1 span { color: #f63392; }
.ai-lab-overview .lesson-hero p {
  font-size: .92rem; color: #6f7282; margin: 0 0 14px; max-width: 520px; line-height: 1.65;
}
.ai-lab-overview .lesson-meta-row {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
}
.ai-lab-overview .lesson-meta-row span,
.ai-lab-overview .lesson-meta-row b {
  font-size: .78rem; color: #8e91a0; font-weight: 600;
  display: flex; align-items: center; gap: 5px;
}
.ai-lab-overview .lesson-meta-row span i,
.ai-lab-overview .lesson-meta-row b i { color: #f63392; font-size: .75rem; }
.ai-lab-overview .lesson-hero img {
  height: 160px; width: auto; object-fit: contain; flex-shrink: 0;
  border-radius: 16px; filter: drop-shadow(0 8px 24px rgba(246,51,146,.12));
}

/* ── Progress bar ────────────────────────────────── */

.ai-overview-progress {
  height: 2px; background: rgba(246,51,146,.06);
}
.ai-overview-progress b {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #f63392, #ff6b9d);
  transition: width .15s ease;
}

/* ── Two-column layout ───────────────────────────── */
.ai-overview-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px; margin-top: 24px; align-items: start;
}
.ai-overview-content {
  min-width: 0; display: grid; gap: 48px;
}

/* ── TOC sidebar ─────────────────────────────────── */
.ai-overview-toc {
  position: sticky; top: 24px;
  background: #fff; border: 1px solid var(--fellow-line);
  border-radius: 16px; padding: 18px;
  box-shadow: 0 4px 16px rgba(246,51,146,.05);
}
.ai-toc-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: #8e91a0; margin-bottom: 12px;
}
.ai-toc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.ai-toc-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  font-size: .78rem; font-weight: 600; color: #6f7282;
  text-decoration: none; transition: all .18s;
}
.ai-toc-link:hover { background: #fff0f7; color: #171827; }
.ai-toc-link.active { background: rgba(246,51,146,.08); color: #f63392; }
.ai-toc-num {
  font-family: 'SF Mono', monospace; font-size: .64rem; font-weight: 700;
  color: #8e91a0; min-width: 18px;
}
.ai-toc-link.active .ai-toc-num { color: #f63392; }

.ai-toc-progress {
  border-top: 1px solid var(--fellow-line); margin-top: 14px; padding-top: 12px;
}
.ai-toc-progress span {
  font-size: .64rem; font-weight: 700; color: #8e91a0;
  text-transform: uppercase; letter-spacing: .06em;
}
.ai-toc-progress span + span {
  float: right; color: #f63392;
}
.ai-toc-progress b {
  display: block; height: 3px; background: rgba(246,51,146,.1);
  border-radius: 2px; margin-top: 6px; overflow: hidden;
}
.ai-toc-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #f63392, #ff6b9d);
  border-radius: 2px; transition: width .3s ease;
}

/* ── CV overview aliases for legacy markup ───────────── */
.ai-lab-overview .module {
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 4px 16px rgba(246,51,146,.04);
}
.ai-lab-overview .module-header {
  display: flex; gap: 18px; align-items: flex-start;
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--fellow-line);
}
.ai-lab-overview .module-num-badge {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(246,51,146,.1); color: var(--mc, #f63392);
  display: flex; align-items: center; justify-content: center;
  font-family: 'SF Mono', monospace; font-size: .88rem; font-weight: 800;
  flex-shrink: 0;
}
.ai-lab-overview .module-tag {
  font-size: .64rem; font-weight: 800;
  color: var(--mc, #f63392); text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 6px; display: block;
}
.ai-lab-overview .module-header h2 {
  font-size: 1.35rem; font-weight: 800; color: #171827; margin: 0 0 6px;
}
.ai-lab-overview .module-header p {
  font-size: .84rem; color: #6f7282; margin: 0; line-height: 1.6;
}
.ai-lab-overview .topic-list { display: grid; gap: 2px; }
.ai-lab-overview .topic-item {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px; padding: 16px 12px; border-radius: 12px;
  transition: background .18s, transform .18s, border-color .18s, box-shadow .18s;
  cursor: pointer; position: relative;
  border: 1px solid transparent;
}
.ai-lab-overview .topic-item::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: .72rem; color: #c4b5ce; opacity: 0;
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  transition: opacity .18s, transform .18s, color .18s;
}
.ai-lab-overview .topic-item:hover::after {
  opacity: 1; transform: translateY(-50%) translateX(3px); color: #f63392;
}
.ai-lab-overview .topic-item:hover {
  background: #fff7fb; padding-left: 14px;
  border-color: rgba(246,51,146,.14);
  box-shadow: 0 4px 16px rgba(246,51,146,.06);
  transform: translateX(4px);
}
.ai-lab-overview .topic-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(246,51,146,.06); display: flex;
  align-items: center; justify-content: center; font-size: 1.2rem;
  color: #f63392;
}
.ai-lab-overview .topic-body h3 { font-size: .95rem; font-weight: 700; margin: 0 0 4px; }
.ai-lab-overview .topic-body h3 a { color: #171827; text-decoration: none; }
.ai-lab-overview .topic-body h3 a:hover { color: #f63392; }
.ai-lab-overview .topic-body p { font-size: .8rem; color: #6f7282; line-height: 1.65; margin: 0 0 8px; }
.ai-lab-overview .topic-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-lab-overview .topic-tags span {
  font-size: .64rem; font-weight: 700; color: #f63392;
  background: rgba(246,51,146,.06); border: 1px solid rgba(246,51,146,.14);
  padding: 3px 10px; border-radius: 99px;
}

/* ── Module sections ──────────────────────────────── */
.ai-module {
  background: #fff; border: 1px solid var(--fellow-line);
  border-radius: 18px; padding: 28px;
  box-shadow: 0 4px 16px rgba(246,51,146,.04);
}
.ai-module-head {
  display: flex; gap: 18px; align-items: flex-start;
  margin-bottom: 24px; padding-bottom: 20px;
  border-bottom: 1px solid var(--fellow-line);
}
.ai-module-num {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(246,51,146,.1); color: #f63392;
  display: flex; align-items: center; justify-content: center;
  font-family: 'SF Mono', monospace; font-size: .88rem; font-weight: 800;
  flex-shrink: 0;
}
.ai-module-tag {
  font-size: .64rem; font-weight: 800;
  color: #f63392; text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 6px; display: block;
}
.ai-module-head h2 { font-size: 1.35rem; font-weight: 800; color: #171827; margin: 0 0 6px; }
.ai-module-head p  { font-size: .84rem; color: #6f7282; margin: 0; line-height: 1.6; }

.ai-topic-list { display: grid; gap: 2px; }
.ai-topic-item {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  gap: 16px; padding: 16px 12px; border-radius: 12px;
  transition: background .18s, transform .18s, border-color .18s, box-shadow .18s;
  cursor: pointer; position: relative;
  border: 1px solid transparent;
}
.ai-topic-item::after {
  content: "\f061";
  font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: .72rem; color: #c4b5ce; opacity: 0;
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  transition: opacity .18s, transform .18s, color .18s;
}
.ai-topic-item:hover::after {
  opacity: 1; transform: translateY(-50%) translateX(3px); color: #f63392;
}
.ai-topic-item:hover {
  background: #fff0f7; padding-left: 14px;
  border-color: var(--fellow-pink, #f63392);
  box-shadow: 0 6px 20px rgba(246,51,146,.18);
  transform: translateX(4px);
}
.ai-topic-icon {
  width: 48px; height: 48px; border-radius: 14px;
  background: rgba(246,51,146,.06); display: flex;
  align-items: center; justify-content: center; font-size: 1.2rem;
  color: #f63392;
}
.ai-topic-body h3 { font-size: .95rem; font-weight: 700; margin: 0 0 4px; }
.ai-topic-body h3 a { color: #171827; text-decoration: none; }
.ai-topic-body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ai-topic-body h3 a:hover { color: #f63392; }
.ai-topic-body p { font-size: .8rem; color: #6f7282; line-height: 1.65; margin: 0 0 8px; }
.ai-topic-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-topic-tags span {
  font-size: .64rem; font-weight: 700; color: #f63392;
  background: rgba(246,51,146,.06); border: 1px solid rgba(246,51,146,.14);
  padding: 3px 10px; border-radius: 99px;
}

.ml-overview .ai-topic-item {
  cursor: default;
}
.ml-overview .ai-topic-item::after {
  display: none;
}
.ml-overview .ai-topic-item.is-linked {
  cursor: pointer;
}
.ml-overview .ai-topic-item.is-linked::after {
  display: block;
}

.ml-lesson-page .lesson-side-card {
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 6px 20px rgba(246,51,146,.05);
}
.ml-lesson-page .lesson-side-card + .lesson-side-card { margin-top: 14px; }
.ml-lesson-page .lesson-side-card > span {
  display: block;
  color: #f63392;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ml-lesson-page .lesson-side-card h3 { margin: 0 0 8px; color: #171827; font-size: 1rem; }
.ml-lesson-page .lesson-side-card p { margin: 0; color: #6f7282; font-size: .8rem; line-height: 1.6; }
.ml-lesson-page .lesson-mini-link {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  color: #171827;
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.ml-lesson-page .lesson-mini-link:hover,
.ml-lesson-page .lesson-mini-link.active {
  background: #fff7fb;
  border-color: rgba(246,51,146,.16);
}
.ml-lesson-page .lesson-mini-link span {
  color: #f63392;
  font-family: 'SF Mono', monospace;
  font-size: .68rem;
  font-weight: 800;
}
.ml-lesson-page .lesson-mini-link strong {
  font-size: .78rem;
  font-weight: 700;
  min-width: 0;
}

.ml-lesson-content .paradigm-compare,
.ml-lesson-content .compare-grid,
.ml-lesson-content .bv-compare,
.ml-lesson-content .capacity-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  margin: 20px 0;
}
.ml-lesson-content .pc-col,
.ml-lesson-content .compare-card,
.ml-lesson-content .bvc-col,
.ml-lesson-content .vci-card,
.ml-lesson-content .motiv-card,
.ml-lesson-content .para-card,
.ml-lesson-content .ut-card,
.ml-lesson-content .wl-item,
.ml-lesson-content .ps-step,
.ml-lesson-content .hspace-card,
.ml-lesson-content .vc-card {
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(246,51,146,.04);
}
.ml-lesson-content .pc-header,
.ml-lesson-content .ccard-title,
.ml-lesson-content .bvc-header,
.ml-lesson-content .motiv-title,
.ml-lesson-content .para-title,
.ml-lesson-content .ut-title,
.ml-lesson-content .vci-title,
.ml-lesson-content .vc-title {
  color: #171827;
  font-weight: 800;
  margin-bottom: 10px;
}
.ml-lesson-content .pc-flow,
.ml-lesson-content .calc-chain,
.ml-lesson-content .step-flow {
  display: grid;
  gap: 10px;
}
.ml-lesson-content .pc-box,
.ml-lesson-content .calc-step,
.ml-lesson-content .flow-step,
.ml-lesson-content .math-line {
  background: #fff7fb;
  border: 1px solid rgba(246,51,146,.12);
  border-radius: 12px;
  padding: 10px 12px;
  color: #171827;
}
.ml-lesson-content .pc-vs,
.ml-lesson-content .compare-vs,
.ml-lesson-content .pc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f63392;
  font-weight: 800;
}
.ml-lesson-content .insight-callout,
.ml-lesson-content .warning-callout,
.ml-lesson-content .key-takeaway {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  background: #fff0f7;
  border: 1px solid rgba(246,51,146,.18);
  border-radius: 14px;
  padding: 16px;
  margin: 18px 0;
}
.ml-lesson-content .ic-icon,
.ml-lesson-content .motiv-icon,
.ml-lesson-content .vci-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(246,51,146,.1);
  color: #f63392;
}
.ml-lesson-content .motivation-grid,
.ml-lesson-content .paradigm-grid,
.ml-lesson-content .usecase-grid,
.ml-lesson-content .vc-grid,
.ml-lesson-content .hspace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.ml-lesson-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  overflow: hidden;
  border-radius: 12px;
}
.ml-lesson-content th,
.ml-lesson-content td {
  border: 1px solid rgba(246,51,146,.14);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.ml-lesson-content th {
  background: #fff0f7;
  color: #171827;
}
.ml-lesson-content code,
.ml-lesson-content pre {
  font-family: 'SF Mono', monospace;
}
.ml-lesson-content pre {
  overflow-x: auto;
  background: #171827;
  color: #fff;
  border-radius: 12px;
  padding: 14px;
}
.ml-lesson-content .lesson-body {
  display: grid;
  gap: 30px;
}
.ml-lesson-content .lesson-sec {
  position: relative;
  scroll-margin-top: 96px;
}
.ml-lesson-content .lesson-sec + .lesson-sec {
  padding-top: 10px;
}
.ml-lesson-content .sec-header {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.ml-lesson-content .sec-num {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(246,51,146,.14), rgba(255,240,247,.92));
  color: #f63392;
  border: 1px solid rgba(246,51,146,.2);
  font-family: 'SF Mono', monospace;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(246,51,146,.08);
}
.ml-lesson-content .sec-title {
  margin: 0;
  color: #171827;
  font-size: clamp(1.28rem, 2vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: 0;
}
.ml-lesson-content .sec-sub {
  margin: 6px 0 0;
  color: #6f7282;
  line-height: 1.55;
  font-size: .9rem;
}
.ml-lesson-content .prose {
  color: #3a3d4f;
  font-size: .94rem;
  line-height: 1.78;
  background: linear-gradient(180deg, #fff, #fffafd);
  border: 1px solid rgba(246,51,146,.1);
  border-radius: 14px;
  padding: 16px 18px;
}
.ml-lesson-content .prose strong {
  color: #171827;
  font-weight: 800;
}
.ml-lesson-content .worked-box,
.ml-lesson-content .def-box,
.ml-lesson-content .shatter-count-table,
.ml-lesson-content .next-lesson-cta {
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(246,51,146,.32), rgba(244,143,188,.08)) border-box;
  border: 1px solid transparent;
  border-radius: 18px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 14px 34px rgba(246,51,146,.08);
}
.ml-lesson-content .wb-badge,
.ml-lesson-content .def-label,
.ml-lesson-content .nlc-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #f63392;
  background: rgba(246,51,146,.08);
  border: 1px solid rgba(246,51,146,.16);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ml-lesson-content .wb-title,
.ml-lesson-content .sct-title,
.ml-lesson-content .nlc-title {
  margin: 12px 0 14px;
  color: #171827;
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.25;
}
.ml-lesson-content .def-body,
.ml-lesson-content .def-note,
.ml-lesson-content .nlc-desc,
.ml-lesson-content .motiv-desc,
.ml-lesson-content .para-desc,
.ml-lesson-content .ut-desc,
.ml-lesson-content .wl-desc,
.ml-lesson-content .rlc-def,
.ml-lesson-content .vci-copy,
.ml-lesson-content .vc-desc {
  color: #6f7282;
  font-size: .84rem;
  line-height: 1.66;
}
.ml-lesson-content .def-formula,
.ml-lesson-content .formula-box,
.ml-lesson-content .math-display {
  margin: 14px 0;
  background: #171827;
  color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  overflow-x: auto;
  font-family: 'SF Mono', monospace;
  font-size: .82rem;
  line-height: 1.65;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.ml-lesson-content .math-term,
.ml-lesson-content .math-result,
.ml-lesson-content .math-op,
.ml-lesson-content .cs-label,
.ml-lesson-content .pce-label,
.ml-lesson-content .ps-label {
  font-weight: 800;
}
.ml-lesson-content .blue,
.ml-lesson-content .green,
.ml-lesson-content .purple,
.ml-lesson-content .red,
.ml-lesson-content .orange {
  color: #f63392;
}
.ml-lesson-content [style*="background:#"],
.ml-lesson-content [style*="background: #"] {
  background: #f63392 !important;
}
.ml-lesson-content .three-paradigms,
.ml-lesson-content .unsup-tasks,
.ml-lesson-content .when-grid,
.ml-lesson-content .rl-concepts,
.ml-lesson-content .bv-matrix,
.ml-lesson-content .error-decomp-grid,
.ml-lesson-content .regularization-grid,
.ml-lesson-content .capacity-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.ml-lesson-content .three-paradigms {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ml-lesson-content .para-card,
.ml-lesson-content .ut-card,
.ml-lesson-content .when-col,
.ml-lesson-content .rlc-row,
.ml-lesson-content .bvc-col,
.ml-lesson-content .vci-card,
.ml-lesson-content .vc-card,
.ml-lesson-content .hspace-card,
.ml-lesson-content .motiv-card,
.ml-lesson-content .wl-item {
  position: relative;
  overflow: hidden;
}
.ml-lesson-content .para-card::before,
.ml-lesson-content .ut-card::before,
.ml-lesson-content .motiv-card::before,
.ml-lesson-content .wl-item::before,
.ml-lesson-content .vci-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #f63392, rgba(246,51,146,.16));
}
.ml-lesson-content .para-num,
.ml-lesson-content .arch-year,
.ml-lesson-content .sct-val.highlight {
  color: #f63392;
  font-family: 'SF Mono', monospace;
  font-weight: 900;
}
.ml-lesson-content .para-icon,
.ml-lesson-content .ut-icon,
.ml-lesson-content .wl-icon,
.ml-lesson-content .rll-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(246,51,146,.1);
  color: #f63392;
  margin-bottom: 10px;
}
.ml-lesson-content .para-icon:empty::before,
.ml-lesson-content .ut-icon:empty::before,
.ml-lesson-content .wl-icon:empty::before,
.ml-lesson-content .rll-icon:empty::before,
.ml-lesson-content .ic-icon:empty::before,
.ml-lesson-content .motiv-icon:empty::before {
  content: "\f0eb";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.ml-lesson-content .para-tagline,
.ml-lesson-content .ps-val,
.ml-lesson-content .pe-label-ex,
.ml-lesson-content .uta,
.ml-lesson-content .ccard-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(246,51,146,.07);
  color: #f63392;
  border: 1px solid rgba(246,51,146,.14);
  font-size: .68rem;
  font-weight: 800;
}
.ml-lesson-content .para-examples,
.ml-lesson-content .ut-algos,
.ml-lesson-content .when-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.ml-lesson-content .pe-row,
.ml-lesson-content .rlc-row,
.ml-lesson-content .sct-grid > div {
  background: #fff7fb;
  border: 1px solid rgba(246,51,146,.1);
  border-radius: 10px;
  padding: 9px 11px;
}
.ml-lesson-content .pe-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.ml-lesson-content .rl-loop {
  position: relative;
  display: grid;
  gap: 14px;
  place-items: center;
  padding: 24px;
  margin: 18px 0;
  background: #fff7fb;
  border: 1px solid rgba(246,51,146,.12);
  border-radius: 18px;
}
.ml-lesson-content .rll-center {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.ml-lesson-content .rll-agent,
.ml-lesson-content .rll-env {
  min-width: 150px;
  background: #fff;
  border: 1px solid rgba(246,51,146,.16);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.ml-lesson-content .rll-label {
  color: #171827;
  font-weight: 900;
}
.ml-lesson-content .rll-arrows {
  display: grid;
  gap: 8px;
  color: #6f7282;
  font-size: .78rem;
}
.ml-lesson-content .capacity-spectrum {
  background: #fff;
  border: 1px solid rgba(246,51,146,.14);
  border-radius: 18px;
  padding: 24px 18px 18px;
  margin: 18px 0;
}
.ml-lesson-content .cs-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: #fff0f7;
}
.ml-lesson-content .cs-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #f48fbc, #f63392, #8e91a0);
}
.ml-lesson-content .cs-marker {
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  text-align: center;
  min-width: 110px;
}
.ml-lesson-content .csm-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 0 auto 8px;
  background: #fff;
  border: 6px solid #f63392;
  box-shadow: 0 6px 16px rgba(246,51,146,.16);
}
.ml-lesson-content .csm-label {
  color: #171827;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.3;
}
.ml-lesson-content .csm-label span,
.ml-lesson-content .cs-axis {
  color: #8e91a0;
  font-weight: 700;
}
.ml-lesson-content .cs-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 44px;
  font-size: .7rem;
}
.ml-lesson-content .sd-controls,
.ml-lesson-content .sd-canvas-wrap,
.ml-lesson-content .shatter-summary {
  background: #fff7fb;
  border: 1px solid rgba(246,51,146,.12);
  border-radius: 14px;
  padding: 14px;
}
.ml-lesson-content .shatter-demo {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
}
.ml-lesson-content button,
.ml-lesson-content .sd-btn,
.ml-lesson-content .nlc-btn {
  border: 1px solid rgba(246,51,146,.18);
  background: #fff;
  color: #171827;
  border-radius: 10px;
  padding: 9px 12px;
  font-weight: 800;
  cursor: pointer;
}
.ml-lesson-content button:hover,
.ml-lesson-content .sd-btn.active,
.ml-lesson-content .nlc-btn {
  background: #f63392;
  color: #fff;
}
.ml-lesson-content canvas {
  max-width: 100%;
  background: #fff;
  border: 1px solid rgba(246,51,146,.12);
  border-radius: 12px;
}
.ml-lesson-content .ss-row,
.ml-lesson-content .sct-grid {
  display: grid;
  gap: 8px;
}
.ml-lesson-content .sct-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ml-lesson-content .sct-header {
  background: #f63392 !important;
  color: #fff !important;
  font-weight: 900;
}
.ml-lesson-content .ok,
.ml-lesson-content .ssr-result.ok {
  color: #f63392;
  font-weight: 800;
}
.ml-lesson-content .fail,
.ml-lesson-content .ssr-result.fail {
  color: #8e91a0;
  font-weight: 800;
}
.ml-lesson-content .next-lesson-cta {
  text-align: center;
  background:
    radial-gradient(circle at top left, rgba(246,51,146,.11), transparent 34%),
    #fff;
}
.ml-lesson-content .nlc-btn {
  display: inline-flex;
  text-decoration: none;
  margin-top: 12px;
}
.ml-lesson-content .sec-nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}
.ml-lesson-content .sec-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  text-decoration: none;
  color: #171827;
  background: #fff;
  border: 1px solid rgba(246,51,146,.16);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: .78rem;
  font-weight: 800;
}
.ml-lesson-content .sec-nav-btn:hover {
  color: #f63392;
  background: #fff7fb;
}

@media (max-width: 1024px) {
  .ai-overview-layout { grid-template-columns: 1fr; }
  .ai-overview-toc { display: none; }
  .ai-lab-overview .fellow-main { padding: 20px 18px; }
  .ml-lesson-content .paradigm-compare,
  .ml-lesson-content .compare-grid,
  .ml-lesson-content .bv-compare,
  .ml-lesson-content .capacity-compare,
  .ml-lesson-content .motivation-grid,
  .ml-lesson-content .paradigm-grid,
  .ml-lesson-content .usecase-grid,
  .ml-lesson-content .vc-grid,
  .ml-lesson-content .hspace-grid {
    grid-template-columns: 1fr;
  }
  .ml-lesson-content .three-paradigms,
  .ml-lesson-content .unsup-tasks,
  .ml-lesson-content .when-grid,
  .ml-lesson-content .rl-concepts,
  .ml-lesson-content .bv-matrix,
  .ml-lesson-content .error-decomp-grid,
  .ml-lesson-content .regularization-grid,
  .ml-lesson-content .capacity-grid,
  .ml-lesson-content .shatter-demo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ml-lesson-content .sec-header,
  .ml-lesson-content .insight-callout,
  .ml-lesson-content .warning-callout,
  .ml-lesson-content .key-takeaway {
    grid-template-columns: 1fr;
  }
  .ml-lesson-content .sct-grid {
    grid-template-columns: 1fr;
  }
  .ml-lesson-content .sec-nav-buttons,
  .ml-lesson-content .pe-row {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 768px) {
  .ai-overview-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 0 18px;
  }
  .ai-hero-copy h1 {
    font-size: clamp(2.2rem, 11vw, 3.3rem);
    line-height: 1;
  }
  .ai-hero-copy p {
    max-width: 100%;
    font-size: .95rem;
  }
  .ai-hero-visual {
    width: 100%;
    margin-right: 0;
    justify-content: flex-start;
  }
  .ai-hero-visual img {
    max-width: 320px;
  }
  .ai-overview-stats { gap: 20px; }
  .ai-overview-stats strong { font-size: 1.6rem; }
  .ai-module { padding: 18px; }
  .ai-module-head { flex-direction: column; gap: 10px; }
  .ai-module-num { width: 36px; height: 36px; font-size: .72rem; }
  .ai-topic-item { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .ai-topic-icon { width: 36px; height: 36px; font-size: 1.1rem; }
  .ai-lab-overview .module { padding: 18px; }
  .ai-lab-overview .module-header { flex-direction: column; gap: 10px; }
  .ai-lab-overview .module-num-badge { width: 36px; height: 36px; font-size: .72rem; }
  .ai-lab-overview .topic-item { grid-template-columns: 1fr; gap: 8px; padding: 12px; }
  .ai-lab-overview .topic-icon { width: 36px; height: 36px; font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════
   ML Overview — reuses .module + .topic-item classes
   with code syntax highlighting + timeline extras
   ═══════════════════════════════════════════════════════ */

/* Code syntax highlighting (port from AI Lab) */
.ai-lab-overview .c-kw { color: #d61e7f; font-weight: 800; }
.ai-lab-overview .c-str { color: #15803d; }
.ai-lab-overview .c-op  { color: #5b6170; }
.ai-lab-overview .c-fn  { color: #6d28d9; }
.ai-lab-overview .c-num { color: #b45309; }
.ai-lab-overview .c-cmt { color: #6b7280; font-style: italic; }
/* ── Topic code block ──────────────────────────── */
.ai-lab-overview .topic-code {
  grid-column: 1 / -1;
  background: #fff;
  border: 1.5px solid rgba(214,30,127,.18);
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 12px;
  overflow-x: auto;
  font-family: 'SF Mono', 'Space Mono', monospace;
  font-size: .72rem;
  line-height: 1.8;
  color: #1f2430;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.ai-lab-overview .topic-code pre { margin: 0; color: inherit; }
.ai-lab-overview .topic-code code {
  display: block;
  color: inherit;
  font-weight: 600;
}

/* ── Architecture timeline ─────────────────────── */
.ai-lab-overview .arch-timeline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin: 24px 0 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #fff7fb 0%, #fff0f6 100%);
  border: 1.5px solid rgba(246,51,146,.18);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(246,51,146,.06);
}
.ai-lab-overview .arch-node {
  text-align: center;
  padding: 14px 16px;
  min-width: 90px;
  background: #ffffff;
  border: 1.5px solid rgba(246,51,146,.22);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(246,51,146,.08);
  transition: transform .15s, box-shadow .15s;
}
.ai-lab-overview .arch-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(246,51,146,.14);
}
.ai-lab-overview .arch-year {
  font-family: 'SF Mono', 'Space Mono', monospace;
  font-size: .65rem;
  font-weight: 800;
  color: var(--ai-accent);
  margin-bottom: 5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ai-lab-overview .arch-name {
  font-size: .74rem;
  font-weight: 700;
  color: #171827;
  line-height: 1.3;
}
.ai-lab-overview .arch-note {
  font-size: .60rem;
  color: var(--ai-text3);
  margin-top: 3px;
  line-height: 1.4;
}
.ai-lab-overview .arch-arrow {
  font-size: 1rem;
  color: rgba(246,51,146,.5);
  padding: 0 6px;
  align-self: center;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Comparison grid ──────────────────────────── */
.ai-lab-overview .compare-grid {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  align-items: stretch;
  margin: 20px 0;
  background: linear-gradient(135deg, #fff7fb 0%, #fff0f6 100%);
  border: 1.5px solid rgba(246,51,146,.18);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(246,51,146,.06);
}
.ai-lab-overview .compare-card,
.ai-lab-overview .deploy-pipeline,
.ai-lab-overview .arch-timeline {
  min-width: 0;
}
.ai-lab-overview .compare-card {
  background: transparent;
  padding: 20px;
}
.ai-lab-overview .compare-card:first-child {
  border-right: 1.5px solid rgba(246,51,146,.14);
}
.ai-lab-overview .compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'SF Mono', 'Space Mono', monospace;
  font-size: .7rem;
  font-weight: 800;
  color: var(--ai-accent);
  background: rgba(246,51,146,.05);
  letter-spacing: .06em;
}

/* ── CCard elements ────────────────────────────── */
.ai-lab-overview .ccard-badge {
  display: inline-block;
  font-family: 'SF Mono', 'Space Mono', monospace;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .06em;
  padding: 3px 10px;
  border-radius: 6px;
  color: #fff;
  margin-bottom: 8px;
}
.ai-lab-overview .ccard-badge.real { background: #22c55e; }
.ai-lab-overview .ccard-badge:not(.real) { background: var(--ai-accent); }
.ai-lab-overview .ccard-title {
  font-size: .85rem;
  font-weight: 700;
  color: #171827;
  margin-bottom: 6px;
}
.ai-lab-overview .ccard-desc {
  font-size: .73rem;
  color: var(--ai-text2);
  line-height: 1.6;
  margin-bottom: 10px;
}
.ai-lab-overview .ccard-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: grid;
  gap: 5px;
}
.ai-lab-overview .ccard-list li {
  font-size: .71rem;
  color: var(--ai-text2);
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.ai-lab-overview .ccard-list li::before {
  content: "▸";
  color: var(--ai-accent);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Deploy pipeline (RAG / M6) ─────────────────── */
.ai-lab-overview .deploy-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 24px 0 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #fff7fb 0%, #fff0f6 100%);
  border: 1.5px solid rgba(246,51,146,.18);
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(246,51,146,.06);
  flex-wrap: wrap;
}
.ai-lab-overview .dp-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1.5px solid rgba(246,51,146,.22);
  padding: 14px 18px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(246,51,146,.08);
  min-width: 80px;
  transition: transform .15s, box-shadow .15s;
}
.ai-lab-overview .dp-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(246,51,146,.14);
}
.ai-lab-overview .dp-icon {
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(246,51,146,.08);
  border-radius: 8px;
  color: var(--ai-accent);
}
.ai-lab-overview .dp-icon i {
  font-size: 17px;
  color: var(--ai-accent);
}
.ai-lab-overview .dp-label {
  font-family: 'SF Mono', 'Space Mono', monospace;
  font-size: .60rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ai-accent);
}
.ai-lab-overview .dp-arrow {
  color: rgba(246,51,146,.5);
  font-size: 1rem;
  font-weight: 700;
  padding: 0 8px;
  flex-shrink: 0;
}



/* Next module CTA */
.ai-lab-overview .next-module-cta {
  margin-top: 32px; text-align: center;
}
.ai-lab-overview .nmc-inner {
  background: var(--ai-bg2); border: 1px solid rgba(246,51,146,.14);
  border-radius: var(--ai-r); padding: 32px;
}
.ai-lab-overview .nmc-label {
  font-family: 'SF Mono', monospace; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ai-accent);
  margin-bottom: 6px; display: block;
}
.ai-lab-overview .nmc-title {
  font-size: 1.3rem; font-weight: 800; color: var(--ai-text); margin-bottom: 8px;
}
.ai-lab-overview .nmc-desc {
  font-size: .84rem; color: var(--ai-text2); margin-bottom: 16px;
}
.ai-lab-overview .nmc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ai-accent); color: #fff; font-size: .85rem;
  font-weight: 700; padding: 12px 24px; border-radius: var(--ai-r-sm);
  text-decoration: none; transition: all .2s;
}
.ai-lab-overview .nmc-btn:hover { background: #e02d82; transform: translateY(-2px); }

/* ML-specific module tag colors */
.ai-lab-overview .module-tag.hot {
  background: rgba(239,68,68,.08); color: #ef4444;
}

/* Scroll reveal (ML uses .ml-reveal) */
.ai-lab-overview .ml-reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.ai-lab-overview .ml-reveal.in {
  opacity: 1; transform: translateY(0);
}
.ai-lab-overview .ml-reveal.delay-1 { transition-delay: .1s; }
.ai-lab-overview .ml-reveal.delay-2 { transition-delay: .2s; }
.ai-lab-overview .ml-reveal.delay-3 { transition-delay: .3s; }
.ai-lab-overview .ml-reveal.delay-4 { transition-delay: .4s; }

@media (max-width: 768px) {
  .ai-lab-overview .compare-grid { grid-template-columns: 1fr; }
  .ai-lab-overview .compare-vs { display: none; }
  .ai-lab-overview .arch-timeline { flex-direction: column; align-items: center; }
  .ai-lab-overview .arch-arrow { padding: 4px 0; }
  .ai-lab-overview .topic-code {
    grid-column: auto;
    padding: 12px 14px;
    font-size: .68rem;
  }
  .ai-lab-overview .compare-card:first-child {
    border-right: 0;
    border-bottom: 1.5px solid rgba(246,51,146,.14);
  }
  .ai-lab-overview .dp-step {
    min-width: 0;
    flex: 1 1 120px;
  }
}

/* ── Motivation Grid (ML Intro) ─────────────────── */
.ai-lab-content .motivation-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0;
}
.ai-lab-content .motiv-card {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r); padding: 20px; text-align: center;
}
.ai-lab-content .motiv-icon {
  font-size: 2rem; margin-bottom: 10px; color: var(--ai-accent);
}
.ai-lab-content .motiv-title {
  font-size: .9rem; font-weight: 700; color: var(--ai-text); margin-bottom: 6px;
}
.ai-lab-content .motiv-desc {
  font-size: .76rem; color: var(--ai-text2); line-height: 1.6;
}

/* ── Paradigm Cards (ML Intro) ──────────────────── */
.ai-lab-content .para-card {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 18px; margin: 10px 0;
  display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start;
}
.ai-lab-content .para-card.supervised { border-left: 3px solid #22c55e; }
.ai-lab-content .para-card.unsupervised { border-left: 3px solid var(--ai-accent); }
.ai-lab-content .para-card.reinforcement { border-left: 3px solid #f59e0b; }
.ai-lab-content .para-icon {
  width: 48px; height: 48px; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; font-size: 1.3rem;
}
.ai-lab-content .para-card.supervised .para-icon { background: rgba(34,197,94,.1); color: #22c55e; }
.ai-lab-content .para-card.unsupervised .para-icon { background: rgba(246,51,146,.1); color: var(--ai-accent); }
.ai-lab-content .para-card.reinforcement .para-icon { background: rgba(245,158,11,.1); color: #f59e0b; }
.ai-lab-content .para-num {
  font-family: 'SF Mono', monospace; font-size: .56rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ai-text3);
  margin-bottom: 4px; grid-column: 1 / -1;
}
.ai-lab-content .para-title {
  font-size: .88rem; font-weight: 700; color: var(--ai-text); margin-bottom: 4px;
}
.ai-lab-content .para-desc {
  font-size: .78rem; color: var(--ai-text2); line-height: 1.6;
}

@media (max-width: 768px) {
  .ai-lab-content .motivation-grid { grid-template-columns: 1fr; }
}

/* ── Hypothesis: Tab Switcher + Canvas ──────────── */
.ai-lab-content .fv-tabs {
  display: flex; gap: 4px; margin: 16px 0;
}
.ai-lab-content .fv-tab {
  font-family: 'SF Mono', monospace; font-size: .7rem; font-weight: 600;
  padding: 8px 16px; border-radius: 8px; border: 1px solid var(--ai-border);
  background: #fff; color: var(--ai-text3); cursor: pointer; transition: all .15s;
}
.ai-lab-content .fv-tab.active {
  background: rgba(246,51,146,.1); border-color: rgba(246,51,146,.25); color: var(--ai-accent);
}
.ai-lab-content .fv-content.hidden { display: none; }
.ai-lab-content .fv-content {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 20px;
}

.ai-lab-content .canvas-wrap {
  margin: 20px 0; padding: 16px; background: var(--ai-bg);
  border: 1px solid var(--ai-border); border-radius: var(--ai-r-sm);
  text-align: center; overflow-x: auto;
}
.ai-lab-content .canvas-legend {
  margin-top: 12px; display: flex; gap: 16px; justify-content: center;
  font-size: .72rem; color: var(--ai-text3); flex-wrap: wrap;
}

/* ── Definition Box ─────────────────────────────── */
.ai-lab-content .def-box {
  background: rgba(34,197,94,.05); border: 1px solid rgba(34,197,94,.2);
  border-radius: var(--ai-r-sm); padding: 18px 20px; margin: 16px 0;
  font-size: .84rem; color: var(--ai-text2); line-height: 1.7;
}
.ai-lab-content .def-box strong { color: #22c55e; }

/* ── Bias Types Cards ───────────────────────────── */
.ai-lab-content .bias-types {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0;
}
.ai-lab-content .bt-card {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r); padding: 20px;
}
.ai-lab-content .bt-card.preference { border-left: 3px solid var(--ai-accent); }
.ai-lab-content .bt-card.restriction { border-left: 3px solid #f59e0b; }
.ai-lab-content .bt-num {
  font-family: 'SF Mono', monospace; font-size: .58rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ai-text3); margin-bottom: 8px;
}
.ai-lab-content .bt-title {
  font-size: .9rem; font-weight: 700; color: var(--ai-text); margin-bottom: 4px;
}
.ai-lab-content .bt-subtitle {
  font-size: .76rem; color: var(--ai-text2); line-height: 1.55; margin-bottom: 12px;
}
.ai-lab-content .bt-desc {
  font-size: .74rem; color: var(--ai-text3); line-height: 1.6; margin-bottom: 10px;
}
.ai-lab-content .bt-tradeoff {
  display: flex; gap: 12px; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--ai-border);
}
.ai-lab-content .btt-plus { color: #22c55e; font-size: .72rem; font-weight: 600; }
.ai-lab-content .btt-minus { color: #ef4444; font-size: .72rem; font-weight: 600; }
.ai-lab-content .bte-item {
  font-size: .7rem; color: var(--ai-text2); margin-bottom: 4px;
}
.ai-lab-content .bte-label {
  font-family: 'SF Mono', monospace; font-size: .62rem; color: var(--ai-accent);
}

/* ── Checklist Items ────────────────────────────── */
.ai-lab-content .cl-item {
  font-size: .82rem; color: var(--ai-text2); padding: 6px 0;
}
.ai-lab-content .cl-item.pos::before { content: "\f00c  "; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #22c55e; }
.ai-lab-content .cl-item.neg::before { content: "\f00d  "; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #ef4444; }

@media (max-width: 768px) {
  .ai-lab-content .bias-types { grid-template-columns: 1fr; }
}

/* ── VC-Dim: Capacity Spectrum ──────────────────── */
.ai-lab-content .capacity-spectrum {
  height: 8px; background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444);
  border-radius: 4px; margin: 12px 0; position: relative;
}
.ai-lab-content .csm-dot {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 6px rgba(0,0,0,.2);
}
.ai-lab-content .csm-dot.low { background: #22c55e; left: 15%; }
.ai-lab-content .csm-dot.high { background: #ef4444; left: 75%; }
.ai-lab-content .csm-label {
  font-size: .64rem; color: var(--ai-text3); margin-top: 4px;
  font-family: 'SF Mono', monospace;
}
.ai-lab-content .csm-label.right { text-align: right; }

/* VC-Dim: Dimension Entry List */
.ai-lab-content .de-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: 8px; margin-bottom: 6px;
}
.ai-lab-content .de-dim {
  font-family: 'SF Mono', monospace; font-size: .72rem; font-weight: 800;
  color: var(--ai-accent); min-width: 50px;
}
.ai-lab-content .de-vc {
  font-family: 'SF Mono', monospace; font-size: .78rem; font-weight: 700;
  color: var(--ai-text); min-width: 40px;
}
.ai-lab-content .de-desc {
  font-size: .74rem; color: var(--ai-text2); flex: 1;
}

/* VC-Dim: Model Compare */
.ai-lab-content .mc-btn {
  font-family: 'SF Mono', monospace; font-size: .64rem; font-weight: 600;
  padding: 6px 12px; border-radius: 6px; border: 1px solid var(--ai-border);
  background: #fff; color: var(--ai-text3); cursor: pointer;
}
.ai-lab-content .mc-btn.active { background: rgba(246,51,146,.1); border-color: rgba(246,51,146,.25); color: var(--ai-accent); }
.ai-lab-content .mci-desc { font-size: .72rem; color: var(--ai-text2); line-height: 1.6; }

/* ── CNN: Landmark Cards ──────────────────────── */
.ai-lab-content .landmark-intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0;
}
.ai-lab-content .lm-card {
  background: var(--ai-card); border: 1px solid var(--ai-border);
  border-radius: var(--ai-r-sm); padding: 14px; display: flex; gap: 12px;
}
.ai-lab-content .lm-card img {
  width: 80px; height: 80px; object-fit: cover; border-radius: 8px; flex-shrink: 0;
}
.ai-lab-content .lm-name { font-size: .82rem; font-weight: 700; color: var(--ai-text); }
.ai-lab-content .lm-loc  { font-size: .68rem; color: var(--ai-text3); margin: 2px 0 6px; }
.ai-lab-content .lm-desc { font-size: .7rem; color: var(--ai-text2); line-height: 1.5; }

/* ── CNN: Compare Box ──────────────────────────── */
.ai-lab-content .compare-box {
  display: grid; grid-template-columns: 1fr 40px 1fr; gap: 12px; align-items: start; margin: 20px 0;
}
.ai-lab-content .cb-side { background: var(--ai-card); border: 1px solid var(--ai-border); border-radius: var(--ai-r-sm); padding: 16px; }
.ai-lab-content .cb-title { font-size: .8rem; font-weight: 700; margin-bottom: 10px; }
.ai-lab-content .cb-title.bad { color: #ef4444; }
.ai-lab-content .cb-title.good { color: #22c55e; }
.ai-lab-content .cb-body { font-size: .74rem; color: var(--ai-text2); line-height: 1.5; }
.ai-lab-content .cb-vs { align-self: center; text-align: center; font-size: .8rem; font-weight: 800; color: var(--ai-text3); }

/* ── CNN: Convolution Visualizer ──────────────── */
.ai-lab-content .conv-demo { background: var(--ai-card); border: 1px solid rgba(246,51,146,.14); border-radius: var(--ai-r); padding: 20px; margin: 20px 0; }
.ai-lab-content .conv-controls { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.ai-lab-content .conv-controls button { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--ai-border); background: #fff; font-size: .72rem; font-weight: 600; color: var(--ai-text2); cursor: pointer; transition: all .15s; }
.ai-lab-content .conv-controls button:hover { border-color: var(--ai-accent); color: var(--ai-accent); }
.ai-lab-content .conv-controls button.active { background: rgba(246,51,146,.1); border-color: rgba(246,51,146,.25); color: var(--ai-accent); }

/* ── CNN: Pipeline Demo ───────────────────────── */
.ai-lab-content .cnn-pipeline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.ai-lab-content .pipeline-stage { background: var(--ai-card); border: 1px solid var(--ai-border); border-radius: 8px; padding: 10px 14px; cursor: pointer; text-align: center; transition: all .15s; }
.ai-lab-content .pipeline-stage:hover, .pipeline-stage.active { border-color: var(--ai-accent); background: rgba(246,51,146,.05); }
.ai-lab-content .pipeline-arrow { color: var(--ai-text3); font-size: .8rem; }
.ai-lab-content .cnn-results { margin: 16px 0; }
.ai-lab-content .cnn-bar-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ai-lab-content .cnn-bar-track { flex: 1; height: 6px; background: rgba(246,51,146,.06); border-radius: 3px; overflow: hidden; }
.ai-lab-content .cnn-bar-fill { height: 100%; background: linear-gradient(90deg, #f63392, #ff6b9d); border-radius: 3px; }

@media (max-width: 768px) {
  .ai-lab-content .landmark-intro { grid-template-columns: 1fr; }
  .ai-lab-content .compare-box { grid-template-columns: 1fr; }
  .ai-lab-content .cb-vs { display: none; }
}

/* ═══ CNN ReLU lesson styles ═══ */
.ai-lab-content .relu-demo { display: flex; flex-direction: column; gap: 20px; }
.ai-lab-content .relu-input-row { display: grid; grid-template-columns: 140px 1fr 80px; align-items: center; gap: 16px; }
.ai-lab-content .relu-output-row { display: flex; align-items: center; gap: 16px; }
.ai-lab-content .relu-io-box { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 16px; text-align: center; }
.ai-lab-content .relu-io-box.output { border-color: rgba(52,199,89,.3); background: rgba(52,199,89,.04); }
.ai-lab-content .rio-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 6px; }
.ai-lab-content .rio-val { font-family: var(--font-disp); font-size: 28px; font-weight: 700; color: var(--text); transition: color .2s; }
.ai-lab-content .relu-arrow-box { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.ai-lab-content .relu-fn { font-family: var(--font-mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.ai-lab-content .relu-arrow { font-size: 22px; color: var(--text-3); }
.ai-lab-content .relu-graph { width: 100%; height: 140px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.ai-lab-content #variantCompare { margin-top: 4px; }
@media (max-width: 700px) {
  .ai-lab-content .relu-input-row { grid-template-columns: 1fr; }
  .ai-lab-content .relu-output-row { flex-direction: column; }
  .ai-lab-content .relu-arrow-box { flex-direction: row; }
  .ai-lab-content .relu-arrow { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CNN Why — scoped from cnn-why.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Problem overview cards ─────────────────────────────────── */
.ai-lab-content .problem-overview { display:flex; align-items:center; gap:16px; margin:24px 0; }
.ai-lab-content .prob-card { flex:1; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:20px; }
.ai-lab-content .prob-icon { font-size:28px; margin-bottom:10px; }
.ai-lab-content .prob-num { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-bottom:6px; }
.ai-lab-content .prob-title { font-family:var(--font-disp); font-size:17px; font-weight:700; color:var(--text); margin-bottom:8px; }
.ai-lab-content .prob-desc { font-size:13px; color:var(--text-2); line-height:1.65; }
.ai-lab-content .prob-arrow { font-size:28px; color:var(--text-3); flex-shrink:0; }

/* ── Calc total ──────────────────────────────────────────────── */
.ai-lab-content .calc-total { background:rgba(41,151,255,.06); border:1px solid rgba(41,151,255,.2); border-radius:var(--r-sm); padding:16px; text-align:center; }
.ai-lab-content .calc-total.danger { background:rgba(239,68,68,.06); border-color:rgba(239,68,68,.2); }
.ai-lab-content .ct-label { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-bottom:6px; }
.ai-lab-content .ct-math { font-family:var(--font-mono); font-size:14px; color:var(--text-2); margin-bottom:4px; }
.ai-lab-content .ct-eq { color:var(--text-2); margin:0 8px; }
.ai-lab-content .ct-result { font-family:var(--font-disp); font-size:20px; font-weight:700; color:var(--accent); display:block; margin-top:6px; }
.ai-lab-content .ct-note { font-size:12px; color:var(--text-3); margin-top:4px; }
.ai-lab-content .ct-note-big { font-size:14px; color:#ef4444; line-height:1.65; }

/* ── Formula box ─────────────────────────────────────────────── */
.ai-lab-content .formula-box { background:rgba(168,85,247,.06); border:1px solid rgba(168,85,247,.2); border-radius:var(--r); padding:20px 24px; margin:20px 0; text-align:center; }
.ai-lab-content .fb-title { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); margin-bottom:12px; }
.ai-lab-content .fb-eq { font-family:var(--font-mono); font-size:20px; font-weight:700; color:var(--text); letter-spacing:.01em; line-height:1.8; }
.ai-lab-content .feq-term { color:var(--text); }
.ai-lab-content .feq-var { font-weight:700; }
.ai-lab-content .feq-var.blue { color:#2997ff; }
.ai-lab-content .feq-var.purple { color:#a855f7; }
.ai-lab-content .feq-var.green { color:#34c759; }
.ai-lab-content .feq-op { color:var(--text-2); margin:0 6px; }
.ai-lab-content .fb-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin-top:14px; }
.ai-lab-content .fb-leg-item { display:flex; align-items:center; gap:8px; }
.ai-lab-content .fb-sym { font-family:var(--font-mono); font-size:13px; font-weight:700; }
.ai-lab-content .fb-sym.blue { color:#2997ff; }
.ai-lab-content .fb-sym.green { color:#34c759; }
.ai-lab-content .fb-desc { font-size:12px; color:var(--text-2); }
.ai-lab-content .fb-note { font-size:12px; color:var(--text-3); margin-top:10px; line-height:1.6; }

/* ── Comparison table ────────────────────────────────────────── */
.ai-lab-content .comparison-table-wrap { overflow-x:auto; margin:20px 0; }
.ai-lab-content .comparison-table { width:100%; border-collapse:collapse; font-size:13px; }
.ai-lab-content .comparison-table th { background:rgba(255,255,255,.04); border-bottom:1px solid var(--border); padding:10px 14px; text-align:left; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.ai-lab-content .comparison-table td { padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text-2); font-family:var(--font-mono); font-size:12px; }
.ai-lab-content .comparison-table tr:last-child td { border-bottom:none; }
.ai-lab-content .bad-row td { background:rgba(239,68,68,.03); }
.ai-lab-content .good-row td { background:rgba(52,199,89,.03); }
.ai-lab-content .red-num { color:#ef4444; font-weight:700; }
.ai-lab-content .green-num { color:#34c759; font-weight:700; }
.ai-lab-content .table-note { font-size:12px; color:var(--text-3); margin-top:8px; }

/* ── Flatten demo ────────────────────────────────────────────── */
.ai-lab-content .flatten-demo { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin:16px 0; }
.ai-lab-content .fd-left, .ai-lab-content .fd-right { flex:1; min-width:160px; }
.ai-lab-content .fd-label { font-family:var(--font-mono); font-size:11px; color:var(--text-3); margin-bottom:10px; text-transform:uppercase; letter-spacing:.06em; }
.ai-lab-content .fd-sublabel { font-size:12px; color:var(--text-3); margin-top:8px; line-height:1.5; }
.ai-lab-content .fd-arrow { display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0; }
.ai-lab-content .fd-arrow-line { width:2px; height:40px; background:var(--border-s); transform:rotate(90deg); }
.ai-lab-content .fd-arrow-label { font-family:var(--font-mono); font-size:11px; color:var(--accent); }
.ai-lab-content .pixel-grid { display:grid; grid-template-columns:repeat(4,40px); gap:3px; }
.ai-lab-content .px-cell { width:40px; height:40px; border-radius:4px; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; font-weight:600; transition:transform .2s; }
.ai-lab-content .px-cell:hover { transform:scale(1.1); z-index:1; }
.ai-lab-content .flat-vector { display:flex; flex-direction:column; gap:3px; max-height:220px; overflow-y:auto; }
.ai-lab-content .fv-cell { height:22px; border-radius:3px; border:1px solid var(--border); display:flex; align-items:center; padding:0 8px; font-family:var(--font-mono); font-size:11px; color:var(--text-2); }

/* ── Translation demo ────────────────────────────────────────── */
.ai-lab-content .translation-demo { display:flex; align-items:flex-start; gap:24px; margin:20px 0; flex-wrap:wrap; }
.ai-lab-content .td-item { flex:1; min-width:140px; }
.ai-lab-content .td-grid { display:grid; grid-template-columns:repeat(5,32px); gap:2px; margin-bottom:8px; }
.ai-lab-content .td-cell { width:32px; height:32px; border-radius:3px; border:1px solid var(--border); font-family:var(--font-mono); font-size:10px; display:flex; align-items:center; justify-content:center; }
.ai-lab-content .td-label { font-size:12px; color:var(--text-2); margin-bottom:10px; font-weight:500; }
.ai-lab-content .td-vs { font-family:var(--font-disp); font-size:28px; font-weight:800; color:#ef4444; align-self:center; }
.ai-lab-content .td-neurons { margin-top:8px; }
.ai-lab-content .tn-label { font-size:11px; color:var(--text-3); margin-bottom:6px; font-family:var(--font-mono); }
.ai-lab-content .tn-bars { display:flex; flex-direction:column; gap:3px; }
.ai-lab-content .tn-bar { height:8px; border-radius:3px; transition:width .3s ease; }

/* ── Biological hierarchy ────────────────────────────────────── */
.ai-lab-content .bio-hierarchy { display:flex; flex-direction:column; gap:0; margin:20px 0; }
.ai-lab-content .bh-level { display:grid; grid-template-columns:48px 1fr auto; gap:16px; align-items:center; padding:18px 20px; background:var(--bg-card); border:1px solid var(--border); }
.ai-lab-content .bh-level + .bh-level { border-top:none; }
.ai-lab-content .bh-level:first-child { border-radius:var(--r) var(--r) 0 0; }
.ai-lab-content .bh-level:last-child { border-radius:0 0 var(--r) var(--r); }
.ai-lab-content .bh-icon { font-size:26px; text-align:center; }
.ai-lab-content .bh-name { font-family:var(--font-disp); font-size:14px; font-weight:700; color:var(--text); margin-bottom:3px; }
.ai-lab-content .bh-role { font-size:11px; font-family:var(--font-mono); color:var(--accent); letter-spacing:.04em; margin-bottom:4px; }
.ai-lab-content .bh-desc { font-size:12px; color:var(--text-2); line-height:1.55; }
.ai-lab-content .bh-cnn { text-align:right; flex-shrink:0; }
.ai-lab-content .bh-cnn-label { font-family:var(--font-mono); font-size:9px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.ai-lab-content .bh-cnn-val { font-family:var(--font-mono); font-size:12px; color:var(--text-2); }
.ai-lab-content .bh-cnn-val small { font-size:10px; color:var(--text-3); display:block; }
.ai-lab-content .bh-arrow { text-align:center; font-size:18px; color:var(--text-3); padding:4px 0; }

/* ── Three properties ────────────────────────────────────────── */
.ai-lab-content .three-props { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0; }
.ai-lab-content .prop-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:10px; }
.ai-lab-content .prop-num { font-family:var(--font-disp); font-size:32px; font-weight:800; color:var(--accent); line-height:1; opacity:.5; }
.ai-lab-content .prop-title { font-family:var(--font-disp); font-size:15px; font-weight:700; color:var(--text); }
.ai-lab-content .prop-desc { font-size:12.5px; color:var(--text-2); line-height:1.65; }
.ai-lab-content .prop-math { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; }
.ai-lab-content .pm-eq { font-family:var(--font-mono); font-size:12px; color:var(--text); line-height:1.7; }
.ai-lab-content .pm-note { font-size:11px; color:var(--text-3); margin-top:4px; }
.ai-lab-content .prop-effect { font-family:var(--font-mono); font-size:11px; margin-top:auto; }
.ai-lab-content .prop-effect.green { color:#34c759; }

/* ── Final comparison ────────────────────────────────────────── */
.ai-lab-content .final-compare { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.ai-lab-content .fc-col { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden; }
.ai-lab-content .fc-header { padding:10px 14px; font-family:var(--font-disp); font-size:14px; font-weight:700; text-align:center; }
.ai-lab-content .fc-header.bad { background:rgba(239,68,68,.1); color:#ef4444; }
.ai-lab-content .fc-header.good { background:rgba(52,199,89,.1); color:#34c759; }
.ai-lab-content .fc-row { display:flex; justify-content:space-between; padding:8px 14px; border-top:1px solid var(--border); font-size:12.5px; }
.ai-lab-content .fc-key { color:var(--text-2); }
.ai-lab-content .fc-val { font-weight:500; }
.ai-lab-content .fc-val.red { color:#ef4444; }
.ai-lab-content .fc-val.green { color:#34c759; }

/* ── Next lesson CTA ─────────────────────────────────────────── */
.ai-lab-content .next-lesson-cta { margin-top:48px; background:var(--bg-card); border:1px solid var(--border-s); border-radius:var(--r); padding:32px; text-align:center; }
.ai-lab-content .nlc-label { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-3); margin-bottom:8px; display:block; }
.ai-lab-content .nlc-title { font-family:var(--font-disp); font-size:26px; font-weight:700; color:var(--text); letter-spacing:-.01em; margin-bottom:8px; }
.ai-lab-content .nlc-desc { font-size:14px; color:var(--text-2); margin-bottom:20px; }
.ai-lab-content .nlc-btn { display:inline-block; padding:12px 28px; border-radius:8px; background:var(--accent); color:#fff; font-weight:600; font-size:14px; text-decoration:none; transition:all .2s; }
.ai-lab-content .nlc-btn:hover { background:#1a80d9; transform:translateY(-2px); }

/* ── Parameter Explorer sliders ──────────────────────────────── */
.ai-lab-content .pe-sliders { display:flex; flex-direction:column; gap:16px; margin-bottom:4px; }
.ai-lab-content .pe-slider-row { display:grid; grid-template-columns:160px 1fr 100px; align-items:center; gap:16px; }
.ai-lab-content .pe-slider-label { font-size:13px; font-weight:500; color:var(--text); display:flex; flex-direction:column; gap:2px; }
.ai-lab-content .pe-slider-hint { font-family:var(--font-mono); font-size:10px; color:var(--text-3); font-weight:400; }
.ai-lab-content .pe-slider-track { display:flex; flex-direction:column; gap:4px; }
.ai-lab-content .pe-slider-ticks { display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; color:var(--text-3); padding:0 2px; }
.ai-lab-content .pe-slider-val { font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--accent); text-align:right; }

/* ── Comparison bars ────────────────────────────────────────── */
.ai-lab-content .pe-compare { margin-top:20px; }
.ai-lab-content .pe-compare-title { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin-bottom:12px; }
.ai-lab-content .pe-bars { display:flex; flex-direction:column; gap:10px; }
.ai-lab-content .pe-bar-row { display:grid; grid-template-columns:100px 1fr 120px; align-items:center; gap:12px; }
.ai-lab-content .pe-bar-label { font-size:12px; color:var(--text-2); font-family:var(--font-mono); }
.ai-lab-content .pe-bar-track { height:14px; background:rgba(255,255,255,.06); border-radius:7px; overflow:hidden; }
.ai-lab-content .pe-bar-fill { height:100%; border-radius:7px; transition:width .4s cubic-bezier(.22,.61,.36,1); min-width:4px; }
.ai-lab-content .pe-bar-fill.mlp { background:linear-gradient(90deg,#ef4444,#ff9f0a); }
.ai-lab-content .pe-bar-fill.cnn { background:linear-gradient(90deg,#34c759,#2997ff); }
.ai-lab-content .pe-bar-num { font-family:var(--font-mono); font-size:12px; font-weight:700; text-align:right; }
.ai-lab-content .pe-bar-num.red { color:#ef4444; }
.ai-lab-content .pe-bar-num.green { color:#34c759; }
.ai-lab-content .pe-ratio { margin-top:10px; font-family:var(--font-mono); font-size:13px; color:var(--text-2); text-align:center; padding:8px; background:var(--bg); border-radius:var(--r-sm); border:1px solid var(--border); }

/* ── Warning badge ──────────────────────────────────────────── */
.ai-lab-content .pe-warning { display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 16px; background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.3); border-radius:var(--r-sm); font-size:13px; color:#ef4444; animation:pulseWarn 2s ease-in-out infinite; }
@keyframes pulseWarn { 0%,100% { border-color:rgba(239,68,68,.3); } 50% { border-color:rgba(239,68,68,.7); } }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .ai-lab-content .three-props { grid-template-columns:1fr; }
  .ai-lab-content .bh-level { grid-template-columns:40px 1fr; }
  .ai-lab-content .bh-cnn { display:none; }
}
@media (max-width: 700px) {
  .ai-lab-content .problem-overview { flex-direction:column; }
  .ai-lab-content .prob-arrow { transform:rotate(90deg); }
  .ai-lab-content .flatten-demo { flex-direction:column; }
  .ai-lab-content .fd-arrow { flex-direction:row; }
  .ai-lab-content .fd-arrow-line { transform:none; height:2px; width:40px; }
  .ai-lab-content .final-compare { grid-template-columns:1fr; }
  .ai-lab-content .translation-demo { flex-direction:column; }
  .ai-lab-content .pe-slider-row { grid-template-columns:1fr; }
  .ai-lab-content .pe-bar-row { grid-template-columns:80px 1fr 90px; }
}

/* ═══ Filtering Kernels lesson styles ═══ */

/* ── Shared helpers ─────────────────────────────────────────── */
.ai-lab-content .green-text { color: #34c759; }
.ai-lab-content .ic-list { font-size: 13px; color: var(--text-2); line-height: 2; padding-left: 16px; }
.ai-lab-content .ic-list strong { color: var(--text); font-weight: 500; }
.ai-lab-content .ic-note { font-size: 12px; color: var(--text-3); margin-top: 10px; }
.ai-lab-content .mini-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; }
.ai-lab-content .mini-table th { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.ai-lab-content .mini-table td { padding: 6px 8px; color: var(--text-2); border-bottom: 1px solid var(--border); }
.ai-lab-content .mini-table tr:last-child td { border-bottom: none; }
.ai-lab-content .mini-table .green-text { color: #34c759; font-weight: 500; }

/* ── Convolution stepper ────────────────────────────────────── */
.ai-lab-content .conv-stepper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin-bottom: 16px;
}
.ai-lab-content .cs-panel { display: flex; flex-direction: column; gap: 10px; }
.ai-lab-content .cs-mid   { align-items: center; }
.ai-lab-content .cs-out   { align-items: center; }
.ai-lab-content .cs-panel-label {
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-3);
}

/* 5×5 and 3×3 grid cells */
.ai-lab-content .cs-grid {
  display: grid;
  gap: 2px;
}
.ai-lab-content .cs-grid.cs-kernel-grid { justify-self: center; }
.ai-lab-content .cs-cell {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  border: 1px solid var(--border);
  color: var(--text-2);
  transition: background .15s, border-color .15s, color .15s;
}
.ai-lab-content .cs-cell.highlighted {
  border-color: var(--accent);
  background: rgba(41,151,255,.15);
  color: var(--text);
}
.ai-lab-content .cs-cell.kernel-cell {
  background: rgba(255,255,255,.04);
  color: var(--accent);
  font-size: 10px;
  border-color: rgba(41,151,255,.25);
}

.ai-lab-content .cs-kernel-btns {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
}
.ai-lab-content .ks-btn {
  padding: 4px 10px; border-radius: 5px;
  font-family: var(--font-mono); font-size: 10px;
  border: 1px solid var(--border); background: rgba(255,255,255,.03);
  color: var(--text-3); cursor: pointer; transition: all .15s;
}
.ai-lab-content .ks-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(41,151,255,.07); }
.ai-lab-content .ks-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(41,151,255,.12); }

.ai-lab-content .cs-math {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text-3); line-height: 1.6;
  background: rgba(0,0,0,.2); border-radius: 4px;
  padding: 8px 10px; max-width: 200px; text-align: center;
  word-break: break-all;
}

.ai-lab-content .cs-output-val {
  font-family: var(--font-disp); font-size: 44px; font-weight: 800;
  color: var(--accent); line-height: 1; margin: 8px 0;
}
.ai-lab-content .cs-output-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.ai-lab-content .cs-pos { font-family: var(--font-mono); font-size: 11px; color: var(--text-2); margin-top: 8px; }

.ai-lab-content .cs-controls {
  display: flex; align-items: center; gap: 10px; margin-top: 4px;
}
.ai-lab-content .ctrl-btn {
  padding: 7px 16px; border-radius: 7px; font-size: 12px; font-weight: 600;
  cursor: pointer; background: rgba(255,255,255,.05); color: var(--text-2);
  border: 1px solid var(--border-s); transition: all .15s; font-family: var(--font-body);
}
.ai-lab-content .ctrl-btn:hover { background: rgba(255,255,255,.09); color: var(--text); }
.ai-lab-content .ctrl-btn.play  { background: var(--accent); color: #fff; border-color: transparent; }
.ai-lab-content .ctrl-btn.play:hover { background: #1a80d9; }
.ai-lab-content .cs-prog-wrap { flex: 1; height: 4px; background: var(--border-s); border-radius: 2px; overflow: hidden; }
.ai-lab-content .cs-prog-fill { height: 100%; background: var(--accent); border-radius: 2px; transition: width .2s; width: 0%; }

/* Kernel gallery */
.ai-lab-content .kernel-gallery { margin-bottom: 20px; }
.ai-lab-content .kg-title { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); margin-bottom: 10px; }
.ai-lab-content .kg-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.ai-lab-content .kg-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; }
.ai-lab-content .kg-name { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.ai-lab-content .kg-matrix {
  font-family: var(--font-mono); font-size: 11px; color: var(--text);
  line-height: 1.9; letter-spacing: .02em; background: rgba(0,0,0,.2);
  border-radius: 4px; padding: 6px 8px; margin-bottom: 8px;
  white-space: pre;
}
.ai-lab-content .kg-desc { font-size: 11.5px; color: var(--text-3); line-height: 1.5; }

/* ── Gaussian demo ───────────────────────────────────────────── */
.ai-lab-content .gaussian-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ai-lab-content .gd-left { display: flex; flex-direction: column; gap: 4px; }
.ai-lab-content .gd-right { display: flex; flex-direction: column; gap: 8px; }
.ai-lab-content .gd-ctrl-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-lab-content .gd-ctrl-row label { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.ai-lab-content .gd-ctrl-row input[type="range"] { flex: 1; min-width: 80px; }
.ai-lab-content .gd-size-btns { display: flex; gap: 5px; }
.ai-lab-content .gd-btn {
  padding: 5px 12px; border-radius: 5px; font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; background: rgba(255,255,255,.04); color: var(--text-3);
  border: 1px solid var(--border); transition: all .15s;
}
.ai-lab-content .gd-btn:hover  { border-color: var(--accent); color: var(--accent); background: rgba(41,151,255,.07); }
.ai-lab-content .gd-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(41,151,255,.12); }
.ai-lab-content .gd-klabel { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); }

/* Gaussian kernel weight grid */
.ai-lab-content .gauss-grid { display: grid; gap: 2px; margin-top: 4px; }
.ai-lab-content .gauss-cell {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px; font-family: var(--font-mono); font-size: 9px;
  border: none; transition: background .3s;
  color: rgba(255,255,255,.8);
}

.ai-lab-content .gauss-stats { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); line-height: 1.8; }
.ai-lab-content .gauss-stats span { color: var(--accent); }

/* ── Median demo ─────────────────────────────────────────────── */
.ai-lab-content .median-demo { display: flex; flex-direction: column; gap: 14px; }
.ai-lab-content .md-controls { display: flex; flex-direction: column; gap: 10px; }
.ai-lab-content .md-ctrl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ai-lab-content .md-ctrl-row label { font-size: 13px; color: var(--text-2); white-space: nowrap; }
.ai-lab-content .md-ctrl-row input[type="range"] { flex: 1; min-width: 100px; }
.ai-lab-content .md-canvases { display: flex; gap: 10px; flex-wrap: wrap; }
.ai-lab-content .md-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ai-lab-content .md-item canvas { border-radius: 6px; border: 1px solid var(--border-s); display: block; image-rendering: pixelated; }
.ai-lab-content .md-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }
.ai-lab-content .md-stats { display: flex; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ai-lab-content .md-stats span { color: var(--accent); }

/* Step walkthrough */
.ai-lab-content .step-walkthrough { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--r); padding: 20px; margin-bottom: 20px; }
.ai-lab-content .sw-title { font-family: var(--font-disp); font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 16px; }
.ai-lab-content .sw-steps { display: flex; flex-direction: column; gap: 12px; }
.ai-lab-content .sw-step { display: flex; gap: 14px; align-items: flex-start; }
.ai-lab-content .sw-num {
  width: 28px; height: 28px; border-radius: 50%; background: rgba(41,151,255,.15);
  color: var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-lab-content .sw-body { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ai-lab-content .sw-label { font-size: 13px; color: var(--text-2); }
.ai-lab-content .sw-patch { font-family: var(--font-mono); font-size: 12px; color: var(--text); background: rgba(0,0,0,.2); border-radius: 4px; padding: 8px 12px; }
.ai-lab-content .sw-sorted { font-family: var(--font-mono); font-size: 13px; color: var(--text-2); padding: 6px 0; }
.ai-lab-content .sw-median { color: var(--accent); }
.ai-lab-content .sw-spike  { color: #ff375f; }
.ai-lab-content .sw-result { font-size: 14px; color: var(--text); font-weight: 500; }
.ai-lab-content .sw-note   { font-size: 12px; color: var(--text-3); font-weight: 400; }
.ai-lab-content .sw-code   { font-family: var(--font-mono); font-size: 12px; color: var(--text-2); background: rgba(0,0,0,.2); border-radius: 4px; padding: 8px 12px; line-height: 1.7; }

/* ── Formula card ────────────────────────────────────────────── */
.ai-lab-content .formula-card {
  background: var(--bg-card); border: 1px solid var(--border-s);
  border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: 20px 24px; margin-bottom: 20px;
}
.ai-lab-content .fc-title { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); margin-bottom: 14px; }
.ai-lab-content .fc-eq { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.ai-lab-content .fce-term { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--text); }
.ai-lab-content .fce-term.accent { color: var(--accent); }
.ai-lab-content .fce-term.blue   { color: #2997ff; }
.ai-lab-content .fce-term.muted  { color: var(--text-3); }
.ai-lab-content .fce-op          { font-family: var(--font-mono); font-size: 15px; color: var(--text-3); }
.ai-lab-content .fce-paren       { font-family: var(--font-mono); font-size: 18px; color: var(--text-3); }
.ai-lab-content .fc-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.ai-lab-content .fc-legend span { font-size: 12px; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.ai-lab-content .fc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ai-lab-content .fc-dot.accent { background: var(--accent); }
.ai-lab-content .fc-dot.blue   { background: #2997ff; }
.ai-lab-content .fc-dot.muted  { background: var(--text-3); }

/* ── Unsharp demo ────────────────────────────────────────────── */
.ai-lab-content .unsharp-demo { display: flex; flex-direction: column; gap: 14px; }
.ai-lab-content .ud-controls { display: flex; flex-direction: column; gap: 10px; }
.ai-lab-content .ud-ctrl-row { display: flex; align-items: center; gap: 12px; }
.ai-lab-content .ud-ctrl-row label { font-size: 13px; color: var(--text-2); white-space: nowrap; min-width: 110px; }
.ai-lab-content .ud-ctrl-row input[type="range"] { flex: 1; }
.ai-lab-content .ud-canvases { display: flex; gap: 10px; flex-wrap: wrap; }
.ai-lab-content .ud-item { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ai-lab-content .ud-item canvas { border-radius: 6px; border: 1px solid var(--border-s); display: block; image-rendering: pixelated; }
.ai-lab-content .ud-lbl { font-family: var(--font-mono); font-size: 10px; color: var(--text-3); }

/* ── Otsu demo ───────────────────────────────────────────────── */
.ai-lab-content .otsu-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ai-lab-content .otsu-left { display: flex; flex-direction: column; gap: 10px; }
.ai-lab-content .otsu-right { display: flex; flex-direction: column; gap: 12px; }
.ai-lab-content .otsu-scene-btns { display: flex; gap: 6px; }
.ai-lab-content .otsu-btn {
  padding: 5px 14px; border-radius: 6px; font-family: var(--font-mono); font-size: 11px;
  cursor: pointer; background: rgba(255,255,255,.04); color: var(--text-3);
  border: 1px solid var(--border); transition: all .15s;
}
.ai-lab-content .otsu-btn:hover  { border-color: var(--accent); color: var(--accent); }
.ai-lab-content .otsu-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(41,151,255,.1); }
.ai-lab-content .otsu-ctrl-row { display: flex; align-items: center; gap: 10px; }
.ai-lab-content .otsu-ctrl-row label { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.ai-lab-content .otsu-ctrl-row input[type="range"] { flex: 1; }
.ai-lab-content #otsuHistCanvas { display: block; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); }
.ai-lab-content .otsu-scores { display: flex; flex-direction: column; gap: 6px; }
.ai-lab-content .os-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 6px; }
.ai-lab-content .os-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); }
.ai-lab-content .os-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text); }
.ai-lab-content .os-val.accent { color: var(--accent); }
.ai-lab-content .os-val.green-text { color: #34c759; }
.ai-lab-content .otsu-canvases { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-lab-content .otsu-c { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ai-lab-content .otsu-c canvas { border-radius: 5px; border: 1px solid var(--border-s); image-rendering: pixelated; display: block; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .conv-stepper { grid-template-columns: 1fr 1fr; }
  .cs-out { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; }
  .gaussian-demo { grid-template-columns: 1fr; }
  .otsu-demo { grid-template-columns: 1fr; }
  .kg-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .conv-stepper { grid-template-columns: 1fr; }
  .kg-grid { grid-template-columns: 1fr; }
  .md-canvases { gap: 6px; }
  .md-item canvas { width: 100px !important; height: 75px !important; }
  .ud-canvases { gap: 6px; }
  .ud-item canvas { width: 100px !important; height: 75px !important; }
}

/* ═══ CNN FC lesson styles ═══ */
/* ── Softmax Calculator ──────────────────────────────────────── */
.ai-lab-content .softmax-inputs {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.ai-lab-content .sm-row {
  display: grid;
  grid-template-columns: 110px 1fr 60px 80px;
  align-items: center;
  gap: 12px;
}

.ai-lab-content .sm-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  font-family: var(--font-mono);
}

.ai-lab-content .sm-slider { width: 100%; }

.ai-lab-content .sm-val {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  text-align: right;
}

.ai-lab-content .sm-prob {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  text-align: right;
}

.ai-lab-content .softmax-bars {
  margin-bottom: 12px;
}

.ai-lab-content .softmax-sum {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-top: 8px;
}

/* ── Cross-Entropy Demo ──────────────────────────────────────── */
.ai-lab-content .ce-demo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai-lab-content .ce-row {
  display: grid;
  grid-template-columns: 160px 1fr 80px;
  align-items: center;
  gap: 16px;
}

.ai-lab-content .ce-result {
  margin-top: 4px;
}

/* ── Architecture table ──────────────────────────────────────── */
.ai-lab-content .arch-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .sm-row   { grid-template-columns: 1fr 1fr; }
  .sm-label { grid-column: 1 / -1; }
  .ce-row   { grid-template-columns: 1fr; }
}

/* ═══ CNN Hands-on lesson styles ═══ */
/* ── Code Block ──────────────────────────────────────────────── */
.ai-lab-content .code-block {
  background: #0d1117;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r);
  margin: 24px 0;
  overflow: hidden;
  position: relative;
}
.ai-lab-content .code-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #2997ff, #a855f7);
}

.ai-lab-content .cb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ai-lab-content .cb-lang {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #2997ff;
  background: rgba(41,151,255,.12);
  padding: 2px 8px;
  border-radius: 4px;
}

.ai-lab-content .cb-filename {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,.4);
  flex: 1;
}

.ai-lab-content .cb-copy {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  transition: all .2s;
}
.ai-lab-content .cb-copy:hover {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
}

.ai-lab-content .code-block pre {
  margin: 0;
  padding: 20px 20px 24px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  color: #e2e8f0;
}

.ai-lab-content .code-block code {
  font-family: inherit;
  font-size: inherit;
}

/* Syntax highlight spans — applied by HTML */
.ai-lab-content .code-block .co  { color: #569cd6; }   /* keyword (import, class, def, for, if, return) */
.ai-lab-content .code-block .fn  { color: #dcdcaa; }   /* function/method name */
.ai-lab-content .code-block .st  { color: #ce9178; }   /* string */
.ai-lab-content .code-block .nu  { color: #b5cea8; }   /* number */
.ai-lab-content .code-block .cm  { color: #6a9955; font-style: italic; }  /* comment */
.ai-lab-content .code-block .kw  { color: #569cd6; }   /* True, False, None */

/* ── Terminal output preview ─────────────────────────────────── */
.ai-lab-content .output-preview {
  background: #0a0f1a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-sm);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: #34c759;
  overflow-x: auto;
  margin-top: 12px;
  min-height: 60px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .code-block pre { font-size: 11.5px; padding: 16px; }
  .cb-header { flex-wrap: wrap; }
}

/* ═══ CNN Architecture lesson styles ═══ */
.ai-lab-content .preset-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.ai-lab-content .preset-label{font-family:var(--font-mono);font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;flex-shrink:0}
.ai-lab-content .preset-btns{display:flex;gap:6px;flex-wrap:wrap}
.ai-lab-content .preset-btn{padding:6px 14px;border-radius:6px;font-size:12px;font-family:var(--font-mono);font-weight:600;border:1px solid var(--border-s);background:rgba(255,255,255,.03);color:var(--text-2);cursor:pointer;transition:all .18s}
.ai-lab-content .preset-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(168,85,247,.06)}
.ai-lab-content .preset-btn.active{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.5);color:var(--accent)}
.ai-lab-content .input-config{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;align-items:flex-end}
.ai-lab-content .ic-item{display:flex;flex-direction:column;gap:5px}
.ai-lab-content .ic-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.ai-lab-content .ic-select,.ic-input{background:var(--bg);border:1px solid var(--border-s);border-radius:var(--r-sm);color:var(--text);font-family:var(--font-mono);font-size:12px;padding:6px 10px;outline:none;transition:border-color .2s;min-width:100px}
.ai-lab-content .ic-select:focus,.ic-input:focus{border-color:var(--accent)}
.ai-lab-content .ic-input{width:90px}

/* ── LAYER EDITOR ─────────────────────────────────────────────── */
.ai-lab-content .layer-editor{margin-bottom:4px}
.ai-lab-content .le-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px}
.ai-lab-content .le-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)}
.ai-lab-content .le-add-btns{display:flex;gap:5px;flex-wrap:wrap}
.ai-lab-content .le-add{padding:4px 10px;border-radius:5px;font-size:11px;font-family:var(--font-mono);border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-3);cursor:pointer;transition:all .15s}
.ai-lab-content .le-add:hover{border-color:#2997ff;color:#2997ff;background:rgba(41,151,255,.07)}

/* ── Layer list — NN-SVG style visual rows ──────────────── */
.ai-lab-content .layer-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:none;overflow-y:visible;
}

/* Each layer row = viz bar + content */
.ai-lab-content .li-wrap{
  display:flex;flex-direction:row;align-items:stretch;
  border-radius:6px;overflow:hidden;
  border:1px solid var(--border);
  transition:border-color .15s;
  background:var(--bg);
}
.ai-lab-content .li-wrap:hover{border-color:var(--border-s)}
.ai-lab-content .li-wrap.open{border-color:var(--accent)}

/* Visual bar on the left */
.ai-lab-content .li-vizbar{
  display:flex;align-items:center;justify-content:flex-end;
  gap:3px;
  padding:6px 4px 6px 6px;
  min-width:140px;
  width:140px;
  flex-shrink:0;
  background:rgba(0,0,0,.15);
  border-right:1px solid var(--border);
}
/* filter slice */
.ai-lab-content .li-filter-slice{
  border:1px solid;
  border-radius:2px;
  flex-shrink:0;
  align-self:center;
}
/* feature map block */
.ai-lab-content .li-fm-block{
  border:1px solid;
  border-radius:3px;
  flex-shrink:0;
  align-self:center;
  transition:filter .15s;
}
.ai-lab-content .li-wrap:hover .li-fm-block{filter:brightness(1.4)}

/* Right side: content */
.ai-lab-content .li-content{display:flex;flex-direction:column;flex:1;min-width:0}

.ai-lab-content .li-top-row{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;cursor:pointer;
}
.ai-lab-content .li-wrap.open .li-top-row{background:rgba(168,85,247,.04)}

.ai-lab-content .li-drag{cursor:grab;color:var(--text-3);font-size:13px;flex-shrink:0}
.ai-lab-content .li-type{font-family:var(--font-mono);font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;white-space:nowrap;flex-shrink:0}
.ai-lab-content .li-type.conv    {background:rgba(41,151,255,.15);color:#2997ff}
.ai-lab-content .li-type.pool    {background:rgba(255,159,10,.15);color:#ff9f0a}
.ai-lab-content .li-type.bn      {background:rgba(52,199,89,.15);color:#34c759}
.ai-lab-content .li-type.relu    {background:rgba(168,85,247,.15);color:#a855f7}
.ai-lab-content .li-type.dropout {background:rgba(255,55,95,.15);color:#ff375f}
.ai-lab-content .li-type.fc      {background:rgba(0,199,190,.15);color:#00c7be}
.ai-lab-content .li-type.gap     {background:rgba(255,214,0,.15);color:#ffd600}
.ai-lab-content .li-type.residual{background:rgba(255,69,58,.15);color:#ff453a}
.ai-lab-content .li-type.input   {background:rgba(110,110,115,.15);color:#6e6e73}

.ai-lab-content .li-summary{font-family:var(--font-mono);font-size:10px;color:var(--text-3);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ai-lab-content .li-output{font-family:var(--font-mono);font-size:10px;color:#34c759;white-space:nowrap;flex-shrink:0}
.ai-lab-content .li-expand{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:11px;padding:2px 4px;transition:color .15s;flex-shrink:0}
.ai-lab-content .li-expand:hover{color:var(--accent)}
.ai-lab-content .li-del{background:none;border:none;color:var(--text-3);cursor:pointer;font-size:15px;padding:0 4px;border-radius:3px;transition:color .15s;line-height:1;flex-shrink:0}
.ai-lab-content .li-del:hover{color:#ff375f;background:rgba(255,55,95,.1)}

/* Params panel */
.ai-lab-content .li-panel{display:none;padding:10px 12px 12px;background:rgba(0,0,0,.2);border-top:1px solid var(--border);gap:12px;flex-direction:column}
.ai-lab-content .li-wrap.open .li-panel{display:flex}
.ai-lab-content .li-param-row{display:grid;grid-template-columns:64px 1fr 36px;align-items:center;gap:8px}
.ai-lab-content .li-param-row label{font-family:var(--font-mono);font-size:10px;color:var(--text-3);white-space:nowrap}
.ai-lab-content .li-param-row input[type=range]{width:100%;accent-color:var(--accent)}
.ai-lab-content .li-param-row select{background:var(--bg-card);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:var(--font-mono);font-size:11px;padding:2px 5px;outline:none;grid-column:2/-1}
.ai-lab-content .li-param-val{font-family:var(--font-mono);font-size:10px;color:var(--accent);text-align:right}

/* ── PIPELINE VISUALIZATION ───────────────────────────────────── */
.ai-lab-content .pipeline-viz{
  margin:16px 0;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  overflow-x:auto;
  overflow-y:visible;
  padding:20px 16px 12px;
}
.ai-lab-content .pipeline-scroll{
  display:flex;
  align-items:flex-end;
  gap:0;
  min-width:max-content;
  padding-bottom:4px;
}

/* ── Pipeline node ─────────────────────────────────────── */
.ai-lab-content .pv-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  cursor:pointer;
  transition:opacity .15s;
}
.ai-lab-content .pv-node:hover{ opacity:.75; }

/* filter slice (conv only) */
.ai-lab-content .pv-filter{
  border:1.5px solid;
  border-radius:2px;
  margin-bottom:-2px;
  align-self:flex-start;
  margin-left:4px;
  flex-shrink:0;
}

/* main feature map box */
.ai-lab-content .pv-box{
  border:1.5px solid;
  border-radius:3px;
  flex-shrink:0;
  overflow:hidden;
  position:relative;
  transition:filter .15s;
}
.ai-lab-content .pv-node:hover .pv-box{ filter:brightness(1.3); }

.ai-lab-content .pv-name{
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:700;
  text-align:center;
  white-space:nowrap;
  letter-spacing:.03em;
}
.ai-lab-content .pv-shape{
  font-family:var(--font-mono);
  font-size:8px;
  color:rgba(255,255,255,.3);
  text-align:center;
  white-space:nowrap;
}

/* ── Arrow between nodes ─────────────────────────────────── */
.ai-lab-content .pv-arrow{
  display:flex;
  align-items:center;
  padding-bottom:28px;
  flex-shrink:0;
  opacity:.6;
}

/* ── STATS BAR ────────────────────────────────────────────────── */
.ai-lab-content .stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border-radius:var(--r-sm);overflow:hidden;margin-top:4px}
.ai-lab-content .stat-item{background:var(--bg);padding:12px 16px;text-align:center}
.ai-lab-content .stat-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-bottom:4px}
.ai-lab-content .stat-val{font-family:var(--font-disp);font-size:18px;font-weight:700;color:var(--accent);transition:color .3s}
.ai-lab-content .stat-val.danger{color:#ff3b30}
.ai-lab-content .stat-val.good{color:#34c759}

/* ── GRADIENT SIMULATION ─────────────────────────────────────── */
.ai-lab-content .gradient-sim{display:flex;flex-direction:column;gap:14px}
.ai-lab-content .gs-controls{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ai-lab-content .gs-ctrl-item{display:flex;align-items:center;gap:10px}
.ai-lab-content .gs-label{font-size:12px;color:var(--text-2);white-space:nowrap}
.ai-lab-content .gs-val{font-family:var(--font-mono);font-size:12px;color:var(--accent);min-width:28px}
.ai-lab-content .gs-switch{display:flex;gap:4px;margin-left:auto}
.ai-lab-content .gs-mode-btn{padding:5px 12px;border-radius:5px;font-size:11px;font-family:var(--font-mono);border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-3);cursor:pointer;transition:all .15s}
.ai-lab-content .gs-mode-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(168,85,247,.08)}
.ai-lab-content .gs-canvas-wrap{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.ai-lab-content .gs-canvas-wrap canvas{width:100%;height:auto;display:block}
.ai-lab-content .gs-legend{display:flex;gap:20px;justify-content:center}
.ai-lab-content .gs-leg-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-2)}
.ai-lab-content .gs-dot{width:10px;height:10px;border-radius:50%;display:inline-block}

/* ── RESIDUAL BLOCK CONFIG ────────────────────────────────────── */
.ai-lab-content .resblock-config{display:flex;flex-direction:column;gap:16px}
.ai-lab-content .rb-type-toggle{display:flex;gap:6px}
.ai-lab-content .rb-type-btn{padding:7px 18px;border-radius:6px;font-family:var(--font-mono);font-size:12px;font-weight:600;border:1px solid var(--border-s);background:rgba(255,255,255,.03);color:var(--text-2);cursor:pointer;transition:all .18s}
.ai-lab-content .rb-type-btn.active{background:rgba(168,85,247,.12);border-color:rgba(168,85,247,.5);color:var(--accent)}
.ai-lab-content .rb-sliders{display:flex;flex-direction:column;gap:10px}
.ai-lab-content .rbs-row{display:grid;grid-template-columns:130px 1fr 48px;align-items:center;gap:12px}
.ai-lab-content .rbs-label{font-size:13px;color:var(--text-2)}
.ai-lab-content .rbs-val{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent);text-align:right}
.ai-lab-content .rb-diagram{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
.ai-lab-content .rb-diagram svg{width:100%;height:auto;display:block}
.ai-lab-content .rb-stats{display:flex;gap:16px;flex-wrap:wrap;padding:12px 14px;background:rgba(41,151,255,.05);border:1px solid rgba(41,151,255,.15);border-radius:var(--r-sm)}
.ai-lab-content .rbs-stat{font-family:var(--font-mono);font-size:12px;color:var(--text-2)}
.ai-lab-content .rbs-stat strong{color:#2997ff}

/* ── EFFICIENTNET EXPLORER ────────────────────────────────────── */
.ai-lab-content .eff-explorer{display:flex;flex-direction:column;gap:20px}
.ai-lab-content .eff-phi-control{display:flex;flex-direction:column;gap:6px}
.ai-lab-content .eff-phi-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--text-3);padding:0 2px}
.ai-lab-content .eff-phi-slider{width:100%;accent-color:var(--accent)}
.ai-lab-content .eff-phi-val{font-family:var(--font-disp);font-size:20px;font-weight:700;color:var(--accent);text-align:center}
.ai-lab-content .eff-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ai-lab-content .eff-dim-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;text-align:center;transition:border-color .3s}
.ai-lab-content .eff-dim-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:8px}
.ai-lab-content .eff-dim-val{font-family:var(--font-disp);font-size:28px;font-weight:800;margin-bottom:6px;transition:all .35s var(--ease)}
.ai-lab-content .eff-dim-bar-wrap{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin:0 auto 6px}
.ai-lab-content .eff-dim-bar{height:100%;border-radius:3px;transition:width .4s var(--ease)}
.ai-lab-content .eff-dim-sub{font-size:11px;color:var(--text-3);font-family:var(--font-mono)}
.ai-lab-content .eff-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.ai-lab-content .eff-acc-card{background:var(--bg);border:1px solid rgba(52,199,89,.2);border-radius:var(--r-sm);padding:14px;text-align:center}
.ai-lab-content .eff-param-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;text-align:center}

.ai-lab-content .scaling-compare{display:flex;flex-direction:column;gap:8px}
.ai-lab-content .sc-row{display:grid;grid-template-columns:170px 1fr 60px;align-items:center;gap:12px}
.ai-lab-content .sc-name{font-family: var(--font-disp); font-size: 14px; font-weight: 700; color: var(--text)}
.ai-lab-content .sc-level{font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: .04em; margin-top: 2px;}
.ai-lab-content .sc-bar-wrap{height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.ai-lab-content .sc-bar{height:100%;border-radius:5px;transition:width .4s var(--ease)}
.ai-lab-content .sc-acc{font-family:var(--font-mono);font-size:11px;color:var(--text-2);text-align:right}

/* ── UPLOAD PIPELINE ──────────────────────────────────────────── */
/* ── UPLOAD SECTION ─────────────────────────────────────────── */
/* ── UPLOAD SECTION (redesigned) ─────────────────────────── */
.ai-lab-content .up-layout{
  display:grid;
  grid-template-columns:200px 1fr;
  grid-template-rows:auto auto;
  gap:16px;
  align-items:start;
}

/* Drop zone (top-left) */
.ai-lab-content .up-zone-wrap{
  display:flex;flex-direction:column;gap:8px;
  grid-row:1;grid-column:1;width:200px;
}
.ai-lab-content .upload-drop-zone{
  position:relative;width:200px;height:200px;
  border-radius:var(--r-sm);overflow:hidden;
  border:2px dashed rgba(168,85,247,.4);background:rgba(168,85,247,.03);
  transition:border-color .2s,background .2s;cursor:pointer;
  flex-shrink:0;
}
.ai-lab-content .upload-drop-zone:hover{border-color:var(--accent);background:rgba(168,85,247,.03)}
.ai-lab-content .upload-drop-zone.drag-over{border-color:var(--accent);background:rgba(168,85,247,.06);border-style:solid}
.ai-lab-content .upload-drop-zone.has-image{border-color:rgba(52,199,89,.5);border-style:solid}
.ai-lab-content #uploadPreview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.ai-lab-content .udz-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  background:var(--bg);transition:opacity .25s;
}
.ai-lab-content .udz-overlay.hidden{opacity:0}
.ai-lab-content .udz-icon{font-size:28px;line-height:1}
.ai-lab-content .udz-text{font-size:12px;font-weight:500;color:var(--text-2);text-align:center;line-height:1.4}
.ai-lab-content .udz-sub{font-size:10px;color:var(--text-3)}
.ai-lab-content .udz-pick-btn{
  width:200px;padding:9px;background:rgba(255,255,255,.05);
  border:1px solid var(--border-s);border-radius:var(--r-sm);
  color:var(--text-2);font-size:13px;font-weight:600;cursor:pointer;
  transition:all .15s;font-family:var(--font-body);text-align:center;
}
.ai-lab-content .udz-pick-btn:hover{background:rgba(168,85,247,.1);border-color:var(--accent);color:var(--accent)}

/* Feature maps (top-right, spans col 2) */
.ai-lab-content .up-maps-wrap{
  display:flex;flex-direction:column;gap:6px;
  grid-row:1;grid-column:2;
  min-height:180px;
}
.ai-lab-content .up-maps-header{display:flex;flex-direction:column;gap:2px}
.ai-lab-content .up-right-title{font-family:var(--font-disp);font-size:14px;font-weight:700;color:var(--text)}
.ai-lab-content .up-right-sub{font-size:11px;color:var(--text-3)}

/* Controls row (bottom, full width) */
.ai-lab-content .up-controls-row{
  grid-row:2;grid-column:1/-1;
  display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
  padding-top:12px;border-top:1px solid var(--border);
}
.ai-lab-content .up-ctrl-group{display:flex;flex-direction:column;gap:6px;flex-shrink:0}
.ai-lab-content .up-ctrl-layers{flex:1;min-width:200px}
.ai-lab-content .up-ctrl-actions{display:flex;flex-direction:column;gap:8px;min-width:200px}

.ai-lab-content .up-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);display:block}
.ai-lab-content .up-layer-btns{display:flex;flex-wrap:wrap;gap:4px}
.ai-lab-content .up-layer-btn{
  padding:4px 8px;border-radius:4px;font-size:10px;font-family:var(--font-mono);
  border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-3);
  cursor:pointer;transition:all .15s;
}
.ai-lab-content .up-layer-btn:hover{border-color:var(--accent);color:var(--accent)}
.ai-lab-content .up-layer-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(168,85,247,.1)}
.ai-lab-content .up-run-btn{
  padding:10px 20px;background:var(--accent);color:#fff;border:none;
  border-radius:var(--r-sm);font-size:13px;font-weight:600;cursor:pointer;
  transition:all .2s;font-family:var(--font-body);width:100%;
}
.ai-lab-content .up-run-btn:disabled{opacity:.4;cursor:not-allowed}
.ai-lab-content .up-run-btn:not(:disabled):hover{background:#9333ea;transform:translateY(-1px)}
.ai-lab-content .up-run-btn.running{background:#ff9f0a}
.ai-lab-content .feature-map-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:5px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:8px;flex:1;min-height:160px;
}
.ai-lab-content .fm-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:opacity .2s}
.ai-lab-content .fm-item:hover{opacity:.75}
.ai-lab-content .fm-canvas{width:52px;height:52px;border-radius:4px;image-rendering:pixelated;border:1px solid var(--border);display:block}
.ai-lab-content .fm-label{font-family:var(--font-mono);font-size:8px;color:var(--text-3);text-align:center}
.ai-lab-content .fm-placeholder{
  grid-column:1/-1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:24px;opacity:.4;
}
.ai-lab-content .fmp-icon{font-size:24px}
.ai-lab-content .fmp-text{font-size:11px;color:var(--text-3)}
.ai-lab-content .fm-layer-info{
  padding:8px 12px;background:rgba(168,85,247,.05);border:1px solid rgba(168,85,247,.15);
  border-radius:var(--r-sm);font-family:var(--font-mono);font-size:11px;color:var(--text-2);
  display:flex;gap:14px;flex-wrap:wrap;
}
.ai-lab-content .fli-item strong{color:var(--accent)}

/* tensor flow */
.ai-lab-content .tensor-flow{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:20px;min-height:160px;display:flex;flex-direction:column;gap:14px}
.ai-lab-content .tf-placeholder{margin:auto;font-size:13px;color:var(--text-3);text-align:center}
.ai-lab-content .tf-step{display:none;flex-direction:column;gap:8px;animation:fadeUp .35s ease}
.ai-lab-content .tf-step.active{display:flex}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ai-lab-content .tf-step-header{display:flex;align-items:center;gap:10px}
.ai-lab-content .tf-step-num{width:24px;height:24px;background:var(--accent);color:#fff;border-radius:50%;font-family:var(--font-mono);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-lab-content .tf-step-title{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text)}
.ai-lab-content .tf-step-shape{font-family:var(--font-mono);font-size:11px;color:#34c759;margin-left:auto}
.ai-lab-content .tf-step-desc{font-size:12.5px;color:var(--text-2);line-height:1.6;padding-left:34px}
.ai-lab-content .tf-step-canvases{display:flex;gap:6px;padding-left:34px;flex-wrap:wrap;margin-top:4px}
.ai-lab-content .tf-step-canvases canvas{border-radius:3px;border:1px solid var(--border);image-rendering:pixelated}
.ai-lab-content .tf-controls{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.ai-lab-content .tf-step-indicator{font-family:var(--font-mono);font-size:12px;color:var(--text-2);flex:1;text-align:center}

/* ── BACKBONE CHOOSER ─────────────────────────────────────────── */
.ai-lab-content .bc-questions{display:flex;flex-direction:column;gap:16px}
.ai-lab-content .bc-q{font-size:14px;font-weight:500;color:var(--text);margin-bottom:6px}
.ai-lab-content .bc-opts{display:flex;flex-wrap:wrap;gap:7px}
.ai-lab-content .bc-opt{padding:8px 16px;border-radius:var(--r-sm);border:1px solid var(--border-s);background:rgba(255,255,255,.03);font-size:12px;font-family:var(--font-mono);color:var(--text-2);cursor:pointer;transition:all .18s}
.ai-lab-content .bc-opt:hover{border-color:var(--accent);color:var(--text);background:rgba(168,85,247,.07)}
.ai-lab-content .bc-opt.selected{border-color:var(--accent);background:rgba(168,85,247,.12);color:var(--accent)}
.ai-lab-content .bc-result{margin-top:14px;padding:18px 20px;background:rgba(52,199,89,.06);border:1px solid rgba(52,199,89,.25);border-radius:var(--r-sm)}
.ai-lab-content .bc-result-title{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#34c759;margin-bottom:4px}
.ai-lab-content .bc-result-model{font-family:var(--font-disp);font-size:22px;font-weight:700;color:var(--text);margin-bottom:5px}
.ai-lab-content .bc-result-reason{font-size:13px;color:var(--text-2);line-height:1.65}
.ai-lab-content .bc-reset{margin-top:10px;font-family:var(--font-mono);font-size:11px;color:var(--text-3);background:none;border:1px solid var(--border);border-radius:4px;padding:4px 10px;cursor:pointer;transition:all .15s}
.ai-lab-content .bc-reset:hover{color:var(--text);border-color:var(--border-s)}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media(max-width:900px){
  .up-layout{grid-template-columns:1fr}
  .upload-drop-zone{max-width:240px;margin:0 auto;width:100%}
  .udz-pick-btn{width:100%}
  .up-zone-wrap{width:auto}
  .stats-bar{grid-template-columns:repeat(2,1fr)}
  .eff-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .layer-item{grid-template-columns:18px 72px 1fr auto auto}
  .gs-controls{flex-direction:column;align-items:flex-start}
  .eff-grid{grid-template-columns:1fr}
  .rbs-row{grid-template-columns:100px 1fr 40px}
  .sc-row{grid-template-columns:120px 1fr 50px}
  .eff-bottom{grid-template-columns:1fr}
}

/* ── Architecture Timeline (cnn-arch.html) ───────────────────── */
.ai-lab-content .arch-timeline{display:flex;flex-direction:column;gap:0;margin:28px 0;position:relative}
.ai-lab-content .arch-timeline::before{content:'';position:absolute;left:52px;top:20px;bottom:20px;width:2px;background:linear-gradient(to bottom,#2997ff,#a855f7,#ff9f0a,#34c759,#ff3b30);opacity:.3}
.ai-lab-content .atl-item{display:grid;grid-template-columns:48px 28px 1fr;align-items:center;gap:12px;padding:8px 0}
.ai-lab-content .atl-year{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-3);text-align:right}
.ai-lab-content .atl-dot{width:12px;height:12px;border-radius:50%;background:var(--dc,var(--accent));border:2px solid var(--bg);box-shadow:0 0 0 2px var(--dc,var(--accent));justify-self:center;z-index:1}
.ai-lab-content .atl-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;transition:border-color .2s,background .2s}
.ai-lab-content .atl-card:hover{border-color:var(--border-s);background:rgba(255,255,255,.03)}
.ai-lab-content .atl-name{font-family:var(--font-disp);font-size:15px;font-weight:700;color:var(--text);width:120px;flex-shrink:0}
.ai-lab-content .atl-stat{font-family:var(--font-mono);font-size:12px;color:var(--text-2);width:140px;flex-shrink:0}
.ai-lab-content .atl-num{color:var(--accent);font-weight:700}
.ai-lab-content .atl-acc{font-family:var(--font-mono);font-size:12px;color:var(--text-2);width:110px;flex-shrink:0}
.ai-lab-content .atl-acc strong{color:#34c759}
.ai-lab-content .atl-note{font-size:12px;color:var(--text-3);flex:1;line-height:1.5}

/* ── Bottleneck compare ───────────────────────────────────────── */
.ai-lab-content .bottleneck-compare{display:flex;gap:16px;align-items:flex-start;margin:8px 0 4px}
.ai-lab-content .btn-col{flex:1}
.ai-lab-content .btn-col-title{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3);margin-bottom:10px}
.ai-lab-content .btn-layers{display:flex;flex-direction:column;gap:4px}
.ai-lab-content .btn-layer{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-left:3px solid var(--lc,var(--accent));border-radius:4px;padding:8px 12px;font-family:var(--font-mono);font-size:12px;color:var(--text-2);line-height:1.4}
.ai-lab-content .btn-params{font-size:10px;color:var(--text-3);margin-top:2px}
.ai-lab-content .btn-skip{text-align:center;font-family:var(--font-mono);font-size:11px;color:var(--accent);padding:4px 0;letter-spacing:.05em}
.ai-lab-content .btn-total{font-family:var(--font-mono);font-size:12px;color:var(--text-2);padding:8px 12px;background:rgba(255,255,255,.03);border-radius:4px;border:1px solid var(--border);text-align:center}
.ai-lab-content .btn-vs{font-family:var(--font-disp);font-size:20px;font-weight:700;color:var(--text-3);align-self:center;flex-shrink:0;padding:0 4px}

/* ── ResNet explorer cards ────────────────────────────────────── */
.ai-lab-content .resnet-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:4px}
.ai-lab-content .rn-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;text-align:center;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.ai-lab-content .rn-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rc,var(--accent));opacity:.6}
.ai-lab-content .rn-card:hover,.rn-card.active{border-color:var(--rc,var(--accent));background:rgba(255,255,255,.03)}
.ai-lab-content .rn-card.active::before{opacity:1}
.ai-lab-content .rn-name{font-family:var(--font-disp);font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px}
.ai-lab-content .rn-bar-wrap{height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin:6px 0}
.ai-lab-content .rn-bar{height:100%;border-radius:3px;background:var(--rc,var(--accent));transition:width .4s cubic-bezier(.22,.61,.36,1)}
.ai-lab-content .rn-label{font-family:var(--font-mono);font-size:10px;color:var(--text-3);margin-bottom:2px}
.ai-lab-content .rn-val{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text-2)}

/* ── EfficientNet explorer ────────────────────────────────────── */
.ai-lab-content .eff-explorer{display:flex;flex-direction:column;gap:20px}
.ai-lab-content .eff-phi-control{display:flex;flex-direction:column;gap:6px}
.ai-lab-content .eff-phi-labels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--text-3);padding:0 2px}
.ai-lab-content .eff-phi-slider{width:100%;accent-color:var(--accent)}
.ai-lab-content .eff-phi-val{font-family:var(--font-disp);font-size:20px;font-weight:700;color:var(--accent);text-align:center}
.ai-lab-content .eff-dim-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;text-align:center;transition:border-color .3s}
.ai-lab-content .eff-dim-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin-bottom:8px}
.ai-lab-content .eff-dim-val{font-family:var(--font-disp);font-size:28px;font-weight:800;margin-bottom:6px;transition:all .35s var(--ease)}
.ai-lab-content .eff-dim-bar-wrap{height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden;margin:0 auto 6px}
.ai-lab-content .eff-dim-bar{height:100%;border-radius:3px;transition:width .4s var(--ease)}
.ai-lab-content .eff-dim-sub{font-size:11px;color:var(--text-3);font-family:var(--font-mono)}
.ai-lab-content .eff-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.ai-lab-content .eff-acc-card{background:var(--bg);border:1px solid rgba(52,199,89,.2);border-radius:var(--r-sm);padding:14px;text-align:center}
.ai-lab-content .eff-param-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px;text-align:center}
.ai-lab-content .sc-row{display:grid;grid-template-columns:170px 1fr 60px;align-items:center;gap:12px}
.ai-lab-content .sc-name{font-family: var(--font-disp); font-size: 14px; font-weight: 700; color: var(--text)}
.ai-lab-content .sc-level{font-family: var(--font-mono); font-size: 10px; color: var(--text-3); letter-spacing: .04em; margin-top: 2px;}
.ai-lab-content .sc-bar-wrap{height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.ai-lab-content .sc-bar{height:100%;border-radius:5px;transition:width .4s var(--ease)}
.ai-lab-content .sc-acc{font-family:var(--font-mono);font-size:11px;color:var(--text-2);text-align:right}

/* ── Arch compare chart ───────────────────────────────────────── */
.ai-lab-content .ac-tabs{display:flex;gap:6px;margin-bottom:16px}
.ai-lab-content .ac-tab{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.07em;padding:6px 14px;border-radius:var(--r-sm);border:1px solid var(--border);background:transparent;color:var(--text-3);cursor:pointer;transition:all .2s}
.ai-lab-content .ac-tab.active,.ac-tab:hover{border-color:var(--accent);color:var(--accent);background:rgba(41,151,255,.07)}
.ai-lab-content .ac-row{display:grid;grid-template-columns:130px 1fr 80px 60px;align-items:center;gap:10px}
.ai-lab-content .ac-model{font-family:var(--font-mono);font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-lab-content .ac-bar-wrap{height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.ai-lab-content .ac-bar{height:100%;border-radius:5px;transition:width .45s cubic-bezier(.22,.61,.36,1)}
.ai-lab-content .ac-metric{font-family:var(--font-mono);font-size:11px;color:var(--text-3);text-align:right}
.ai-lab-content .ac-acc{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text);text-align:right}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:700px){
  .atl-item{grid-template-columns:40px 20px 1fr;gap:8px}
  .atl-card{flex-direction:column;align-items:flex-start;gap:6px}
  .atl-name,.atl-stat,.atl-acc{width:auto}
  .bottleneck-compare{flex-direction:column}
  .btn-vs{align-self:center;transform:rotate(90deg)}
  .sc-row{grid-template-columns:120px 1fr 50px}
  .ac-row{grid-template-columns:100px 1fr 70px}
  .ac-acc{display:none}
  .eff-bottom{grid-template-columns:1fr}
  .resnet-cards{grid-template-columns:repeat(2,1fr)}
}

/* ── EfficientNet cs-display grid (cnn-arch.html) ────────────── */
.ai-lab-content .cs-slider-row{display:grid;grid-template-columns:200px 1fr 60px;align-items:center;gap:16px;margin-bottom:20px}
.ai-lab-content .cs-display{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.ai-lab-content .cs-display .eff-dim-card:nth-last-child(-n+2){
  /* acc + params cards span full width at bottom */
  grid-column: span 1;
}
/* override to 5-column grid for the bottom 2 cards */
@supports (grid-template-columns: subgrid) {
  .cs-display{ grid-template-columns: repeat(3,1fr) }
}
/* Simple fix: last 2 cards get different column-span via JS innerHTML,
   just make sure grid shows properly */
.ai-lab-content .cs-display .eff-acc-card,
.ai-lab-content .cs-display .eff-param-card{ grid-column:span 1 }

/* ── Resblock diagram container ────────────────────────────────── */
.ai-lab-content .resblock-diagram{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  overflow:visible;
  min-height:300px;
}
.ai-lab-content .resblock-diagram svg{
  width:100%;
  height:auto;
  display:block;
  overflow:visible;
}
.ai-lab-content .resblock-caption{
  font-size:13px;color:var(--text-2);line-height:1.7;
  margin-top:12px;padding:10px 12px;
  background:var(--bg);border-radius:var(--r-sm);
  border:1px solid var(--border);
}
/* ── Builder layout top ──────────────────────────────────────── */
.ai-lab-content .builder-top {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* ── Upload server hint ───────────────────────────────────────── */
.ai-lab-content .up-server-hint {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,214,0,.05);
  border: 1px solid rgba(255,214,0,.2);
  border-radius: var(--r-sm);
}
.ai-lab-content .ush-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ai-lab-content .ush-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.ai-lab-content .ush-desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 6px;
}
.ai-lab-content .ush-desc code {
  background: rgba(255,255,255,.07);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #ffd600;
}
.ai-lab-content .ush-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
}
.ai-lab-content .ush-check input { accent-color: #ffd600; }

/* ── Up-arch-select spacing ───────────────────────────────────── */
.ai-lab-content .up-arch-select { display: flex; flex-direction: column; gap: 5px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 700px) {
  .up-server-hint { flex-direction: column; gap: 6px; }
}

/* ═══ Morphological Transforms lesson styles ═══ */
/* ── SE Designer ─────────────────────────────────────────────── */
.ai-lab-content .se-designer{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.ai-lab-content .se-left{display:flex;flex-direction:column;gap:10px}
.ai-lab-content .se-header-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-lab-content .se-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);white-space:nowrap}
.ai-lab-content .se-preset-btns{display:flex;gap:5px;flex-wrap:wrap}
.ai-lab-content .se-preset{padding:4px 10px;border-radius:5px;font-size:11px;font-family:var(--font-mono);border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-3);cursor:pointer;transition:all .15s}
.ai-lab-content .se-preset:hover{border-color:var(--accent);color:var(--accent);background:rgba(41,151,255,.07)}
.ai-lab-content .se-preset.active{border-color:var(--accent);color:var(--accent);background:rgba(41,151,255,.12)}

.ai-lab-content .se-grid-wrap{background:var(--bg);border:1px solid var(--border-s);border-radius:var(--r-sm);padding:10px;display:inline-block}
.ai-lab-content .se-grid{display:grid;gap:3px}
.ai-lab-content .se-cell{width:28px;height:28px;border-radius:4px;cursor:pointer;border:1px solid var(--border);background:rgba(255,255,255,.03);transition:all .12s;display:flex;align-items:center;justify-content:center;font-size:14px}
.ai-lab-content .se-cell.on{background:var(--accent);border-color:rgba(41,151,255,.8)}
.ai-lab-content .se-cell.on::after{content:'•';color:#fff;font-size:10px}
.ai-lab-content .se-info{font-family:var(--font-mono);font-size:10px;color:var(--text-3);line-height:1.8}
.ai-lab-content .se-info span{color:var(--accent)}

.ai-lab-content .se-right{display:flex;flex-direction:column;gap:8px}
.ai-lab-content .se-preview-row{display:flex;gap:10px;flex-wrap:wrap}
.ai-lab-content .se-prev-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.ai-lab-content .se-prev-item canvas{border-radius:6px;border:1px solid var(--border-s);image-rendering:pixelated;display:block}
.ai-lab-content .se-prev-item span{font-family:var(--font-mono);font-size:9px;color:var(--text-3)}

/* ── Morph Demo (Erosion/Dilation) ───────────────────────────── */
.ai-lab-content .morph-demo{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.ai-lab-content .md-canvas-col{display:flex;flex-direction:column;gap:8px;align-items:center}
.ai-lab-content .md-col-label{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-2);text-align:center}
.ai-lab-content .draw-canvas{border-radius:6px;border:1px solid var(--border-s);cursor:crosshair;display:block;image-rendering:pixelated}
.ai-lab-content .md-draw-tools{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.ai-lab-content .md-tool{padding:4px 8px;border-radius:5px;font-size:11px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-3);cursor:pointer;transition:all .15s}
.ai-lab-content .md-tool:hover{border-color:var(--accent);color:var(--accent)}
.ai-lab-content .md-tool.active{border-color:var(--accent);color:var(--accent);background:rgba(41,151,255,.1)}
.ai-lab-content .md-tool.clear{border-color:rgba(255,55,95,.3);color:#ff375f}
.ai-lab-content .md-tool.clear:hover{background:rgba(255,55,95,.1)}
.ai-lab-content .md-op-desc{font-size:11px;color:var(--text-3);max-width:170px;text-align:center;line-height:1.5}
.ai-lab-content .md-sidebar{display:flex;flex-direction:column;gap:14px;min-width:120px}
.ai-lab-content .md-se-ctrl{display:flex;flex-direction:column;gap:5px}
.ai-lab-content .md-se-btns{display:flex;gap:4px;flex-wrap:wrap}
.ai-lab-content .md-se-btn{padding:3px 8px;border-radius:4px;font-size:10px;font-family:var(--font-mono);border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-3);cursor:pointer;transition:all .12s}
.ai-lab-content .md-se-btn:hover{border-color:var(--accent);color:var(--accent)}
.ai-lab-content .md-se-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(41,151,255,.1)}
.ai-lab-content .se-preview-mini{border-radius:4px;border:1px solid var(--border-s);display:block;image-rendering:pixelated}

/* ── Opening/Closing Demo ────────────────────────────────────── */
.ai-lab-content .open-close-demo{display:flex;flex-direction:column;gap:14px}
.ai-lab-content .ocd-tabs{display:flex;gap:6px}
.ai-lab-content .ocd-tab{padding:7px 18px;border-radius:6px;font-size:12px;font-family:var(--font-mono);border:1px solid var(--border-s);background:rgba(255,255,255,.03);color:var(--text-2);cursor:pointer;transition:all .15s}
.ai-lab-content .ocd-tab:hover{border-color:var(--accent);color:var(--accent)}
.ai-lab-content .ocd-tab.active{background:rgba(41,151,255,.12);border-color:var(--accent);color:var(--accent)}
.ai-lab-content .ocd-scene-btns{display:flex;gap:6px;flex-wrap:wrap}
.ai-lab-content .ocd-scene{padding:5px 12px;border-radius:5px;font-size:11px;font-family:var(--font-mono);border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-3);cursor:pointer;transition:all .12s}
.ai-lab-content .ocd-scene:hover{border-color:var(--accent);color:var(--accent)}
.ai-lab-content .ocd-scene.active{border-color:var(--accent);color:var(--accent);background:rgba(41,151,255,.08)}
.ai-lab-content .ocd-steps{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-lab-content .ocd-step{display:flex;flex-direction:column;align-items:center;gap:6px}
.ai-lab-content .ocd-step canvas{border-radius:6px;border:1px solid var(--border-s);image-rendering:pixelated;display:block}
.ai-lab-content .ocd-step-label{font-family:var(--font-mono);font-size:10px;color:var(--text-2);text-align:center}
.ai-lab-content .ocd-arrow{font-family:var(--font-mono);font-size:20px;color:var(--accent);font-weight:700}
.ai-lab-content .ocd-se-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ai-lab-content .ocd-se-ctrl label{font-size:12px;color:var(--text-2);white-space:nowrap}
.ai-lab-content .ocd-se-ctrl input[type="range"]{flex:1;min-width:100px}

/* ── Operations table ────────────────────────────────────────── */
.ai-lab-content .ops-table{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:20px}
.ai-lab-content .ot-row{display:grid;grid-template-columns:120px 1.2fr 2fr 160px;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border);align-items:center;font-size:12.5px}
.ai-lab-content .ot-row:last-child{border-bottom:none}
.ai-lab-content .ot-header{background:rgba(255,255,255,.03);font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3)}
.ai-lab-content .ot-name{font-family:var(--font-mono);font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px}
.ai-lab-content .ot-name.grad{background:rgba(41,151,255,.12);color:#2997ff}
.ai-lab-content .ot-name.tophat{background:rgba(255,214,0,.12);color:#ffd600}
.ai-lab-content .ot-name.blackhat{background:rgba(168,85,247,.12);color:#a855f7}
.ai-lab-content .ot-name.hitmiss{background:rgba(52,199,89,.12);color:#34c759}
.ai-lab-content .ot-formula{font-family:var(--font-mono);font-size:11px;color:var(--text-2)}
.ai-lab-content .ot-const{font-family:var(--font-mono);font-size:10px;color:var(--accent)}

/* ── Advanced ops demo ───────────────────────────────────────── */
.ai-lab-content .adv-ops-demo{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.ai-lab-content .adv-draw-col{display:flex;flex-direction:column;gap:8px;align-items:center}
.ai-lab-content .adv-draw-tools{display:flex;gap:4px}
.ai-lab-content .adv-scene-sel{background:var(--bg);border:1px solid var(--border-s);border-radius:var(--r-sm);color:var(--text-2);font-family:var(--font-mono);font-size:11px;padding:4px 8px;outline:none}
.ai-lab-content .adv-results-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}
.ai-lab-content .adv-result{display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px}
.ai-lab-content .adv-result canvas{border-radius:4px;border:1px solid var(--border-s);image-rendering:pixelated;display:block}
.ai-lab-content .adv-result-name{font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--accent);text-align:center}
.ai-lab-content .adv-result-eq{font-family:var(--font-mono);font-size:9px;color:var(--text-3);text-align:center}
.ai-lab-content .adv-result-use{font-size:10px;color:var(--text-3);text-align:center;line-height:1.4}
.ai-lab-content .adv-se-ctrl{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap}
.ai-lab-content .adv-se-ctrl label{font-size:12px;color:var(--text-2);white-space:nowrap}
.ai-lab-content .adv-se-ctrl input[type="range"]{flex:1;min-width:80px}

/* ── Skeleton demo ───────────────────────────────────────────── */
.ai-lab-content .skeleton-demo{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.ai-lab-content .sk-left,.sk-right{display:flex;flex-direction:column;gap:8px;align-items:center}
.ai-lab-content .sk-shape-btns{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.ai-lab-content .sk-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-lab-content .sk-prog-wrap{flex:1;min-width:60px;height:4px;background:var(--border-s);border-radius:2px;overflow:hidden}
.ai-lab-content .sk-prog-fill{height:100%;background:var(--accent);border-radius:2px;transition:width .2s;width:0}
.ai-lab-content .sk-info{font-family:var(--font-mono);font-size:10px;color:var(--text-3);text-align:center;max-width:160px;line-height:1.6}

/* ── Reconstruction demo ─────────────────────────────────────── */
.ai-lab-content .recon-demo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-lab-content .recon-item{display:flex;flex-direction:column;align-items:center;gap:5px}
.ai-lab-content .recon-item canvas{border-radius:6px;border:1px solid var(--border-s);image-rendering:pixelated;display:block}
.ai-lab-content .recon-arrow{font-family:var(--font-mono);font-size:18px;color:var(--accent);font-weight:700}
.ai-lab-content .recon-scene-btns{display:flex;gap:6px;flex-wrap:wrap}

/* ── Sandbox ─────────────────────────────────────────────────── */
.ai-lab-content .sandbox-card{background:var(--bg-card);border:1px solid var(--border-s);border-radius:var(--r);overflow:hidden;border-left:3px solid var(--accent)}
.ai-lab-content .sb-toolbar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.02);flex-wrap:wrap}
.ai-lab-content .sb-tools,.sb-scenes{display:flex;gap:5px;flex-wrap:wrap}
.ai-lab-content .sb-tool-btn{padding:5px 10px;border-radius:5px;font-size:11px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-3);cursor:pointer;transition:all .12s}
.ai-lab-content .sb-tool-btn:hover{border-color:var(--accent);color:var(--accent)}
.ai-lab-content .sb-tool-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(41,151,255,.1)}
.ai-lab-content .sb-tool-btn.clear{border-color:rgba(255,55,95,.3);color:#ff375f}
.ai-lab-content .sb-scene-btn{padding:4px 10px;border-radius:4px;font-size:10px;font-family:var(--font-mono);border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-3);cursor:pointer;transition:all .12s}
.ai-lab-content .sb-scene-btn:hover{border-color:#34c759;color:#34c759;background:rgba(52,199,89,.07)}
.ai-lab-content .sb-se-ctrl{display:flex;align-items:center;gap:8px;margin-left:auto}
.ai-lab-content .sb-se-ctrl input[type="range"]{width:80px}
.ai-lab-content .sb-size-lbl{font-family:var(--font-mono);font-size:11px;color:var(--accent);min-width:32px}
.ai-lab-content .sb-main{display:grid;grid-template-columns:200px 1fr;gap:0}
.ai-lab-content .sb-input-col{display:flex;flex-direction:column;gap:6px;align-items:center;padding:16px;border-right:1px solid var(--border)}
.ai-lab-content .sb-col-label{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-3)}
.ai-lab-content .sb-canvas{width:200px;height:200px}
.ai-lab-content .sb-ops-grid{display:grid;grid-template-columns:repeat(5,1fr);padding:12px;gap:10px}
.ai-lab-content .sb-op{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg);transition:border-color .15s;cursor:pointer}
.ai-lab-content .sb-op:hover{border-color:var(--accent)}
.ai-lab-content .sb-op canvas{border-radius:4px;border:1px solid var(--border);image-rendering:pixelated;display:block;width:100%;height:auto}
.ai-lab-content .sb-op-name{font-family:var(--font-mono);font-size:9px;color:var(--text-3);text-align:center}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:900px){
  .se-designer{grid-template-columns:1fr}
  .morph-demo{justify-content:center}
  .adv-ops-demo{justify-content:center}
  .sb-main{grid-template-columns:1fr}
  .sb-ops-grid{grid-template-columns:repeat(5,1fr)}
  .ot-row{grid-template-columns:1fr 1fr}
  .ot-header > *:nth-child(n+3),.ot-row > *:nth-child(n+3){display:none}
}
@media(max-width:600px){
  .sb-ops-grid{grid-template-columns:repeat(3,1fr)}
  .ocd-steps{flex-direction:column;align-items:center}
  .adv-results-grid{grid-template-columns:1fr 1fr}
}

/* OpenCV and Pixel Anatomy lesson styles live inline in their scoped page templates. */

/* ═══ Generative AI overview styles ═══ */
.ai-lab-overview .gen-hero { overflow: hidden; }
.ai-lab-overview .gen-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .18; pointer-events: none;
}

/* ── Level badges ────────────────────────────────────────────── */
.ai-lab-overview .level-badges { display: flex; gap: 6px; margin-bottom: 8px; }
.ai-lab-overview .lvl {
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: 9px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 99px;
}
.ai-lab-overview .lvl.pemula  { background: rgba(52,199,89,.12);  color: #34c759; border: 1px solid rgba(52,199,89,.25); }
.ai-lab-overview .lvl.inter   { background: rgba(41,151,255,.12); color: #2997ff; border: 1px solid rgba(41,151,255,.25); }
.ai-lab-overview .lvl.adv     { background: rgba(239,68,68,.12);  color: #ef4444; border: 1px solid rgba(239,68,68,.25); }

/* ── Learning path guide in sidebar ─────────────────────────── */
.ai-lab-overview .gen-path-guide { margin-top: 8px; }
.ai-lab-overview .gpg-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.ai-lab-overview .gpg-badge {
  font-family: var(--font-mono, monospace); font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 1px;
}
.ai-lab-overview .gpg-badge.pemula { background: rgba(52,199,89,.12);  color: #34c759; }
.ai-lab-overview .gpg-badge.inter  { background: rgba(41,151,255,.12); color: #2997ff; }
.ai-lab-overview .gpg-badge.adv    { background: rgba(239,68,68,.12);  color: #ef4444; }
.ai-lab-overview .gpg-text { font-size: 11px; color: var(--text-3, #55556a); line-height: 1.5; }

/* ── Diffusion process bar ───────────────────────────────────── */
.ai-lab-overview .gen-process-bar {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 28px; overflow-x: auto; padding: 4px 0;
}
.ai-lab-overview .gpb-step {
  flex-shrink: 0; padding: 10px 14px; border-radius: 8px;
  font-family: var(--font-mono, monospace); font-size: 11px;
  font-weight: 700; border: 1px solid rgba(255,255,255,.1);
  text-align: center; min-width: 70px;
}
.ai-lab-overview .gpb-step.noise-100 { background: rgba(168,85,247,.25); color: #a855f7; }
.ai-lab-overview .gpb-step.noise-75  { background: rgba(168,85,247,.18); color: #b06ef5; }
.ai-lab-overview .gpb-step.noise-50  { background: rgba(168,85,247,.12); color: #c090f0; }
.ai-lab-overview .gpb-step.noise-25  { background: rgba(168,85,247,.07); color: #d4b0f8; }
.ai-lab-overview .gpb-step.image     { background: rgba(52,199,89,.12);  color: #34c759; border-color: rgba(52,199,89,.25); }
.ai-lab-overview .gpb-arrow { color: rgba(255,255,255,.3); font-size: 14px; flex-shrink: 0; }

/* ── GAN dynamic ─────────────────────────────────────────────── */
.ai-lab-overview .gan-dynamic {
  display: flex; align-items: center; gap: 0;
  margin: 0 0 28px; background: var(--bg-card, #14141d);
  border: 1px solid rgba(255,255,255,.07); border-radius: 12px;
  overflow: hidden;
}
.ai-lab-overview .gd-box {
  flex: 1; padding: 18px 20px; text-align: center;
}
.ai-lab-overview .gd-box.generator     { border-right: 1px solid rgba(255,255,255,.07); }
.ai-lab-overview .gd-box.discriminator {}
.ai-lab-overview .gd-label {
  font-family: var(--font-disp, 'Syne', sans-serif); font-size: 15px;
  font-weight: 700; margin-bottom: 4px;
}
.ai-lab-overview .gd-box.generator     .gd-label { color: #ef4444; }
.ai-lab-overview .gd-box.discriminator .gd-label { color: #2997ff; }
.ai-lab-overview .gd-desc { font-family: var(--font-mono, monospace); font-size: 11px; color: rgba(255,255,255,.4); }
.ai-lab-overview .gd-arrows {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 0 20px; flex-shrink: 0;
}
.ai-lab-overview .gd-arrow-top, .gd-arrow-bot {
  font-family: var(--font-mono, monospace); font-size: 11px;
  color: rgba(255,255,255,.3); white-space: nowrap;
}
.ai-lab-overview .gd-arrow-bot { color: rgba(239,68,68,.5); }

/* ── VLM arch strip ──────────────────────────────────────────── */
.ai-lab-overview .vlm-arch-strip {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 28px; overflow-x: auto; padding: 4px 0;
  flex-wrap: wrap;
}
.ai-lab-overview .vas-block {
  padding: 12px 16px; border-radius: 8px; font-size: 12px;
  font-weight: 600; text-align: center; flex-shrink: 0;
  font-family: var(--font-mono, monospace); line-height: 1.4;
}
.ai-lab-overview .vas-block.image   { background: rgba(41,151,255,.1);  color: #2997ff; }
.ai-lab-overview .vas-block.encoder { background: rgba(168,85,247,.1);  color: #a855f7; }
.ai-lab-overview .vas-block.align   { background: rgba(52,199,89,.1);   color: #34c759; }
.ai-lab-overview .vas-block.text    { background: rgba(255,159,10,.1);  color: #ff9f0a; }
.ai-lab-overview .vas-arrow { font-size: 16px; color: rgba(255,255,255,.25); flex-shrink: 0; }

/* ── Prompt anatomy ──────────────────────────────────────────── */
.ai-lab-overview .prompt-anatomy {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 28px; overflow-x: auto; padding: 4px 0;
  flex-wrap: wrap;
}
.ai-lab-overview .pa-block {
  padding: 12px 16px; border-radius: 8px; font-size: 12px;
  font-weight: 600; text-align: center; flex-shrink: 0;
  font-family: var(--font-mono, monospace); line-height: 1.4;
}
.ai-lab-overview .pa-block.system   { background: rgba(99,102,241,.1);  color: #6366f1; }
.ai-lab-overview .pa-block.examples { background: rgba(245,158,11,.1);  color: #f59e0b; }
.ai-lab-overview .pa-block.query    { background: rgba(41,151,255,.1);  color: #2997ff; }
.ai-lab-overview .pa-block.output   { background: rgba(52,199,89,.1);   color: #34c759; border: 1px solid rgba(52,199,89,.25); }
.ai-lab-overview .pa-plus { font-size: 16px; color: rgba(255,255,255,.25); flex-shrink: 0; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .gen-process-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .vlm-arch-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .prompt-anatomy { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 768px) {
  .gan-dynamic { flex-direction: column; }
  .gd-box.generator { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .gd-arrows { flex-direction: row; padding: 12px 0; }
  .gen-process-bar, .vlm-arch-strip, .prompt-anatomy {
    gap: 4px;
    padding: 8px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .gpb-step, .vas-block, .pa-block {
    padding: 8px 12px;
    font-size: 10px;
    min-width: auto;
  }
  .level-badges { gap: 4px; margin-bottom: 6px; }
  .lvl { font-size: 8px; padding: 2px 6px; }
  .gen-path-guide { margin-top: 6px; }
  .gpg-item { gap: 6px; margin-bottom: 8px; }
  .gpg-badge { font-size: 8px; padding: 2px 5px; }
  .gpg-text { font-size: 10px; }
}

@media (max-width: 480px) {
  .gan-dynamic { flex-direction: column; }
  .gd-box { padding: 14px 16px; }
  .gd-box.generator { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .gd-label { font-size: 13px; margin-bottom: 3px; }
  .gd-desc { font-size: 10px; }
  .gd-arrows { flex-direction: row; padding: 10px 0; gap: 6px; }
  .gd-arrow-top, .gd-arrow-bot { font-size: 10px; }
  .gen-process-bar {
    gap: 3px;
    padding: 6px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 20px;
  }
  .gpb-step {
    padding: 6px 10px;
    font-size: 9px;
    min-width: 60px;
  }
  .gpb-arrow { font-size: 12px; }
  .vlm-arch-strip {
    gap: 3px;
    padding: 6px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 20px;
  }
  .vas-block {
    padding: 6px 10px;
    font-size: 9px;
  }
  .vas-arrow { font-size: 14px; }
  .prompt-anatomy {
    gap: 3px;
    padding: 6px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 20px;
  }
  .pa-block {
    padding: 6px 10px;
    font-size: 9px;
  }
  .pa-plus { font-size: 14px; }
  .level-badges { gap: 3px; margin-bottom: 4px; }
  .lvl { font-size: 7px; padding: 2px 5px; }
  .gen-path-guide { margin-top: 4px; }
  .gpg-item { gap: 4px; margin-bottom: 6px; }
  .gpg-badge { font-size: 7px; padding: 2px 4px; }
  .gpg-text { font-size: 9px; }
}

/* ═══ Tokenization: morpho + token display ═══ */
.ai-lab-content .example-block { background: var(--ai-bg); border: 1px solid var(--ai-border-s); border-radius: var(--ai-r-sm); padding: 14px 16px; margin-top: 14px; }
.ai-lab-content .ex-label { font-family: var(--ai-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ai-text3); margin-bottom: 8px; display: block; }
.ai-lab-content .ex-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-lab-content .ex-token { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 6px; font-family: var(--ai-mono); font-size: 11px; letter-spacing: .02em; transition: transform .15s; }
.ai-lab-content .ex-token:hover { transform: translateY(-2px); }
.ai-lab-content .tok-word    { background: rgba(191,90,242,.12); border: 1px solid rgba(191,90,242,.3); color: #bf5af2; }
.ai-lab-content .tok-prefix  { background: rgba(41,151,255,.12);  border: 1px solid rgba(41,151,255,.3);  color: #2997ff; }
.ai-lab-content .tok-suffix  { background: rgba(255,159,10,.12);  border: 1px solid rgba(255,159,10,.3);  color: #ff9f0a; }
.ai-lab-content .tok-punct   { background: rgba(255,255,255,.05); border: 1px solid var(--ai-border); color: var(--ai-text3); }
.ai-lab-content .tok-special { background: rgba(0,199,190,.12);   border: 1px solid rgba(0,199,190,.3);   color: #00c7be; font-weight: 700; }
.ai-lab-content .morpho-demo { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.ai-lab-content .morpho-word-card { background: var(--ai-card); border: 1px solid var(--ai-border-s); border-radius: var(--ai-r-sm); padding: 12px 14px; }
.ai-lab-content .morpho-original { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 700; color: var(--ai-text); margin-bottom: 8px; }
.ai-lab-content .morpho-breakdown { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ai-lab-content .morpho-piece { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ai-lab-content .morpho-value { padding: 4px 10px; border-radius: 6px; font-family: var(--ai-mono); font-size: 12px; font-weight: 700; }
.ai-lab-content .morpho-type { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--ai-text3); font-family: var(--ai-mono); }
.ai-lab-content .morpho-sep { color: var(--ai-text3); font-size: 16px; padding-top: 4px; }
.ai-lab-content .m-prefix .morpho-value { background: rgba(41,151,255,.12); border: 1px solid rgba(41,151,255,.3); color: #2997ff; }
.ai-lab-content .m-root   .morpho-value { background: rgba(48,209,88,.12);  border: 1px solid rgba(48,209,88,.3);  color: #30d158; }
.ai-lab-content .m-suffix .morpho-value { background: rgba(255,159,10,.12); border: 1px solid rgba(255,159,10,.3); color: #ff9f0a; }

/* ── Interactive Lab (BoW & TF-IDF Common) ─────────────────────────────────── */
.ai-lab-content .pg-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--ai-border-s); }
.ai-lab-content .pg-tab { padding: 11px 20px; font-family: var(--ai-mono); font-size: 11px; letter-spacing: .04em; color: var(--ai-text3); background: transparent; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: 6px; }
.ai-lab-content .pg-tab:hover { color: var(--ai-text); background: rgba(255,255,255,.03); }
.ai-lab-content .pg-tab.active { color: var(--ai-accent); border-bottom-color: var(--ai-accent); background: rgba(246,51,146,.04); }
.ai-lab-content .pg-pane { display: none; }
.ai-lab-content .pg-pane.active { display: block; }
.ai-lab-content .doc-inputs { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; }
.ai-lab-content .doc-input-row { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.ai-lab-content .doc-label { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 10px; }
.ai-lab-content .doc-label-dot { width: 10px; height: 10px; border-radius: 50%; }
.ai-lab-content .doc-label-num { font-family: var(--ai-mono); font-size: 9px; color: var(--ai-text3); }
.ai-lab-content .doc-textarea { width: 100%; min-height: 64px; max-height: 120px; background: var(--ai-bg); border: 1px solid var(--ai-border-s); border-radius: var(--ai-r-sm); padding: 10px 12px; color: var(--ai-text); font-family: var(--ai-body); font-size: 13px; line-height: 1.6; resize: vertical; outline: none; caret-color: var(--ai-accent); transition: border-color .2s; }
.ai-lab-content .doc-textarea:focus { border-color: rgba(246,51,146,.4); }
.ai-lab-content .doc-textarea::placeholder { color: var(--ai-text3); }
.ai-lab-content .pg-actions { display: flex; align-items: center; gap: 10px; padding: 0 22px 18px; flex-wrap: wrap; }
.ai-lab-content .pg-run-btn { padding: 9px 22px; border-radius: var(--ai-r-sm); background: var(--ai-accent); color: #000; font-family: var(--ai-mono); font-size: 12px; font-weight: 700; letter-spacing: .04em; border: none; cursor: pointer; transition: all .2s; }
.ai-lab-content .pg-run-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.ai-lab-content .pg-reset-btn { padding: 9px 16px; border-radius: var(--ai-r-sm); background: rgba(255,255,255,.04); border: 1px solid var(--ai-border-s); color: var(--ai-text3); font-family: var(--ai-mono); font-size: 11px; cursor: pointer; transition: all .2s; }
.ai-lab-content .pg-reset-btn:hover { color: var(--ai-text); background: rgba(255,255,255,.08); }
.ai-lab-content .pg-word-count { font-family: var(--ai-mono); font-size: 11px; color: var(--ai-text3); margin-left: auto; }
.ai-lab-content .vocab-section { padding: 20px 22px; border-top: 1px solid var(--ai-border-s); }
.ai-lab-content .vs-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ai-lab-content .vs-title { font-family: var(--ai-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ai-text3); }
.ai-lab-content .vs-count { font-family: var(--ai-mono); font-size: 11px; color: var(--ai-accent); }
.ai-lab-content .vocab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-lab-content .vocab-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 6px; font-family: var(--ai-mono); font-size: 11px; background: rgba(246,51,146,.08); border: 1px solid rgba(246,51,146,.2); color: var(--ai-accent); transition: all .2s; }
.ai-lab-content .vocab-chip:hover { background: rgba(246,51,146,.16); transform: translateY(-2px); }
.ai-lab-content .vocab-chip-count { font-size: 9px; opacity: .65; background: rgba(246,51,146,.15); padding: 1px 5px; border-radius: 3px; }
.ai-lab-content .matrix-section { padding: 20px 22px; border-top: 1px solid var(--ai-border-s); }
.ai-lab-content .matrix-wrap { overflow-x: auto; border-radius: var(--ai-r-sm); border: 1px solid var(--ai-border-s); }
.ai-lab-content .matrix-table { border-collapse: collapse; width: 100%; min-width: 400px; font-family: var(--ai-mono); font-size: 11px; }
.ai-lab-content .matrix-table th { padding: 8px 12px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--ai-border-s); border-right: 1px solid var(--ai-border-s); color: var(--ai-text3); text-align: center; letter-spacing: .04em; font-weight: 400; white-space: nowrap; }
.ai-lab-content .matrix-table th.row-header { text-align: left; color: var(--ai-text2); }
.ai-lab-content .matrix-table td { padding: 8px 12px; border-bottom: 1px solid var(--ai-border-s); border-right: 1px solid var(--ai-border-s); text-align: center; transition: background .2s; position: relative; }
.ai-lab-content .matrix-table td.doc-name { text-align: left; color: var(--ai-text2); font-size: 11px; white-space: nowrap; }
.ai-lab-content .matrix-table td.cell-0 { color: var(--ai-text3); }
.ai-lab-content .matrix-table td.cell-1 { background: rgba(246,51,146,.08); color: var(--ai-accent); font-weight: 600; }
.ai-lab-content .matrix-table td.cell-2 { background: rgba(246,51,146,.16); color: var(--ai-accent); font-weight: 700; }
.ai-lab-content .matrix-table td.cell-3 { background: rgba(246,51,146,.26); color: var(--ai-accent); font-weight: 700; }
.ai-lab-content .matrix-table tr:last-child td { border-bottom: none; }
.ai-lab-content .matrix-table td:last-child, .ai-lab-content .matrix-table th:last-child { border-right: none; }
.ai-lab-content .matrix-table td:hover { filter: brightness(1.3); }
.ai-lab-content .sim-section { padding: 20px 22px; border-top: 1px solid var(--ai-border-s); }
.ai-lab-content .sim-grid { display: inline-grid; gap: 3px; }
.ai-lab-content .sim-cell { display: flex; align-items: center; justify-content: center; border-radius: 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; transition: all .3s ease; cursor: default; position: relative; }
.ai-lab-content .sim-cell:hover .sim-tooltip { opacity: 1; visibility: visible; }
.ai-lab-content .sim-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ai-card); border: 1px solid var(--ai-border-s); border-radius: 6px; padding: 5px 10px; font-family: var(--ai-mono); font-size: 10px; color: var(--ai-text2); white-space: nowrap; opacity: 0; visibility: hidden; transition: all .15s; z-index: 20; pointer-events: none; }
.ai-lab-content .sim-labels { display: flex; }
.ai-lab-content .sim-label-row, .ai-lab-content .sim-label-col { font-family: var(--ai-mono); font-size: 10px; color: var(--ai-text3); letter-spacing: .04em; }
.ai-lab-content .search-section { padding: 20px 22px; border-top: 1px solid var(--ai-border-s); }
.ai-lab-content .search-row { display: flex; gap: 10px; margin-bottom: 14px; }
.ai-lab-content .search-input { flex: 1; padding: 9px 12px; border-radius: var(--ai-r-sm); background: var(--ai-bg); border: 1px solid var(--ai-border-s); color: var(--ai-text); font-family: var(--ai-body); font-size: 13px; outline: none; caret-color: var(--ai-accent); transition: border-color .2s; }
.ai-lab-content .search-input:focus { border-color: rgba(246,51,146,.4); }
.ai-lab-content .search-input::placeholder { color: var(--ai-text3); }

.ai-lab-content .playground-box::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #f63392, #2997ff, #bf5af2); }
.ai-lab-content .pgb-header { padding: 18px 22px; border-bottom: 1px solid var(--ai-border-s); background: rgba(246,51,146,.04); }
.ai-lab-content .pgb-badge { font-family: var(--ai-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ai-accent); margin-bottom: 8px; }
.ai-lab-content .pgb-title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 800; color: var(--ai-text); margin-bottom: 4px; letter-spacing: -.01em; }
.ai-lab-content .pgb-sub { font-size: 13px; color: var(--ai-text2); }

/* ═══════════════════════════════════════════════════════════════
   ML Intro Components (Adapted for HerAI Pink Theme)
   ═══════════════════════════════════════════════════════════════ */

/* ── Base prose & math ───────────────────────────────────────── */
.ai-lab-content .prose {
  font-size: .95rem;
  color: #6f7282;
  line-height: 1.8;
  margin-bottom: 24px;
}
.ai-lab-content .prose strong { color: #171827; font-weight: 700; }
.ai-lab-content .prose em { color: #f63392; font-style: normal; font-weight: 600; }
.ai-lab-content .prose code {
  font-family: 'SF Mono', monospace;
  font-size: .85rem;
  background: #f8f9fb;
  border: 1px solid var(--fellow-line);
  padding: 2px 6px;
  border-radius: 6px;
  color: #f63392;
}

.ai-lab-content .math-term { color: #171827; font-family: 'SF Mono', monospace; }
.ai-lab-content .math-term.blue   { color: #2997ff; }
.ai-lab-content .math-term.purple { color: #a855f7; }
.ai-lab-content .math-term.green  { color: #34c759; }
.ai-lab-content .math-op { color: #8e91a0; font-family: 'SF Mono', monospace; }

/* ── Insight callout ─────────────────────────────────────────── */
.ai-lab-content .insight-callout {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: rgba(246,51,146,.04);
  border: 1px solid rgba(246,51,146,.15);
  border-radius: 16px;
  margin: 24px 0;
}
.ai-lab-content .ic-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.4; color: #f63392; }
.ai-lab-content .ic-body { font-size: .9rem; color: #6f7282; line-height: 1.7; }
.ai-lab-content .ic-body strong { color: #171827; }

/* ── Worked box ──────────────────────────────────────────────── */
.ai-lab-content .worked-box {
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 16px;
  padding: 28px;
  margin: 28px 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(246,51,146,.03);
}
.ai-lab-content .worked-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f63392, #ff6b9d);
}
.ai-lab-content .wb-badge {
  font-family: 'SF Mono', monospace;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #f63392;
  margin-bottom: 12px;
  font-weight: 700;
}
.ai-lab-content .wb-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #171827;
  margin-bottom: 24px;
  letter-spacing: -.01em;
}

/* ── Next lesson CTA ─────────────────────────────────────────── */
.ai-lab-content .next-lesson-cta {
  margin-top: 56px;
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(246,51,146,.04);
}
.ai-lab-content .nlc-label {
  font-family: 'SF Mono', monospace;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8e91a0;
  margin-bottom: 12px;
  display: block;
  font-weight: 700;
}
.ai-lab-content .nlc-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: #171827;
  letter-spacing: -.01em;
  margin-bottom: 12px;
}
.ai-lab-content .nlc-desc { font-size: .95rem; color: #6f7282; margin-bottom: 24px; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto;}
.ai-lab-content .nlc-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 12px;
  background: #f63392;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
  transition: all .2s;
  box-shadow: 0 4px 12px rgba(246,51,146,.3);
}
.ai-lab-content .nlc-btn:hover { background: #e01b7a; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(246,51,146,.4);}

/* ── Classic vs ML comparison ────────────────────────────────── */
.ai-lab-content .paradigm-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  margin: 28px 0;
}
.ai-lab-content .pc-col {
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(246,51,146,.04);
}
.ai-lab-content .pc-header {
  padding: 14px 16px;
  font-size: .85rem;
  font-weight: 800;
  text-align: center;
  letter-spacing: .02em;
}
.ai-lab-content .pc-header.classic { background: #f8f9fb; color: #6f7282; border-bottom: 1px solid var(--fellow-line); }
.ai-lab-content .pc-header.ml { background: rgba(246,51,146,.06); color: #f63392; border-bottom: 1px solid rgba(246,51,146,.15); }

.ai-lab-content .pc-flow {
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.ai-lab-content .pc-box {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: .82rem;
  text-align: center;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.ai-lab-content .pc-box i { font-size: .9rem; }
.ai-lab-content .pc-box.input    { background: #fff; border: 1px solid var(--fellow-line); color: #6f7282; }
.ai-lab-content .pc-box.rules    { background: #fff8eb; border: 1px solid #ffe3b3; color: #e69500; }
.ai-lab-content .pc-box.answers  { background: #ebfbee; border: 1px solid #b3f2c3; color: #1ab041; }
.ai-lab-content .pc-box.output   { background: #fff; border: 1px solid var(--fellow-line); color: #6f7282; }
.ai-lab-content .pc-box.ml-rules { background: rgba(246,51,146,.06); border: 1px solid rgba(246,51,146,.25); color: #f63392; }
.ai-lab-content .pc-arrow { font-size: 1.1rem; color: #8e91a0; }

.ai-lab-content .pc-example {
  padding: 14px 18px;
  border-top: 1px solid var(--fellow-line);
  background: #fdfdfd;
  font-size: .75rem;
}
.ai-lab-content .pce-label {
  font-family: 'SF Mono', monospace;
  font-size: .65rem;
  color: #8e91a0;
  text-transform: uppercase;
  letter-spacing: .06em;
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
}
.ai-lab-content .pc-example code {
  font-family: 'SF Mono', monospace;
  font-size: .75rem;
  color: #f63392;
  display: block;
  word-break: break-all;
}
.ai-lab-content .pc-vs {
  font-size: 1rem;
  font-weight: 900;
  color: #8e91a0;
  letter-spacing: 1px;
}

/* ── Motivation grid ─────────────────────────────────────────── */
.ai-lab-content .motivation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.ai-lab-content .motiv-card {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(246,51,146,.03);
  transition: transform .2s, box-shadow .2s;
}
.ai-lab-content .motiv-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(246,51,146,.08);
  border-color: rgba(246,51,146,.3);
}
.ai-lab-content .motiv-icon { font-size: 1.4rem; margin-bottom: 14px; color: #f63392; }
.ai-lab-content .motiv-title {
  font-size: .95rem;
  font-weight: 800;
  color: #171827;
  margin-bottom: 8px;
}
.ai-lab-content .motiv-desc { font-size: .85rem; color: #6f7282; line-height: 1.6; }

/* ── Three paradigms ─────────────────────────────────────────── */
.ai-lab-content .three-paradigms {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0;
}
.ai-lab-content .para-card {
  border-radius: 16px;
  border: 1px solid var(--fellow-line);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 40px 52px 1fr;
  grid-template-rows: auto auto auto auto;
  column-gap: 20px;
  row-gap: 10px;
  align-items: start;
  background: #fff;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 4px 12px rgba(246,51,146,.03);
}
.ai-lab-content .para-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.ai-lab-content .para-card.supervised::before  { background: #2997ff; }
.ai-lab-content .para-card.unsupervised::before { background: #a855f7; }
.ai-lab-content .para-card.reinforcement::before { background: #34c759; }

.ai-lab-content .para-card.supervised:hover  { border-color: rgba(41,151,255,.3); box-shadow: 0 8px 24px rgba(41,151,255,.08); }
.ai-lab-content .para-card.unsupervised:hover { border-color: rgba(168,85,247,.3); box-shadow: 0 8px 24px rgba(168,85,247,.08); }
.ai-lab-content .para-card.reinforcement:hover { border-color: rgba(52,199,89,.3); box-shadow: 0 8px 24px rgba(52,199,89,.08); }

.ai-lab-content .para-num {
  grid-column: 1;
  grid-row: 1;
  font-family: 'SF Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
  color: #8e91a0;
  padding-top: 2px;
}
.ai-lab-content .para-icon {
  grid-column: 2;
  grid-row: 1;
  font-size: 1.8rem;
  line-height: 1;
}
.ai-lab-content .para-card.supervised .para-icon { color: #2997ff; }
.ai-lab-content .para-card.unsupervised .para-icon { color: #a855f7; }
.ai-lab-content .para-card.reinforcement .para-icon { color: #34c759; }

.ai-lab-content .para-title {
  grid-column: 3;
  grid-row: 1;
  font-size: 1.15rem;
  font-weight: 800;
  color: #171827;
}
.ai-lab-content .para-tagline {
  grid-column: 3;
  grid-row: 2;
  font-size: .85rem;
  color: #8e91a0;
  margin-top: -6px;
  font-weight: 500;
}
.ai-lab-content .para-desc {
  grid-column: 2 / 4;
  grid-row: 3;
  font-size: .9rem;
  color: #6f7282;
  line-height: 1.65;
  padding-top: 4px;
}
.ai-lab-content .para-signal {
  grid-column: 2 / 4;
  grid-row: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fcfcfc;
  border: 1px solid var(--fellow-line);
  border-radius: 10px;
}
.ai-lab-content .ps-label {
  font-family: 'SF Mono', monospace;
  font-size: .65rem;
  color: #8e91a0;
  text-transform: uppercase;
  letter-spacing: .06em;
  flex-shrink: 0;
  font-weight: 700;
}
.ai-lab-content .ps-val {
  font-family: 'SF Mono', monospace;
  font-size: .8rem;
  font-weight: 700;
}
.ai-lab-content .ps-val.supervised  { color: #2997ff; }
.ai-lab-content .ps-val.unsupervised { color: #a855f7; }
.ai-lab-content .ps-val.reinforcement { color: #34c759; }

.ai-lab-content .para-examples {
  grid-column: 2 / 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.ai-lab-content .pe-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  padding: 8px 16px;
  background: #f8f9fb;
  border-radius: 8px;
  border: 1px solid var(--fellow-line);
}
.ai-lab-content .pe-task { color: #6f7282; font-weight: 600; }
.ai-lab-content .pe-label-ex {
  font-family: 'SF Mono', monospace;
  font-size: .7rem;
  color: #8e91a0;
  font-weight: 700;
}

/* ── Task split (classification vs regression) ───────────────── */
.ai-lab-content .task-split {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 32px;
  margin: 32px 0;
  align-items: start;
}
.ai-lab-content .ts-divider { background: var(--fellow-line); height: 100%; }
.ai-lab-content .ts-col { display: flex; flex-direction: column; gap: 14px; }
.ai-lab-content .ts-header {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ai-lab-content .ts-icon { font-size: 1.8rem; color: #f63392; }
.ai-lab-content .ts-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: #171827;
}
.ai-lab-content .ts-sub { font-size: .75rem; color: #8e91a0; font-family: 'SF Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;}
.ai-lab-content .ts-formula {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 12px;
  font-family: 'SF Mono', monospace;
  font-size: .95rem;
  font-weight: 700;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.02);
}
.ai-lab-content .ts-desc { font-size: .9rem; color: #6f7282; line-height: 1.6; }
.ai-lab-content .ts-examples { display: flex; flex-direction: column; gap: 6px; }
.ai-lab-content .tse-item {
  font-size: .85rem;
  color: #6f7282;
  padding-left: 20px;
  position: relative;
}
.ai-lab-content .tse-item::before { content: '—'; position: absolute; left: 0; color: #f63392; font-weight: 800;}

/* ── Pipeline steps ──────────────────────────────────────────── */
.ai-lab-content .pipeline-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ai-lab-content .ps-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 16px;
}
.ai-lab-content .ps-step + .ps-step { border-top: none; border-radius: 0; }
.ai-lab-content .ps-step:first-child { border-radius: 16px 16px 0 0; }
.ai-lab-content .ps-step:last-child  { border-radius: 0 0 16px 16px; }

.ai-lab-content .ps-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(246,51,146,.1);
  color: #f63392;
  font-family: 'SF Mono', monospace;
  font-size: .85rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ai-lab-content .ps-content { flex: 1; }
.ai-lab-content .ps-title {
  font-size: .95rem;
  font-weight: 800;
  color: #171827;
  margin-bottom: 6px;
}
.ai-lab-content .ps-desc { font-size: .85rem; color: #6f7282; line-height: 1.6; }
.ai-lab-content .ps-desc em { color: #f63392; font-style: normal; font-weight: 600;}
.ai-lab-content .ps-arrow {
  text-align: center;
  color: #d2d4dc;
  font-size: 1.2rem;
  padding: 6px 0;
  margin-left: 36px;
}

/* ── Unsupervised tasks ──────────────────────────────────────── */
.ai-lab-content .unsup-tasks {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 28px 0;
}
.ai-lab-content .ut-card {
  border-radius: 16px;
  border: 1px solid var(--fellow-line);
  padding: 24px 24px 24px 28px;
  background: #fff;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  row-gap: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(246,51,146,.03);
}
.ai-lab-content .ut-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.ai-lab-content .ut-icon { grid-column: 1; grid-row: 1; font-size: 1.6rem; color: #171827; align-self: center;}
.ai-lab-content .ut-title {
  grid-column: 2; grid-row: 1;
  font-size: 1.1rem;
  font-weight: 800;
  color: #171827;
  align-self: center;
}
.ai-lab-content .ut-desc {
  grid-column: 1 / 3; grid-row: 2;
  font-size: .9rem;
  color: #6f7282;
  line-height: 1.65;
  margin-top: 4px;
}
.ai-lab-content .ut-algos {
  grid-column: 1 / 3; grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.ai-lab-content .uta {
  font-family: 'SF Mono', monospace;
  font-size: .7rem;
  font-weight: 700;
  color: #6f7282;
  background: #f8f9fb;
  border: 1px solid var(--fellow-line);
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: .03em;
}

/* ── RL Loop diagram ─────────────────────────────────────────── */
.ai-lab-content .rl-loop {
  position: relative;
  margin: 32px 0;
  padding: 48px 32px;
  background: #fff;
  border: 1px solid var(--fellow-line);
  border-radius: 16px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.01);
}

.ai-lab-content .rll-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 480px;
}

.ai-lab-content .rll-agent,
.ai-lab-content .rll-env {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 28px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--fellow-line);
  box-shadow: 0 8px 24px rgba(246,51,146,.08);
  z-index: 2;
}

.ai-lab-content .rll-icon {
  font-size: 2.2rem;
  color: #f63392;
}
.ai-lab-content .rll-env .rll-icon { color: #2997ff; }

.ai-lab-content .rll-label {
  font-size: .85rem;
  font-weight: 800;
  color: #171827;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.ai-lab-content .rll-arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.ai-lab-content .rll-arrow {
  position: absolute;
  left: 200px;
  right: 200px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.ai-lab-content .rll-arrow.top {
  top: calc(50% - 48px);
}

.ai-lab-content .rll-arrow.bottom {
  top: calc(50% + 48px);
  flex-direction: row-reverse;
}

.ai-lab-content .rll-arrow-line {
  flex: 1;
  height: 2px;
  background: var(--fellow-line);
  position: relative;
}

.ai-lab-content .rll-arrow.top .rll-arrow-line::after {
  content: "▶";
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #2997ff;
}

.ai-lab-content .rll-arrow.bottom .rll-arrow-line::before {
  content: "◀";
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #f63392;
}

.ai-lab-content .rll-arrow-label {
  font-family: 'SF Mono', monospace;
  font-size: .75rem;
  font-weight: 700;
  color: #6f7282;
  white-space: nowrap;
  background: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--fellow-line);
}

/* RL concepts table */
.ai-lab-content .rl-concepts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 28px 0;
  border: 1px solid var(--fellow-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.ai-lab-content .rlc-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--fellow-line);
}
.ai-lab-content .rlc-row:last-child { border-bottom: none; }
.ai-lab-content .rlc-term {
  padding: 18px 20px;
  background: #f8f9fb;
  font-family: 'SF Mono', monospace;
  font-size: .8rem;
  font-weight: 800;
  color: #f63392;
  border-right: 1px solid var(--fellow-line);
  display: flex;
  align-items: center;
}
.ai-lab-content .rlc-term code {
  font-family: 'SF Mono', monospace;
  font-size: .85rem;
  color: inherit;
}
.ai-lab-content .rlc-def {
  padding: 18px 20px;
  font-size: .9rem;
  color: #6f7282;
  line-height: 1.65;
}
.ai-lab-content .rlc-def em { color: #171827; font-style: normal; font-weight: 700;}

/* ── When to use ML grid ─────────────────────────────────────── */
.ai-lab-content .when-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 32px 0;
}
.ai-lab-content .when-col {
  border-radius: 16px;
  border: 1px solid var(--fellow-line);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.02);
}
.ai-lab-content .when-header {
  padding: 16px 20px;
  font-size: .95rem;
  font-weight: 800;
  text-align: center;
  display: flex; justify-content: center; align-items: center; gap: 8px;
}
.ai-lab-content .when-col.use .when-header   { background: rgba(52,199,89,.1); color: #28a745; border-bottom: 1px solid rgba(52,199,89,.2); }
.ai-lab-content .when-col.avoid .when-header { background: rgba(239,68,68,.1); color: #dc3545; border-bottom: 1px solid rgba(239,68,68,.2); }

.ai-lab-content .when-list {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-lab-content .wl-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  background: #fdfdfd;
  border: 1px solid var(--fellow-line);
  border-radius: 12px;
}
.ai-lab-content .wl-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 2px; }
.ai-lab-content .when-col.use .wl-icon { color: #28a745; }
.ai-lab-content .when-col.avoid .wl-icon { color: #dc3545; }
.ai-lab-content .wl-title {
  font-size: .9rem;
  font-weight: 700;
  color: #171827;
  margin-bottom: 4px;
}
.ai-lab-content .wl-desc { font-size: .82rem; color: #6f7282; line-height: 1.6; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 820px) {
  .ai-lab-content .paradigm-compare { grid-template-columns: 1fr; }
  .ai-lab-content .pc-vs { text-align: center; }
  .ai-lab-content .motivation-grid { grid-template-columns: 1fr; }
  .ai-lab-content .task-split { grid-template-columns: 1fr; }
  .ai-lab-content .ts-divider { display: none; }
  .ai-lab-content .when-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .ai-lab-content .para-card {
    grid-template-columns: 36px 1fr;
  }
  .ai-lab-content .rll-arrows { padding: 32px 90px; }
  .ai-lab-content .rlc-row { grid-template-columns: 100px 1fr; }
}

/* ML lesson readability pass: scoped to Machine Learning submateri only */
.ml-lesson-page .lesson-layout {
  align-items: start;
}
.ml-lesson-page .lesson-material-panel {
  overflow: visible;
}
.ml-lesson-page .lesson-tabs {
  gap: 8px;
  padding: 8px;
  background: #fff7fb;
  border-color: rgba(246,51,146,.14);
}
.ml-lesson-page .lesson-tabs a {
  min-height: 40px;
  border-radius: 10px;
  white-space: normal;
  line-height: 1.3;
}
.ml-lesson-page .lesson-right-panel {
  top: 20px;
}
.ml-lesson-page .lesson-side-card {
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(24,25,38,.05);
}
.ml-lesson-page .lesson-mini-link {
  min-height: 44px;
}
.ml-lesson-page .lesson-mini-link span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: rgba(246,51,146,.08);
}
.ml-lesson-page .lesson-mini-link.active span {
  background: #f63392;
  color: #fff;
}
.ml-lesson-content {
  color: #313445;
}
.ml-lesson-content .lesson-body {
  gap: 38px;
}
.ml-lesson-content .lesson-sec {
  padding: 2px 0;
}
.ml-lesson-content .sec-header {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
}
.ml-lesson-content .sec-num {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: .78rem;
  box-shadow: none;
}
.ml-lesson-content .sec-title {
  max-width: 780px;
  font-size: clamp(1.22rem, 1.8vw, 1.55rem);
}
.ml-lesson-content .sec-sub {
  max-width: 760px;
  font-size: .86rem;
}
.ml-lesson-content .prose {
  padding: 18px 20px;
  font-size: .95rem;
  line-height: 1.82;
  background: #fff;
  border-color: rgba(246,51,146,.12);
  box-shadow: 0 8px 22px rgba(24,25,38,.035);
}
.ml-lesson-content .worked-box,
.ml-lesson-content .def-box,
.ml-lesson-content .shatter-count-table,
.ml-lesson-content .next-lesson-cta,
.ml-lesson-content .decomp-formula-box,
.ml-lesson-content .decomp-viz,
.ml-lesson-content .dartboard-grid,
.ml-lesson-content .poly-demo {
  background: #fff;
  border: 1px solid rgba(246,51,146,.14);
  border-radius: 16px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 10px 28px rgba(24,25,38,.05);
}
.ml-lesson-content .worked-box {
  background:
    linear-gradient(180deg, rgba(255,247,251,.9), #fff 42%),
    #fff;
}
.ml-lesson-content .wb-badge,
.ml-lesson-content .def-label,
.ml-lesson-content .nlc-label,
.ml-lesson-content .dfb-label {
  border-radius: 8px;
  letter-spacing: .05em;
}
.ml-lesson-content .wb-title,
.ml-lesson-content .sct-title,
.ml-lesson-content .nlc-title,
.ml-lesson-content .dv-title {
  font-size: 1rem;
  line-height: 1.35;
}
.ml-lesson-content .pc-col,
.ml-lesson-content .compare-card,
.ml-lesson-content .bvc-col,
.ml-lesson-content .vci-card,
.ml-lesson-content .motiv-card,
.ml-lesson-content .para-card,
.ml-lesson-content .ut-card,
.ml-lesson-content .wl-item,
.ml-lesson-content .ps-step,
.ml-lesson-content .hspace-card,
.ml-lesson-content .vc-card,
.ml-lesson-content .when-col,
.ml-lesson-content .rlc-row,
.ml-lesson-content .db-cell,
.ml-lesson-content .pcs-item,
.ml-lesson-content .ds-step,
.ml-lesson-content .dfbl-item {
  background: #fff;
  border: 1px solid rgba(246,51,146,.12);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 20px rgba(24,25,38,.035);
}
.ml-lesson-content .para-card,
.ml-lesson-content .ut-card,
.ml-lesson-content .motiv-card,
.ml-lesson-content .wl-item,
.ml-lesson-content .vci-card {
  padding-top: 18px;
}
.ml-lesson-content .pc-box,
.ml-lesson-content .calc-step,
.ml-lesson-content .flow-step,
.ml-lesson-content .math-line,
.ml-lesson-content .pe-row,
.ml-lesson-content .sct-grid > div {
  background: #fff7fb;
  border-color: rgba(246,51,146,.12);
}
.ml-lesson-content .insight-callout,
.ml-lesson-content .warning-callout,
.ml-lesson-content .key-takeaway {
  background: #fff7fb;
  border-left: 4px solid #f63392;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(246,51,146,.04);
}
.ml-lesson-content .ic-body,
.ml-lesson-content .def-body,
.ml-lesson-content .def-note,
.ml-lesson-content .nlc-desc,
.ml-lesson-content .motiv-desc,
.ml-lesson-content .para-desc,
.ml-lesson-content .ut-desc,
.ml-lesson-content .wl-desc,
.ml-lesson-content .rlc-def,
.ml-lesson-content .vci-copy,
.ml-lesson-content .vc-desc,
.ml-lesson-content .db-desc,
.ml-lesson-content .ds-note {
  font-size: .86rem;
  line-height: 1.72;
}
.ml-lesson-content .para-title,
.ml-lesson-content .motiv-title,
.ml-lesson-content .ut-title,
.ml-lesson-content .wl-title,
.ml-lesson-content .rlc-term,
.ml-lesson-content .db-label,
.ml-lesson-content .ds-title {
  font-size: .95rem;
  line-height: 1.35;
}
.ml-lesson-content .three-paradigms,
.ml-lesson-content .unsup-tasks,
.ml-lesson-content .when-grid,
.ml-lesson-content .motivation-grid,
.ml-lesson-content .dartboard-grid,
.ml-lesson-content .pc-stats,
.ml-lesson-content .derivation-steps,
.ml-lesson-content .dfb-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ml-lesson-content .three-paradigms {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ml-lesson-content .pc-example,
.ml-lesson-content code {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.ml-lesson-content code {
  background: rgba(246,51,146,.07);
  color: #171827;
  border: 1px solid rgba(246,51,146,.12);
  border-radius: 6px;
  padding: 1px 5px;
}
.ml-lesson-content pre code {
  background: transparent;
  color: inherit;
  border: 0;
  padding: 0;
}
.ml-lesson-content .def-formula,
.ml-lesson-content .formula-box,
.ml-lesson-content .math-display,
.ml-lesson-content .ds-formula,
.ml-lesson-content .dfb-main,
.ml-lesson-content .dfb-expand {
  background: #201923;
  color: #fff;
  border-radius: 12px;
  padding: 13px 15px;
  overflow-x: auto;
  font-family: 'SF Mono', monospace;
  font-size: .8rem;
  line-height: 1.65;
}
.ml-lesson-content .dfb-expand {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.ml-lesson-content table {
  display: block;
  overflow-x: auto;
  border-spacing: 0;
  border: 1px solid rgba(246,51,146,.14);
  border-radius: 14px;
}
.ml-lesson-content tbody,
.ml-lesson-content thead,
.ml-lesson-content tr {
  width: 100%;
}
.ml-lesson-content th {
  background: #fff0f7;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ml-lesson-content td {
  background: #fff;
  font-size: .82rem;
  line-height: 1.55;
}
.ml-lesson-content canvas {
  display: block;
  width: 100%;
  height: auto;
  min-height: 180px;
}
.ml-lesson-content .db-cell {
  text-align: center;
}
.ml-lesson-content .db-canvas {
  max-width: 180px;
  margin: 0 auto 12px;
}
.ml-lesson-content input[type="range"] {
  width: 100%;
  accent-color: #f63392;
}
.ml-lesson-content .pc-row,
.ml-lesson-content .poly-controls,
.ml-lesson-content .dv-controls,
.ml-lesson-content .sd-btns,
.ml-lesson-content .sd-labelings {
  display: grid;
  gap: 10px;
}
.ml-lesson-content .dv-controls,
.ml-lesson-content .sd-btns,
.ml-lesson-content .sd-labelings {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.ml-lesson-content button,
.ml-lesson-content .sd-btn,
.ml-lesson-content .dv-btn,
.ml-lesson-content .nlc-btn {
  min-height: 38px;
}
.ml-lesson-content .next-lesson-cta {
  text-align: left;
}
.ml-lesson-content .nlc-inner {
  max-width: 680px;
}
.ml-lesson-content .sec-nav-buttons {
  border-top: 1px solid rgba(246,51,146,.12);
  padding-top: 16px;
}
.ml-lesson-content .sec-nav-btn {
  max-width: 48%;
  justify-content: center;
}

@media (max-width: 1180px) {
  .ml-lesson-content .three-paradigms {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .ml-lesson-page .lesson-tabs {
    grid-template-columns: 1fr;
  }
  .ml-lesson-content .three-paradigms,
  .ml-lesson-content .unsup-tasks,
  .ml-lesson-content .when-grid,
  .ml-lesson-content .motivation-grid,
  .ml-lesson-content .dartboard-grid,
  .ml-lesson-content .pc-stats,
  .ml-lesson-content .derivation-steps,
  .ml-lesson-content .dfb-legend {
    grid-template-columns: 1fr;
  }
  .ml-lesson-content .worked-box,
  .ml-lesson-content .def-box,
  .ml-lesson-content .shatter-count-table,
  .ml-lesson-content .next-lesson-cta,
  .ml-lesson-content .decomp-formula-box,
  .ml-lesson-content .decomp-viz,
  .ml-lesson-content .dartboard-grid,
  .ml-lesson-content .poly-demo,
  .ml-lesson-content .prose {
    padding: 14px;
  }
  .ml-lesson-content .sec-nav-btn {
    max-width: none;
  }
}

/* Chen-inspired visual polish: scoped to Machine Learning lessons only */
.ml-lesson-page {
  --ml-ink: #151723;
  --ml-muted: #6d7182;
  --ml-soft: #fff7fb;
  --ml-line: rgba(246,51,146,.14);
  --ml-stage: #17151f;
  --ml-stage-2: #211925;
  --ml-cyan: #32bfd3;
  --ml-green: #3bbf7b;
  --ml-amber: #f2a938;
  --ml-pink: #f63392;
}
.ml-lesson-page .lesson-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: center;
  min-height: 240px;
  padding: 34px 30px 0;
  border: 1px solid rgba(246,51,146,.16);
  border-radius: 20px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(135deg, #181720 0%, #271924 54%, #fff2f8 100%);
  background-size: 36px 36px, 36px 36px, auto;
}
.ml-lesson-page .lesson-hero-copy {
  max-width: 760px;
  padding-bottom: 34px;
}
.ml-lesson-page .lesson-hero h1 {
  color: #fff;
  font-size: clamp(2.25rem, 4vw, 3.85rem);
  line-height: 1.02;
  text-wrap: balance;
}
.ml-lesson-page .lesson-hero p {
  color: rgba(255,255,255,.82);
  max-width: 640px;
}
.ml-lesson-page .lesson-meta-row span,
.ml-lesson-page .lesson-meta-row b {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(10px);
}
.ml-lesson-page .lesson-side-card:first-child {
  position: relative;
  overflow: hidden;
  padding-top: 86px;
  background:
    linear-gradient(180deg, rgba(255,247,251,.92), #fff 58%),
    #fff;
}
.ml-lesson-page .lesson-side-card:first-child::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 16px;
  width: 72px;
  height: 72px;
  background: url("/assets/branding/logo-her-ai-transparent.png") center / contain no-repeat;
  opacity: .34;
}
.ml-lesson-page .lesson-side-card:first-child::after {
  content: "\f544";
  position: absolute;
  top: 22px;
  left: 18px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--ml-stage);
  color: var(--ml-pink);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  box-shadow: 0 14px 28px rgba(24,25,38,.12);
}
.ml-lesson-page .lesson-mini-link {
  border-color: rgba(24,25,38,.08);
}
.ml-lesson-page .lesson-mini-link:hover,
.ml-lesson-page .lesson-mini-link.active {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(246,51,146,.08);
}
.ml-lesson-content .lesson-sec {
  position: relative;
}
.ml-lesson-content .lesson-sec + .lesson-sec {
  border-top: 1px solid rgba(246,51,146,.09);
  padding-top: 36px;
}
.ml-lesson-content .sec-num {
  background: var(--ml-stage);
  color: var(--ml-pink);
  border: 1px solid rgba(246,51,146,.28);
}
.ml-lesson-content .sec-title {
  color: var(--ml-ink);
  text-wrap: balance;
}
.ml-lesson-content .sec-sub {
  color: var(--ml-muted);
}
.ml-lesson-content .worked-box,
.ml-lesson-content .def-box,
.ml-lesson-content .model-zoo,
.ml-lesson-content .distinction-box,
.ml-lesson-content .bias-types,
.ml-lesson-content .capacity-spectrum,
.ml-lesson-content .shatter-demo,
.ml-lesson-content .vc-bound-box,
.ml-lesson-content .sauer-box,
.ml-lesson-content .decomp-formula-box,
.ml-lesson-content .decomp-viz,
.ml-lesson-content .solution-box,
.ml-lesson-content .bv-summary,
.ml-lesson-content .next-lesson-cta {
  border: 1px solid var(--ml-line);
  box-shadow: 0 18px 42px rgba(24,25,38,.07);
}
.ml-lesson-content .worked-box,
.ml-lesson-content .def-box,
.ml-lesson-content .next-lesson-cta {
  position: relative;
  overflow: hidden;
}
.ml-lesson-content .worked-box::before,
.ml-lesson-content .def-box::before,
.ml-lesson-content .next-lesson-cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--ml-pink), var(--ml-cyan), var(--ml-green));
}
.ml-lesson-content .wb-badge,
.ml-lesson-content .def-label,
.ml-lesson-content .vbb-label,
.ml-lesson-content .sct-title,
.ml-lesson-content .dfb-label,
.ml-lesson-content .dv-title,
.ml-lesson-content .nlc-label {
  color: var(--ml-pink);
  font-family: 'SF Mono', Consolas, monospace;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ml-lesson-content .wb-title,
.ml-lesson-content .def-eq,
.ml-lesson-content .dist-title,
.ml-lesson-content .mz-name,
.ml-lesson-content .vci-title,
.ml-lesson-content .it-title,
.ml-lesson-content .bvc-header,
.ml-lesson-content .sb-header,
.ml-lesson-content .nlc-title {
  color: var(--ml-ink);
  letter-spacing: 0;
}
.ml-lesson-content .canvas-wrap,
.ml-lesson-content .hypo-canvas-wrap,
.ml-lesson-content .mc-canvas-wrap,
.ml-lesson-content .bound-chart-wrap,
.ml-lesson-content .srmd-canvas-wrap,
.ml-lesson-content .sb-chart-wrap,
.ml-lesson-content .wp-visual,
.ml-lesson-content .dv-canvas-wrap,
.ml-lesson-content .poly-canvas-wrap,
.ml-lesson-content .nd-canvas-wrap,
.ml-lesson-content .dd-canvas-wrap,
.ml-lesson-content .ec-canvas-wrap,
.ml-lesson-content .lc-canvas-wrap,
.ml-lesson-content .cc-canvas-wrap,
.ml-lesson-content .vbb-visual,
.ml-lesson-content .sd-canvas-wrap {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(145deg, var(--ml-stage), var(--ml-stage-2));
  background-size: 28px 28px, 28px 28px, auto;
  box-shadow: inset 0 0 0 1px rgba(246,51,146,.08);
}
.ml-lesson-content .canvas-wrap::before,
.ml-lesson-content .hypo-canvas-wrap::before,
.ml-lesson-content .mc-canvas-wrap::before,
.ml-lesson-content .bound-chart-wrap::before,
.ml-lesson-content .srmd-canvas-wrap::before,
.ml-lesson-content .sb-chart-wrap::before,
.ml-lesson-content .wp-visual::before,
.ml-lesson-content .dv-canvas-wrap::before,
.ml-lesson-content .poly-canvas-wrap::before,
.ml-lesson-content .nd-canvas-wrap::before,
.ml-lesson-content .dd-canvas-wrap::before,
.ml-lesson-content .ec-canvas-wrap::before,
.ml-lesson-content .lc-canvas-wrap::before,
.ml-lesson-content .cc-canvas-wrap::before,
.ml-lesson-content .sd-canvas-wrap::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 12px;
  z-index: 1;
  width: 54px;
  height: 5px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ml-pink), var(--ml-cyan));
  pointer-events: none;
}
.ml-lesson-content canvas {
  position: relative;
  z-index: 0;
  border: 0;
  background: transparent;
}
.ml-lesson-content .fv-demo,
.ml-lesson-content .hypo-demo,
.ml-lesson-content .model-compare,
.ml-lesson-content .vc-calc,
.ml-lesson-content .poly-demo,
.ml-lesson-content .noise-demo,
.ml-lesson-content .decomp-viz,
.ml-lesson-content .srm-diagram,
.ml-lesson-content .double-descent-demo {
  background: var(--ml-stage);
  border: 1px solid rgba(246,51,146,.2);
  border-radius: 18px;
  padding: 16px;
  color: #fff;
}
.ml-lesson-content .fv-split,
.ml-lesson-content .vc-calc,
.ml-lesson-content .poly-demo,
.ml-lesson-content .noise-demo {
  align-items: stretch;
}
.ml-lesson-content .fv-left,
.ml-lesson-content .fv-right,
.ml-lesson-content .hypo-controls,
.ml-lesson-content .vcc-sliders,
.ml-lesson-content .vcc-result,
.ml-lesson-content .poly-controls,
.ml-lesson-content .nd-controls,
.ml-lesson-content .mc-info,
.ml-lesson-content .dv-stats,
.ml-lesson-content .bc-legend,
.ml-lesson-content .srmd-labels,
.ml-lesson-content .dd-controls {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  padding: 14px;
}
.ml-lesson-content .fv-tabs,
.ml-lesson-content .mc-selector,
.ml-lesson-content .dv-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.ml-lesson-content .fv-tab,
.ml-lesson-content .mc-btn,
.ml-lesson-content .dv-btn,
.ml-lesson-content .sd-btn,
.ml-lesson-content .sd-lab-btn {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-family: 'SF Mono', Consolas, monospace;
  font-size: .75rem;
}
.ml-lesson-content .fv-tab:hover,
.ml-lesson-content .fv-tab.active,
.ml-lesson-content .mc-btn:hover,
.ml-lesson-content .mc-btn.active,
.ml-lesson-content .dv-btn:hover,
.ml-lesson-content .dv-btn.active,
.ml-lesson-content .sd-btn:hover,
.ml-lesson-content .sd-btn.active,
.ml-lesson-content .sd-lab-btn:hover,
.ml-lesson-content .sd-lab-btn.active {
  background: var(--ml-pink);
  border-color: var(--ml-pink);
  color: #fff;
}
.ml-lesson-content .fv-object {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(246,51,146,.14);
  color: var(--ml-pink);
  font-size: 0;
}
.ml-lesson-content .fv-object::before {
  content: "\f015";
  font-family: "Font Awesome 6 Free";
  font-size: 1.45rem;
  font-weight: 900;
}
.ml-lesson-content #demo-email .fv-object::before { content: "\f0e0"; }
.ml-lesson-content #demo-pasien .fv-object::before { content: "\f0f0"; }
.ml-lesson-content .fv-object-label,
.ml-lesson-content .fv-vector-label,
.ml-lesson-content .hc-label,
.ml-lesson-content .pc-label,
.ml-lesson-content .ndc-label,
.ml-lesson-content .vcc-label,
.ml-lesson-content .mci-vc {
  color: #fff;
}
.ml-lesson-content .fv-attr,
.ml-lesson-content .fv-vec-row,
.ml-lesson-content .vcc-res-row,
.ml-lesson-content .pcs-item,
.ml-lesson-content .ndc-row {
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.78);
}
.ml-lesson-content .fva-val,
.ml-lesson-content .fvr-val,
.ml-lesson-content .hc-val,
.ml-lesson-content .pc-val,
.ml-lesson-content .ndc-val,
.ml-lesson-content .vcc-val,
.ml-lesson-content .vcc-hint,
.ml-lesson-content .vcc-res-val,
.ml-lesson-content .mci-vc,
.ml-lesson-content .stat-val {
  color: var(--ml-pink);
}
.ml-lesson-content .fvr-bar {
  background: linear-gradient(90deg, var(--ml-pink), var(--ml-cyan));
}
.ml-lesson-content .fvr-bar.green-bar { background: linear-gradient(90deg, var(--ml-green), var(--ml-cyan)); }
.ml-lesson-content .fvr-bar.red-bar { background: linear-gradient(90deg, var(--ml-amber), var(--ml-pink)); }
.ml-lesson-content .fv-target,
.ml-lesson-content .fv-target.spam,
.ml-lesson-content .fv-target.danger {
  border: 1px solid rgba(246,51,146,.24);
  background: rgba(246,51,146,.12);
  color: #fff;
}
.ml-lesson-content .fvt-val,
.ml-lesson-content .fv-target.spam .fvt-val,
.ml-lesson-content .fv-target.danger .fvt-val {
  color: var(--ml-green);
}
.ml-lesson-content .distinction-box,
.ml-lesson-content .summary-flow,
.ml-lesson-content .bv-summary {
  align-items: stretch;
}
.ml-lesson-content .dist-col,
.ml-lesson-content .sf-node,
.ml-lesson-content .tc-item,
.ml-lesson-content .bt-card,
.ml-lesson-content .de-item,
.ml-lesson-content .vci-card,
.ml-lesson-content .it-card,
.ml-lesson-content .bvc-item,
.ml-lesson-content .rce-card,
.ml-lesson-content .reg-card,
.ml-lesson-content .ec-card,
.ml-lesson-content .dd-phase,
.ml-lesson-content .summary-card,
.ml-lesson-content .para-card,
.ml-lesson-content .motiv-card,
.ml-lesson-content .ut-card,
.ml-lesson-content .wl-item,
.ml-lesson-content .when-col,
.ml-lesson-content .rlc-row,
.ml-lesson-content .vc-card,
.ml-lesson-content .hspace-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(246,51,146,.12);
  background:
    linear-gradient(180deg, rgba(255,247,251,.82), #fff 54%),
    #fff;
}
.ml-lesson-content .dist-col::before,
.ml-lesson-content .sf-node::before,
.ml-lesson-content .tc-item::before,
.ml-lesson-content .bt-card::before,
.ml-lesson-content .de-item::before,
.ml-lesson-content .vci-card::before,
.ml-lesson-content .it-card::before,
.ml-lesson-content .bvc-item::before,
.ml-lesson-content .rce-card::before,
.ml-lesson-content .reg-card::before,
.ml-lesson-content .ec-card::before,
.ml-lesson-content .dd-phase::before,
.ml-lesson-content .summary-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--ml-pink), var(--ml-cyan));
}
.ml-lesson-content .model-zoo,
.ml-lesson-content .mz-grid,
.ml-lesson-content .dim-examples,
.ml-lesson-content .vc-insights,
.ml-lesson-content .inductive-types,
.ml-lesson-content .bv-characteristics .bvc-grid,
.ml-lesson-content .bias-examples .be-grid,
.ml-lesson-content .reg-compare,
.ml-lesson-content .ensemble-compare,
.ml-lesson-content .dd-explanation,
.ml-lesson-content .bv-summary,
.ml-lesson-content .summary-grid {
  display: grid;
  gap: 14px;
}
.ml-lesson-content .mz-grid,
.ml-lesson-content .dim-examples,
.ml-lesson-content .vc-insights,
.ml-lesson-content .inductive-types,
.ml-lesson-content .reg-compare,
.ml-lesson-content .ensemble-compare,
.ml-lesson-content .dd-explanation,
.ml-lesson-content .summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ml-lesson-content .mz-card {
  overflow: hidden;
  border: 1px solid rgba(246,51,146,.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 24px rgba(24,25,38,.06);
}
.ml-lesson-content .mz-card:hover {
  transform: translateY(-3px);
  border-color: rgba(246,51,146,.32);
  box-shadow: 0 18px 34px rgba(246,51,146,.12);
}
.ml-lesson-content .mz-canvas,
.ml-lesson-content .de-canvas {
  width: 100%;
  min-height: 132px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px),
    var(--ml-stage);
  background-size: 24px 24px, 24px 24px, auto;
}
.ml-lesson-content .capacity-spectrum {
  background: var(--ml-stage);
  color: #fff;
  padding: 28px 22px 22px;
}
.ml-lesson-content .cs-track {
  height: 12px;
  background: rgba(255,255,255,.12);
}
.ml-lesson-content .cs-fill {
  background: linear-gradient(90deg, var(--ml-cyan), var(--ml-green), var(--ml-amber), var(--ml-pink));
}
.ml-lesson-content .csm-dot {
  border-color: var(--ml-stage);
  background: var(--ml-pink);
}
.ml-lesson-content .csm-dot.low { background: var(--ml-cyan); }
.ml-lesson-content .csm-dot.sweet { background: var(--ml-green); }
.ml-lesson-content .csm-dot.high { background: var(--ml-pink); }
.ml-lesson-content .csm-label,
.ml-lesson-content .csm-label.sweet,
.ml-lesson-content .cs-axis {
  color: rgba(255,255,255,.82);
}
.ml-lesson-content .shatter-demo {
  background: var(--ml-stage);
  border-radius: 18px;
  padding: 16px;
}
.ml-lesson-content .sd-controls,
.ml-lesson-content .shatter-summary,
.ml-lesson-content .shatter-count-table {
  background: #fff;
}
.ml-lesson-content .ss-row {
  grid-template-columns: 80px 120px minmax(0, 1fr);
  align-items: center;
}
.ml-lesson-content .sct-grid {
  overflow: hidden;
  border: 1px solid rgba(246,51,146,.14);
  border-radius: 14px;
  background: #fff;
}
.ml-lesson-content .sct-grid > div {
  border-radius: 0;
  margin: 0;
}
.ml-lesson-content .dartboard-grid {
  background: var(--ml-stage);
  border-color: rgba(246,51,146,.2);
}
.ml-lesson-content .db-cell {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: #fff;
}
.ml-lesson-content .db-label,
.ml-lesson-content .db-desc {
  color: rgba(255,255,255,.84);
}
.ml-lesson-content .db-good { color: var(--ml-green); }
.ml-lesson-content .db-bad { color: var(--ml-amber); }
.ml-lesson-content .decomp-formula-box,
.ml-lesson-content .vc-bound-box,
.ml-lesson-content .sauer-box {
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.045) 1px, transparent 1px),
    var(--ml-stage);
  background-size: 30px 30px, 30px 30px, auto;
  color: #fff;
}
.ml-lesson-content .dfb-main,
.ml-lesson-content .dfb-expand,
.ml-lesson-content .vbb-formula,
.ml-lesson-content .sb-formula,
.ml-lesson-content .proof-formula,
.ml-lesson-content .ds-formula,
.ml-lesson-content .def-formula,
.ml-lesson-content .math-display,
.ml-lesson-content .formula-box {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  color: #fff;
}
.ml-lesson-content .dfb-term.bias,
.ml-lesson-content .dfbl-dot.bias,
.ml-lesson-content .vbbl-sym.purple,
.ml-lesson-content .mt-num.purple,
.ml-lesson-content .vct-num.purple {
  color: var(--ml-pink);
}
.ml-lesson-content .dfb-term.var,
.ml-lesson-content .dfbl-dot.var,
.ml-lesson-content .vbbl-sym.blue,
.ml-lesson-content .mt-num.blue,
.ml-lesson-content .vct-num.blue {
  color: var(--ml-cyan);
}
.ml-lesson-content .dfb-term.irr,
.ml-lesson-content .dfbl-dot.irr,
.ml-lesson-content .vbbl-sym.green,
.ml-lesson-content .vct-num.green {
  color: var(--ml-green);
}
.ml-lesson-content .vct-num.orange,
.ml-lesson-content .vbbl-sym.orange {
  color: var(--ml-amber);
}
.ml-lesson-content .vct-num.red,
.ml-lesson-content .pt-row .red,
.ml-lesson-content .stat-red {
  color: var(--ml-pink);
}
.ml-lesson-content .solution-box {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
}
.ml-lesson-content .solution-box .sb-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ml-ink);
}
.ml-lesson-content .solution-box .sb-header::before {
  content: "\f0eb";
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(246,51,146,.1);
  color: var(--ml-pink);
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}
.ml-lesson-content .sbi,
.ml-lesson-content .ite-row,
.ml-lesson-content .be-item,
.ml-lesson-content .rce-item,
.ml-lesson-content .dd-phase,
.ml-lesson-content .diag-card,
.ml-lesson-content .vcl-item {
  border: 1px solid rgba(246,51,146,.1);
  border-radius: 12px;
  background: var(--ml-soft);
  padding: 10px 12px;
}
.ml-lesson-content .sbi-num,
.ml-lesson-content .it-num,
.ml-lesson-content .bt-num,
.ml-lesson-content .tc-num,
.ml-lesson-content .srms-num,
.ml-lesson-content .wpp-num {
  background: var(--ml-stage);
  color: var(--ml-pink);
  border: 1px solid rgba(246,51,146,.22);
}
.ml-lesson-content .diagnosis-table-wrap,
.ml-lesson-content .model-table-wrap,
.ml-lesson-content .vc-table-wrap,
.ml-lesson-content .paradox-table,
.ml-lesson-content .wp-table {
  overflow-x: auto;
  border: 1px solid rgba(246,51,146,.14);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(24,25,38,.05);
}
.ml-lesson-content .diagnosis-table,
.ml-lesson-content .model-table,
.ml-lesson-content .vc-table {
  display: table;
  min-width: 680px;
  border-collapse: collapse;
}
.ml-lesson-content .diagnosis-table th,
.ml-lesson-content .model-table th,
.ml-lesson-content .vc-table th,
.ml-lesson-content .pt-row.header,
.ml-lesson-content .wpt-row.header {
  background: var(--ml-stage);
  color: rgba(255,255,255,.84);
}
.ml-lesson-content .diagnosis-table td,
.ml-lesson-content .model-table td,
.ml-lesson-content .vc-table td {
  background: #fff;
  border-bottom: 1px solid rgba(246,51,146,.08);
}
.ml-lesson-content .hypo-overlay {
  z-index: 2;
}
.ml-lesson-content .hypo-stat {
  border: 1px solid rgba(246,51,146,.18);
  background: rgba(23,21,31,.78);
  color: rgba(255,255,255,.82);
}
.ml-overview .ai-topic-item {
  position: relative;
  overflow: hidden;
}
.ml-overview .ai-topic-item::after {
  content: "";
  position: absolute;
  inset: auto 16px 14px auto;
  width: 70px;
  height: 42px;
  border: 1px solid rgba(246,51,146,.16);
  border-radius: 12px;
  background:
    linear-gradient(135deg, transparent 38%, rgba(246,51,146,.24) 39%, rgba(246,51,146,.24) 42%, transparent 43%),
    linear-gradient(90deg, rgba(21,23,35,.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(21,23,35,.08) 1px, transparent 1px),
    #fff7fb;
  background-size: auto, 12px 12px, 12px 12px, auto;
  opacity: .9;
}


@media (max-width: 1024px) {
  .ml-lesson-page .lesson-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 28px;
  }
  .ml-lesson-content .fv-split,
  .ml-lesson-content .hypo-demo,
  .ml-lesson-content .distinction-box,
  .ml-lesson-content .three-components,
  .ml-lesson-content .shatter-demo,
  .ml-lesson-content .vc-calc,
  .ml-lesson-content .poly-demo,
  .ml-lesson-content .noise-demo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ml-lesson-page .lesson-hero {
    border-radius: 16px;
    padding: 22px;
  }
  .ml-lesson-page .lesson-hero h1 {
    font-size: clamp(2rem, 13vw, 2.8rem);
  }
  .ml-lesson-content .ss-row,
  .ml-lesson-content .fv-vec-row,
  .ml-lesson-content .pt-row,
  .ml-lesson-content .wpt-row {
    grid-template-columns: 1fr;
  }
  .ml-lesson-content .fv-demo,
  .ml-lesson-content .hypo-demo,
  .ml-lesson-content .model-compare,
  .ml-lesson-content .vc-calc,
  .ml-lesson-content .poly-demo,
  .ml-lesson-content .noise-demo,
  .ml-lesson-content .decomp-viz,
  .ml-lesson-content .srm-diagram,
  .ml-lesson-content .double-descent-demo {
    padding: 12px;
  }
}

/* HerAI palette correction: keep ML visuals inside the main dashboard language */
.ml-lesson-page {
  --ml-ink: #171827;
  --ml-muted: #6f7282;
  --ml-soft: #fff7fb;
  --ml-line: rgba(246,51,146,.14);
  --ml-stage: #fff;
  --ml-stage-2: #fff7fb;
  --ml-cyan: #f63392;
  --ml-green: #f63392;
  --ml-amber: #8e91a0;
  --ml-pink: var(--fellow-pink, #f63392);
}
.ml-lesson-page .lesson-hero {
  min-height: 220px;
  padding: 26px 26px 0 16px;
  border: 1px solid var(--fellow-line);
  border-radius: 20px;
  background: linear-gradient(100deg, #fff 0%, #fff 42%, #ffe7f2 100%);
}
.ml-lesson-page .lesson-hero-copy {
  padding-bottom: 28px;
}
.ml-lesson-page .lesson-hero h1 {
  color: #121421;
  font-size: clamp(2.35rem, 4.6vw, 4.25rem);
}
.ml-lesson-page .lesson-hero p {
  color: #4d5469;
}
.ml-lesson-page .lesson-meta-row span,
.ml-lesson-page .lesson-meta-row b {
  border: 1px solid #ffe0ef;
  background: #fff;
  color: #6f7282;
  backdrop-filter: none;
}
.ml-lesson-page .lesson-meta-row b {
  color: var(--fellow-pink, #f63392);
}
.ml-lesson-page .lesson-side-card:first-child {
  padding-top: 18px;
  background: #fff;
}
.ml-lesson-page .lesson-side-card:first-child::before,
.ml-lesson-page .lesson-side-card:first-child::after {
  content: none;
}
.ml-lesson-content .sec-num,
.ml-lesson-content .sbi-num,
.ml-lesson-content .it-num,
.ml-lesson-content .bt-num,
.ml-lesson-content .tc-num,
.ml-lesson-content .srms-num,
.ml-lesson-content .wpp-num {
  background: #fff7fb;
  color: var(--fellow-pink, #f63392);
  border-color: #ffd2e5;
}
.ml-lesson-content .worked-box,
.ml-lesson-content .def-box,
.ml-lesson-content .model-zoo,
.ml-lesson-content .distinction-box,
.ml-lesson-content .bias-types,
.ml-lesson-content .capacity-spectrum,
.ml-lesson-content .shatter-demo,
.ml-lesson-content .vc-bound-box,
.ml-lesson-content .sauer-box,
.ml-lesson-content .decomp-formula-box,
.ml-lesson-content .decomp-viz,
.ml-lesson-content .solution-box,
.ml-lesson-content .bv-summary,
.ml-lesson-content .next-lesson-cta,
.ml-lesson-content .fv-demo,
.ml-lesson-content .hypo-demo,
.ml-lesson-content .model-compare,
.ml-lesson-content .vc-calc,
.ml-lesson-content .poly-demo,
.ml-lesson-content .noise-demo,
.ml-lesson-content .srm-diagram,
.ml-lesson-content .double-descent-demo,
.ml-lesson-content .dartboard-grid {
  background: #fff;
  color: #171827;
  border-color: rgba(246,51,146,.14);
  box-shadow: 0 10px 28px rgba(24,25,38,.05);
}
.ml-lesson-content .worked-box::before,
.ml-lesson-content .def-box::before,
.ml-lesson-content .next-lesson-cta::before,
.ml-lesson-content .dist-col::before,
.ml-lesson-content .sf-node::before,
.ml-lesson-content .tc-item::before,
.ml-lesson-content .bt-card::before,
.ml-lesson-content .de-item::before,
.ml-lesson-content .vci-card::before,
.ml-lesson-content .it-card::before,
.ml-lesson-content .bvc-item::before,
.ml-lesson-content .rce-card::before,
.ml-lesson-content .reg-card::before,
.ml-lesson-content .ec-card::before,
.ml-lesson-content .dd-phase::before,
.ml-lesson-content .summary-card::before {
  background: var(--fellow-pink, #f63392);
}
.ml-lesson-content .canvas-wrap,
.ml-lesson-content .hypo-canvas-wrap,
.ml-lesson-content .mc-canvas-wrap,
.ml-lesson-content .bound-chart-wrap,
.ml-lesson-content .srmd-canvas-wrap,
.ml-lesson-content .sb-chart-wrap,
.ml-lesson-content .wp-visual,
.ml-lesson-content .dv-canvas-wrap,
.ml-lesson-content .poly-canvas-wrap,
.ml-lesson-content .nd-canvas-wrap,
.ml-lesson-content .dd-canvas-wrap,
.ml-lesson-content .ec-canvas-wrap,
.ml-lesson-content .lc-canvas-wrap,
.ml-lesson-content .cc-canvas-wrap,
.ml-lesson-content .vbb-visual,
.ml-lesson-content .sd-canvas-wrap,
.ml-lesson-content .mz-canvas,
.ml-lesson-content .de-canvas {
  border: 1px solid rgba(246,51,146,.14);
  background:
    linear-gradient(90deg, rgba(246,51,146,.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(246,51,146,.06) 1px, transparent 1px),
    #fff;
  background-size: 24px 24px, 24px 24px, auto;
  box-shadow: inset 0 0 0 1px rgba(246,51,146,.04);
}
.ml-lesson-content .canvas-wrap::before,
.ml-lesson-content .hypo-canvas-wrap::before,
.ml-lesson-content .mc-canvas-wrap::before,
.ml-lesson-content .bound-chart-wrap::before,
.ml-lesson-content .srmd-canvas-wrap::before,
.ml-lesson-content .sb-chart-wrap::before,
.ml-lesson-content .wp-visual::before,
.ml-lesson-content .dv-canvas-wrap::before,
.ml-lesson-content .poly-canvas-wrap::before,
.ml-lesson-content .nd-canvas-wrap::before,
.ml-lesson-content .dd-canvas-wrap::before,
.ml-lesson-content .ec-canvas-wrap::before,
.ml-lesson-content .lc-canvas-wrap::before,
.ml-lesson-content .cc-canvas-wrap::before,
.ml-lesson-content .sd-canvas-wrap::before {
  background: var(--fellow-pink, #f63392);
  opacity: .42;
}
.ml-lesson-content .fv-left,
.ml-lesson-content .fv-right,
.ml-lesson-content .hypo-controls,
.ml-lesson-content .vcc-sliders,
.ml-lesson-content .vcc-result,
.ml-lesson-content .poly-controls,
.ml-lesson-content .nd-controls,
.ml-lesson-content .mc-info,
.ml-lesson-content .dv-stats,
.ml-lesson-content .bc-legend,
.ml-lesson-content .srmd-labels,
.ml-lesson-content .dd-controls,
.ml-lesson-content .sd-controls,
.ml-lesson-content .shatter-summary {
  border: 1px solid rgba(246,51,146,.12);
  background: #fff7fb;
  color: #171827;
}
.ml-lesson-content .fv-tab,
.ml-lesson-content .mc-btn,
.ml-lesson-content .dv-btn,
.ml-lesson-content .sd-btn,
.ml-lesson-content .sd-lab-btn,
.ml-lesson-content button {
  border: 1px solid rgba(246,51,146,.18);
  background: #fff;
  color: #171827;
}
.ml-lesson-content .fv-tab:hover,
.ml-lesson-content .fv-tab.active,
.ml-lesson-content .mc-btn:hover,
.ml-lesson-content .mc-btn.active,
.ml-lesson-content .dv-btn:hover,
.ml-lesson-content .dv-btn.active,
.ml-lesson-content .sd-btn:hover,
.ml-lesson-content .sd-btn.active,
.ml-lesson-content .sd-lab-btn:hover,
.ml-lesson-content .sd-lab-btn.active,
.ml-lesson-content button:hover {
  background: var(--fellow-pink, #f63392);
  border-color: var(--fellow-pink, #f63392);
  color: #fff;
}
.ml-lesson-content .fv-object-label,
.ml-lesson-content .fv-vector-label,
.ml-lesson-content .hc-label,
.ml-lesson-content .pc-label,
.ml-lesson-content .ndc-label,
.ml-lesson-content .vcc-label,
.ml-lesson-content .mci-vc,
.ml-lesson-content .db-label {
  color: #171827;
}
.ml-lesson-content .fv-attr,
.ml-lesson-content .fv-vec-row,
.ml-lesson-content .vcc-res-row,
.ml-lesson-content .pcs-item,
.ml-lesson-content .ndc-row,
.ml-lesson-content .db-cell {
  border: 1px solid rgba(246,51,146,.12);
  background: #fff;
  color: #313445;
}
.ml-lesson-content .fva-val,
.ml-lesson-content .fvr-val,
.ml-lesson-content .hc-val,
.ml-lesson-content .pc-val,
.ml-lesson-content .ndc-val,
.ml-lesson-content .vcc-val,
.ml-lesson-content .vcc-hint,
.ml-lesson-content .vcc-res-val,
.ml-lesson-content .mci-vc,
.ml-lesson-content .stat-val,
.ml-lesson-content .db-good,
.ml-lesson-content .dfb-term.bias,
.ml-lesson-content .dfb-term.var,
.ml-lesson-content .dfb-term.irr,
.ml-lesson-content .vbbl-sym,
.ml-lesson-content .mt-num,
.ml-lesson-content .vct-num,
.ml-lesson-content .pt-row .blue,
.ml-lesson-content .pt-row .green,
.ml-lesson-content .pt-row .red,
.ml-lesson-content .stat-red {
  color: var(--fellow-pink, #f63392);
}
.ml-lesson-content .db-bad,
.ml-lesson-content .fail,
.ml-lesson-content .ssr-result.fail {
  color: #8e91a0;
}
.ml-lesson-content .fvr-bar,
.ml-lesson-content .fvr-bar.green-bar,
.ml-lesson-content .fvr-bar.red-bar,
.ml-lesson-content .cs-fill {
  background: linear-gradient(90deg, #f63392, #ffd2e5);
}
.ml-lesson-content .fv-target,
.ml-lesson-content .fv-target.spam,
.ml-lesson-content .fv-target.danger {
  border: 1px solid rgba(246,51,146,.16);
  background: #fff7fb;
  color: #171827;
}
.ml-lesson-content .fvt-val,
.ml-lesson-content .fv-target.spam .fvt-val,
.ml-lesson-content .fv-target.danger .fvt-val {
  color: var(--fellow-pink, #f63392);
}
.ml-lesson-content .capacity-spectrum {
  padding: 24px 18px 18px;
}
.ml-lesson-content .cs-track {
  background: #ffe0ef;
}
.ml-lesson-content .csm-dot,
.ml-lesson-content .csm-dot.low,
.ml-lesson-content .csm-dot.sweet,
.ml-lesson-content .csm-dot.high {
  border-color: #fff;
  background: var(--fellow-pink, #f63392);
}
.ml-lesson-content .csm-label,
.ml-lesson-content .csm-label.sweet,
.ml-lesson-content .cs-axis,
.ml-lesson-content .db-desc {
  color: #6f7282;
}
.ml-lesson-content .decomp-formula-box,
.ml-lesson-content .vc-bound-box,
.ml-lesson-content .sauer-box {
  background: linear-gradient(145deg, #fff, #fff7fb);
  color: #171827;
}
.ml-lesson-content .dfb-main,
.ml-lesson-content .dfb-expand,
.ml-lesson-content .vbb-formula,
.ml-lesson-content .sb-formula,
.ml-lesson-content .proof-formula,
.ml-lesson-content .ds-formula,
.ml-lesson-content .def-formula,
.ml-lesson-content .math-display,
.ml-lesson-content .formula-box {
  border: 1px solid rgba(246,51,146,.14);
  background: #fff7fb;
  color: #171827;
}
.ml-lesson-content .solution-box .sb-header,
.ml-lesson-content .diagnosis-table th,
.ml-lesson-content .model-table th,
.ml-lesson-content .vc-table th,
.ml-lesson-content .pt-row.header,
.ml-lesson-content .wpt-row.header {
  background: #fff7fb;
  color: #171827;
}
.ml-lesson-content .hypo-stat {
  border: 1px solid rgba(246,51,146,.18);
  background: rgba(255,255,255,.92);
  color: #171827;
}
.ml-lesson-content table {
  display: table;
  width: 100%;
}

@media (max-width: 1024px) {
  .ml-lesson-page .lesson-hero {
    padding: 24px;
  }
}

/* ML topbar reset: keep reference-site topbar CSS from leaking into HerAI layout */
.ml-lesson-page .lesson-topbar {
  position: static;
  top: auto;
  z-index: auto;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.ml-overview .lesson-topbar {
  position: relative;
  top: auto;
  z-index: auto;
  height: auto;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 20px 0 16px;
  border: 0;
  border-bottom: 1px solid var(--fellow-line);
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

/* HerAI shell guard: stop standalone lesson CSS from overriding dashboard pages */
.lesson-detail-page,
.ai-lab-lesson,
.ai-lab-overview {
  --bg: #fffafe;
  --bg-2: #fff7fb;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --border: var(--fellow-line, #f2dfe9);
  --border-s: rgba(246,51,146,.14);
  --text: #171827;
  --text-2: #6f7282;
  --text-3: #8e91a0;
  --accent: var(--fellow-pink, #f63392);
}

.lesson-detail-page .fellow-main,
.ai-lab-lesson .fellow-main,
.ai-lab-overview .fellow-main {
  color: #171827;
  font-family: "Inter", sans-serif;
}

.lesson-detail-page .lesson-topbar,
.ai-lab-lesson .lesson-topbar,
.ai-lab-overview .lesson-topbar {
  position: static;
  top: auto;
  z-index: auto;
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #171827;
  backdrop-filter: none;
  box-shadow: none;
}

.ai-lab-overview .lesson-topbar {
  position: relative;
  gap: 16px;
  margin: 0;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--fellow-line, #f2dfe9);
}

.lesson-detail-page .lesson-topbar-inner,
.ai-lab-lesson .lesson-topbar-inner {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: auto;
  min-height: 0;
  background: transparent;
}

.lesson-detail-page .navbar-left,
.lesson-detail-page .navbar-center,
.lesson-detail-page .navbar-right,
.ai-lab-lesson .navbar-left,
.ai-lab-lesson .navbar-center,
.ai-lab-lesson .navbar-right {
  min-width: 0;
}

.lesson-detail-page .lesson-breadcrumb,
.ai-lab-lesson .lesson-breadcrumb,
.ai-lab-overview .lesson-breadcrumb {
  min-width: 0;
  color: #697083;
}

.lesson-detail-page .lesson-breadcrumb a,
.ai-lab-lesson .lesson-breadcrumb a,
.ai-lab-overview .lesson-breadcrumb a,
.lesson-detail-page .lesson-breadcrumb a span,
.ai-lab-lesson .lesson-breadcrumb a span,
.ai-lab-overview .lesson-breadcrumb a span {
  color: var(--fellow-pink, #f63392);
}

.lesson-detail-page .lesson-breadcrumb > span:not(.lesson-breadcrumb-separator),
.ai-lab-lesson .lesson-breadcrumb > span:not(.lesson-breadcrumb-separator),
.ai-lab-overview .lesson-breadcrumb > span:not(.lesson-breadcrumb-separator) {
  color: #171827;
}

.lesson-detail-page .lesson-breadcrumb-separator,
.ai-lab-lesson .lesson-breadcrumb-separator,
.ai-lab-overview .lesson-breadcrumb-separator {
  color: #8e91a0;
  font-size: 0.75rem;
  margin: 0 4px;
}

.lesson-detail-page .fellow-actions,
.ai-lab-lesson .fellow-actions,
.ai-lab-overview .fellow-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
}

.lesson-detail-page .fellow-search,
.ai-lab-lesson .fellow-search,
.ai-lab-overview .fellow-search {
  min-width: 220px;
  max-width: 340px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid var(--fellow-line, #f2dfe9);
  border-radius: 999px;
  background: #fff;
  color: #697083;
}

.lesson-detail-page .fellow-search input,
.ai-lab-lesson .fellow-search input,
.ai-lab-overview .fellow-search input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #171827;
  font-family: "Inter", sans-serif;
}

.lesson-detail-page .fellow-icon-button,
.ai-lab-lesson .fellow-icon-button,
.ai-lab-overview .fellow-icon-button,
.lesson-detail-page .fellow-user-button,
.ai-lab-lesson .fellow-user-button,
.ai-lab-overview .fellow-user-button {
  background: #fff;
  border: 1px solid var(--fellow-line, #f2dfe9);
  color: #171827;
  box-shadow: 0 10px 24px rgba(246,51,146,.06);
}

.lesson-detail-page .lesson-layout,
.ai-lab-lesson .lesson-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 310px);
  align-items: start;
  gap: 18px;
  min-height: 0;
  padding-top: 0;
}

.lesson-detail-page .lesson-main,
.ai-lab-lesson .lesson-main {
  min-width: 0;
  display: block;
}

.lesson-detail-page .lesson-main-content,
.ai-lab-lesson .lesson-main-content {
  min-width: 0;
}

.lesson-detail-page .lesson-body,
.ai-lab-lesson .lesson-body {
  width: 100%;
}

@media (max-width: 1120px) {
  .lesson-detail-page .lesson-layout,
  .ai-lab-lesson .lesson-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  .lesson-detail-page .lesson-topbar,
  .ai-lab-lesson .lesson-topbar,
  .ai-lab-overview .lesson-topbar,
  .lesson-detail-page .lesson-topbar-inner,
  .ai-lab-lesson .lesson-topbar-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .lesson-detail-page .fellow-actions,
  .ai-lab-lesson .fellow-actions,
  .ai-lab-overview .fellow-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .lesson-detail-page .fellow-icon-button,
  .ai-lab-lesson .fellow-icon-button,
  .ai-lab-overview .fellow-icon-button {
    margin-left: auto;
  }

  .lesson-detail-page .fellow-search,
  .ai-lab-lesson .fellow-search,
  .ai-lab-overview .fellow-search {
    flex: 1 1 220px;
    min-width: 0;
  }

  .lesson-detail-page .fellow-user-button,
  .ai-lab-lesson .fellow-user-button,
  .ai-lab-overview .fellow-user-button,
  .ai-lab-overview .lesson-topbar .fellow-user-button {
    min-width: 0;
  }

  .ai-lab-overview .lesson-hero {
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .lesson-detail-page .fellow-actions,
  .ai-lab-lesson .fellow-actions,
  .ai-lab-overview .fellow-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .lesson-detail-page .fellow-user-button span:not(.avatar-img),
  .lesson-detail-page .fellow-user-button > i,
  .ai-lab-lesson .fellow-user-button span:not(.avatar-img),
  .ai-lab-lesson .fellow-user-button > i,
  .ai-lab-overview .fellow-user-button span:not(.avatar-img),
  .ai-lab-overview .fellow-user-button > i {
    display: none;
  }
}