.emt-heart-lung-lab {
  display: grid;
  gap: 18px;
  padding: clamp(15px, 2.5vw, 24px);
  border: 1px solid rgba(102, 196, 231, 0.32);
  border-radius: 12px;
  background: radial-gradient(circle at 88% 0%, rgba(82, 183, 219, 0.11), transparent 36%), #101c28;
  color: var(--text, #e9f1f5);
}
.emt-heart-lung-lab * { box-sizing: border-box; }
.emt-heart-lung-lab [hidden] { display: none !important; }
.emt-heart-lung-lab :is(button, input, textarea):focus-visible {
  outline: 2px solid #a8edff;
  outline-offset: 3px;
}
.emt-hl-head { display: grid; gap: 7px; max-width: 85ch; }
.emt-hl-head h3 { margin: 0; font-size: 1.25rem; }
.emt-hl-head p,
.emt-hl-history > p,
.emt-hl-signal > p,
.emt-hl-compare > p,
.emt-hl-handoff > p,
.emt-hl-diagram-equivalent,
.emt-hl-signal-note,
.emt-hl-sources { margin: 0; color: #bed0da; line-height: 1.55; }
.emt-heart-lung-lab :is(h4, h5) { margin: 0; }
.emt-heart-lung-lab button { min-height: 40px; }

.emt-hl-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.emt-hl-control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 12px;
  padding: 14px;
  border: 1px solid rgba(127, 186, 210, 0.28);
  border-radius: 9px;
  background: rgba(4, 14, 24, 0.45);
  font-weight: 750;
}
.emt-hl-control > span { font-size: 0.82rem; }
.emt-hl-control output { color: #85e1e8; font-size: 0.8rem; text-align: right; }
.emt-hl-control input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: #64d5d8; min-height: 28px; }

.emt-hl-stage {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(110, 196, 220, 0.28);
  border-radius: 10px;
  background: #0a1722;
}
.emt-hl-figure {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: clamp(12px, 2vw, 18px);
  border: 1px solid rgba(158, 212, 230, 0.15);
  border-radius: 9px;
  background: radial-gradient(ellipse at 50% 49%, rgba(61, 112, 135, 0.17), transparent 64%), #0d1b29;
}
.emt-hl-figure-heading,
.emt-hl-kicker {
  color: #8ca9b8;
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.08em;
}
.emt-hl-diagram {
  display: grid;
  grid-template-columns: minmax(56px, 1fr) 30px 58px 30px minmax(56px, 1fr);
  align-items: center;
  justify-items: center;
  gap: min(2.5vw, 10px);
  width: min(100%, 530px);
  min-height: 168px;
  margin: 0 auto;
}
.emt-hl-lung {
  position: relative;
  width: min(100%, 115px);
  height: 138px;
  border: 2px solid #5dbfcb;
  background: linear-gradient(180deg, rgba(93, 191, 203, 0.22), rgba(93, 191, 203, 0.08));
  box-shadow: 0 0 14px rgba(93, 191, 203, 0.08), inset 0 0 17px rgba(93, 191, 203, 0.08);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.emt-hl-left-lung { border-radius: 54% 28% 46% 42% / 27% 24% 56% 52%; transform: rotate(-6deg); }
.emt-hl-right-lung { border-radius: 28% 54% 42% 46% / 24% 27% 52% 56%; transform: rotate(6deg); }
.emt-hl-lung::before {
  content: "";
  position: absolute;
  top: 17%;
  bottom: 18%;
  left: 50%;
  border-left: 2px solid rgba(132, 214, 218, 0.56);
  transform: rotate(12deg);
}
.emt-hl-right-lung::before { transform: rotate(-12deg); }
.emt-hl-lung::after {
  content: "";
  position: absolute;
  inset: 19px 13px 20px;
  border: 1px dashed transparent;
  border-radius: 45%;
  transition: border-color 180ms ease;
}
.emt-hl-heart {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid #c3848b;
  border-radius: 50%;
  color: #e8959b;
  background: rgba(207, 110, 121, 0.14);
  font-size: 43px;
  line-height: 1;
  transition: background 180ms ease, box-shadow 180ms ease;
}
.emt-hl-connector { color: #92aebd; font-size: 1.3rem; }
.emt-hl-figure[data-breathing="1"] .emt-hl-lung {
  border-color: #f2bf75;
  background: linear-gradient(180deg, rgba(242, 191, 117, 0.27), rgba(242, 191, 117, 0.08));
  box-shadow: 0 0 21px rgba(242, 191, 117, 0.18);
}
.emt-hl-figure[data-breathing="2"] .emt-hl-lung {
  border-color: #f29375;
  background: linear-gradient(180deg, rgba(242, 147, 117, 0.36), rgba(242, 147, 117, 0.1));
  box-shadow: 0 0 27px rgba(242, 147, 117, 0.22);
}
.emt-hl-figure[data-perfusion="1"] .emt-hl-heart {
  background: rgba(234, 167, 110, 0.23);
  box-shadow: 0 0 19px rgba(234, 167, 110, 0.17);
}
.emt-hl-figure[data-perfusion="2"] .emt-hl-heart {
  background: rgba(233, 123, 112, 0.38);
  box-shadow: 0 0 26px rgba(233, 123, 112, 0.27);
}
.emt-hl-figure[data-history="1"] .emt-hl-lung::after,
.emt-hl-figure[data-history="2"] .emt-hl-lung::after,
.emt-hl-figure[data-history="3"] .emt-hl-lung::after { border-color: rgba(177, 202, 235, 0.55); }
.emt-hl-figure[data-history="2"] .emt-hl-lung::after { border-width: 2px; }
.emt-hl-figure[data-history="3"] .emt-hl-lung::after { border-width: 3px; }
.emt-hl-diagram-labels { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.emt-hl-tag {
  padding: 5px 8px;
  border: 1px solid rgba(153, 205, 225, 0.3);
  border-radius: 999px;
  background: rgba(120, 172, 193, 0.09);
  color: #d1e5eb;
  font-size: 0.72rem;
}
.emt-hl-figure figcaption { max-width: 83ch; margin: 0 auto; color: #a9c0ca; font-size: 0.78rem; line-height: 1.45; text-align: center; }
.emt-hl-diagram-equivalent { border-left: 3px solid #61c7d0; padding: 8px 12px; background: rgba(97, 199, 208, 0.07); font-size: 0.83rem; }

.emt-hl-history,
.emt-hl-signal,
.emt-hl-compare,
.emt-hl-handoff { display: grid; gap: 10px; }
.emt-hl-history-buttons,
.emt-hl-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.emt-hl-history-buttons button[aria-pressed="true"],
.emt-hl-signal button[aria-pressed="true"] {
  border-color: #8bdce3;
  color: #e7ffff;
  background: rgba(81, 178, 190, 0.23);
}
.emt-hl-history-answer {
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(154, 205, 218, 0.2);
  border-radius: 7px;
  background: rgba(2, 12, 20, 0.4);
  color: #cce2e8;
  line-height: 1.45;
}
.emt-hl-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.emt-hl-lane {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 169px;
  padding: 14px;
  border: 1px solid rgba(133, 191, 215, 0.26);
  border-radius: 8px;
  background: #112331;
}
.emt-hl-lane:nth-child(1) { border-top: 3px solid #66ccd0; }
.emt-hl-lane:nth-child(2) { border-top: 3px solid #e2ad75; }
.emt-hl-lane:nth-child(3) { border-top: 3px solid #8aaff0; }
.emt-hl-lane h4 { font-size: 0.92rem; }
.emt-hl-lane p { margin: 0; color: #d3e0e7; font-size: 0.83rem; line-height: 1.55; }
.emt-hl-lanes[data-signal="poor"] .emt-hl-lane:nth-child(3) { box-shadow: inset 0 0 0 1px rgba(245, 188, 108, 0.35); }
.emt-hl-signal-note { font-size: 0.84rem; }

.emt-hl-compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.emt-hl-compare-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(153, 204, 224, 0.22);
  border-radius: 8px;
  background: rgba(5, 15, 24, 0.5);
}
.emt-hl-compare-card[data-changed="true"] { border-color: rgba(236, 172, 116, 0.48); }
.emt-hl-compare-card h5 { font-size: 0.83rem; }
.emt-hl-compare-card p { margin: 0; color: #c8d9e1; font-size: 0.77rem; line-height: 1.45; }
.emt-hl-change { justify-self: start; color: #94d8dc; font-size: 0.69rem; font-weight: 750; }
.emt-hl-compare-card[data-changed="true"] .emt-hl-change { color: #efbf85; }
.emt-hl-handoff textarea {
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  border: 1px solid rgba(155, 208, 227, 0.3);
  border-radius: 7px;
  resize: vertical;
  background: #081621;
  color: var(--text, #e9f1f5);
  font: inherit;
  line-height: 1.5;
}
.emt-hl-handoff button { justify-self: start; }
.emt-hl-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.emt-hl-live-summary { margin: 0; color: #adc4cf; font-size: 0.77rem; line-height: 1.4; }
.emt-hl-sources { font-size: 0.75rem; }
.emt-hl-sources a { color: #8dcfee; }

@media (max-width: 760px) {
  .emt-hl-lanes,
  .emt-hl-compare-grid { grid-template-columns: 1fr; }
  .emt-hl-lane { min-height: 0; }
}
@media (max-width: 570px) {
  .emt-hl-controls { grid-template-columns: 1fr; }
  .emt-hl-diagram { grid-template-columns: minmax(42px, 1fr) 18px 46px 18px minmax(42px, 1fr); gap: 3px; min-height: 128px; }
  .emt-hl-lung { height: 104px; }
  .emt-hl-heart { width: 46px; height: 46px; font-size: 35px; }
  .emt-hl-connector { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .emt-hl-lung,
  .emt-hl-lung::after,
  .emt-hl-heart { transition: none; }
}