/**
 * Teleidoscope course — extends dodecahedron-course layout tokens
 */

.tl-course {
  --dd-accent: var(--education-accent, #c9a227);
}

.tl-lab {
  border: 1px solid var(--color-panel-outline);
  border-radius: 1rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--dd-accent, #c9a227) 14%, transparent), transparent 55%),
    var(--color-bg-accent);
}

.tl-lab__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.75rem;
  min-height: 260px;
}

.tl-lab__stage canvas[data-tl-out] {
  display: block;
  max-width: 100%;
  touch-action: none;
  cursor: crosshair;
  border-radius: 0.5rem;
}

.tl-lab__src {
  display: none;
  border-radius: 0.5rem;
  border: 1px solid var(--color-panel-outline);
  background: #0d1412;
}

@media (min-width: 720px) {
  .tl-lab__src {
    display: block;
  }
}

.tl-lab__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--color-panel-outline);
  background: color-mix(in srgb, var(--color-surface) 90%, transparent);
}

.tl-lab__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.tl-lab__label input[type="range"] {
  width: 7rem;
  accent-color: var(--dd-accent, #c9a227);
}

.tl-lab__hint {
  margin: 0;
  padding: 0 0.85rem 0.85rem;
  font-size: 0.8rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.home-spotlight__card--teleidoscope {
  border-color: color-mix(in srgb, #5ec8c2 40%, var(--color-panel-outline));
}

.home-spotlight__card--teleidoscope .entry-label {
  color: #5ec8c2;
}

:root[data-theme="light"] .home-spotlight__card--teleidoscope .entry-label {
  color: #1f7f7a;
}