.emt-cpr-lab {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(85, 214, 190, 0.32);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(85, 214, 190, 0.1), transparent 44%), #101c28;
  color: var(--text);
}
.emt-cpr-lab [hidden] { display: none !important; }
.emt-cpr-head { display: grid; justify-items: start; gap: 7px; }
.emt-cpr-head h3 { margin: 0; font-size: 1.17rem; }
.emt-cpr-head p,
.emt-cpr-presets p,
.emt-cpr-timeline-copy,
.emt-cpr-fraction,
.emt-cpr-timeline-note,
.emt-cpr-text-equivalent,
.emt-cpr-safety,
.emt-cpr-references { margin: 0; color: #c5d4dd; line-height: 1.5; }
.emt-cpr-head p { max-width: 88ch; }
.emt-cpr-lab button { min-height: 36px; }
.emt-cpr-lab :is(button, input, select):focus-visible { outline: 2px solid #a8eaff; outline-offset: 3px; }
.emt-cpr-lab button:disabled { opacity: 0.5; cursor: not-allowed; }

.emt-cpr-photo-study {
  display: grid;
  gap: 15px;
  padding: 16px;
  border: 1px solid rgba(216, 230, 231, 0.32);
  border-radius: 10px;
  background: #10202a;
}
.emt-cpr-photo-intro { display: grid; gap: 5px; }
.emt-cpr-photo-kicker { color: #a1e8d9; font-size: 0.69rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.emt-cpr-photo-intro h4 { margin: 0; color: #f4f8f5; font-size: 1.1rem; }
.emt-cpr-photo-intro p { max-width: 82ch; margin: 0; color: #cbd9d7; font-size: 0.81rem; line-height: 1.5; }
.emt-cpr-photo-layout { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(290px, 0.9fr); gap: 16px; align-items: start; }
.emt-cpr-photo-figure { position: sticky; top: 16px; min-width: 0; margin: 0; overflow: hidden; border: 1px solid rgba(245, 238, 218, 0.28); border-radius: 8px; background: #08131a; }
.emt-cpr-photo-frame { position: relative; }
.emt-cpr-training-photo { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 714; object-fit: contain; background: #02090e; }
.emt-cpr-contact-marker { position: absolute; left: 4%; bottom: 4%; min-height: 38px; padding: 6px 9px; border: 2px solid #f4f2d7; border-radius: 999px; background: rgba(5, 23, 29, 0.9); box-shadow: 0 0 0 4px rgba(5, 23, 29, 0.45); color: #fffced; font-size: 0.7rem; font-weight: 800; cursor: pointer; }
.emt-cpr-contact-marker[aria-expanded="true"] { background: #166558; }
.emt-cpr-photo-observation { margin: 0; padding: 10px 13px; border-bottom: 1px solid rgba(245, 238, 218, 0.2); background: #183b3a; color: #e7f6ec; font-size: 0.76rem; line-height: 1.5; }
.emt-cpr-photo-caption { padding: 11px 13px 13px; color: #cbd9d7; font-size: 0.72rem; line-height: 1.5; }
.emt-cpr-photo-caption strong { color: #f2e0be; }
.emt-cpr-photo-study a { color: #a0eadb; text-underline-offset: 2px; }
.emt-cpr-photo-evidence { display: grid; gap: 9px; min-width: 0; }
.emt-cpr-photo-instruction,
.emt-cpr-photo-limit,
.emt-cpr-photo-sources,
.emt-cpr-photo-progress { margin: 0; color: #c7d7da; font-size: 0.75rem; line-height: 1.45; }
.emt-cpr-photo-claims { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: claim; }
.emt-cpr-photo-claim { counter-increment: claim; display: grid; gap: 7px; padding: 10px 11px; border: 1px solid rgba(232, 238, 235, 0.16); border-radius: 7px; background: rgba(3, 12, 19, 0.53); }
.emt-cpr-photo-claim::before { content: "CLAIM " counter(claim, decimal-leading-zero); color: #91b8b9; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.08em; }
.emt-cpr-photo-claim strong { color: #edf5f2; font-size: 0.76rem; line-height: 1.4; }
.emt-cpr-photo-options { display: flex; flex-wrap: wrap; gap: 6px; }
.emt-cpr-photo-options button { min-height: 38px; padding: 6px 9px; font-size: 0.69rem; }
.emt-cpr-photo-options button[aria-pressed="true"] { border-color: #8bd9ca; background: rgba(85, 214, 190, 0.17); color: #f2fff9; }
.emt-cpr-photo-claim[data-result="review"] { border-color: rgba(229, 180, 123, 0.55); }
.emt-cpr-photo-claim[data-result="supported"] { border-color: rgba(85, 214, 190, 0.42); }
.emt-cpr-photo-feedback { margin: 0; color: #c8dedb; font-size: 0.72rem; line-height: 1.45; }
.emt-cpr-photo-claim[data-result="review"] .emt-cpr-photo-feedback { color: #f0cf9c; }
.emt-cpr-photo-feedback:empty { display: none; }
.emt-cpr-photo-progress { padding: 9px 10px; border-left: 3px solid #55d6be; background: rgba(85, 214, 190, 0.08); }
.emt-cpr-photo-retry { justify-self: start; min-height: 39px; font-size: 0.73rem; }
.emt-cpr-photo-limit { color: #ead3b4; }
.emt-cpr-photo-sources { font-size: 0.7rem; }

.emt-cpr-presets { display: grid; gap: 9px; padding: 13px; border: 1px solid rgba(111, 182, 255, 0.28); border-radius: 8px; background: rgba(111, 182, 255, 0.065); }
.emt-cpr-presets h4,
.emt-cpr-controls h4,
.emt-cpr-stage h4,
.emt-cpr-timeline-section h4 { margin: 0; font-size: 0.95rem; }
.emt-cpr-presets p { font-size: 0.77rem; }
.emt-cpr-preset-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.emt-cpr-preset-buttons button { font-size: 0.75rem; }
.emt-cpr-preset-buttons button[aria-pressed="true"] { border-color: #55d6be; background: rgba(85, 214, 190, 0.16); color: #e4fcf6; }

.emt-cpr-work { display: grid; grid-template-columns: minmax(270px, 0.85fr) minmax(0, 1.4fr); gap: 13px; align-items: start; }
.emt-cpr-controls,
.emt-cpr-stage,
.emt-cpr-timeline-section { display: grid; gap: 13px; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; background: rgba(4, 13, 22, 0.49); }
.emt-cpr-controls h5 { margin: 3px 0 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.82rem; }
.emt-cpr-field { display: grid; gap: 6px; }
.emt-cpr-field-head { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; }
.emt-cpr-field strong { font-size: 0.76rem; }
.emt-cpr-field output { color: #8ee9d7; font-size: 0.72rem; font-weight: 800; }
.emt-cpr-field input[type="range"] { width: 100%; accent-color: #55d6be; }
.emt-cpr-field select { min-height: 36px; padding: 6px 8px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 6px; background: #1c2a35; color: var(--text); }
.emt-cpr-checkbox { display: flex; align-items: flex-start; gap: 8px; color: #d2e1e5; font-size: 0.76rem; line-height: 1.4; cursor: pointer; }
.emt-cpr-checkbox input { flex: 0 0 auto; margin-top: 3px; accent-color: #55d6be; }

.emt-cpr-manikin-row { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 14px; align-items: center; }
.emt-cpr-manikin {
  --compression-travel: 24px;
  --release-offset: 0px;
  --beat-duration: 0.55s;
  position: relative;
  min-height: 234px;
  border: 1px solid rgba(111, 182, 255, 0.24);
  border-radius: 10px;
  background: radial-gradient(circle at 50% 56%, rgba(111, 182, 255, 0.15), transparent 43%), #0b1824;
  overflow: hidden;
}
.emt-cpr-manikin::before { content: "VIRTUAL MANIKIN"; position: absolute; top: 9px; left: 9px; color: #8caebc; font-size: 0.61rem; font-weight: 850; letter-spacing: 0.08em; }
.emt-cpr-manikin-head { position: absolute; top: 21px; left: calc(50% - 26px); width: 52px; height: 52px; border-radius: 50%; background: #598ba2; }
.emt-cpr-manikin-torso { position: absolute; left: calc(50% - 64px); top: 75px; width: 128px; height: 142px; border-radius: 52px 52px 25px 25px; background: linear-gradient(90deg, #396278, #5b91a5 49%, #396278); }
.emt-cpr-chest-plate { position: absolute; left: calc(50% - 37px); top: 107px; width: 74px; height: 50px; border: 3px solid rgba(182, 236, 240, 0.8); border-radius: 50%; background: rgba(116, 205, 213, 0.28); animation: emt-cpr-press var(--beat-duration) ease-in-out infinite; }
.emt-cpr-hands { position: absolute; left: calc(50% - 44px); top: 91px; width: 88px; height: 27px; border-radius: 14px; background: #e1a878; box-shadow: 0 7px 0 #b97951; transform: rotate(-13deg); animation: emt-cpr-hands var(--beat-duration) ease-in-out infinite; }
.emt-cpr-breath-rise { position: absolute; left: calc(50% - 45px); top: 104px; width: 90px; height: 57px; border: 2px solid #b5e8ff; border-radius: 48%; opacity: 0; transform: scale(0.9); transition: opacity 220ms ease, transform 220ms ease; }
.emt-cpr-manikin[data-breath="visible"] .emt-cpr-breath-rise { opacity: 0.9; transform: scale(1.17); box-shadow: 0 0 16px rgba(181, 232, 255, 0.42); }
.emt-cpr-manikin[data-pressing="false"] :is(.emt-cpr-chest-plate, .emt-cpr-hands) { animation: none; }
.emt-cpr-manikin[data-pressing="false"] .emt-cpr-chest-plate { transform: translateY(var(--release-offset)); }
.emt-cpr-manikin[data-pressing="false"] .emt-cpr-hands { transform: translateY(var(--release-offset)) rotate(-13deg); }
@keyframes emt-cpr-press {
  0%, 100% { transform: translateY(var(--release-offset)); }
  48% { transform: translateY(var(--compression-travel)); }
}
@keyframes emt-cpr-hands {
  0%, 100% { transform: translateY(var(--release-offset)) rotate(-13deg); }
  48% { transform: translateY(var(--compression-travel)) rotate(-13deg); }
}
.emt-cpr-stage-copy { display: grid; gap: 9px; }
.emt-cpr-stage-state { color: #d8f6ee; font-size: 0.9rem; }
.emt-cpr-stage-copy p { margin: 0; color: #c8dbe1; font-size: 0.78rem; line-height: 1.45; }
.emt-cpr-stage-copy .emt-cpr-manikin-note { padding: 9px 10px; border-left: 3px solid #e5b47b; color: #e7d1b5; background: rgba(229, 180, 123, 0.08); }
.emt-cpr-indicators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.emt-cpr-indicator { padding: 10px 11px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px; background: rgba(2, 10, 18, 0.48); }
.emt-cpr-indicator[data-aligned="true"] { border-color: rgba(85, 214, 190, 0.38); }
.emt-cpr-indicator[data-aligned="false"] { border-color: rgba(229, 180, 123, 0.44); }
.emt-cpr-indicator strong { color: #d9edf1; font-size: 0.76rem; }
.emt-cpr-indicator[data-aligned="true"] strong { color: #91e9d8; }
.emt-cpr-indicator[data-aligned="false"] strong { color: #edc798; }
.emt-cpr-indicator p { margin: 5px 0 0; color: #b8cbd3; font-size: 0.72rem; line-height: 1.43; }
.emt-cpr-indicator:last-child { grid-column: 1 / -1; }

.emt-cpr-timeline-copy,
.emt-cpr-fraction,
.emt-cpr-timeline-note,
.emt-cpr-text-equivalent,
.emt-cpr-safety { font-size: 0.78rem; }
.emt-cpr-timeline-bar { position: relative; display: flex; height: 38px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; background: #0b1723; overflow: hidden; }
.emt-cpr-segment { flex: 0 0 auto; height: 100%; }
.emt-cpr-segment-compressions { background: #55d6be; }
.emt-cpr-segment-breaths { background: #77bdf0; }
.emt-cpr-segment-extra { background: #e5b47b; }
.emt-cpr-segment-aed { background: #ed7e77; }
.emt-cpr-segment-switch { background: #bd93ee; }
.emt-cpr-playhead { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 8px #fff; }
.emt-cpr-timeline-labels { display: flex; justify-content: space-between; color: #a9bec8; font-size: 0.68rem; font-weight: 700; }
.emt-cpr-replay-field { max-width: 650px; }
.emt-cpr-replay-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.emt-cpr-replay-actions button { font-size: 0.74rem; }
.emt-cpr-fraction { padding: 10px 12px; border-left: 3px solid #55d6be; background: rgba(85, 214, 190, 0.07); }
.emt-cpr-interruption-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; margin: 0; padding-left: 22px; color: #cadbe0; font-size: 0.75rem; line-height: 1.45; }
.emt-cpr-timeline-note { color: #aabec8; }
.emt-cpr-comparison { display: grid; gap: 13px; padding: 17px; border: 1px solid rgba(111, 182, 255, 0.32); border-radius: 9px; background: linear-gradient(145deg, rgba(111, 182, 255, 0.1), rgba(5, 16, 26, 0.82) 48%); }
.emt-cpr-comparison-kicker { color: #9bd1fb; font-size: 0.69rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.emt-cpr-comparison h4 { margin: 0; color: #f1f8fa; font-size: 1rem; }
.emt-cpr-comparison button { height: auto; min-height: 40px; padding: 8px 12px; line-height: 1.3; white-space: normal; }
.emt-cpr-comparison-intro,
.emt-cpr-saved-run-note,
.emt-cpr-comparison-feedback,
.emt-cpr-comparison-lesson { max-width: 90ch; margin: 0; color: #cbdde6; font-size: 0.78rem; line-height: 1.5; }
.emt-cpr-comparison-setup { display: grid; grid-template-columns: minmax(240px, 0.85fr) minmax(270px, 1.15fr); gap: 12px 18px; align-items: end; padding: 14px; border: 1px solid rgba(219, 234, 242, 0.16); border-radius: 8px; background: rgba(3, 14, 23, 0.52); }
.emt-cpr-comparison-setup > button { justify-self: start; }
.emt-cpr-saved-run-note { align-self: center; }
.emt-cpr-comparison-change,
.emt-cpr-prediction-group,
.emt-cpr-comparison-scrub { display: grid; gap: 8px; }
.emt-cpr-comparison-change strong,
.emt-cpr-prediction-group strong,
.emt-cpr-comparison-scrub strong { color: #e4f0f2; font-size: 0.77rem; }
.emt-cpr-comparison-change select { min-height: 40px; width: 100%; padding: 6px 9px; border: 1px solid rgba(255, 255, 255, 0.27); border-radius: 6px; background: #1c2a35; color: var(--text); }
.emt-cpr-prediction-choices { display: flex; flex-wrap: wrap; gap: 7px; }
.emt-cpr-prediction-choices button { min-height: 40px; }
.emt-cpr-prediction-choices button[aria-pressed="true"] { border-color: #a3ddfe; background: rgba(111, 182, 255, 0.2); color: #eefaff; }
.emt-cpr-reveal { min-height: 42px; }
.emt-cpr-comparison-result { display: grid; gap: 13px; padding-top: 13px; border-top: 1px solid rgba(219, 234, 242, 0.2); }
.emt-cpr-comparison-feedback { padding: 10px 12px; border-left: 3px solid #77bdf0; background: rgba(111, 182, 255, 0.08); color: #e2f2f9; }
.emt-cpr-comparison-scrub { max-width: 620px; }
.emt-cpr-comparison-scrub input { width: 100%; accent-color: #77bdf0; }
.emt-cpr-comparison-scrub output { color: #9bd1fb; font-size: 0.75rem; font-weight: 800; }
.emt-cpr-comparison-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.emt-cpr-comparison-card { display: grid; gap: 9px; min-width: 0; padding: 13px; border: 1px solid rgba(219, 234, 242, 0.2); border-radius: 8px; background: rgba(3, 14, 23, 0.66); }
.emt-cpr-comparison-card h5 { margin: 0; color: #f0f9fa; font-size: 0.84rem; }
.emt-cpr-comparison-bar { height: 42px; }
.emt-cpr-comparison-settings,
.emt-cpr-comparison-time,
.emt-cpr-comparison-moment { margin: 0; color: #c5dbe0; font-size: 0.73rem; line-height: 1.45; }
.emt-cpr-comparison-time { color: #b7eadf; font-weight: 700; }
.emt-cpr-comparison-moment { color: #9bd1fb; }
.emt-cpr-comparison-lesson { padding: 10px 12px; border-left: 3px solid #e5b47b; background: rgba(229, 180, 123, 0.08); color: #eddbc1; }
.emt-cpr-comparison-load { display: flex; flex-wrap: wrap; gap: 8px; }
.emt-cpr-comparison-load button { flex: 1 1 185px; }
.emt-cpr-text-equivalent { padding: 10px 12px; border: 1px solid rgba(111, 182, 255, 0.2); border-radius: 7px; background: rgba(111, 182, 255, 0.06); }
.emt-cpr-safety { color: #e4cbaa; }
.emt-cpr-references { font-size: 0.72rem; }
.emt-cpr-references a { color: #96e8dc; }
.emt-cpr-live-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1000px) {
  .emt-cpr-work { grid-template-columns: 1fr; }
  .emt-cpr-comparison-setup { grid-template-columns: 1fr; }
}
@media (max-width: 850px) {
  .emt-cpr-photo-layout { grid-template-columns: 1fr; }
  .emt-cpr-photo-figure { position: static; }
}
@media (max-width: 680px) {
  .emt-cpr-lab { padding: 14px; }
  .emt-cpr-photo-study { padding: 12px; }
  .emt-cpr-photo-caption { font-size: 0.75rem; }
  .emt-cpr-contact-marker { min-height: 34px; padding: 5px 7px; font-size: 0.65rem; }
  .emt-cpr-photo-options button { flex: 1 1 115px; }
  .emt-cpr-manikin-row { grid-template-columns: 1fr; }
  .emt-cpr-manikin { min-height: 215px; }
  .emt-cpr-indicators,
  .emt-cpr-interruption-list,
  .emt-cpr-comparison-cards { grid-template-columns: 1fr; }
  .emt-cpr-indicator:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .emt-cpr-manikin :is(.emt-cpr-chest-plate, .emt-cpr-hands) { animation: none; }
}