.interactive-lab {
  overflow: hidden;
}

.lab-grid {
  display: grid;
  gap: 0.82rem;
  margin-top: 0.9rem;
}

.lab-controls-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.lab-controls-grid label {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.lab-controls-grid input,
.lab-controls-grid select {
  width: 100%;
  min-width: 0;
}

.lab-controls-grid output {
  color: var(--accent-deep);
  font-family: var(--mono);
  font-size: 0.78rem;
}

.lab-canvas,
.visual-example canvas {
  display: block;
  width: 100%;
  height: 320px;
  min-height: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
}

.lab-readout,
.lab-explanation {
  margin: 0;
  padding: 0.62rem 0.75rem;
  border-left: 3px solid var(--accent);
  background: var(--code);
}

.lab-readout {
  display: flex;
  align-items: flex-start;
  height: 5.15rem;
  overflow: auto;
  color: var(--ink) !important;
  font-family: var(--mono);
  font-size: 0.84rem !important;
  line-height: 1.45;
  white-space: pre-wrap;
}

.lab-explanation {
  height: 5.65rem;
  overflow: auto;
  color: var(--muted) !important;
  line-height: 1.55;
}

.lab-bars,
.code-usage-bars,
.token-bars {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

.lab-bars {
  min-height: 8.5rem;
}

.lab-grid[data-lab="post-training"] .lab-bars {
  min-height: 12.2rem;
}

.lab-grid[data-lab="ar-decoding"] .lab-bars {
  height: 8.5rem;
  overflow: auto;
}

.lab-grid[data-lab="post-training"] .lab-bars {
  height: 12.2rem;
  overflow: auto;
}

.lab-row {
  display: grid;
  grid-template-columns: minmax(0, 8.4rem) minmax(0, 1fr) 4.6rem;
  gap: 0.6rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.86rem;
}

.lab-row i {
  display: block;
  height: 0.78rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
}

.lab-row i::before {
  display: block;
  width: var(--level, 0%);
  height: 100%;
  content: "";
  background: linear-gradient(90deg, var(--accent), var(--gold));
}

.lab-row.warn i::before {
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.token-bars .token,
.lab-bars .token {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 3.6rem;
  gap: 0.55rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.token-bars .bar,
.lab-bars .bar {
  height: 0.8rem;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
}

.token-bars .bar span,
.lab-bars .bar span {
  display: block;
  width: var(--level, 0%);
  height: 100%;
  background: var(--accent);
}

#causalMask {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.18rem;
}

#causalMask span {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
}

#causalMask span.on {
  background: rgba(15, 111, 104, 0.68);
}

@media (max-width: 760px) {
  .lab-controls-grid {
    grid-template-columns: 1fr;
  }

  .lab-canvas,
  .visual-example canvas {
    height: 250px;
  }

  .lab-row,
  .token-bars .token {
    grid-template-columns: 1fr;
    gap: 0.28rem;
  }

  .lab-readout,
  .lab-explanation {
    height: auto;
    min-height: 2.75rem;
    max-height: none;
  }

  .lab-grid[data-lab="ar-decoding"] .lab-bars,
  .lab-grid[data-lab="post-training"] .lab-bars {
    height: auto;
    min-height: 8.5rem;
    overflow: visible;
  }
}

@media (min-width: 900px) {
  .lab-grid:has(.lab-canvas) {
    grid-template-columns: minmax(13rem, 0.74fr) minmax(0, 1.58fr);
    column-gap: 1rem;
    align-items: start;
  }

  .lab-grid:has(.lab-canvas) .lab-controls-grid {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .lab-grid:has(.lab-canvas) .lab-canvas {
    grid-column: 2;
    grid-row: 1 / span 4;
  }

  .lab-grid:has(.lab-canvas) .lab-readout,
  .lab-grid:has(.lab-canvas) .lab-explanation {
    grid-column: 1;
  }

  .lab-grid:has(.lab-canvas) .code-usage-bars {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .lab-grid:has(.lab-canvas) .code-usage-bars .lab-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .lab-grid[data-lab="ar-decoding"],
  .lab-grid[data-lab="post-training"] {
    grid-template-columns: minmax(13rem, 0.78fr) minmax(0, 1.5fr);
    column-gap: 1rem;
    align-items: start;
  }

  .lab-grid[data-lab="ar-decoding"] .lab-controls-grid,
  .lab-grid[data-lab="post-training"] .lab-controls-grid {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .lab-grid[data-lab="ar-decoding"] .lab-bars,
  .lab-grid[data-lab="post-training"] .lab-bars {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .lab-grid[data-lab="ar-decoding"] .lab-readout,
  .lab-grid[data-lab="ar-decoding"] .lab-explanation,
  .lab-grid[data-lab="post-training"] .lab-readout,
  .lab-grid[data-lab="post-training"] .lab-explanation {
    grid-column: 1;
  }
}