.vocab-card {
  min-height: 238px;
  overflow: hidden;
  padding: 0;
}

.vocab-visual {
  position: relative;
  height: 116px;
  overflow: hidden;
  border-bottom: 1px solid #4af4df55;
  background: #06191d;
}

.vocab-visual > span {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  border: 1px solid #4af4df88;
  background: #031216dd;
  color: #bdfbf0;
  padding: 4px 6px;
  font: 900 9px ui-monospace, monospace;
  letter-spacing: .06em;
}

.atlas-crop {
  background-image: url("assets/language-lab-visual-atlas-v1.png");
  background-repeat: no-repeat;
  background-size: 300% auto;
  background-position: var(--atlas-x) var(--atlas-y);
}

.exact-model svg {
  width: 100%;
  height: 100%;
  display: block;
  background: radial-gradient(circle at 50% 50%, #12454c, #06191d 70%);
}

.model-cloud { fill: #4af4df18; stroke: #4af4df88; stroke-width: 2; }
.model-orbit { fill: none; stroke: #b9ff3990; stroke-width: 2; }
.model-nucleus { fill: #0b2528; stroke: #ffc94a; stroke-width: 3; }
.model-particle { stroke: #eafff3; stroke-width: 1.5; }
.proton { fill: #ff6b78; }
.neutron { fill: #8ed7d2; }
.model-electron { fill: #b9ff39; stroke: #06191d; stroke-width: 2; }
.observe-eye path,
.measure-ruler rect { fill: #4af4df22; stroke: #4af4df; stroke-width: 3; }
.observe-eye circle { fill: #b9ff39; }
.measure-ruler path,
.measure-thermometer path { fill: none; stroke: #ffc94a; stroke-width: 3; }
.measure-thermometer circle { fill: #ff6b78; stroke: #ffc94a; stroke-width: 3; }
.circuit-battery,
.circuit-sample { fill: #173f43; stroke: #ffc94a; stroke-width: 3; }
.circuit-wire { fill: none; stroke: #4af4df; stroke-width: 4; }
.circuit-bulb { fill: #b9ff3955; stroke: #b9ff39; stroke-width: 3; }
.circuit-rays { fill: none; stroke: #ffc94a; stroke-width: 3; }
.circuit-charge { fill: #eafff3; }

.vocab-copy {
  padding: 12px 52px 14px 14px;
}

.vocab-card .speak-word {
  top: 126px;
}

@media (max-width: 620px) {
  .vocab-card { min-height: 0; display: grid; grid-template-columns: 112px 1fr; }
  .vocab-visual { height: 100%; min-height: 112px; border-right: 1px solid #4af4df55; border-bottom: 0; }
  .vocab-copy { padding: 11px 48px 11px 11px; }
  .vocab-card .speak-word { top: 10px; }
}