/**
 * Tesla Coil course accents
 */

.tc-course {
  --dd-accent: #5ec8c2;
}

.tc-warn {
  border-left-color: var(--imaginatio-accent, #ff7a6e) !important;
  background: color-mix(in srgb, var(--imaginatio-accent, #ff7a6e) 10%, var(--color-surface)) !important;
}

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

.tc-lab__banner {
  padding: 0.55rem 0.85rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffb4a8;
  background: color-mix(in srgb, #ff7a6e 14%, #111a17);
  border-bottom: 1px solid color-mix(in srgb, #ff7a6e 35%, var(--color-panel-outline));
}

.tc-lab canvas {
  display: block;
  width: 100%;
  touch-action: none;
}

.tc-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);
}

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

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

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