:root {
  color-scheme: dark;
  --bg: #090f16;
  --panel: #161e29;
  --panel-2: #101823;
  --line: #2d3a49;
  --line-soft: rgba(255, 255, 255, 0.1);
  --text: #edf3f8;
  --muted: #a5b3c2;
  --accent: #55d6be;
  --accent-2: #6fb6ff;
  --danger: #ff6d7a;
  --warn: #ffcc66;
  --ok: #5ee28f;
  --glass: rgba(16, 24, 35, 0.84);
  --glass-strong: rgba(12, 20, 31, 0.92);
  --glass-soft: rgba(255, 255, 255, 0.045);
  --shadow-soft: 0 18px 38px rgba(0, 0, 0, 0.24);
  --shadow-deep: 0 26px 70px rgba(0, 0, 0, 0.34);
  --paper: #fff8f8;
  --paper-major: rgba(234, 78, 94, 0.35);
  --paper-minor: rgba(234, 78, 94, 0.14);
  --trace: #18251d;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Trial 47 uses separate atrial electrical witnesses. The 2D TEE badges are
   source labels, not anatomical appendage motion or measured wall strain. */
.trial47-ra-electrical,
.trial47-la-electrical {
  fill: none;
  stroke-width: 5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px currentColor);
}

.trial47-ra-electrical {
  color: #ffd17c;
  stroke: #ffd17c;
  stroke-dasharray: 7 4;
}

.trial47-la-electrical {
  color: #d8b6fb;
  stroke: #d8b6fb;
  stroke-dasharray: 2 5;
}

.trial47-modality-overlay text {
  paint-order: stroke;
  stroke: rgba(6, 18, 26, 0.5);
  stroke-width: 0.35;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  background:
    linear-gradient(135deg, rgba(85, 214, 190, 0.08), rgba(9, 15, 22, 0.2) 36%, transparent 56%),
    linear-gradient(315deg, rgba(255, 109, 122, 0.055), transparent 40%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 84px),
    var(--bg);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("assets/ui-backdrop.svg");
  background-position: center;
  background-size: cover;
  opacity: 0.34;
  mix-blend-mode: screen;
}

button,
select {
  font: inherit;
}

.app-shell {
  position: relative;
  width: min(1840px, 100%);
  margin: 0 auto;
  padding: 18px;
}

.app-version-fixed {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 900;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid rgba(85, 214, 190, 0.24);
  border-radius: 999px;
  color: #bffff2;
  background: rgba(7, 13, 20, 0.74);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.app-version-fixed[hidden] {
  display: none;
}

.module-view[hidden],
.launch-intro[hidden] {
  display: none !important;
}

.launch-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 48% 42%, rgba(85, 214, 190, 0.22), transparent 22%),
    linear-gradient(135deg, rgba(85, 214, 190, 0.12), transparent 42%),
    linear-gradient(315deg, rgba(255, 109, 122, 0.14), transparent 44%),
    #070d14;
  transition: opacity 280ms ease, visibility 280ms ease;
}

.launch-intro.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.launch-intro-core {
  width: min(760px, 92vw);
  display: grid;
  gap: 22px;
  justify-items: center;
  padding: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(9, 15, 22, 0.82);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.launch-intro-icon {
  width: 108px;
  height: 108px;
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 36px rgba(85, 214, 190, 0.32),
    0 18px 38px rgba(0, 0, 0, 0.36);
  animation: introBeat 1400ms ease-in-out infinite;
}

.launch-intro-trace {
  width: min(620px, 74vw);
  height: 130px;
  overflow: hidden;
  border: 1px solid rgba(85, 214, 190, 0.16);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(85, 214, 190, 0.09) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(180deg, rgba(85, 214, 190, 0.07) 0 1px, transparent 1px 28px),
    rgba(5, 12, 18, 0.86);
}

.launch-intro-trace svg {
  width: 100%;
  height: 100%;
}

.intro-grid-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 2;
}

.intro-pulse-line {
  fill: none;
  stroke: #55d6be;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 920;
  stroke-dashoffset: 920;
  filter: drop-shadow(0 0 12px rgba(85, 214, 190, 0.48));
  animation: introTrace 2200ms ease-in-out forwards;
}

.launch-intro-copy {
  display: grid;
  gap: 6px;
  text-align: center;
}

.launch-intro-copy p {
  font-size: 1.55rem;
  font-weight: 820;
}

.launch-intro-copy span {
  color: var(--muted);
  font-weight: 680;
}

.launch-skip-button {
  position: fixed;
  right: 24px;
  bottom: 24px;
}

.main-menu-view {
  min-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 18px;
}

.launch-menu-head,
.module-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid rgba(85, 214, 190, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.06), transparent 28%),
    linear-gradient(90deg, rgba(85, 214, 190, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    var(--glass-strong);
  box-shadow: var(--shadow-soft);
}

.launch-brand,
.module-topbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.launch-menu-actions {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.launch-scope-field select {
  min-width: 230px;
}

.launch-hero {
  position: relative;
  overflow: hidden;
  min-height: 230px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  align-items: end;
  gap: 20px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(9, 15, 22, 0.08), rgba(9, 15, 22, 0.7)),
    url("assets/ui-backdrop.svg"),
    linear-gradient(115deg, rgba(255, 109, 122, 0.13), transparent 42%),
    linear-gradient(290deg, rgba(111, 182, 255, 0.13), transparent 46%),
    rgba(12, 20, 31, 0.76);
  background-position: center;
  background-size: cover;
  box-shadow: var(--shadow-soft);
}

.launch-hero h2,
.module-placeholder-primary h2 {
  max-width: 780px;
  margin-bottom: 10px;
  font-size: clamp(1.8rem, 3vw, 3.45rem);
  line-height: 1.04;
  letter-spacing: 0;
}

.launch-hero p,
.module-placeholder-primary p {
  max-width: 820px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.55;
}

.launch-scope-summary,
.module-scope-note {
  display: grid;
  gap: 7px;
  padding: 18px;
  border: 1px solid rgba(85, 214, 190, 0.18);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.66);
}

.launch-scope-summary span,
.module-scope-note span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  text-transform: uppercase;
}

.launch-scope-summary b,
.module-scope-note b {
  font-size: 1.05rem;
}

.module-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.module-section {
  display: grid;
  gap: 12px;
}

.module-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding: 0 2px;
}

.module-section-head h2 {
  color: var(--text);
  font-size: 1.05rem;
  letter-spacing: 0;
}

.module-section-head span {
  max-width: 580px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: right;
}

.skill-module-grid {
  grid-template-columns: minmax(320px, 460px);
}

.module-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background:
    linear-gradient(140deg, rgba(255, 255, 255, 0.07), transparent 28%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)),
    var(--glass);
  box-shadow: var(--shadow-soft);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.module-card::before {
  content: "Open";
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  padding: 5px 9px;
  border: 1px solid rgba(85, 214, 190, 0.34);
  border-radius: 999px;
  color: #dffff6;
  font-size: 0.68rem;
  font-weight: 930;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(7, 13, 20, 0.72);
}

.primary-module-card::before {
  content: "Start";
  border-color: rgba(249, 160, 63, 0.46);
  color: #fff0dc;
  background: rgba(249, 160, 63, 0.12);
}

.module-card::after {
  content: "";
  position: absolute;
  inset: auto 18px 0 18px;
  height: 2px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(90deg, transparent, rgba(85, 214, 190, 0.58), transparent);
  opacity: 0.42;
}

.module-card:hover,
.module-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(85, 214, 190, 0.48);
  background:
    linear-gradient(160deg, rgba(85, 214, 190, 0.11), rgba(255, 255, 255, 0.025)),
    rgba(16, 24, 35, 0.94);
}

.module-card:hover::before,
.module-card:focus-visible::before {
  border-color: rgba(85, 214, 190, 0.72);
  color: #07131d;
  background: linear-gradient(180deg, #86f1df, #55d6be);
}

.primary-module-card:hover::before,
.primary-module-card:focus-visible::before {
  border-color: rgba(249, 160, 63, 0.92);
  background: linear-gradient(180deg, #ffd08a, #f9a03f);
}

.primary-module-card {
  border-color: rgba(85, 214, 190, 0.34);
}

.module-card-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(85, 214, 190, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(85, 214, 190, 0.18), rgba(111, 182, 255, 0.08)),
    rgba(7, 13, 20, 0.58);
}

.module-card-icon svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.module-card span:last-child {
  display: grid;
  gap: 10px;
}

.module-card b {
  font-size: 1.12rem;
  line-height: 1.16;
}

.module-card small {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.module-card em {
  margin-top: auto;
  color: #c7d3df;
  font-size: 0.78rem;
  font-style: normal;
}

.module-card em strong {
  color: var(--accent);
  font-weight: 780;
}

/* Main menu: course and Skills lead into three distinct supporting workspaces. */
.main-menu-view {
  width: min(1380px, 100%);
  margin-inline: auto;
  min-height: calc(100vh - 36px);
  grid-template-rows: none;
  align-content: start;
  gap: 24px;
  padding-bottom: 60px;
}

.main-menu-view .launch-menu-head {
  position: relative;
  z-index: 4;
  min-height: 78px;
  padding: 13px 20px;
  border-color: rgba(151, 188, 208, 0.15);
  border-radius: 16px;
  background: rgba(11, 21, 31, 0.94);
}

.main-menu-view .launch-brand {
  gap: 14px;
}

.main-menu-view .launch-brand .app-icon-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.main-menu-view .launch-brand .eyebrow {
  margin-bottom: 3px;
  color: #8ccbbf;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
}

.main-menu-view .launch-brand h1 {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.main-menu-view .launch-menu-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.main-menu-view .launch-menu-actions .secondary-button {
  height: 40px;
  padding-inline: 11px;
  border-color: transparent;
  color: #bdcbd5;
  background: transparent;
  font-size: 0.76rem;
  font-weight: 720;
  white-space: nowrap;
}

.main-menu-view .launch-menu-actions .secondary-button:hover,
.main-menu-view .launch-menu-actions .secondary-button:focus-visible {
  border-color: rgba(85, 214, 190, 0.25);
  color: #effffb;
  background: rgba(85, 214, 190, 0.1);
}

.main-menu-view .launch-help-menu {
  position: relative;
  min-width: 0;
}

.main-menu-view .launch-help-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #bdcbd5;
  font-size: 0.76rem;
  font-weight: 720;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}

.main-menu-view .launch-help-trigger::-webkit-details-marker { display: none; }
.main-menu-view .launch-help-trigger::marker { content: ""; }
.main-menu-view .launch-help-trigger span { color: #8ccbbf; }

.main-menu-view .launch-help-trigger:hover,
.main-menu-view .launch-help-trigger:focus-visible,
.main-menu-view .launch-help-menu[open] .launch-help-trigger {
  border-color: rgba(85, 214, 190, 0.25);
  color: #effffb;
  background: rgba(85, 214, 190, 0.1);
}

.main-menu-view .launch-help-menu-panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 10;
  display: grid;
  gap: 5px;
  width: min(220px, calc(100vw - 48px));
  padding: 8px;
  border: 1px solid rgba(151, 188, 208, 0.34);
  border-radius: 11px;
  background: #0c1d29;
  box-shadow: 0 16px 30px rgba(1, 8, 14, 0.55);
}

.main-menu-view .launch-help-menu-panel .secondary-button {
  width: 100%;
  min-height: 44px;
  text-align: left;
  border-color: rgba(151, 188, 208, 0.14);
  background: rgba(255, 255, 255, 0.035);
}

.main-menu-view .launch-hero {
  min-height: 300px;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  align-items: center;
  gap: 28px;
  padding: clamp(24px, 3vw, 40px);
  border-color: rgba(116, 188, 185, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 82% 8%, rgba(74, 159, 179, 0.16), transparent 36%),
    linear-gradient(122deg, rgba(19, 48, 55, 0.94), rgba(11, 26, 39, 0.96) 56%, rgba(10, 21, 34, 0.96));
}

.main-menu-view .launch-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
}

.main-menu-view .launch-hero .eyebrow {
  margin-bottom: 12px;
  color: #9ce4d3;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
}

.main-menu-view .launch-hero h2 {
  max-width: none;
  margin: 0 0 12px;
  font-size: clamp(2.3rem, 3.5vw, 4rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.main-menu-view .launch-hero-copy > p:not(.eyebrow) {
  max-width: 640px;
  color: #c1d1d8;
  font-size: 0.94rem;
  line-height: 1.53;
}

.main-menu-view .launch-level-row {
  display: flex;
  width: 100%;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.main-menu-view .launch-scope-field {
  min-width: min(100%, 244px);
  color: #b5d1cf;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

.main-menu-view .launch-scope-field select {
  width: 100%;
  min-width: 0;
  height: 42px;
  border-color: rgba(138, 224, 207, 0.35);
  background-color: #172f3a;
}

.main-menu-view .launch-scope-summary {
  min-height: 42px;
  align-content: center;
  gap: 2px;
  padding: 5px 12px;
  border-color: rgba(138, 224, 207, 0.2);
  background: rgba(7, 20, 29, 0.56);
}

.main-menu-view .launch-scope-summary span {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}

.main-menu-view .launch-scope-summary b {
  color: #e7f8f4;
  font-size: 0.8rem;
}

.main-menu-view .launch-hero-art {
  position: relative;
  height: 210px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid rgba(112, 209, 198, 0.25);
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(118, 212, 206, 0.07) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(0deg, rgba(118, 212, 206, 0.07) 0 1px, transparent 1px 22px),
    radial-gradient(circle at 50% 45%, rgba(27, 116, 116, 0.2), transparent 66%),
    rgba(6, 24, 33, 0.9);
  box-shadow: inset 0 0 46px rgba(4, 13, 21, 0.52);
}

.main-menu-view .launch-hero-art svg {
  position: absolute;
  inset: 22px -6% 22px;
  width: 112%;
  height: calc(100% - 44px);
  filter: drop-shadow(0 0 8px rgba(91, 237, 207, 0.35));
}

.main-menu-view .launch-art-trace {
  fill: none;
  stroke: #75ead2;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.main-menu-view .launch-art-caption,
.main-menu-view .launch-art-foot {
  position: relative;
  z-index: 1;
  color: #90b8b8;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.main-menu-view .launch-art-foot {
  align-self: flex-end;
  color: #c2e9e1;
}

.main-menu-view .launch-featured,
.main-menu-view .launch-explore {
  display: grid;
  gap: 14px;
}

.main-menu-view .launch-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-inline: 2px;
}

.main-menu-view .launch-section-heading .eyebrow {
  color: #83c7b9;
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

.main-menu-view .launch-section-heading h2 {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  letter-spacing: -0.02em;
}

.main-menu-view .launch-section-heading > p {
  max-width: 390px;
  color: #a9bbc7;
  font-size: 0.8rem;
  line-height: 1.4;
  text-align: right;
}

.main-menu-view .launch-feature-grid,
.main-menu-view .launch-explore-grid {
  display: grid;
  gap: 15px;
}

.main-menu-view .launch-feature-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.main-menu-view .launch-explore-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.main-menu-view .module-card {
  --module-accent: #70d6c2;
  min-height: 218px;
  grid-template-columns: 50px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 16px;
  row-gap: 16px;
  padding: 22px;
  border-color: rgba(151, 188, 208, 0.19);
  border-radius: 16px;
  background:
    radial-gradient(circle at 10% 0, color-mix(in srgb, var(--module-accent) 13%, transparent), transparent 52%),
    linear-gradient(150deg, #1a2a38, #101c2a 78%);
}

.main-menu-view .launch-feature-grid .module-card {
  min-height: 230px;
}

.main-menu-view .course-module-card {
  --module-accent: #8ac0ff;
  border-color: rgba(138, 192, 255, 0.34);
}

.main-menu-view .primary-module-card {
  --module-accent: #e8bd7d;
  border-color: rgba(232, 189, 125, 0.3);
}

.main-menu-view .review-module-card {
  --module-accent: #b8a8e7;
}

.main-menu-view .module-card::before {
  display: none;
}

.main-menu-view .module-card::after {
  inset: 0 auto 0 0;
  width: 3px;
  height: 100%;
  border-radius: 0;
  background: var(--module-accent);
  opacity: 0.82;
}

.main-menu-view .module-card:hover,
.main-menu-view .module-card:focus-visible {
  border-color: var(--module-accent);
  background:
    radial-gradient(circle at 10% 0, color-mix(in srgb, var(--module-accent) 18%, transparent), transparent 58%),
    linear-gradient(150deg, #213340, #112230 78%);
}

.main-menu-view .module-card-icon {
  width: 50px;
  height: 50px;
  border-color: color-mix(in srgb, var(--module-accent) 32%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--module-accent) 12%, #0d1b29);
}

.main-menu-view .module-card-icon svg {
  width: 27px;
  height: 27px;
  stroke: var(--module-accent);
}

.main-menu-view .module-card > .module-card-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}

.main-menu-view .module-card-kicker {
  color: var(--module-accent);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.main-menu-view .module-card b {
  font-size: clamp(1.12rem, 1.35vw, 1.35rem);
  letter-spacing: -0.025em;
}

.main-menu-view .module-card small {
  color: #bdccd7;
  font-size: 0.82rem;
  line-height: 1.45;
}

.main-menu-view .module-card em {
  margin-top: auto;
  color: #9faeba;
  font-size: 0.74rem;
  line-height: 1.3;
}

.main-menu-view .module-card em strong {
  color: #e0efe9;
}

.main-menu-view .module-card > .module-card-action {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(215, 237, 237, 0.12);
  color: var(--module-accent);
  font-size: 0.78rem;
  font-weight: 780;
}

.main-menu-view .module-card-action span {
  display: inline;
  font-size: 1.05rem;
  line-height: 1;
}

.main-menu-view .compact-module-card {
  min-height: 204px;
  padding: 19px;
}

.main-menu-view .compact-module-card .module-card-icon {
  width: 44px;
  height: 44px;
}

.main-menu-view .compact-module-card .module-card-icon svg {
  width: 24px;
  height: 24px;
}

.main-menu-view .launch-beta-preview[hidden] {
  display: none;
}

.main-menu-view .launch-beta-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 19px 23px;
  border: 1px dashed rgba(205, 174, 121, 0.34);
  border-radius: 16px;
  background: linear-gradient(100deg, rgba(77, 60, 35, 0.3), rgba(16, 27, 38, 0.9) 75%);
}

.main-menu-view .launch-beta-label {
  margin-bottom: 5px;
  color: #f1cf92;
  font-size: 0.63rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.main-menu-view .launch-beta-preview h2 {
  margin-bottom: 5px;
  font-size: 1.05rem;
}

.main-menu-view .launch-beta-preview p:last-child {
  max-width: 750px;
  color: #c7c8c5;
  font-size: 0.8rem;
  line-height: 1.45;
}

.main-menu-view .launch-beta-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.main-menu-view .launch-beta-preview .secondary-button {
  flex: 0 0 auto;
  border-color: rgba(205, 174, 121, 0.42);
  color: #ffe6b8;
  background: rgba(72, 53, 31, 0.48);
}

@media (max-width: 1040px) {
  .main-menu-view .launch-hero {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr);
  }

  .main-menu-view .launch-explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .main-menu-view .review-module-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 740px) {
  .main-menu-view {
    gap: 19px;
    padding-bottom: 44px;
  }

  .main-menu-view .launch-menu-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px;
  }

  .main-menu-view .launch-brand .app-icon-mark {
    width: 42px;
    height: 42px;
  }

  .main-menu-view .launch-brand h1 {
    font-size: 1.25rem;
  }

  .main-menu-view .launch-menu-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .main-menu-view .launch-menu-actions > .secondary-button,
  .main-menu-view .launch-help-trigger {
    min-width: 0;
    height: 44px;
    padding-inline: 3px;
    border-color: rgba(151, 188, 208, 0.11);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.69rem;
  }

  .main-menu-view .launch-help-trigger {
    padding-inline: 7px;
    white-space: normal;
  }

  .main-menu-view .launch-help-menu-panel .secondary-button {
    height: 44px;
    padding-inline: 11px;
  }

  .main-menu-view .launch-hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 24px 22px;
  }

  .main-menu-view .launch-hero-art {
    display: none;
  }

  .main-menu-view .launch-hero h2 {
    font-size: clamp(2rem, 7vw, 2.8rem);
  }

  .main-menu-view .launch-level-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: 8px;
    margin-top: 19px;
  }

  .main-menu-view .launch-scope-field {
    width: 100%;
  }

  .main-menu-view .launch-scope-summary {
    min-height: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 7px 10px;
  }

  .main-menu-view .launch-section-heading {
    align-items: start;
    flex-direction: column;
    gap: 4px;
  }

  .main-menu-view .launch-section-heading > p {
    text-align: left;
  }

  .main-menu-view .launch-feature-grid,
  .main-menu-view .launch-explore-grid {
    grid-template-columns: 1fr;
  }

  .main-menu-view .review-module-card {
    grid-column: auto;
  }

  .main-menu-view .module-card,
  .main-menu-view .launch-feature-grid .module-card,
  .main-menu-view .compact-module-card {
    min-height: 0;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 17px;
  }

  .main-menu-view .module-card-icon {
    width: 44px;
    height: 44px;
  }

  .main-menu-view .module-card > .module-card-action {
    grid-column: 1 / -1;
  }

  .main-menu-view .launch-beta-preview {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 18px;
  }

  .main-menu-view .launch-beta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .main-menu-view .launch-beta-preview .secondary-button {
    width: 100%;
  }
}

/* Keep the first course launch in view on narrow and short mobile screens without moving menu controls. */
@media (max-width: 420px), (max-width: 740px) and (max-height: 800px) {
  .main-menu-view {
    gap: 10px;
  }

  .main-menu-view .launch-menu-head {
    gap: 7px;
    padding: 9px;
  }

  .main-menu-view .launch-hero {
    padding: 14px 17px;
  }

  .main-menu-view .launch-hero .eyebrow {
    margin-bottom: 3px;
  }

  .main-menu-view .launch-hero h2 {
    margin-bottom: 5px;
    font-size: clamp(1.8rem, 6.5vw, 2rem);
    line-height: 1.05;
  }

  .main-menu-view .launch-hero-copy > p:not(.eyebrow) {
    font-size: 0.84rem;
    line-height: 1.4;
  }

  .main-menu-view .launch-level-row {
    gap: 6px;
    margin-top: 9px;
  }

  .main-menu-view .launch-scope-field select {
    height: 40px;
  }

  .main-menu-view .launch-scope-summary {
    padding: 3px 8px;
  }

  .main-menu-view .launch-featured {
    gap: 6px;
  }

  .main-menu-view .launch-section-heading {
    gap: 2px;
  }

  .main-menu-view .launch-section-heading > p {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .main-menu-view .launch-feature-grid .module-card {
    gap: 7px;
    padding: 12px;
  }

  .main-menu-view .course-module-card > .module-card-action {
    padding-top: 5px;
  }
}

@media (max-width: 360px) {
  .main-menu-view .launch-hero {
    padding-block: 10px;
  }

  .main-menu-view .launch-featured {
    gap: 4px;
  }

  .main-menu-view .course-module-card .module-card-copy {
    gap: 4px;
  }
}

.module-placeholder-view {
  min-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 18px;
}

.module-placeholder-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.85fr);
  gap: 18px;
  min-height: 0;
}

.module-placeholder-primary,
.module-placeholder-list,
.course-sequence {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(16, 24, 35, 0.84);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.module-placeholder-primary {
  display: grid;
  align-content: end;
  gap: 18px;
  padding: 30px;
  background:
    linear-gradient(145deg, rgba(85, 214, 190, 0.12), transparent 44%),
    linear-gradient(315deg, rgba(255, 204, 102, 0.08), transparent 44%),
    rgba(16, 24, 35, 0.84);
}

.module-placeholder-list,
.course-sequence {
  display: grid;
  align-content: start;
  gap: 0;
  overflow: hidden;
}

.module-placeholder-list article,
.course-sequence article {
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.module-placeholder-list article:last-child,
.course-sequence article:last-child {
  border-bottom: 0;
}

.module-placeholder-list p,
.course-sequence p {
  margin-top: 7px;
  color: var(--muted);
  line-height: 1.45;
}

.course-sequence article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
}

.course-sequence article > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(85, 214, 190, 0.22);
  border-radius: 8px;
  color: var(--accent);
  background: rgba(7, 13, 20, 0.46);
  font-weight: 820;
}

.course-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 18px;
  transition: grid-template-columns 180ms ease;
}

.course-layout.sidebar-collapsed {
  grid-template-columns: 58px minmax(0, 1fr);
}

.course-sidebar,
.course-workspace,
.course-overview-card,
.course-reading-card,
.course-demo-card,
.course-check-card {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    var(--glass);
  box-shadow: var(--shadow-soft);
}

.course-sidebar {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.sidebar-collapse-toggle {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(85, 214, 190, 0.24);
  border-radius: 8px;
  color: #e7fff8;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(85, 214, 190, 0.1);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.sidebar-collapse-toggle:hover,
.sidebar-collapse-toggle:focus-visible {
  border-color: rgba(85, 214, 190, 0.62);
  background: rgba(85, 214, 190, 0.16);
}

.sidebar-collapse-toggle b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  color: #08131d;
  background: var(--accent);
  font-size: 0.9rem;
  line-height: 1;
}

.course-sidebar.collapsed,
.practice-test-sidebar.collapsed {
  grid-template-rows: minmax(0, 1fr);
  padding: 8px;
  overflow: hidden;
}

.course-sidebar.collapsed > :not(.sidebar-collapse-toggle),
.practice-test-sidebar.collapsed > :not(.sidebar-collapse-toggle) {
  display: none;
}

.course-sidebar.collapsed .sidebar-collapse-toggle,
.practice-test-sidebar.collapsed .sidebar-collapse-toggle {
  min-height: 100%;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  padding: 10px 6px;
  writing-mode: vertical-rl;
}

.course-sidebar.collapsed .sidebar-collapse-toggle b,
.practice-test-sidebar.collapsed .sidebar-collapse-toggle b {
  writing-mode: horizontal-tb;
}

.course-overview-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(7, 13, 20, 0.52), rgba(7, 13, 20, 0.78)),
    url("assets/ui-backdrop.svg"),
    linear-gradient(140deg, rgba(85, 214, 190, 0.12), transparent 58%),
    rgba(7, 13, 20, 0.52);
  background-position: center;
  background-size: cover;
}

.course-overview-card h2 {
  color: var(--text);
  font-size: 1.18rem;
}

.course-overview-card p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.42;
}

.course-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.course-meta-grid div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.5);
}

.course-meta-grid span,
.course-module-progress-row span {
  color: #8fb6ca;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.course-meta-grid b {
  color: #f1f8fc;
  font-size: 0.82rem;
  line-height: 1.25;
}

.course-standard-note {
  padding: 10px 11px;
  border: 1px solid rgba(249, 160, 63, 0.18);
  border-radius: 8px;
  color: #efd9bc;
  font-size: 0.8rem;
  line-height: 1.42;
  background: rgba(249, 160, 63, 0.08);
}

.course-progress-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(85, 214, 190, 0.16);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.58);
}

.course-progress-card span {
  color: var(--accent);
  font-size: 1.32rem;
  font-weight: 850;
}

.course-progress-card small {
  color: var(--muted);
  font-weight: 720;
  text-transform: uppercase;
}

.course-module-progress {
  display: grid;
  gap: 6px;
}

.course-module-progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.course-module-progress-row b {
  color: var(--accent);
  font-size: 0.78rem;
}

.course-lesson-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.course-module-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 4px 2px;
  color: #dceefa;
}

.course-module-heading:first-child {
  margin-top: 0;
}

.course-module-heading span {
  overflow: hidden;
  color: #9fc4d8;
  font-size: 0.7rem;
  font-weight: 930;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.course-module-heading b {
  padding: 3px 7px;
  border: 1px solid rgba(85, 214, 190, 0.22);
  border-radius: 999px;
  color: #dffbf3;
  font-size: 0.68rem;
  background: rgba(85, 214, 190, 0.1);
}

.course-lesson-button {
  width: 100%;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(12, 20, 31, 0.78);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.course-lesson-button:hover,
.course-lesson-button:focus-visible {
  transform: translateX(2px);
  border-color: rgba(111, 182, 255, 0.42);
  background:
    linear-gradient(90deg, rgba(79, 167, 255, 0.1), transparent 60%),
    rgba(12, 20, 31, 0.88);
}

.course-lesson-button.active {
  border-color: rgba(85, 214, 190, 0.58);
  background: rgba(85, 214, 190, 0.12);
}

.course-lesson-button.active > span {
  color: #07131d;
  background: var(--accent);
}

.course-lesson-button.completed {
  border-color: rgba(94, 226, 143, 0.34);
}

.course-lesson-button > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(85, 214, 190, 0.22);
  border-radius: 8px;
  color: var(--accent);
  background: rgba(7, 13, 20, 0.48);
  font-weight: 820;
}

.course-lesson-button > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.course-lesson-button small {
  color: var(--muted);
  line-height: 1.3;
}

.course-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 12px;
  padding: 14px;
}

.course-lesson-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.course-lesson-head h2 {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 1.32rem;
}

.course-lesson-head p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.45;
}

.course-intro-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(85, 214, 190, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(85, 214, 190, 0.1), rgba(79, 167, 255, 0.065)),
    rgba(7, 13, 20, 0.42);
  box-shadow: var(--shadow-soft);
}

.course-intro-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.course-intro-head h3 {
  margin-top: 2px;
  color: #f2f8fc;
  font-size: 1rem;
}

.course-intro-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.course-intro-actions > span {
  padding: 5px 8px;
  border: 1px solid rgba(249, 160, 63, 0.26);
  border-radius: 999px;
  color: #ffe4b8;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(249, 160, 63, 0.1);
}

.course-intro-toggle {
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(85, 214, 190, 0.46);
  border-radius: 7px;
  color: #07131d;
  font-size: 0.74rem;
  font-weight: 930;
  background: linear-gradient(180deg, #86f1df, #55d6be);
  cursor: pointer;
}

.course-intro-card.collapsed {
  align-content: center;
  gap: 0;
  padding: 8px 10px;
  box-shadow: none;
  background: rgba(7, 13, 20, 0.34);
}

.course-intro-card.collapsed .course-intro-grid {
  display: none;
}

.course-intro-card.collapsed .course-intro-head {
  align-items: center;
}

.course-intro-card.collapsed .course-intro-head h3 {
  font-size: 0.9rem;
}

.course-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.course-intro-grid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.course-intro-grid h4 {
  color: #f4f9fc;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.course-intro-grid p {
  color: #c9d7e2;
  font-size: 0.82rem;
  line-height: 1.42;
}

.course-learning-path {
  display: grid;
  gap: 6px;
}

.course-learning-path-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(7, 13, 20, 0.3);
}

.course-learning-path-item > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(85, 214, 190, 0.24);
  border-radius: 6px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 900;
  background: rgba(85, 214, 190, 0.08);
}

.course-learning-path-item p {
  display: grid;
  gap: 2px;
}

.course-learning-path-item b {
  color: #eff8fc;
  font-size: 0.78rem;
  line-height: 1.2;
}

.course-learning-path-item small {
  color: #9db8c9;
  font-size: 0.72rem;
  line-height: 1.25;
}

.course-learning-path-item.active {
  border-color: rgba(249, 160, 63, 0.42);
  background: rgba(249, 160, 63, 0.08);
}

.course-learning-path-item.completed {
  border-color: rgba(94, 226, 143, 0.34);
}

.course-status-pill {
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid rgba(255, 204, 102, 0.24);
  border-radius: 8px;
  color: #ffe2a3;
  background: rgba(255, 204, 102, 0.08);
  font-size: 0.75rem;
  font-weight: 820;
  text-transform: uppercase;
}

.course-status-pill.completed {
  border-color: rgba(94, 226, 143, 0.34);
  color: #bcf5ce;
  background: rgba(94, 226, 143, 0.1);
}

.course-content-grid {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  align-items: start;
  gap: 12px;
}

.course-reading-card,
.course-demo-card,
.course-check-card {
  min-width: 0;
  padding: 14px;
}

.course-reading-card {
  display: grid;
  align-content: start;
  gap: 14px;
  overflow: auto;
}

.course-lesson-article {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.34);
}

.course-learning-step {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(92, 189, 218, 0.26);
  border-radius: 10px;
  background: linear-gradient(130deg, rgba(41, 104, 134, 0.22), rgba(14, 39, 54, 0.22));
}

.course-learning-step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #d4f4ff;
  background: #164560;
  font-size: .82rem;
  font-weight: 800;
}

.course-learning-step h3,
.course-recorded-transfer h3 { margin: 0 0 5px; color: #f3f9fc; font-size: 1rem; }
.course-learning-step p,
.course-recorded-transfer p { margin: 0; color: #c9dce7; line-height: 1.5; }
.course-learning-step .secondary-button { display: block; margin-top: 10px; }
.course-learning-ungraded { display: inline-block; margin-top: 8px; color: #a6d6c7; font-size: .8rem; font-weight: 700; }
.course-lab-debrief-button { justify-self: start; }

.course-recorded-transfer {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid rgba(249, 160, 63, .25);
  border-radius: 10px;
  background: rgba(77, 54, 28, .18);
}

.course-recorded-transfer .course-recorded-boundary { color: #adbec9; font-size: .85rem; }
.course-recorded-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.practicum-sheet-dialog {
  width: min(1050px, calc(100vw - 28px));
  height: min(92vh, 1050px);
  max-width: none;
  max-height: none;
  padding: 16px;
  border: 1px solid rgba(131, 186, 209, .4);
  border-radius: 14px;
  color: #e7f2f7;
  background: #102633;
  box-shadow: 0 24px 70px #000a;
}
.practicum-sheet-dialog::backdrop { background: rgba(2, 10, 17, .8); }
.practicum-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.practicum-sheet-head h2 { margin: 2px 0; }
.practicum-sheet-dialog > p { margin: 7px 0 12px; }
.practicum-sheet-dialog iframe { display: block; width: 100%; height: calc(100% - 102px); border: 0; border-radius: 7px; background: white; }

.course-review-queue {
  display: grid;
  gap: 8px;
  margin: 9px 0;
  padding: 12px;
  border: 1px solid rgba(85, 214, 190, .24);
  border-radius: 9px;
  background: rgba(24, 65, 66, .22);
}
.course-review-queue-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.course-review-queue-head b { color: #bdeedf; font-size: .8rem; }
.course-review-queue p { margin: 0; color: #b9ccd5; font-size: .83rem; line-height: 1.4; }
.course-review-list { display: grid; gap: 7px; max-height: 290px; overflow: auto; }
.course-review-row { display: grid; gap: 5px; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.1); }
.course-review-row span { font-size: .86rem; }
.course-review-row > div { display: flex; flex-wrap: wrap; gap: 6px; }
.course-review-row button { padding: 5px 8px; border: 1px solid rgba(161, 207, 223, .35); border-radius: 6px; color: #e4f4f8; background: #173b4d; cursor: pointer; }
.course-review-row button:focus-visible { outline: 2px solid #e8b96c; outline-offset: 2px; }

.course-lesson-section {
  display: grid;
  gap: 8px;
}

.course-lesson-section + .course-lesson-section {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.course-lesson-section h3 {
  color: #f1f7fb;
  font-size: 1rem;
}

.course-lesson-section p {
  color: #c9d7e2;
  line-height: 1.55;
}

.course-lesson-sources {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.course-lesson-sources ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 20px;
  color: #c9d7e2;
  line-height: 1.45;
}

.course-lesson-source-link {
  color: #8eddf0;
  text-underline-offset: 2px;
}

.course-lesson-source-link:focus-visible {
  outline: 2px solid #e8b96c;
  outline-offset: 3px;
}

.course-lesson-takeaway {
  padding: 11px 12px;
  border: 1px solid rgba(85, 214, 190, 0.24);
  border-radius: 8px;
  color: #dcfff5;
  line-height: 1.48;
  background: rgba(85, 214, 190, 0.08);
}

.course-applied-practice {
  display: grid;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(249, 160, 63, 0.2);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(249, 160, 63, 0.1), rgba(85, 214, 190, 0.06)),
    rgba(7, 13, 20, 0.38);
}

.course-applied-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.course-applied-head h3 {
  margin-top: 2px;
  color: #f3f9fc;
}

.course-applied-module {
  flex: 0 0 auto;
  max-width: 180px;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid rgba(85, 214, 190, 0.28);
  border-radius: 999px;
  color: #dffff6;
  font-size: 0.68rem;
  font-weight: 900;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(85, 214, 190, 0.1);
}

.course-applied-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.course-applied-grid article {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.course-applied-grid span {
  color: #ffd08a;
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.course-applied-grid p,
.course-applied-proof {
  color: #cbdce7;
  font-size: 0.8rem;
  line-height: 1.38;
}

.course-applied-proof {
  padding: 9px 10px;
  border-left: 3px solid rgba(85, 214, 190, 0.76);
  border-radius: 6px;
  background: rgba(85, 214, 190, 0.08);
}

.course-reading-card h3,
.course-check-card h3,
.course-demo-card h3 {
  color: var(--text);
  font-size: 1rem;
}

.course-reading-card ul,
.course-reading-card ol {
  display: grid;
  gap: 8px;
  margin-left: 18px;
  color: #d9e7f2;
  line-height: 1.44;
}

.course-reading-card p,
.course-demo-caption,
.course-check-feedback {
  color: var(--muted);
  line-height: 1.45;
}

.course-engagement-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(94, 226, 143, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(94, 226, 143, 0.13), rgba(79, 167, 255, 0.09)),
    rgba(7, 13, 20, 0.34);
}

.course-engagement-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.course-engagement-mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(94, 226, 143, 0.36);
  border-radius: 8px;
  color: #dfffea;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: rgba(94, 226, 143, 0.14);
}

.course-engagement-card h3 {
  margin-top: 2px;
}

.course-engagement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.course-visual-cues {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.course-engagement-chip,
.course-visual-cue {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #e8f2f9;
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
}

.course-visual-cue {
  min-height: 92px;
  align-items: stretch;
  flex-direction: column;
  justify-content: start;
  gap: 7px;
  padding: 9px;
  border-radius: 8px;
}

.course-visual-cue-art {
  position: relative;
  height: 28px;
  overflow: hidden;
  border: 1px solid rgba(85, 214, 190, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(rgba(85, 214, 190, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 214, 190, 0.1) 1px, transparent 1px),
    rgba(7, 18, 26, 0.74);
  background-size: 12px 12px;
}

.course-visual-cue-art::after {
  content: "";
  position: absolute;
  inset: 7px 8px 6px;
  border-top: 3px solid #55d6be;
  clip-path: polygon(0 50%, 14% 50%, 18% 20%, 24% 86%, 30% 50%, 48% 50%, 54% 30%, 60% 70%, 66% 50%, 100% 50%);
}

.course-visual-cue-label {
  color: #f2f9fc;
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
}

.course-visual-cue-text {
  color: #cfe1eb;
  font-size: 0.77rem;
  font-weight: 760;
  line-height: 1.3;
}

.course-engagement-chip.priority {
  border-color: rgba(249, 160, 63, 0.34);
  color: #fff0da;
  background: rgba(249, 160, 63, 0.12);
}

.course-challenge {
  padding: 10px 11px;
  border-left: 3px solid #f9a03f;
  border-radius: 6px;
  background: rgba(249, 160, 63, 0.09);
}

.course-visual-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 180px);
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(111, 182, 255, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(110deg, rgba(8, 15, 24, 0.28), rgba(8, 15, 24, 0.78)),
    url("assets/ui-backdrop.svg"),
    rgba(7, 13, 20, 0.42);
  background-position: center;
  background-size: cover;
}

.course-visual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(90deg, rgba(85, 214, 190, 0.08), transparent 45%);
}

.course-visual-copy,
.course-visual-art {
  position: relative;
  z-index: 1;
}

.course-visual-copy {
  display: grid;
  gap: 6px;
}

.course-visual-copy h3 {
  color: #f4f9fc;
  font-size: 1rem;
}

.course-visual-copy p:not(.panel-label) {
  color: #bdd1de;
  font-size: 0.9rem;
}

.course-visual-art {
  min-height: 128px;
  display: grid;
  place-items: center;
}

.course-visual-art svg {
  width: min(180px, 100%);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.22));
}

.course-visual-art .visual-screen {
  fill: rgba(9, 15, 22, 0.74);
  stroke: rgba(85, 214, 190, 0.28);
  stroke-width: 2;
}

.course-visual-art .visual-grid {
  fill: url(#courseMiniGrid);
  stroke: rgba(255, 255, 255, 0.1);
}

.course-visual-art #courseMiniGrid path {
  fill: none;
  stroke: rgba(85, 214, 190, 0.16);
  stroke-width: 1;
}

.course-visual-art .visual-trace {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-visual-art .visual-trace-wide,
.course-visual-art .visual-trace-artifact,
.course-visual-art .visual-warning,
.course-visual-art .visual-leads,
.course-visual-art .visual-team,
.course-visual-art .visual-pediatric,
.course-visual-art .visual-patient {
  opacity: 0;
}

.course-visual-art .visual-heart path:first-child {
  fill: rgba(171, 72, 82, 0.44);
  stroke: rgba(222, 137, 136, 0.88);
  stroke-width: 2.5;
}

.course-visual-art .visual-heart-vein,
.course-visual-art .visual-heart-artery,
.course-visual-art .visual-heart-septum {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-visual-art .visual-heart-vein {
  stroke: #6c9bb4;
}

.course-visual-art .visual-heart-artery {
  stroke: #d78485;
}

.course-visual-art .visual-heart-septum {
  stroke: rgba(240, 165, 150, 0.64);
  stroke-width: 2.3;
}

.course-visual-art .visual-heart-pulse,
.course-visual-art .visual-flow,
.course-visual-art .visual-leads,
.course-visual-art .visual-team,
.course-visual-art .visual-pediatric,
.course-visual-art .visual-patient {
  fill: none;
  stroke: rgba(111, 182, 255, 0.78);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-visual-art .visual-patient circle,
.course-visual-art .visual-team circle,
.course-visual-art .visual-pediatric circle,
.course-visual-art .visual-leads circle {
  fill: rgba(85, 214, 190, 0.16);
}

.course-visual-art .visual-warning {
  fill: rgba(255, 204, 102, 0.16);
  stroke: rgba(255, 204, 102, 0.82);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-visual-card[data-visual="waveform"] .visual-heart,
.course-visual-card[data-visual="clinical"] .visual-flow,
.course-visual-card[data-visual="respiratory"] .visual-flow,
.course-visual-card[data-visual="pediatric"] .visual-heart,
.course-visual-card[data-visual="team"] .visual-heart,
.course-visual-card[data-visual="acquisition"] .visual-flow {
  opacity: 0.34;
}

.course-visual-card[data-visual="bls"] .visual-warning,
.course-visual-card[data-visual="wide"] .visual-warning,
.course-visual-card[data-visual="arrest"] .visual-warning,
.course-visual-card[data-visual="clinical"] .visual-warning {
  opacity: 1;
}

.course-visual-card[data-visual="artifact"] .visual-trace-normal,
.course-visual-card[data-visual="wide"] .visual-trace-normal,
.course-visual-card[data-visual="arrest"] .visual-trace-normal,
.course-visual-card[data-visual="block"] .visual-trace-normal {
  opacity: 0;
}

.course-visual-card[data-visual="artifact"] .visual-trace-artifact,
.course-visual-card[data-visual="wide"] .visual-trace-wide,
.course-visual-card[data-visual="arrest"] .visual-trace-wide,
.course-visual-card[data-visual="block"] .visual-trace-wide {
  opacity: 1;
}

.course-visual-card[data-visual="artifact"] .visual-leads,
.course-visual-card[data-visual="acquisition"] .visual-leads {
  opacity: 1;
}

.course-visual-card[data-visual="respiratory"] .visual-patient,
.course-visual-card[data-visual="clinical"] .visual-patient {
  opacity: 1;
}

.course-visual-card[data-visual="team"] .visual-team,
.course-visual-card[data-visual="pediatric"] .visual-pediatric {
  opacity: 1;
}

.course-visual-card[data-visual="pediatric"] .visual-patient,
.course-visual-card[data-visual="team"] .visual-patient,
.course-visual-card[data-visual="team"] .visual-flow {
  opacity: 0;
}

.course-library-aid-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(79, 167, 255, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(79, 167, 255, 0.12), rgba(85, 214, 190, 0.08)),
    rgba(7, 13, 20, 0.36);
}

.course-library-aid-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.course-library-aid-card h3 {
  margin-top: 2px;
  color: #f3f9fc;
}

.course-library-aid-card p {
  color: #c9d7e2;
  line-height: 1.45;
}

.course-library-aid-cases {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 3px 2px 8px;
  scrollbar-color: #60879b transparent;
}

.course-library-aid-case {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: #dceefa;
  font-size: 0.78rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
}

.course-library-aid-case.active {
  border-color: rgba(85, 214, 190, 0.55);
  color: #eafff7;
  background: rgba(85, 214, 190, 0.16);
}

.course-library-aid-workbench {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.course-library-aid-task {
  margin: 0;
  font-size: 0.9rem;
}

.course-library-aid-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.course-library-aid-controls label,
.course-library-aid-question label,
.course-library-aid-time-label {
  color: #d9ecf2;
  font-size: 0.84rem;
  font-weight: 700;
}

.course-library-aid-controls label {
  display: grid;
  gap: 4px;
  min-width: 120px;
  flex: 1 1 120px;
}

.course-library-aid-controls select,
.course-library-aid-question select {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  color: #e9f6fa;
  border: 1px solid rgba(115, 178, 210, 0.58);
  border-radius: 7px;
  background: #132b39;
  padding: 6px 8px;
}

#courseLibraryAidCanvas {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 272px;
  border: 1px solid rgba(115, 178, 210, 0.58);
  border-radius: 7px;
  background: #fff8f8;
}

#courseLibraryAidCursor {
  width: 100%;
  margin: 0;
  accent-color: #ef9a4b;
}

.course-library-aid-readout {
  min-height: 1.3em;
  margin: 0;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.course-library-aid-question {
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr);
}

.course-library-aid-question label {
  margin-top: 4px;
}

.course-library-aid-question select {
  min-width: 0;
}

.course-library-aid-question button {
  justify-self: start;
}

.course-library-aid-feedback {
  min-height: 1.4em;
  margin: 0;
  padding: 8px 10px;
  border-left: 3px solid #77b8d6;
  background: rgba(15, 47, 63, 0.7);
}

.course-library-aid-feedback:empty {
  display: none;
}

.course-library-aid-feedback[data-result="supported"] {
  border-left-color: #55d6be;
}

.course-library-aid-feedback[data-result="review"] {
  border-left-color: #f2bd72;
}

.course-library-aid-notes summary {
  color: #b7dff0;
  cursor: pointer;
  font-weight: 700;
}

.course-library-aid-notes[open] {
  display: grid;
  gap: 8px;
}

@media (max-width: 560px) {
  .course-library-aid-question button {
    width: 100%;
  }
}

.course-library-aid-metrics {
  display: grid;
  gap: 8px;
  margin: 0;
}

.course-library-aid-metrics div {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.course-library-aid-metrics dt {
  color: #8fb6ca;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.course-library-aid-metrics dd {
  margin: 0;
  color: #d9e7f2;
  line-height: 1.42;
}

.course-demo-card {
  min-height: 0;
  display: grid;
  align-content: start;
  grid-template-rows: auto auto auto auto auto auto;
  gap: 10px;
}

.course-demo-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.course-demo-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.course-lead-field {
  min-width: 140px;
}

.course-hint-button {
  min-height: 43px;
  padding-inline: 12px;
  white-space: nowrap;
}

.course-hint-button.active {
  border-color: rgba(94, 226, 143, 0.42);
  color: #eaffef;
  background: rgba(94, 226, 143, 0.15);
}

#courseCanvas {
  width: 100%;
  height: clamp(230px, 30vh, 340px);
  min-height: 230px;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #fffaf8;
}

.course-visual-cue {
  border-color: rgba(79, 167, 255, 0.26);
  color: #dceeff;
  background: rgba(79, 167, 255, 0.09);
}

.course-image-aids {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(79, 167, 255, 0.08), rgba(85, 214, 190, 0.06)),
    rgba(7, 13, 20, 0.36);
}

.course-image-aids-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}

.course-image-aids-head span {
  color: #9fb8c8;
  font-size: 0.78rem;
  font-weight: 750;
}

.course-image-aid-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.course-image-aid-card {
  min-width: 0;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.course-image-aid-card[data-kind="contactPhotoTriptych"] {
  grid-column: 1 / -1;
}

.course-image-aid-card[data-kind="patientTypePhotoGrid"] {
  grid-column: 1 / -1;
}

.course-image-aid-card[data-kind$="Photo"] {
  grid-column: 1 / -1;
}

.course-image-aid-art {
  min-height: 126px;
  overflow: hidden;
  border: 1px solid rgba(85, 214, 190, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 30% 20%, rgba(85, 214, 190, 0.13), transparent 38%),
    rgba(5, 13, 20, 0.72);
}

.course-image-aid-art svg {
  width: 100%;
  height: 100%;
  min-height: 126px;
  display: block;
}

.course-image-aid-card h4 {
  color: #f2f8fc;
  font-size: 0.88rem;
  line-height: 1.25;
}

.course-image-aid-card p {
  color: #bdd1de;
  font-size: 0.8rem;
  line-height: 1.36;
}

.course-image-aid-task {
  display: grid;
  gap: 5px;
  padding: 8px 9px;
  border: 1px solid rgba(85, 214, 190, 0.2);
  border-radius: 7px;
  color: #dffbf3;
  font-size: 0.76rem;
  line-height: 1.34;
  background: rgba(85, 214, 190, 0.075);
}

.course-image-aid-task b {
  color: #86f1df;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.course-photo-aid {
  position: relative;
  min-height: 170px;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #07131d;
}

.course-photo-aid img {
  width: 100%;
  height: 100%;
  min-height: 170px;
  display: block;
  object-fit: cover;
}

.course-image-aid-card[data-kind$="Photo"] .course-photo-aid,
.course-image-aid-card[data-kind$="Photo"] .course-photo-aid img {
  min-height: 220px;
}

.course-photo-aid::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(5, 12, 18, 0.68));
}

.course-photo-aid-callouts {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.course-photo-aid-callouts span {
  padding: 5px 6px;
  border: 1px solid rgba(249, 160, 63, 0.42);
  border-radius: 6px;
  color: #fff0dc;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  background: rgba(7, 13, 20, 0.72);
}

.course-photo-prop-note {
  display: block;
  color: #a8c5d4;
  font-size: .72rem;
  line-height: 1.35;
}

.course-patient-photo-grid {
  min-height: 190px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  overflow: hidden;
  border-radius: 8px;
  background: #07131d;
}

.course-patient-photo-grid img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.course-image-aid-art .aid-bg {
  fill: rgba(8, 18, 28, 0.64);
  stroke: rgba(85, 214, 190, 0.18);
  stroke-width: 1.5;
}

.course-image-aid-art .aid-screen,
.course-image-aid-art .aid-note,
.course-image-aid-art .aid-flow {
  fill: rgba(10, 22, 32, 0.86);
  stroke: rgba(111, 182, 255, 0.38);
  stroke-width: 2;
}

.course-image-aid-art .aid-flow.warn,
.course-image-aid-art .aid-note {
  stroke: rgba(249, 160, 63, 0.56);
}

.course-image-aid-art .aid-gridline,
.course-image-aid-art .aid-line,
.course-image-aid-art .aid-arrow,
.course-image-aid-art .aid-accent {
  fill: none;
  stroke: rgba(85, 214, 190, 0.76);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-image-aid-art .aid-arrow.warn,
.course-image-aid-art .aid-accent {
  stroke: rgba(249, 160, 63, 0.82);
}

.course-image-aid-art .aid-gridline {
  stroke: rgba(85, 214, 190, 0.18);
  stroke-width: 1.5;
}

.course-image-aid-art .aid-trace {
  fill: none;
  stroke: #55d6be;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-image-aid-art .aid-trace.small {
  stroke-width: 3.2;
}

.course-image-aid-art .aid-trace.artifact,
.course-image-aid-art .aid-trace.wide {
  stroke: #f9a03f;
}

.course-image-aid-art .aid-heart {
  fill: rgba(255, 109, 122, 0.2);
  stroke: rgba(255, 109, 122, 0.72);
  stroke-width: 3;
}

.course-image-aid-art .aid-territory {
  fill: rgba(85, 214, 190, 0.28);
}

.course-image-aid-art .aid-territory.warn {
  fill: rgba(249, 160, 63, 0.36);
}

.course-image-aid-art .aid-soft,
.course-image-aid-art .aid-body,
.course-image-aid-art .aid-lung {
  fill: rgba(220, 247, 255, 0.15);
  stroke: rgba(220, 247, 255, 0.32);
  stroke-width: 2;
}

.course-image-aid-art .aid-soft.warn,
.course-image-aid-art .aid-body.warn,
.course-image-aid-art .aid-lung.warn {
  fill: rgba(249, 160, 63, 0.2);
  stroke: rgba(249, 160, 63, 0.48);
}

.course-image-aid-art .aid-dot,
.course-image-aid-art .aid-pad {
  fill: rgba(85, 214, 190, 0.7);
  stroke: rgba(234, 255, 247, 0.72);
  stroke-width: 2;
}

.course-image-aid-art .aid-dot.warn,
.course-image-aid-art .aid-pad.warn {
  fill: rgba(249, 160, 63, 0.86);
}

.course-image-aid-art .aid-skin {
  fill: rgba(210, 171, 145, 0.52);
  stroke: rgba(255, 238, 221, 0.36);
  stroke-width: 1.5;
}

.course-image-aid-art .aid-pad-face {
  fill: rgba(255, 250, 244, 0.94);
  stroke: rgba(255, 255, 255, 0.86);
  stroke-width: 2;
}

.course-image-aid-art .aid-pad-gel {
  fill: rgba(85, 214, 190, 0.56);
  stroke: rgba(8, 18, 28, 0.38);
  stroke-width: 1.5;
}

.course-image-aid-art .aid-pad-gel.warn,
.course-image-aid-art .aid-lift {
  fill: rgba(249, 160, 63, 0.7);
}

.course-image-aid-art .aid-cable,
.course-image-aid-art .aid-hair,
.course-image-aid-art .aid-crack {
  fill: none;
  stroke: rgba(15, 31, 43, 0.86);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-image-aid-art .aid-hair,
.course-image-aid-art .aid-crack {
  stroke: rgba(255, 240, 218, 0.66);
  stroke-width: 1.9;
}

.course-image-aid-art .aid-loop {
  fill: none;
  stroke: rgba(85, 214, 190, 0.44);
  stroke-width: 7;
}

.course-lab-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(85, 214, 190, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(85, 214, 190, 0.1), rgba(79, 167, 255, 0.08)),
    rgba(7, 13, 20, 0.4);
}

.course-lab-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.course-lab-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(249, 160, 63, 0.32);
  border-radius: 999px;
  color: #fff0dc;
  font-size: 0.72rem;
  font-weight: 900;
  background: rgba(249, 160, 63, 0.12);
}

.course-lab-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.course-lab-tabs[hidden] {
  display: none;
}

.course-lab-tabs button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid rgba(111, 182, 255, .32);
  border-radius: 8px;
  color: #d9eaf3;
  font: inherit;
  font-size: .78rem;
  font-weight: 850;
  background: rgba(24, 48, 64, .72);
  cursor: pointer;
}

.course-lab-tabs button[aria-pressed="true"] {
  border-color: #86f1df;
  color: #07151c;
  background: #86f1df;
}

.course-lab-prompt,
.course-lab-instruction,
.course-lab-feedback {
  color: #c9d7e2;
  line-height: 1.45;
}

.course-lab-instruction {
  margin-top: -2px;
  padding: 8px 9px;
  border: 1px solid rgba(111, 182, 255, 0.22);
  border-radius: 8px;
  color: #dceeff;
  font-size: 0.8rem;
  font-weight: 800;
  background: rgba(79, 167, 255, 0.09);
}

.course-lab-instruction::before {
  content: "How to use: ";
  color: #86f1df;
  font-weight: 950;
}

.course-lab-text-equivalent {
  border: 1px solid rgba(111, 182, 255, 0.22);
  border-radius: 8px;
  padding: 8px 10px;
  color: #dceeff;
  background: rgba(12, 34, 46, 0.7);
  font-size: 0.82rem;
  line-height: 1.45;
}

.course-lab-text-equivalent summary {
  cursor: pointer;
  font-weight: 800;
}

.course-lab-text-equivalent summary:focus-visible {
  outline: 2px solid #86f1df;
  outline-offset: 3px;
}

.course-lab-text-equivalent dl {
  display: grid;
  grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.5fr);
  gap: 5px 12px;
  margin: 10px 0;
}

.course-lab-text-equivalent dt {
  color: #a8c6d7;
  font-weight: 700;
}

.course-lab-text-equivalent dd {
  margin: 0;
}

.course-lab-text-equivalent p {
  margin: 8px 0 0;
}

.course-lab-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 8px;
}

.course-lab-controls.assessment {
  display: grid;
  align-items: stretch;
  gap: 11px;
}

.course-lab-assessment-lead {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(111, 182, 255, .25);
  border-radius: 10px;
  background: rgba(14, 34, 49, .8);
}

.course-lab-assessment-lead span {
  color: #89dbcd;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.course-lab-assessment-lead h4 {
  margin: 0;
  color: #f1fbfd;
  font-size: 1rem;
}

.course-lab-assessment-lead p {
  margin: 0;
  color: #c9dce5;
  line-height: 1.45;
}

.course-lab-assessment-lead .course-lab-assessment-context {
  padding: 8px 10px;
  border-left: 3px solid #89dbcd;
  border-radius: 4px;
  background: rgba(137, 219, 205, .08);
}

.course-lab-assessment-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.course-lab-assessment-option {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid rgba(111, 182, 255, .32);
  border-radius: 9px;
  color: #eaf5fb;
  font: inherit;
  font-size: .83rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  background: rgba(24, 48, 64, .68);
  cursor: pointer;
}

.course-lab-assessment-option:hover:not(:disabled),
.course-lab-assessment-option:focus-visible {
  border-color: #80ebd8;
  background: rgba(33, 77, 83, .75);
}

.course-lab-assessment-option.selected {
  border-color: #80ebd8;
  background: rgba(38, 94, 91, .78);
}

.course-lab-measurement-entry {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 8px;
}

.course-lab-assessment-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-lab-measurement-entry label {
  display: grid;
  gap: 5px;
  color: #c9dce5;
  font-size: .77rem;
  font-weight: 800;
}

.course-lab-measurement-entry input {
  width: 150px;
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid rgba(111, 182, 255, .44);
  border-radius: 8px;
  color: #f3fbff;
  font: inherit;
  background: #102331;
}

.course-practicum-callout {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border: 1px solid rgba(249, 160, 63, .42);
  border-radius: 9px;
  background: rgba(86, 55, 25, .28);
}

.course-practicum-callout p {
  flex: 1 1 310px;
  margin: 0;
  color: #ffe6bc;
  font-size: .79rem;
  line-height: 1.42;
}

.privacy-data-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.progress-save-alert {
  position: fixed;
  z-index: 1000;
  left: 16px;
  bottom: 16px;
  max-width: min(540px, calc(100vw - 32px));
  padding: 11px 14px;
  border: 1px solid rgba(255, 170, 95, .76);
  border-radius: 9px;
  color: #fff2de;
  font-size: .82rem;
  line-height: 1.4;
  background: rgba(45, 29, 20, .96);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .36);
}

@media (max-width: 700px) {
  .course-lab-assessment-options {
    grid-template-columns: 1fr;
  }
}

.course-lab-control-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.32);
}

.course-lab-control-label {
  flex: 0 0 100%;
  color: #8fb6ca;
  font-size: 0.66rem;
  font-weight: 930;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.course-lab-button {
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  color: #dceefa;
  font-size: 0.78rem;
  font-weight: 850;
  background: rgba(255, 255, 255, 0.065);
  cursor: pointer;
}

.course-lab-choice-button {
  border-color: rgba(111, 182, 255, 0.32);
  color: #f0f8ff;
  background:
    linear-gradient(180deg, rgba(79, 167, 255, 0.16), rgba(79, 167, 255, 0.07)),
    #101b27;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.course-lab-choice-button.active {
  border-color: rgba(85, 214, 190, 0.86);
  color: #06131b;
  background: linear-gradient(180deg, #86f1df, #55d6be);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.3),
    0 0 0 2px rgba(85, 214, 190, 0.16);
}

.course-lab-step-button {
  min-height: 34px;
  padding-inline: 12px;
  border-color: rgba(111, 182, 255, 0.34);
  color: #e8f3ff;
  background: rgba(79, 167, 255, 0.12);
}

.course-lab-step-button.previous {
  color: #c8d9e6;
  background: rgba(111, 182, 255, 0.07);
}

.course-lab-step-button.next {
  border-color: rgba(249, 160, 63, 0.72);
  color: #08131d;
  font-weight: 950;
  background: linear-gradient(180deg, #ffd08a, #f9a03f);
  box-shadow: 0 0 0 1px rgba(249, 160, 63, 0.18), 0 8px 18px rgba(249, 160, 63, 0.16);
}

.course-lab-step-button.next::after {
  content: " ->";
}

.course-lab-step-indicator {
  border-color: rgba(111, 182, 255, 0.32);
  color: #dceeff;
  background: rgba(79, 167, 255, 0.12);
}

.course-lab-slider {
  min-width: min(220px, 100%);
  display: grid;
  gap: 5px;
  color: #d9e7f2;
  font-size: 0.78rem;
  font-weight: 800;
}

.course-lab-slider input {
  width: 100%;
}

#courseLabCanvas {
  width: 100%;
  height: clamp(260px, 34vh, 390px);
  min-height: 260px;
  display: block;
  cursor: grab;
  touch-action: none;
  border: 1px solid rgba(85, 214, 190, 0.16);
  border-radius: 8px;
  background: #07121a;
}

#courseLabCanvas:active {
  cursor: grabbing;
}

#courseLabCanvas.exploration,
#courseLabCanvas.exploration:active {
  cursor: default;
}

#courseLabCanvas.landmark {
  cursor: grab;
}

#courseLabCanvas.landmark:active {
  cursor: grabbing;
}

#courseLabCanvas.acquisition {
  height: 440px;
  max-height: none;
}

.course-check-card {
  display: grid;
  gap: 12px;
}

.course-check-guidance {
  margin-top: 6px;
  color: #9eb8ca;
  font-size: 0.82rem;
  line-height: 1.35;
}

.course-check-options {
  display: grid;
  gap: 8px;
}

.course-check-option {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #d9e7f2;
  background: rgba(7, 13, 20, 0.42);
  cursor: pointer;
}

.course-check-option:hover {
  border-color: rgba(111, 182, 255, 0.36);
  background:
    linear-gradient(180deg, rgba(79, 167, 255, 0.12), rgba(79, 167, 255, 0.04)),
    rgba(7, 13, 20, 0.54);
}

.course-check-option:has(input:checked) {
  border-color: rgba(85, 214, 190, 0.74);
  color: #eafff7;
  background:
    linear-gradient(180deg, rgba(85, 214, 190, 0.18), rgba(85, 214, 190, 0.08)),
    rgba(7, 13, 20, 0.56);
  box-shadow: 0 0 0 2px rgba(85, 214, 190, 0.11);
}

.course-check-option input {
  margin-top: 2px;
  accent-color: var(--accent);
  transform: scale(1.12);
}

.course-check-actions,
.course-nav-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.course-check-actions {
  padding-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.course-check-feedback {
  padding: 12px;
  border: 1px solid rgba(111, 182, 255, 0.22);
  border-radius: 8px;
  background: rgba(111, 182, 255, 0.08);
}

.course-check-feedback.correct {
  border-color: rgba(94, 226, 143, 0.34);
  color: #d9f7e2;
  background: rgba(94, 226, 143, 0.1);
}

.course-check-feedback.incorrect {
  border-color: rgba(255, 109, 122, 0.34);
  color: #ffe0e4;
  background: rgba(255, 109, 122, 0.1);
}

.practice-bls-route-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 17px 20px;
  border: 1px solid rgba(137, 228, 206, 0.48);
  border-radius: 12px;
  background: linear-gradient(105deg, rgba(24, 76, 73, 0.9), rgba(15, 41, 54, 0.95));
}

.practice-bls-route-card[hidden] { display: none; }
.practice-bls-route-card > div { min-width: 0; }
.practice-bls-route-card .eyebrow { margin: 0 0 5px; color: #a2e6d2; }
.practice-bls-route-card h2 { margin: 0 0 5px; font-size: 1.12rem; }
.practice-bls-route-card p:last-child { max-width: 78ch; margin: 0; color: #d0e3df; font-size: 0.86rem; line-height: 1.45; }
.practice-bls-route-card .secondary-button { flex: 0 0 auto; min-height: 44px; }

@media (max-width: 650px) {
  .practice-bls-route-card { align-items: stretch; flex-direction: column; gap: 13px; padding: 14px; }
  .practice-bls-route-card .secondary-button { width: 100%; }
}

.practice-test-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 18px;
  transition: grid-template-columns 180ms ease;
}

.practice-test-layout.sidebar-collapsed {
  grid-template-columns: 58px minmax(0, 1fr);
}

.practice-test-sidebar,
.practice-test-workspace,
.practice-canvas-card,
.practice-answer-panel,
.practice-feedback,
.practice-breakdown {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(16, 24, 35, 0.84);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}

.practice-test-sidebar {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: 12px;
  padding: 14px;
}

.practice-bank-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.44);
}

.practice-bank-card select {
  width: 100%;
}

.practice-bank-card small {
  color: var(--muted);
  line-height: 1.35;
}

.practice-course-plan {
  display: grid;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.practice-course-plan[hidden] {
  display: none;
}

.practice-score-card {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1px solid rgba(85, 214, 190, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(85, 214, 190, 0.12), transparent 62%),
    rgba(7, 13, 20, 0.58);
}

.practice-score-card span {
  color: var(--accent);
  font-size: 1.45rem;
  font-weight: 850;
}

.practice-score-card small {
  color: var(--muted);
  font-weight: 720;
  text-transform: uppercase;
}

.practice-history-card {
  display: grid;
  gap: 9px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(111, 182, 255, 0.08), transparent 62%),
    rgba(7, 13, 20, 0.48);
}

.practice-history-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.practice-history-head div {
  display: grid;
  gap: 3px;
}

.practice-history-head span {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 880;
  text-transform: uppercase;
}

.practice-history-head small,
.practice-history-empty,
.practice-history-button small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.3;
}

.practice-history-undo:not([hidden]) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(85, 214, 190, 0.35);
  border-radius: 7px;
  color: #d9f6eb;
  background: rgba(85, 214, 190, 0.09);
  font-size: 0.75rem;
}

.practice-history-list {
  display: grid;
  gap: 7px;
  max-height: 220px;
  overflow: auto;
  padding-right: 2px;
}

.practice-history-button {
  width: 100%;
  display: grid;
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #e8f2f8;
  text-align: left;
  background: rgba(12, 20, 31, 0.78);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.practice-history-button:hover,
.practice-history-button:focus-visible {
  transform: translateX(2px);
  border-color: rgba(85, 214, 190, 0.38);
  background:
    linear-gradient(90deg, rgba(85, 214, 190, 0.09), transparent 62%),
    rgba(12, 20, 31, 0.88);
}

.practice-history-button b {
  color: #eafff7;
  font-size: 0.82rem;
}

.practice-history-button span {
  color: #dbe8f2;
  font-size: 0.76rem;
  font-weight: 720;
  line-height: 1.25;
}

.practice-history-review-meta {
  margin: -4px 0 10px;
  color: var(--muted);
  font-size: 0.78rem;
}

.practice-test-list,
.practice-progress-list {
  display: grid;
  gap: 8px;
}

.practice-progress-list {
  align-content: start;
  max-height: 42vh;
  overflow: auto;
  padding-right: 2px;
}

.practice-test-button,
.practice-progress-button {
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  text-align: left;
  background: rgba(12, 20, 31, 0.8);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.practice-test-button:hover,
.practice-progress-button:hover,
.practice-test-button:focus-visible,
.practice-progress-button:focus-visible {
  transform: translateX(2px);
  border-color: rgba(111, 182, 255, 0.42);
  background:
    linear-gradient(90deg, rgba(79, 167, 255, 0.1), transparent 60%),
    rgba(12, 20, 31, 0.88);
}

.practice-category-label {
  margin-top: 4px;
  padding: 8px 4px 2px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.practice-test-button.active,
.practice-progress-button.active {
  border-color: rgba(85, 214, 190, 0.62);
  background: rgba(85, 214, 190, 0.12);
}

.practice-test-button small,
.practice-progress-button small {
  color: var(--muted);
  line-height: 1.35;
}

.practice-progress-button.correct {
  border-color: rgba(94, 226, 143, 0.48);
}

.practice-progress-button.incorrect {
  border-color: rgba(255, 109, 122, 0.48);
}

.practice-progress-button.unanswered {
  border-style: dashed;
}

.practice-progress-button.answered {
  border-color: rgba(111, 182, 255, 0.32);
}

.practice-test-workspace {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  grid-template-rows: auto auto auto auto auto;
  gap: 12px;
  padding: 14px;
}

.practice-test-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.practice-test-head h2 {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 1.25rem;
}

.practice-test-head p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.45;
}

.practice-question-scenario {
  margin: 8px 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  background: rgba(85, 214, 190, 0.08);
  color: var(--text) !important;
}

.practice-exam-timer {
  margin: 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 204, 102, 0.34);
  border-radius: 8px;
  color: #ffe2a3;
  background: rgba(255, 204, 102, 0.08);
  font-weight: 700;
}

.practice-exam-timer.expiring {
  border-color: rgba(255, 109, 122, 0.5);
  color: #ffe0e4;
  background: rgba(255, 109, 122, 0.1);
}

.practice-canvas-card[hidden],
.practice-question-scenario[hidden],
.practice-exam-timer[hidden] {
  display: none;
}

.practice-domain-results {
  display: grid;
  gap: 7px;
  margin: 10px 0 14px;
}

.practice-domain-results p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  background: rgba(7, 13, 20, 0.42);
}

.practice-lesson-review-link {
  justify-self: start;
  margin-top: 3px;
}

.practice-head-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.practice-canvas-card {
  min-width: 0;
  min-height: 0;
  display: grid;
  align-content: start;
  grid-template-rows: auto auto;
  overflow: hidden;
}

.practice-ecg-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(7, 13, 20, 0.48);
}

.practice-control {
  min-width: 220px;
  flex: 1 1 220px;
}

.practice-lead-field {
  min-width: 150px;
}

.practice-signal-badge {
  margin-left: auto;
  padding: 8px 10px;
  border: 1px solid rgba(255, 204, 102, 0.22);
  border-radius: 8px;
  color: #ffe2a3;
  background: rgba(255, 204, 102, 0.08);
  font-size: 0.78rem;
  font-weight: 780;
}

#practiceCanvas {
  width: 100%;
  height: clamp(280px, 36vh, 360px);
  display: block;
}

.practice-answer-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  align-items: end;
  gap: 10px;
  padding: 12px;
  border-color: rgba(85, 214, 190, 0.2);
  background:
    linear-gradient(135deg, rgba(85, 214, 190, 0.08), transparent 52%),
    rgba(16, 24, 35, 0.84);
}

.practice-answer-field select {
  width: 100%;
}

.practice-flow-hint {
  grid-column: 1 / -1;
  order: -1;
  padding: 8px 9px;
  border: 1px solid rgba(111, 182, 255, 0.18);
  border-radius: 7px;
  color: #bdd1de;
  font-size: 0.8rem;
  line-height: 1.35;
  background: rgba(79, 167, 255, 0.07);
}

.practice-feedback {
  padding: 14px;
  color: #d9e7f2;
  line-height: 1.5;
}

.practice-feedback.correct {
  border-color: rgba(94, 226, 143, 0.36);
  background:
    linear-gradient(135deg, rgba(94, 226, 143, 0.12), transparent 54%),
    rgba(16, 24, 35, 0.88);
}

.practice-feedback.incorrect {
  border-color: rgba(255, 109, 122, 0.36);
  background:
    linear-gradient(135deg, rgba(255, 109, 122, 0.12), transparent 54%),
    rgba(16, 24, 35, 0.88);
}

.practice-feedback.saved {
  border-color: rgba(111, 182, 255, 0.28);
}

.practice-breakdown {
  max-height: 34vh;
  overflow: auto;
  padding: 12px;
}

.practice-breakdown h3 {
  margin-bottom: 10px;
}

.practice-breakdown-list {
  display: grid;
  gap: 9px;
}

.practice-breakdown-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.42);
}

.practice-breakdown-item.correct {
  border-color: rgba(94, 226, 143, 0.32);
}

.practice-breakdown-item.incorrect {
  border-color: rgba(255, 109, 122, 0.32);
}

.practice-breakdown-item b {
  color: var(--text);
}

.practice-breakdown-item span,
.practice-breakdown-item p {
  color: var(--muted);
  line-height: 1.42;
}

@keyframes introTrace {
  0% {
    stroke-dashoffset: 920;
  }
  78%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes introBeat {
  0%,
  100% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.04);
  }
  58% {
    transform: scale(0.98);
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(85, 214, 190, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(85, 214, 190, 0.12), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
    rgba(13, 20, 30, 0.78);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.22);
}

.brand-block {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-icon-mark {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.34),
    0 0 22px rgba(85, 214, 190, 0.18);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.5rem, 2vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: 0;
}

h2 {
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
}

h3 {
  color: #dbe7f2;
  font-size: 0.92rem;
  line-height: 1.24;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 780;
}

.topbar-actions {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}

.field.compact {
  place-items: center;
}

select,
.primary-button,
.secondary-button,
.icon-button {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), #141e2b;
}

button:focus-visible,
select:focus-visible,
input:focus-visible,
.course-check-option:focus-within {
  outline: 2px solid rgba(85, 214, 190, 0.9);
  outline-offset: 2px;
}

select {
  min-width: 220px;
  padding: 0 36px 0 12px;
}

#trainingScopeSelect {
  min-width: 190px;
}

#caseSelect {
  min-width: 250px;
}

.primary-button,
.secondary-button,
.icon-button {
  cursor: pointer;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.primary-button {
  padding: 0 18px;
  border-color: rgba(85, 214, 190, 0.55);
  background: linear-gradient(180deg, #1b8a72, #0f604f);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    0 10px 22px rgba(85, 214, 190, 0.12);
  font-weight: 780;
}

.secondary-button {
  padding: 0 16px;
  background: linear-gradient(180deg, #1d2937, #141d29);
  font-weight: 720;
}

.icon-button {
  width: 42px;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 800;
}

#clinicalBtn {
  width: auto;
  min-width: 48px;
  padding: 0 8px;
  font-size: 0.78rem;
}

.safety-button {
  height: 34px;
  margin-left: 4px;
  padding: 0 12px;
  border-color: rgba(255, 204, 102, 0.4);
  color: #ffe1a1;
  white-space: nowrap;
  font-size: 0.8rem;
}

.icon-button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button[aria-pressed="false"] {
  color: #6c7b8d;
}

.primary-button:hover,
.secondary-button:hover,
.icon-button:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.primary-button:active,
.secondary-button:active,
.icon-button:active,
.module-card:active,
.course-lab-button:active {
  transform: translateY(0);
}

.primary-button:disabled,
.secondary-button:disabled,
.icon-button:disabled,
.course-lab-button:disabled,
.practice-test-button:disabled,
.practice-progress-button:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.clinical-review-view {
  min-height: calc(100vh - 36px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
}

.clinical-review-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 18px;
}

.clinical-review-sidebar,
.clinical-review-workspace,
.clinical-review-card,
.clinical-review-notes-card {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)),
    var(--glass);
  box-shadow: var(--shadow-soft);
}

.clinical-review-sidebar {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
}

.clinical-review-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.clinical-review-summary-grid div {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.5);
}

.clinical-review-summary-grid span,
.clinical-review-filter-summary,
.clinical-review-case-meta {
  color: #8fb6ca;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.clinical-review-summary-grid b {
  color: #e9fff8;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.clinical-review-search-field input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), #141e2b;
}

.clinical-review-filter-summary {
  text-transform: none;
  line-height: 1.35;
}

.clinical-review-case-list {
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 6px;
  padding-right: 2px;
}

.clinical-review-group-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 8px;
  border: 1px solid rgba(85, 214, 190, 0.16);
  border-radius: 7px;
  color: #bffff2;
  background: rgba(8, 15, 22, 0.95);
  font-size: 0.68rem;
  font-weight: 880;
  text-transform: uppercase;
}

.clinical-review-group-heading b {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #07131d;
  text-align: center;
  background: var(--accent);
}

.clinical-review-case-button {
  width: 100%;
  min-height: 74px;
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #dbe7f2;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.clinical-review-case-button:hover,
.clinical-review-case-button:focus-visible {
  transform: translateX(2px);
  border-color: rgba(111, 182, 255, 0.42);
  background:
    linear-gradient(90deg, rgba(79, 167, 255, 0.1), transparent 60%),
    rgba(12, 20, 31, 0.88);
}

.clinical-review-case-button.active {
  border-color: rgba(85, 214, 190, 0.72);
  background: rgba(85, 214, 190, 0.13);
}

.clinical-review-case-button b,
.clinical-review-case-button small,
.clinical-review-case-meta {
  min-width: 0;
  overflow-wrap: anywhere;
}

.clinical-review-case-button small {
  color: #aebdcc;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.28;
}

.clinical-review-case-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-transform: none;
}

.clinical-review-status-badge {
  flex: 0 0 auto;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #08121a;
  background: #c7d4df;
  font-size: 0.64rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.clinical-review-status-badge.open {
  color: #241006;
  border-color: rgba(251, 146, 60, 0.78);
  background: #fb923c;
}

.clinical-review-status-badge.codex {
  color: #06131c;
  border-color: rgba(125, 211, 252, 0.72);
  background: #7dd3fc;
}

.clinical-review-status-badge.certified {
  color: #07140e;
  border-color: rgba(134, 239, 172, 0.78);
  background: #86efac;
}

.clinical-review-status-badge.changed {
  color: #2b080d;
  border-color: rgba(255, 109, 122, 0.82);
  background: #ff6d7a;
}

.clinical-review-status-badge.reviewed {
  color: #031713;
  border-color: rgba(94, 234, 212, 0.72);
  background: #5eead4;
}

.clinical-review-empty-state {
  padding: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #bdcbd6;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.82rem;
  line-height: 1.38;
}

.clinical-review-workspace {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.clinical-review-conflict-panel {
  padding: 14px;
  border: 1px solid rgba(255, 181, 96, 0.56);
  border-radius: 9px;
  background: rgba(71, 42, 21, 0.38);
}

.clinical-review-conflict-panel[hidden] {
  display: none;
}

.clinical-review-conflict-panel h2 {
  margin: 0 0 5px;
  font-size: 1rem;
}

.clinical-review-conflict-panel p {
  margin: 0 0 10px;
  color: var(--muted);
  line-height: 1.4;
}

#clinicalReviewConflictList {
  display: grid;
  gap: 8px;
}

.clinical-review-conflict-case {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 7px;
  background: rgba(7, 13, 20, 0.65);
}

.clinical-review-conflict-case summary {
  padding: 10px;
  cursor: pointer;
  font-weight: 760;
}

.clinical-review-conflict-content {
  padding: 0 10px 10px;
}

.clinical-review-conflict-versions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.clinical-review-conflict-versions > div {
  min-width: 0;
}

.clinical-review-conflict-versions b {
  display: block;
  margin-bottom: 5px;
}

.clinical-review-conflict-versions pre {
  max-height: 240px;
  overflow: auto;
  margin: 0;
  padding: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 5px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.72rem;
}

.clinical-review-conflict-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

@media (max-width: 700px) {
  .clinical-review-conflict-versions {
    grid-template-columns: 1fr;
  }
}

.clinical-review-head,
.clinical-review-card-head,
.clinical-review-footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.clinical-review-head h2 {
  margin-bottom: 6px;
  color: var(--text);
  font-size: 1.32rem;
}

.clinical-review-head p:not(.eyebrow) {
  color: var(--muted);
  line-height: 1.45;
}

.clinical-review-actions,
.clinical-review-footer > div {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.clinical-review-detail-grid,
.clinical-review-simple-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 12px;
}

.clinical-review-simple-grid {
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.25fr);
}

.clinical-review-card,
.clinical-review-notes-card {
  padding: 14px;
}

.clinical-review-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.clinical-review-facts {
  display: grid;
  gap: 8px;
}

.clinical-review-facts div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.clinical-review-facts dt,
.clinical-review-name-field span,
.clinical-review-notes-grid label > span {
  color: #9fc4d8;
  font-size: 0.7rem;
  font-weight: 930;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.clinical-review-facts dd {
  min-width: 0;
  color: #eaf7fb;
  font-size: 0.83rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.clinical-review-name-field {
  display: grid;
  gap: 6px;
}

.clinical-review-name-field input,
.clinical-review-notes-grid textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), #141e2b;
}

.clinical-review-name-field input {
  height: 40px;
  padding: 0 11px;
}

.clinical-review-checks {
  display: grid;
  gap: 8px;
}

.clinical-review-checks label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  color: #dcebf5;
  background: rgba(7, 13, 20, 0.42);
  font-size: 0.82rem;
  font-weight: 780;
}

.clinical-review-checks input {
  accent-color: var(--accent);
}

.clinical-review-notes-card {
  display: grid;
  gap: 12px;
}

.clinical-review-notes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.clinical-review-notes-grid-single {
  grid-template-columns: 1fr;
}

.clinical-review-notes-grid label {
  display: grid;
  gap: 7px;
}

.clinical-review-notes-grid textarea {
  min-height: 230px;
  resize: vertical;
  padding: 11px;
  font: 0.86rem/1.45 Inter, system-ui, sans-serif;
}

.clinical-review-notes-grid-single textarea {
  min-height: 360px;
  font-size: 0.95rem;
}

.clinical-review-checklist {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.clinical-review-check-item {
  min-width: 0;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: rgba(7, 13, 20, 0.5);
}

.clinical-review-check-item.ok {
  border-color: rgba(94, 234, 212, 0.22);
}

.clinical-review-check-item.warn {
  border-color: rgba(251, 146, 60, 0.36);
}

.clinical-review-check-item span {
  color: #8fb6ca;
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.clinical-review-check-item b {
  min-width: 0;
  color: #e9fff8;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.clinical-review-footer {
  align-items: center;
  padding-top: 2px;
}

.clinical-review-footer p {
  min-width: 0;
  color: #aebdcc;
  font-size: 0.78rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sim-grid {
  display: grid;
  grid-template-columns: minmax(520px, 0.98fr) minmax(560px, 1.22fr);
  gap: 16px;
  align-items: start;
}

.placement-panel,
.monitor-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 36%),
    linear-gradient(90deg, rgba(85, 214, 190, 0.05), transparent 42%),
    var(--panel);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.05),
    0 18px 44px rgba(0, 0, 0, 0.28);
}

.placement-panel {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  overflow: hidden;
}

.monitor-panel {
  display: grid;
  grid-template-rows: auto auto auto auto auto;
  overflow: hidden;
}

.panel-head,
.monitor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(85, 214, 190, 0.08), transparent 46%),
    rgba(6, 12, 18, 0.38);
}

.panel-head {
  position: relative;
  overflow: visible;
  z-index: 80;
}

.panel-head p,
.monitor-head p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.88rem;
}

.patient-head-block {
  position: relative;
  min-width: 0;
}

.patient-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.patient-folder-button {
  width: 34px;
  height: 32px;
  color: var(--accent);
}

.patient-folder-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.patient-folder-button[aria-expanded="true"] {
  background: rgba(85, 214, 190, 0.14);
  border-color: rgba(85, 214, 190, 0.42);
}

.score-card,
.vitals {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.score-card {
  flex-direction: column;
  align-items: end;
  gap: 0;
  min-width: 86px;
}

.score-card span {
  color: var(--accent);
  font-size: 1.65rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.score-card small {
  font-size: 0.75rem;
  font-weight: 720;
  text-transform: uppercase;
}

.vitals span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.84rem;
  white-space: nowrap;
}

.vitals b {
  color: var(--accent);
  font-size: 1rem;
}

.monitor-controls {
  display: grid;
  grid-template-columns: auto minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 12, 18, 0.24);
}

.bpm-control {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) 42px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
  text-transform: uppercase;
}

.bpm-control input {
  width: 100%;
  accent-color: var(--accent);
}

.bpm-control output,
.lead-strip-control b {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.lead-strip-control {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 780;
  text-transform: uppercase;
  white-space: nowrap;
}

.lead-strip-control select {
  min-width: 68px;
  height: 32px;
  padding: 0 20px 0 8px;
  font-size: 0.76rem;
  font-weight: 800;
}

.rhythm-strip-hint {
  margin: 0;
  padding: 7px 14px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.acquisition-status {
  margin: 0;
  padding: 9px 14px;
  border-block: 1px solid rgba(192, 92, 100, 0.36);
  background: rgba(192, 92, 100, 0.13);
  color: #f6d6d8;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.4;
}

.acquisition-status[hidden] {
  display: none;
}

.episode-status {
  margin: 0;
  padding: 8px 14px;
  border-block: 1px solid rgba(76, 153, 194, 0.36);
  background: rgba(76, 153, 194, 0.12);
  color: #c9e7f4;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.4;
}

.episode-status[hidden] {
  display: none;
}

.placement-area {
  position: relative;
  height: clamp(620px, calc(100vh - 220px), 780px);
  min-height: 520px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    #0f1721;
  background-size: 40px 40px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.view-toggle-button {
  position: absolute;
  z-index: 20;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  border-color: rgba(85, 214, 190, 0.48);
  background: rgba(10, 18, 26, 0.82);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.view-toggle-button .icon-patient {
  display: none;
}

.placement-area.heart-on .view-toggle-button .icon-heart {
  display: none;
}

.placement-area.heart-on .view-toggle-button .icon-patient {
  display: block;
}

.photo-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 66.667%;
  height: 100%;
  pointer-events: none;
  filter: saturate(0.98) contrast(1.02);
  transform-origin: center;
}

.photo-stage.rotated {
  transform: rotate(90deg);
}

.placement-area.heart-on .photo-stage,
.placement-area.heart-on .target-layer,
.placement-area.heart-on .electrode-layer {
  display: none;
}

.heart-view {
  --heart-scale: 1;
  --atrial-scale: 1;
  --ra-scale: 1;
  --la-scale: 1;
  --right-ventricle-scale: 1;
  --left-ventricle-scale: 1;
  --right-wall-response-opacity: 0;
  --left-wall-response-opacity: 0;
  --septum-scale: 1;
  --septum-displacement-x: 0px;
  --septum-local-distance-scale: 1;
  --tricuspid-scale: 1;
  --mitral-scale: 1;
  --pulmonary-valve-scale: 1;
  --aortic-valve-scale: 1;
  --rv-papillary-scale: 1;
  --lv-papillary-scale: 1;
  --signal-opacity: 0.28;
  --signal-left-opacity: 0.28;
  --signal-right-opacity: 0.28;
  --ischemia-anterior-opacity: 0;
  --ischemia-inferior-opacity: 0;
  --ischemia-lateral-opacity: 0;
  --posterior-risk-indicator-opacity: 0;
  --rapid-anterior-opacity: 0;
  --rapid-septal-opacity: 0;
  --rapid-lateral-opacity: 0;
  --rapid-inferior-opacity: 0;
  --rapid-posterior-opacity: 0;
  --rapid-reciprocal-opacity: 0;
  --rapid-vector-opacity: 0;
  --rapid-vector-toward-opacity: 0.22;
  --rapid-vector-away-opacity: 0.22;
  --rapid-vector-perpendicular-opacity: 0.22;
  --rapid-edge-opacity: 0;
  --flutter-opacity: 0;
  --fib-opacity: 0;
  --fib-shift: 0;
  --ectopic-atrial-opacity: 0;
  --mat-source-a-opacity: 0;
  --mat-source-b-opacity: 0;
  --mat-source-c-opacity: 0;
  --focal-source-opacity: 0;
  --slow-av-transit-opacity: 0;
  --junctional-source-opacity: 0;
  --proximal-his-opacity: 0;
  --distal-conduction-source-opacity: 0;
  --nodal-circuit-opacity: 0;
  --protected-focus-opacity: 0;
  --ventricular-origin-opacity: 0;
  --ventricular-origin-color: #ffba7d;
  --left-tissue-activation-opacity: 0;
  --right-tissue-activation-opacity: 0;
  --vf-opacity: 0;
  --sa-node-opacity: 0.42;
  --av-node-opacity: 0.42;
  --retrograde-opacity: 0;
  --retrograde-av-opacity: 0;
  --preexcitation-opacity: 0;
  --accessory-path-access-opacity: 0;
  --accessory-retrograde-opacity: 0;
  --lvh-cavity-scale: 1;
  --av-valve-scale: 1;
  --outflow-valve-scale: 1;
  --papillary-scale: 1;
  --coronary-opacity: 0.62;
  --flow-offset: 0;
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  padding: 58px 24px 34px;
  background:
    linear-gradient(180deg, rgba(8, 14, 22, 0.3), rgba(8, 14, 22, 0.9)),
    radial-gradient(circle at 50% 44%, rgba(228, 81, 87, 0.26), transparent 18rem),
    #0c121a;
}

.placement-area.heart-on .heart-view {
  display: grid;
}

.heart-mode-toggle {
  position: absolute;
  z-index: 24;
  top: 12px;
  left: 68px;
  display: none;
  align-items: center;
  gap: 4px;
  max-width: calc(100% - 92px);
  flex-wrap: wrap;
  padding: 4px;
  border: 1px solid rgba(85, 214, 190, 0.34);
  border-radius: 7px;
  background: rgba(10, 18, 26, 0.82);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.placement-area.heart-on .heart-mode-toggle {
  display: flex;
}

.heart-lead-control {
  display: none;
  align-items: center;
  gap: 5px;
  padding-left: 7px;
  margin-left: 3px;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.library-heart-card.mode-3d .heart-lead-control {
  display: inline-flex;
}

.placement-area.heart-on .heart-lead-control {
  display: inline-flex;
}

.heart-lead-control select {
  min-width: 60px;
  height: 28px;
  padding: 0 23px 0 7px;
  border: 1px solid rgba(85, 214, 190, 0.24);
  border-radius: 5px;
  color: #eaf7fb;
  background: rgba(7, 15, 20, 0.9);
  font-size: 0.76rem;
  font-weight: 850;
}

.heart-expand-button {
  position: absolute;
  z-index: 25;
  top: 12px;
  right: 12px;
  display: none;
  color: #dce9f3;
  background: rgba(10, 18, 26, 0.82);
  border-color: rgba(85, 214, 190, 0.34);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.placement-area.heart-on .heart-expand-button {
  display: inline-grid;
  place-items: center;
}

.heart-expand-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.heart-expand-button .icon-collapse {
  display: none;
}

body.focus-patient .placement-area.heart-on .heart-expand-button .icon-expand {
  display: none;
}

body.focus-patient .placement-area.heart-on .heart-expand-button .icon-collapse {
  display: block;
}

.conduction-controls {
  position: absolute;
  z-index: 24;
  top: 56px;
  left: 68px;
  display: none;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(85, 214, 190, 0.34);
  border-radius: 7px;
  background: rgba(10, 18, 26, 0.82);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.app-shell.clinical-on .placement-area.heart-on .heart-view.mode-cutaway .conduction-controls,
.library-heart-card.mode-cutaway .conduction-controls {
  display: flex;
}

.heart-mode-button {
  min-width: 44px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font-weight: 850;
  cursor: pointer;
}

.heart-mode-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.heart-mode-button[hidden] {
  display: none;
}

.heart-mode-button.active {
  color: #031716;
  border-color: rgba(85, 214, 190, 0.88);
  background: var(--accent);
}

.heart-slow-motion-button {
  color: #f7d58f;
  border-color: rgba(247, 213, 143, 0.4);
}

.heart-slow-motion-button.active {
  color: #211706;
  border-color: #f7d58f;
  background: #f7d58f;
}

@media (max-width: 390px) {
  .heart-view .heart-mode-toggle {
    width: 225px;
    max-width: calc(100% - 92px);
  }

  .heart-slow-motion-button {
    margin-left: auto;
  }
}

@media (max-width: 330px) {
  #heartCutawayBtn {
    width: 68px;
    min-width: 68px;
    padding-inline: 2px;
    font-size: 0.75rem;
  }
}

.heart-3d-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  background:
    radial-gradient(circle at center, rgba(154, 221, 216, 0.12), rgba(8, 13, 17, 0) 58%),
    #071015;
  cursor: grab;
  touch-action: none;
}

.heart-3d-scene:active {
  cursor: grabbing;
}

.heart-3d-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.heart-3d-scene[data-trial29-teaching-phase]:not([data-trial29-teaching-phase="none"])::before,
.library-heart-scene[data-trial29-teaching-phase]:not([data-trial29-teaching-phase="none"])::before {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 52px;
  max-width: min(210px, 43%);
  padding: 6px 8px;
  border: 1px solid rgba(125, 218, 227, 0.58);
  border-radius: 7px;
  background: rgba(8, 26, 31, 0.86);
  color: #d7f5f6;
  font-size: 0.68rem;
  line-height: 1.25;
  pointer-events: none;
}

.heart-3d-scene[data-trial29-teaching-phase="blocked-p"]::before,
.library-heart-scene[data-trial29-teaching-phase="blocked-p"]::before {
  content: "Blocked P: atrial/AV only; no QRS";
}

.heart-3d-scene[data-trial29-teaching-phase="right-bundle-quiet"]::before,
.library-heart-scene[data-trial29-teaching-phase="right-bundle-quiet"]::before {
  content: "Wide beat: right bundle quiet";
}

.heart-3d-scene[data-trial29-teaching-phase="delayed-rv-arrival"]::before,
.library-heart-scene[data-trial29-teaching-phase="delayed-rv-arrival"]::before {
  content: "RV tissue follows LV; one pump";
}

@media (max-width: 520px) {
  .heart-3d-scene[data-trial29-teaching-phase]:not([data-trial29-teaching-phase="none"])::before,
  .library-heart-scene[data-trial29-teaching-phase]:not([data-trial29-teaching-phase="none"])::before {
    top: 46px;
    right: 8px;
    max-width: min(150px, 44%);
    padding: 4px 6px;
    font-size: 0.61rem;
  }

}

.heart-view.mode-3d .heart-3d-scene,
.heart-view.mode-cutaway .heart-3d-scene {
  display: block;
}

.heart-view.mode-3d .heart-svg,
.heart-view.mode-cutaway .heart-svg {
  display: none;
}

.heart-3d-status {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 800;
}

.heart-3d-status[hidden] {
  display: none;
}

.heart-3d-hints {
  position: absolute;
  z-index: 2;
  left: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  pointer-events: none;
}

.heart-3d-hints span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: #dce9f3;
  background: rgba(9, 15, 23, 0.72);
  font-size: 0.78rem;
  font-weight: 760;
}

.heart-svg {
  position: relative;
  z-index: 1;
  width: min(78%, 650px);
  height: min(84%, 760px);
  overflow: visible;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.36));
}

.heart-organ,
.chamber,
.septum,
.node,
.signal,
.ischemia,
.flutter-field,
.valve-layer,
.valve-leaflet,
.outflow-valve,
.papillary-muscle,
.coronary-layer,
.endocardium {
  transform-box: fill-box;
  transform-origin: center;
}

.heart-organ {
  transform: scale(var(--heart-scale));
}

.heart-shadow {
  fill: rgba(0, 0, 0, 0.23);
  transform: translate(5px, 9px);
}

.heart-wall {
  fill: url(#heartWall);
  stroke: rgba(235, 173, 163, 0.66);
  stroke-width: 2.3;
}

.myocardium-depth {
  fill: url(#heartMuscleDepth);
  opacity: 0.49;
  stroke: rgba(235, 174, 165, 0.18);
  stroke-width: 1.1;
}

.heart-surface-light {
  fill: none;
  stroke: rgba(250, 204, 184, 0.27);
  stroke-width: 5;
  stroke-linecap: round;
}

.ventricular-wall-rim {
  fill: none;
  stroke: rgba(246, 176, 162, 0.42);
  stroke-width: 5;
  stroke-linecap: round;
}

.chamber {
  fill: url(#heartInner);
  stroke: rgba(237, 181, 171, 0.46);
  stroke-width: 1.8;
  filter: url(#heartInnerShadow);
}

.atrium {
  transform: scale(var(--atrial-scale));
}

.right-atrium {
  transform: scale(var(--ra-scale));
}

.left-atrium {
  transform: scale(var(--la-scale));
}

.right-ventricle {
  transform: scale(var(--right-ventricle-scale));
}

.left-ventricle {
  transform: scale(var(--left-ventricle-scale));
}

.wall-response-2d path {
  fill: #ffd4ad;
  stroke: #ffe5ca;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(255, 187, 132, 0.55));
}

.wall-response-right {
  opacity: var(--right-wall-response-opacity);
}

.wall-response-left {
  opacity: var(--left-wall-response-opacity);
}

.septum {
  transform: scale(var(--septum-scale));
  fill: rgba(105, 43, 54, 0.78);
  stroke: rgba(221, 149, 146, 0.4);
  stroke-width: 1.6;
}

[data-selected-lbbb-septal-flash-rebound="true"] .septum,
[data-selected-effusive-constrictive-respiratory-septal-shift="true"] .septum {
  transform-box: fill-box;
  transform-origin: center;
  transform: translateX(var(--septum-displacement-x))
    scaleY(var(--septum-local-distance-scale)) scale(var(--septum-scale));
}

.endocardium {
  opacity: 0.8;
  stroke: rgba(230, 206, 196, 0.42);
  stroke-width: 1.1;
}

.right-endocardium,
.right-atrial-pocket {
  fill: url(#rightChamberBlue);
}

/* Tissue-arrival glows are electrical teaching cues. Wall scaling remains
   driven by the separate mechanical pulses. */
.right-endocardium {
  filter: drop-shadow(0 0 8px rgba(111, 226, 237, var(--right-tissue-activation-opacity, 0)));
}

.left-endocardium,
.left-atrial-pocket {
  fill: url(#leftChamberRed);
}

.left-endocardium {
  filter: drop-shadow(0 0 8px rgba(251, 215, 148, var(--left-tissue-activation-opacity, 0)));
}

.left-endocardium {
  transform: scale(var(--lvh-cavity-scale));
}

.vessel {
  stroke: rgba(213, 203, 192, 0.43);
  stroke-width: 1.8;
}

.aorta {
  fill: url(#vesselRedGradient);
}

.pulmonary,
.vena-cava {
  fill: url(#vesselBlueGradient);
}

.pulmonary-vein {
  fill: url(#vesselRedGradient);
  stroke: rgba(230, 171, 166, 0.38);
  stroke-width: 1.4;
  opacity: 0.76;
}

.vena-cava {
  opacity: 0.8;
}

.vessel-highlight {
  fill: none;
  stroke: rgba(246, 206, 194, 0.52);
  stroke-width: 3.2;
  stroke-linecap: round;
  opacity: 0.55;
}

.vessel-highlight-blue {
  stroke: rgba(211, 232, 238, 0.57);
}

.valve-layer {
  filter: drop-shadow(0 1px 1px rgba(64, 8, 18, 0.34));
}

.valve-leaflet,
.outflow-valve {
  fill: url(#valvePearl);
  stroke: rgba(111, 58, 61, 0.58);
  stroke-width: 1;
}

.valve-leaflet {
  transform: scale(var(--av-valve-scale));
}

.outflow-valve {
  transform: scale(var(--outflow-valve-scale));
}

.tricuspid-leaflet {
  transform: scale(var(--tricuspid-scale));
}

.mitral-leaflet {
  transform: scale(var(--mitral-scale));
}

.pulmonary-valve-leaflet {
  transform: scale(var(--pulmonary-valve-scale));
}

.aortic-valve-leaflet {
  transform: scale(var(--aortic-valve-scale));
}

/* The selected electrical/mechanical alternans lesson has a separate valve
   drawing so leaflet excursion can differ from LV wall motion. The existing
   pulse-scaled valves remain in use for every other condition. */
.trial46-valve-overlay {
  display: none;
  pointer-events: none;
}

.trial46-alternans .mitral-leaflet,
.trial46-alternans .aortic-valve-leaflet {
  display: none;
}

.trial46-alternans .trial46-valve-overlay {
  display: inline;
}

.trial46-mitral-annulus,
.trial46-aortic-annulus {
  fill: none;
  stroke: #e2b8aa;
  stroke-width: 1.6;
  opacity: 0.88;
}

.trial46-aortic-aperture {
  fill: #552431;
  stroke: #f3d9c9;
  stroke-width: 0.6;
}

.trial46-mitral-leaflet,
.trial46-aortic-cusp {
  fill: url(#valvePearl);
  stroke: #92575b;
  stroke-width: 1.1;
  stroke-linejoin: round;
  transform-box: view-box;
}

.library-heart-svg .trial46-mitral-leaflet,
.library-heart-svg .trial46-aortic-cusp {
  fill: url(#library-valvePearl);
}

.trial46-mitral-left {
  transform-origin: 190px 181px;
  transform: rotate(var(--trial46-mitral-left-angle, 0deg));
}

.trial46-mitral-right {
  transform-origin: 210px 176px;
  transform: rotate(var(--trial46-mitral-right-angle, 0deg));
}

.trial46-aortic-left {
  transform-origin: 202px 132px;
  transform: rotate(var(--trial46-aortic-open-angle, 0deg));
}

.trial46-aortic-right {
  transform-origin: 218px 132px;
  transform: rotate(var(--trial46-aortic-open-angle, 0deg));
}

.trial46-aortic-posterior {
  transform-origin: 210px 142px;
  transform: rotate(var(--trial46-aortic-open-angle, 0deg));
}

.chordae {
  fill: none;
  stroke: rgba(230, 208, 192, 0.68);
  stroke-width: 1.25;
  stroke-linecap: round;
}

.papillary-muscle {
  fill: #79323e;
  stroke: rgba(228, 168, 160, 0.48);
  stroke-width: 1;
  transform: scaleY(var(--papillary-scale));
}

.right-papillary {
  transform: scaleY(var(--rv-papillary-scale));
}

.left-papillary {
  transform: scaleY(var(--lv-papillary-scale));
}

.trabeculae {
  fill: none;
  stroke: rgba(228, 155, 147, 0.4);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.76;
}

.coronary-layer {
  opacity: var(--coronary-opacity);
  filter: none;
}

.coronary {
  fill: none;
  stroke: url(#coronaryGold);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 12 10;
  stroke-dashoffset: calc(var(--flow-offset) * 1px);
}

.left-coronary-branch,
.right-coronary-branch {
  stroke-width: 1.7;
  opacity: 0.86;
}

.scad-lad-marker {
  opacity: var(--scad-lad-opacity, 0);
  pointer-events: none;
}

.scad-lad-site {
  fill: #ffbb73;
  stroke: #2b1c1d;
  stroke-width: 3;
}

.scad-lad-leader {
  fill: none;
  stroke: #ffcf96;
  stroke-width: 2;
  stroke-linecap: round;
}

.scad-lad-label-bg {
  fill: rgba(12, 23, 29, 0.94);
  stroke: #ffbb73;
  stroke-width: 1.5;
}

.scad-lad-label {
  fill: #fff1da;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-anchor: middle;
}

.chamber-labels {
  fill: #fff5ec;
  stroke: rgba(28, 25, 34, 0.98);
  stroke-width: 3.4;
  paint-order: stroke fill;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-anchor: middle;
  pointer-events: none;
}

.node {
  fill: #ffe275;
  filter: url(#softGlow);
}

.node-sa {
  opacity: var(--sa-node-opacity);
}

.node-av {
  opacity: var(--av-node-opacity);
}

.slow-av-transit-cue {
  opacity: var(--slow-av-transit-opacity);
  fill: none;
  stroke: #91d9ff;
  stroke-width: 3;
  stroke-linecap: round;
  filter: url(#softGlow);
}

.slow-av-transit-cue .slow-av-transit-tracer {
  fill: #e7f8ff;
  stroke: #6ac8f4;
  stroke-width: 1.5;
}

.slow-av-transit-cue text {
  fill: #dff5ff;
  stroke: #142b36;
  stroke-width: 2.5;
  paint-order: stroke fill;
  font: 700 9px Inter, system-ui, sans-serif;
  filter: none;
}

.signal {
  fill: none;
  stroke: #ffd76b;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 16 14;
  filter: url(#softGlow);
}

.signal-fine {
  stroke-width: 2.4;
  stroke-dasharray: 8 12;
}

.signal-atrial {
  opacity: var(--signal-opacity);
}

/* Trial 31 keeps the faint anatomical SA node visible, but the propagated
   atrial route lights only with its real sinus P. The J source uses its
   separate pulse variable and remains dark at a preempted timer deadline. */
[data-sinus-brady-junctional-escape-capture-bigeminy="true"] .signal-atrial {
  stroke: #81dce8;
  opacity: clamp(0, calc((var(--sa-node-opacity) - 0.28) * 1.4), 1);
}

[data-sinus-brady-junctional-escape-capture-bigeminy="true"] .junctional-source-field {
  stroke: #f6c76e;
  filter: url(#softGlow);
}

.signal-retrograde {
  stroke: #87dfff;
  opacity: var(--retrograde-opacity);
}

.retrograde-av-arrival-cue {
  fill: none;
  stroke: #91f1ef;
  stroke-width: 3.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#softGlow);
  opacity: var(--retrograde-av-opacity);
}

.signal-accessory {
  stroke: #ffc47a;
  opacity: var(--preexcitation-opacity);
  stroke-width: 6;
}

/* Trial 30 marks ventricular access at the lower end of the existing
   left-sided schematic route; its later return lights the separate path. */
[data-coumel-accessory-teaching-cue="true"] .signal-accessory {
  stroke: #ffae72;
  stroke-width: 12;
  stroke-dasharray: 8 100;
  stroke-dashoffset: -68;
  opacity: var(--accessory-path-access-opacity);
}

.signal-accessory-return {
  stroke: #77e1e4;
  opacity: var(--accessory-retrograde-opacity);
  stroke-width: 5;
}

.signal-left {
  opacity: var(--signal-left-opacity);
}

.signal-left-delay {
  fill: none;
  stroke: #ffd382;
  stroke-width: 5;
  filter: url(#softGlow);
  opacity: var(--signal-left-delay-opacity, 0);
  pointer-events: none;
}

.signal-right {
  opacity: var(--signal-right-opacity);
}

.signal-right-delay {
  fill: none;
  stroke: #ffd382;
  stroke-width: 5;
  filter: url(#softGlow);
  opacity: var(--signal-right-delay-opacity, 0);
  pointer-events: none;
}

.ischemia {
  fill: #fff06a;
  mix-blend-mode: screen;
  filter: url(#softGlow);
}

.ischemia-anterior {
  opacity: var(--ischemia-anterior-opacity);
}

.ischemia-inferior {
  opacity: var(--ischemia-inferior-opacity);
}

.ischemia-lateral {
  fill: none;
  stroke: #fff06a;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 8 5;
  opacity: var(--ischemia-lateral-opacity);
}

.posterior-risk-callout {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.heart-view.posterior-risk-active .posterior-risk-callout,
.library-heart-2d-scene.posterior-risk-active .posterior-risk-callout {
  visibility: visible;
  opacity: var(--posterior-risk-indicator-opacity);
}

.posterior-risk-callout rect {
  fill: #12313b;
  stroke: #edcb75;
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}

.posterior-risk-callout text {
  fill: #fff2c2;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rapid-2d-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.heart-view.clinical-2d-on .rapid-2d-overlay,
.library-heart-card.clinical-2d-on .rapid-2d-overlay {
  opacity: 1;
}

.rapid-territory {
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.2;
  filter: url(#softGlow);
  mix-blend-mode: screen;
}

.rapid-territory-anterior {
  fill: #ef5f86;
  opacity: var(--rapid-anterior-opacity);
}

.rapid-territory-septal {
  fill: #a989ff;
  opacity: var(--rapid-septal-opacity);
}

.rapid-territory-lateral {
  fill: #49c0e2;
  opacity: var(--rapid-lateral-opacity);
}

.rapid-territory-inferior {
  fill: #f1a340;
  opacity: var(--rapid-inferior-opacity);
}

.rapid-territory-posterior {
  fill: none;
  stroke: #7ce0a9;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 7 8;
  filter: none;
  opacity: var(--rapid-posterior-opacity);
}

.rapid-posterior-label {
  fill: #b5f5cc;
  stroke: #102522;
  stroke-width: 2.6;
  paint-order: stroke fill;
  font-size: 10px;
  font-weight: 850;
  text-anchor: middle;
  opacity: var(--rapid-posterior-opacity);
}

.rapid-territory-edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.66);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 7 7;
  opacity: var(--rapid-edge-opacity);
}

.rapid-reciprocal-line {
  stroke: rgba(101, 215, 246, 0.78);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 8;
  opacity: var(--rapid-reciprocal-opacity);
  filter: url(#softGlow);
}

.rapid-vector-cues {
  opacity: var(--rapid-vector-opacity);
}

.rapid-vector {
  fill: none;
  stroke: rgba(220, 247, 255, 0.84);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.rapid-vector-head {
  fill: rgba(220, 247, 255, 0.9);
  stroke: none;
}

.rapid-vector-toward {
  opacity: var(--rapid-vector-toward-opacity);
}

.rapid-vector-away {
  opacity: var(--rapid-vector-away-opacity);
}

.rapid-vector-perpendicular {
  opacity: var(--rapid-vector-perpendicular-opacity);
}

.rapid-vector-label,
.rapid-heart-label,
.rapid-heart-sub-label {
  display: none;
  fill: #eaf7fb;
  paint-order: stroke;
  stroke: rgba(7, 16, 21, 0.72);
  stroke-width: 3px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 850;
  letter-spacing: 0;
}

.rapid-vector-label {
  font-size: 10px;
  text-anchor: start;
}

.rapid-heart-label {
  font-size: 13px;
  text-anchor: middle;
}

.rapid-heart-sub-label {
  fill: #bfeaf1;
  font-size: 10px;
  text-anchor: middle;
}

.rapid-2d-info {
  position: absolute;
  z-index: 6;
  top: 62px;
  right: 16px;
  display: none;
  width: min(330px, calc(100% - 32px));
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(85, 214, 190, 0.28);
  border-radius: 8px;
  background: rgba(7, 15, 20, 0.84);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}

.heart-view.clinical-2d-on .rapid-2d-info,
.library-heart-card.mode-2d.clinical-2d-on .rapid-2d-info {
  display: grid;
}

.rapid-2d-info div {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.rapid-2d-info span {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 850;
  text-transform: uppercase;
}

.rapid-2d-info b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #eaf7fb;
  font-size: 0.76rem;
  line-height: 1.25;
}

body.focus-patient .heart-view.comparison-2d-on .rapid-2d-info {
  width: min(300px, calc(100% - 32px));
}

.heart-2d-comparison {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 18px;
  bottom: 56px;
  display: none;
  gap: 7px;
  padding: 9px;
  border: 1px solid rgba(85, 214, 190, 0.28);
  border-radius: 8px;
  background: rgba(7, 15, 20, 0.86);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.focus-patient .heart-view.comparison-2d-on .heart-2d-comparison {
  display: grid;
}

.heart-2d-comparison-head,
.heart-2d-comparison-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.heart-2d-comparison-head span {
  color: #eaf7fb;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.heart-2d-comparison-grid canvas {
  width: 100%;
  height: clamp(110px, 18vh, 190px);
  min-width: 0;
  border-radius: 6px;
  background: #fff8f8;
}

.heart-2d-comparison p {
  margin: 0;
  color: #cde0e8;
  font-size: 0.76rem;
  line-height: 1.32;
}

.flutter-field {
  fill: none;
  stroke: #79d8ff;
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: var(--flutter-opacity);
  filter: url(#softGlow);
}

.fib-field {
  fill: none;
  stroke: #8ae1ff;
  stroke-width: 2.3;
  stroke-linecap: round;
  opacity: var(--fib-opacity);
  filter: url(#softGlow);
}

.fib-field path:nth-child(odd) {
  transform: translateX(calc(var(--fib-shift) * 1px));
}

.fib-field path:nth-child(even) {
  transform: translateX(calc(var(--fib-shift) * -1px));
}

.ectopic-atrial-field {
  fill: none;
  stroke: #ffe49a;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-dasharray: 10 7;
  opacity: var(--ectopic-atrial-opacity);
  filter: url(#softGlow);
}

.mat-source-field {
  fill: none;
  stroke: #8de6db;
  stroke-width: 3.2;
  filter: url(#softGlow);
  pointer-events: none;
}

.mat-source-field circle:nth-of-type(2) {
  fill: #102a2d;
  stroke: none;
}

.mat-source-field text {
  fill: #d9fff8;
  stroke: none;
  font: 700 9px Inter, system-ui, sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
}

.mat-source-field path {
  stroke-width: 2.4;
  stroke-dasharray: 6 5;
  stroke-linecap: round;
}

.mat-source-a { opacity: var(--mat-source-a-opacity); }
.mat-source-b { opacity: var(--mat-source-b-opacity); }
.mat-source-c { opacity: var(--mat-source-c-opacity); }
.focal-source-field { opacity: var(--focal-source-opacity); }
.junctional-source-field { opacity: var(--junctional-source-opacity); stroke: #ffcf83; }
.junctional-source-field text { fill: #fff1d5; }
.proximal-his-field { opacity: var(--proximal-his-opacity); stroke: #a8e9ff; }
.proximal-his-field text { fill: #e8f9ff; }
.distal-conduction-source-field { opacity: var(--distal-conduction-source-opacity); stroke: #d9b5ff; }
.distal-conduction-source-field text { fill: #f6e9ff; font-size: 7px; }
.protected-focus-field { opacity: var(--protected-focus-opacity); stroke: #9ceaf5; }
.protected-focus-field text { fill: #e8fbff; font-size: 8px; }
.nodal-reentry-field {
  opacity: var(--nodal-circuit-opacity);
  fill: none;
  stroke: #9ce9ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#softGlow);
}

.ventricular-origin-field,
.ventricular-fibrillation-field {
  fill: none;
  stroke-linecap: round;
  filter: url(#softGlow);
}

.ventricular-origin-field {
  stroke: var(--ventricular-origin-color);
  stroke-width: 3.5;
  stroke-dasharray: 11 8;
  opacity: var(--ventricular-origin-opacity);
}

.ventricular-fibrillation-field {
  stroke: #8be2ff;
  stroke-width: 2.8;
  opacity: var(--vf-opacity);
}

.heart-metrics {
  position: absolute;
  z-index: 3;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.heart-metrics span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #dce9f3;
  background: rgba(9, 15, 23, 0.72);
  font-size: 0.78rem;
  font-weight: 760;
}

.heart-causal-attribution {
  position: absolute;
  z-index: 8;
  right: 16px;
  bottom: 72px;
  display: grid;
  gap: 3px;
  max-width: min(300px, calc(100% - 32px));
  padding: 9px 11px;
  border: 1px solid rgba(119, 216, 239, 0.75);
  border-radius: 7px;
  color: #e9faff;
  background: rgba(7, 20, 29, 0.91);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  font-size: 0.76rem;
  font-weight: 760;
  line-height: 1.28;
  pointer-events: none;
}

.heart-causal-attribution[hidden] {
  display: none;
}

.heart-causal-attribution span:first-child {
  color: #a6e6ff;
}

.heart-causal-attribution > span:nth-child(2) {
  color: #ffd5a4;
}

.pmt-device-timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin-top: 3px;
  padding-top: 6px;
  border-top: 1px solid rgba(119, 216, 239, 0.38);
}

.pmt-device-timeline[hidden] {
  display: none;
}

.pmt-device-timeline[data-trial39="true"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pmt-device-timeline span {
  min-width: 0;
  padding: 3px 4px;
  border: 1px solid rgba(155, 191, 202, 0.28);
  border-radius: 4px;
  color: #b9cbd3;
  background: rgba(25, 44, 54, 0.65);
  font-size: 0.69rem;
  font-weight: 780;
  letter-spacing: 0.025em;
  text-align: center;
}

.pmt-device-timeline span[data-pmt-state="active"] {
  border-color: rgba(113, 220, 218, 0.82);
  color: #eafff9;
  background: rgba(28, 120, 124, 0.68);
  box-shadow: inset 0 0 0 1px rgba(158, 241, 232, 0.2);
}

.pmt-device-timeline span[data-pmt-marker="atrial"][data-pmt-code="AR"][data-pmt-state="active"] {
  border-color: rgba(255, 194, 122, 0.88);
  color: #fff3db;
  background: rgba(145, 83, 30, 0.8);
}

.pmt-device-timeline[data-trial39="true"] span[data-pmt-marker="atrial"]:is(
  [data-pmt-code="AB"], [data-pmt-code="AR"])[data-pmt-state="active"] {
  border-color: rgba(255, 194, 122, 0.88);
  color: #fff3db;
  background: rgba(145, 83, 30, 0.8);
}

.heart-causal-attribution[data-attribution-kind^="trial39-"] {
  border-color: rgba(113, 220, 218, 0.82);
}

.heart-causal-attribution[data-attribution-kind^="pmt-"] {
  border-color: rgba(113, 220, 218, 0.82);
}

.heart-causal-attribution[data-attribution-kind="pmt-ar"],
.heart-causal-attribution[data-attribution-kind="pmt-stopped"] {
  border-color: rgba(255, 194, 122, 0.82);
}

.heart-causal-attribution[data-attribution-kind="interference-junctional"] {
  border-color: rgba(246, 199, 110, 0.8);
}

.heart-causal-attribution[data-attribution-kind="interference-junctional"] span:first-child {
  color: #ffe4aa;
}

.heart-causal-attribution[data-attribution-kind="interference-sinus-capture"] {
  border-color: rgba(113, 220, 218, 0.82);
}

.heart-causal-attribution[data-attribution-kind="interference-sinus-capture"] span:first-child {
  color: #aff7ed;
}

.heart-causal-attribution[data-attribution-kind^="vt-"] {
  border-color: rgba(245, 178, 118, 0.82);
}

.heart-causal-attribution[data-attribution-kind^="vt-"] span:first-child {
  color: #ffe0b9;
}

.heart-causal-attribution[data-attribution-kind="vt-va-return"] {
  border-color: rgba(113, 220, 218, 0.82);
}

.heart-causal-attribution[data-attribution-kind="vt-va-return"] span:first-child {
  color: #aff7ed;
}

.heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="vt-"] {
  bottom: 104px;
}

.heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="interference-"] {
  bottom: 104px;
}

.heart-view.mode-3d .heart-causal-attribution,
.library-heart-card.mode-3d .heart-causal-attribution {
  top: 64px;
  bottom: auto;
  max-width: min(220px, calc(100% - 32px));
}

.heart-view.mode-cutaway .heart-causal-attribution,
.library-heart-card.mode-cutaway .heart-causal-attribution {
  max-width: min(220px, calc(100% - 32px));
}

.conduction-guide {
  position: absolute;
  z-index: 6;
  right: 14px;
  bottom: 14px;
  display: none;
  width: min(360px, calc(100% - 28px));
  max-height: min(62%, 430px);
  overflow: auto;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(85, 214, 190, 0.32);
  border-radius: 8px;
  background: rgba(6, 12, 18, 0.82);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
}

.heart-view.mode-cutaway.conduction-guide-on .conduction-guide,
.library-heart-card.mode-cutaway.conduction-guide-on .conduction-guide {
  display: grid;
}

.conduction-guide > div {
  display: grid;
  gap: 3px;
}

.conduction-guide b {
  color: var(--accent);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.conduction-guide span {
  color: #dfeaf2;
  font-size: 0.78rem;
  line-height: 1.3;
}

.conduction-step-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.conduction-step-list li {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  opacity: 0.72;
}

.conduction-step-list li.active {
  border-color: rgba(85, 214, 190, 0.86);
  background: rgba(85, 214, 190, 0.15);
  opacity: 1;
}

.conduction-step-list li b {
  color: #f0f7fb;
  font-size: 0.73rem;
}

.conduction-step-list li span {
  color: var(--muted);
  font-size: 0.72rem;
}

.patient-photo,
.anatomy-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.patient-photo {
  display: block;
  object-fit: fill;
  border-radius: 5px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.28);
}

.anatomy-overlay {
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.9))
    drop-shadow(0 0 5px rgba(0, 0, 0, 0.72));
}

.body-shape {
  fill: url(#skin);
  stroke: rgba(255, 237, 224, 0.45);
  stroke-width: 2;
}

.face-line,
.body-contour {
  fill: none;
  stroke-linecap: round;
}

.face-line {
  stroke: rgba(50, 34, 30, 0.46);
  stroke-width: 3;
}

.body-contour {
  stroke: rgba(112, 61, 49, 0.24);
  stroke-width: 4;
}

.body-contour.subtle {
  opacity: 0.58;
  stroke-width: 3;
}

.bone,
.sternum,
.rib,
.intercostal,
.axis-line {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.bone {
  stroke: rgba(255, 252, 241, 0.9);
  stroke-width: 3;
}

.sternum {
  stroke: rgba(255, 252, 241, 0.94);
  stroke-width: 2.6;
}

.rib {
  stroke: rgba(255, 247, 224, 0.7);
  stroke-width: 1.8;
}

.intercostal {
  stroke: rgba(69, 235, 208, 0.88);
  stroke-width: 2.2;
  stroke-dasharray: 7 8;
}

.axis-line {
  stroke: rgba(111, 190, 255, 0.82);
  stroke-width: 2.1;
  stroke-dasharray: 6 8;
}

.abdomen-reference {
  fill: none;
  stroke: rgba(255, 221, 126, 0.7);
  stroke-width: 2;
  stroke-dasharray: 8 8;
  vector-effect: non-scaling-stroke;
}

.landmark-layer {
  opacity: 1;
  transition: opacity 160ms ease;
}

.placement-area:not(.anatomy-on) .landmark-layer {
  opacity: 0;
}

.placement-area:not(.help-on) .target {
  opacity: 0;
}

.placement-area.anatomy-on .landmark-layer,
.placement-area.help-on .target {
  opacity: 1;
}

.placement-area.help-on .target {
  transition-duration: 0ms;
}

.placement-area:not(.help-on) .target-label {
  display: none;
}

.target-layer,
.electrode-layer {
  position: absolute;
  inset: 0;
}

.target {
  position: absolute;
  width: var(--target-size, 46px);
  height: var(--target-size, 46px);
  margin: 0;
  border: 2px dashed rgba(85, 214, 190, 0.82);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 160ms ease;
}

.target::before,
.target::after {
  position: absolute;
  content: "";
  inset: 50% auto auto 50%;
  background: rgba(85, 214, 190, 0.8);
  transform: translate(-50%, -50%);
}

.target::before {
  width: min(16px, calc(var(--target-size, 46px) * 0.62));
  height: 2px;
}

.target::after {
  width: 2px;
  height: min(16px, calc(var(--target-size, 46px) * 0.62));
}

.target-label {
  position: absolute;
  left: 50%;
  top: calc(100% + 4px);
  transform: translateX(-50%);
  padding: 2px 5px;
  border-radius: 4px;
  color: #041413;
  background: rgba(85, 214, 190, 0.9);
  font-size: 0.64rem;
  font-weight: 850;
  white-space: nowrap;
}

.target.label-above .target-label {
  top: auto;
  bottom: calc(100% + 4px);
}

.placement-area.photo-rotated .target-label {
  top: 50%;
  bottom: auto;
  left: calc(100% + 6px);
  transform: translateY(-50%);
}

.placement-area.photo-rotated .target.label-above .target-label {
  left: auto;
  right: calc(100% + 6px);
}

.placement-area.photo-rotated .target[data-id="V4"] .target-label {
  top: 50%;
  bottom: auto;
  left: auto;
  right: calc(100% + 34px);
  transform: translateY(-50%);
}

.placement-area.photo-rotated .target[data-id="V5"] .target-label {
  top: 50%;
  bottom: auto;
  left: calc(100% + 40px);
  right: auto;
  transform: translateY(-50%);
}

.placement-area.photo-rotated .target:is([data-id="V4"], [data-id="V5"]) .target-label::after {
  position: absolute;
  top: 50%;
  height: 2px;
  background: rgba(85, 214, 190, 0.86);
  content: "";
}

.placement-area.photo-rotated .target[data-id="V4"] .target-label::after {
  right: -29px;
  width: 29px;
}

.placement-area.photo-rotated .target[data-id="V5"] .target-label::after {
  left: -35px;
  width: 35px;
}

.help-panel {
  display: none;
  max-height: 260px;
  overflow: auto;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: rgba(6, 12, 18, 0.3);
}

.app-shell.help-on .help-panel {
  display: block;
}

.help-panel h3 {
  margin-bottom: 10px;
  color: var(--accent);
}

.help-list {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.help-row {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 8px;
  align-items: start;
  padding: 7px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: #d8e4ed;
  font-size: 0.78rem;
  line-height: 1.25;
}

.help-row b {
  color: var(--text);
}

.electrode {
  position: absolute;
  z-index: 5;
  width: var(--pad-size, 52px);
  height: var(--pad-size, 52px);
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 50%;
  background: var(--pad-color);
  color: var(--pad-text);
  cursor: grab;
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 0.25),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.38);
  font-weight: 900;
  font-size: var(--pad-font-size, 0.9rem);
  line-height: 1;
  touch-action: none;
  transform: translate(-50%, -50%);
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

.electrode.on-patient {
  width: var(--placed-pad-size, 34px);
  height: var(--placed-pad-size, 34px);
  font-size: var(--placed-pad-font-size, 0.66rem);
}

.electrode.on-patient:is([data-id="V5"], [data-id="V6"]) {
  min-width: 0;
  padding: 0;
}

.electrode.on-patient:is([data-id="V5"], [data-id="V6"]) > span {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  display: grid;
  min-width: 28px;
  min-height: 22px;
  padding: 0 4px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  background: var(--pad-color);
  color: var(--pad-text);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.4);
  font-size: 0.65rem;
  transform: translateX(-50%);
}

.electrode.on-patient[data-id="V6"] > span {
  top: auto;
  bottom: calc(100% + 4px);
}

.placement-area.photo-rotated .electrode.on-patient[data-id="V5"] > span {
  top: 50%;
  bottom: auto;
  left: calc(100% + 40px);
  transform: translateY(-50%);
}

.placement-area.photo-rotated .electrode.on-patient[data-id="V6"] > span {
  left: calc(50% + 25px);
}

.electrode::before {
  position: absolute;
  content: "";
  inset: 17%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.electrode span {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px rgba(255, 255, 255, 0.2);
}

.electrode.dragging {
  z-index: 10;
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.08);
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 0.3),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2),
    0 18px 30px rgba(0, 0, 0, 0.52);
}

.electrode.correct {
  border-color: var(--ok);
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 0.25),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2),
    0 0 0 4px rgba(94, 226, 143, 0.24),
    0 10px 20px rgba(0, 0, 0, 0.38);
}

.electrode.close {
  border-color: var(--warn);
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 0.25),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2),
    0 0 0 4px rgba(255, 204, 102, 0.22),
    0 10px 20px rgba(0, 0, 0, 0.38);
}

.electrode.clinical-injury,
.electrode.clinical-reciprocal,
.electrode.clinical-placement {
  z-index: 6;
}

.electrode.clinical-injury {
  border-color: #ff6d7a;
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 0.25),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2),
    0 0 0 5px rgba(255, 109, 122, 0.34),
    0 10px 20px rgba(0, 0, 0, 0.38);
}

.electrode.clinical-reciprocal {
  border-color: #6fb6ff;
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 0.25),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2),
    0 0 0 5px rgba(111, 182, 255, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.38);
}

.electrode.clinical-placement {
  border-color: #ffcc66;
  box-shadow:
    inset 0 4px 12px rgba(255, 255, 255, 0.25),
    inset 0 -8px 10px rgba(0, 0, 0, 0.2),
    0 0 0 5px rgba(255, 204, 102, 0.32),
    0 10px 20px rgba(0, 0, 0, 0.38);
}

.electrode.clinical-injury::after,
.electrode.clinical-reciprocal::after,
.electrode.clinical-placement::after {
  position: absolute;
  content: attr(data-clinical-role);
  left: 50%;
  bottom: calc(100% + 5px);
  transform: translateX(-50%);
  max-width: 96px;
  padding: 3px 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px;
  color: #f5f9fb;
  background: rgba(6, 12, 18, 0.82);
  font-size: 0.56rem;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.legend-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 11px 14px;
  border-top: 1px solid var(--line);
  background: rgba(6, 12, 18, 0.3);
}

.patient-switcher {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 64px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: rgba(6, 12, 18, 0.24);
}

.patient-switcher .icon-button {
  width: 40px;
  height: 38px;
  color: var(--text);
}

.patient-meta {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.patient-meta b {
  font-size: 0.92rem;
}

.patient-meta span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
}

.case-context-card {
  display: grid;
  gap: 3px;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 90;
  width: min(520px, calc(100vw - 48px));
  padding: 10px 12px;
  border: 1px solid rgba(85, 214, 190, 0.2);
  border-radius: 6px;
  background: rgba(8, 18, 24, 0.96);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.38);
  text-align: left;
}

.case-context-card[hidden] {
  display: none;
}

.case-context-card span {
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.case-context-card strong {
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.25;
}

.case-context-card small {
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.22;
}

.case-context-card small:last-child {
  color: #d7e1e8;
}

.app-shell:not(.help-on) .case-context-card .help-context-only {
  display: none;
}

.legend-title {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 760;
  text-transform: uppercase;
  white-space: nowrap;
}

.color-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  color: #d8e2ec;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.72rem;
  font-weight: 760;
}

.swatch {
  width: 11px;
  height: 11px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 50%;
  background: var(--pad-color);
}

.ecg-frame {
  position: relative;
  height: clamp(340px, calc(100vh - 600px), 460px);
  min-height: 340px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}

#ecgCanvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
}

.ecg-frame.paused #ecgCanvas {
  cursor: default;
}

.clinical-panel {
  display: grid;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(85, 214, 190, 0.07), transparent 46%),
    rgba(6, 12, 18, 0.22);
}

.clinical-panel[hidden],
.app-shell:not(.clinical-on) .clinical-panel {
  display: none !important;
}

.clinical-panel-head,
.comparison-head,
.clinical-tools,
.vector-axis-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.clinical-panel h3,
.clinical-panel h4 {
  margin: 0;
}

.clinical-panel-head p,
.clinical-card p,
.clinical-hint,
.comparison-head p,
.vector-lite p,
.axis-lite p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.lead-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lead-group-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 5px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  color: #dce9f3;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.72rem;
  font-weight: 820;
}

.lead-group-chip.active {
  color: #031716;
  border-color: rgba(85, 214, 190, 0.92);
  background: var(--accent);
}

.lead-group-chip.reciprocal {
  color: #361008;
  border-color: rgba(255, 188, 97, 0.8);
  background: #ffbc61;
}

.clinical-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.clinical-card,
.vector-lite,
.axis-lite,
.comparison-panel {
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.clinical-card h4 {
  color: var(--accent);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.clinical-tools {
  align-items: end;
  flex-wrap: wrap;
}

.clinical-field {
  display: grid;
  gap: 4px;
  min-width: 180px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 820;
  text-transform: uppercase;
}

.clinical-field select {
  min-width: 0;
  width: 100%;
}

.clinical-field input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.clinical-field.disabled {
  opacity: 0.66;
}

.severity-field {
  min-width: 220px;
}

.severity-field output {
  color: #dbe7f2;
  font-size: 0.78rem;
}

.clinical-hint {
  flex: 1 1 260px;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.035);
}

.spot-field {
  min-width: 210px;
}

.comparison-panel {
  display: grid;
  gap: 8px;
}

.comparison-canvases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.comparison-strip {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.comparison-strip b,
.vector-lite b,
.axis-lite summary {
  color: #dce9f3;
  font-size: 0.78rem;
  font-weight: 850;
}

.comparison-strip canvas {
  width: 100%;
  height: 88px;
  display: block;
  border: 1px solid rgba(210, 52, 73, 0.22);
  border-radius: 6px;
  background: var(--paper);
}

.axis-lite {
  flex: 1 1 260px;
}

.vector-lite {
  flex: 1 1 320px;
}

.feedback-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  min-height: 172px;
}

.feedback-card {
  padding: 14px 16px;
  border-right: 1px solid var(--line);
  background: rgba(6, 12, 18, 0.28);
}

.feedback-card:last-child {
  border-right: 0;
}

.status-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 0;
  margin: 12px 0 0;
  list-style: none;
}

.status-list li,
.signal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--muted);
  font-size: 0.78rem;
}

.status-list b,
.signal-row b {
  color: var(--text);
  font-size: 0.78rem;
}

.status {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
  white-space: nowrap;
}

.status.ok {
  color: #06270f;
  background: var(--ok);
}

.status.warn {
  color: #2c1f00;
  background: var(--warn);
}

.status.bad {
  color: #32060c;
  background: var(--danger);
}

.status.neutral {
  color: #d2dbe5;
  background: #344253;
}

.signal-details {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.answer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 12px;
}

.answer-row select {
  width: 100%;
  min-width: 0;
}

.secondary-button.small {
  height: 40px;
  padding: 0 12px;
}

.answer-feedback {
  min-height: 21px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.answer-feedback.correct {
  color: var(--ok);
}

.answer-feedback.incorrect {
  color: var(--warn);
}

.answer-feedback.blocked {
  color: var(--danger);
}

.signal-heading {
  margin-top: 14px;
}

.reference-strip {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 14px;
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(21, 27, 36, 0.78);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.reference-strip b {
  color: #dce8f3;
}

.panel-label {
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.library-panel[hidden] {
  display: none;
}

.about-panel[hidden] {
  display: none;
}

.onboarding-panel[hidden] {
  display: none;
}

.onboarding-panel {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: block;
  padding: 18px;
  background:
    radial-gradient(circle at 24% 18%, rgba(85, 214, 190, 0.18), transparent 30%),
    radial-gradient(circle at 78% 74%, rgba(249, 160, 63, 0.12), transparent 34%),
    rgba(4, 8, 12, 0.48);
  opacity: 0;
  transition: opacity 220ms ease;
}

.onboarding-panel.active {
  opacity: 1;
}

.onboarding-spotlight {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  border: 2px solid rgba(85, 214, 190, 0.86);
  border-radius: 10px;
  box-shadow:
    0 0 0 9999px rgba(4, 8, 12, 0.28),
    0 0 0 6px rgba(85, 214, 190, 0.1),
    0 16px 42px rgba(0, 0, 0, 0.34);
  opacity: 0;
  transform: scale(0.985);
  transition:
    left 220ms ease,
    top 220ms ease,
    width 220ms ease,
    height 220ms ease,
    opacity 160ms ease,
    transform 160ms ease;
}

.onboarding-spotlight.active {
  opacity: 1;
  transform: scale(1);
}

.onboarding-dialog {
  position: fixed;
  left: var(--onboarding-left, 18px);
  top: var(--onboarding-top, 18px);
  z-index: 2;
  width: min(560px, calc(100vw - 36px));
  max-height: min(720px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(85, 214, 190, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(85, 214, 190, 0.12), transparent 42%),
    linear-gradient(315deg, rgba(249, 160, 63, 0.08), transparent 48%),
    var(--panel);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58);
  transform: translateY(8px) scale(0.985);
  transition: transform 220ms ease;
}

.onboarding-panel.active .onboarding-dialog {
  transform: translateY(0) scale(1);
}

.onboarding-head,
.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(6, 12, 18, 0.46);
}

.onboarding-head h2 {
  color: var(--text);
  font-size: 1.28rem;
}

.onboarding-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.onboarding-rail {
  min-height: 0;
  padding: 10px 14px;
  border-right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(7, 13, 20, 0.36);
}

.onboarding-rail-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.onboarding-rail-step {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  gap: 5px;
  padding: 7px 5px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  color: #d7e6f0;
  text-align: left;
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.onboarding-rail-step:hover,
.onboarding-rail-step:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(111, 182, 255, 0.42);
}

.onboarding-rail-step span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(85, 214, 190, 0.22);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 900;
  background: rgba(7, 13, 20, 0.58);
}

.onboarding-rail-step b {
  display: none;
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-rail-step.active {
  border-color: rgba(85, 214, 190, 0.64);
  background: rgba(85, 214, 190, 0.12);
}

.onboarding-rail-step.active span,
.onboarding-rail-step.visited span {
  color: #07131d;
  background: var(--accent);
}

.onboarding-copy {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 14px;
  overflow: auto;
}

.onboarding-copy h3 {
  color: #f4f9fc;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  line-height: 1.12;
}

.onboarding-copy p:not(.panel-label) {
  max-width: 680px;
  color: #c4d4e0;
  line-height: 1.52;
}

.onboarding-bullets {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.onboarding-bullets li {
  position: relative;
  padding: 8px 10px 8px 31px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  color: #dcebf5;
  line-height: 1.38;
  background: rgba(255, 255, 255, 0.045);
}

.onboarding-bullets li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(85, 214, 190, 0.12);
}

.onboarding-visual {
  min-height: 138px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: minmax(74px, auto) auto;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(85, 214, 190, 0.18);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(85, 214, 190, 0.06) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(180deg, rgba(85, 214, 190, 0.045) 0 1px, transparent 1px 34px),
    rgba(5, 12, 18, 0.72);
}

.onboarding-visual-icon {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  border: 1px solid rgba(85, 214, 190, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(85, 214, 190, 0.16), rgba(111, 182, 255, 0.08)),
    rgba(7, 13, 20, 0.6);
}

.onboarding-visual-icon svg {
  width: 56px;
  height: 56px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.onboarding-visual-strip {
  display: grid;
  gap: 8px;
  align-content: center;
}

.onboarding-visual-strip span {
  height: 17px;
  border: 1px solid rgba(85, 214, 190, 0.16);
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 0 14%, #55d6be 14% 17%, transparent 17% 38%, #55d6be 38% 42%, transparent 42% 100%),
    rgba(7, 18, 26, 0.74);
}

.onboarding-visual-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.onboarding-visual-flow span {
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(249, 160, 63, 0.2);
  border-radius: 8px;
  color: #f2d5ae;
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
  text-transform: uppercase;
  background:
    linear-gradient(135deg, rgba(249, 160, 63, 0.13), transparent 62%),
    rgba(255, 255, 255, 0.04);
}

.onboarding-visual[data-visual="level"] .onboarding-visual-flow span:first-child,
.onboarding-visual[data-visual="skills"] .onboarding-visual-flow span:first-child,
.onboarding-visual[data-visual="practice"] .onboarding-visual-flow span:nth-child(2),
.onboarding-visual[data-visual="course"] .onboarding-visual-flow span:nth-child(3),
.onboarding-visual[data-visual="library"] .onboarding-visual-strip span:nth-child(2),
.onboarding-visual[data-visual="start"] .onboarding-visual-flow span:first-child {
  border-color: rgba(85, 214, 190, 0.48);
  color: #bffff2;
  background:
    linear-gradient(135deg, rgba(85, 214, 190, 0.22), transparent 58%),
    rgba(85, 214, 190, 0.08);
}

.onboarding-mode-note {
  padding: 9px 10px;
  border: 1px solid rgba(85, 214, 190, 0.2);
  border-radius: 8px;
  color: #c8f3ea;
  font-size: 0.9rem;
  font-weight: 740;
  background:
    linear-gradient(90deg, rgba(85, 214, 190, 0.11), transparent 70%),
    rgba(7, 13, 20, 0.5);
}

.onboarding-actions {
  justify-content: flex-end;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 0;
}

.onboarding-actions #onboardingBackBtn {
  margin-right: auto;
}

.about-panel {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 8, 12, 0.74);
}

.about-dialog {
  width: min(760px, 100%);
  max-height: min(680px, calc(100vh - 36px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(255, 204, 102, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 204, 102, 0.08), transparent 34%),
    var(--panel);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.56);
  overflow: hidden;
}

.privacy-dialog {
  width: min(900px, 100%);
}

.terms-dialog {
  width: min(980px, 100%);
}

.about-head {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 12, 18, 0.44);
}

.about-head h2 {
  font-size: 1rem;
}

.about-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.about-primary,
.about-grid article {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.about-primary {
  padding: 14px;
  border-color: rgba(255, 204, 102, 0.24);
}

.about-primary h3,
.about-grid h3 {
  margin-bottom: 7px;
  color: #ffe1a1;
}

.about-primary p,
.about-grid p {
  color: #d8e3ee;
  font-size: 0.9rem;
  line-height: 1.48;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.about-grid article {
  padding: 12px;
}

.privacy-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.terms-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.privacy-control-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(85, 214, 190, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(85, 214, 190, 0.08), transparent 44%),
    rgba(255, 255, 255, 0.04);
}

.privacy-control-card h3 {
  margin-bottom: 6px;
  color: #c5fff4;
}

.privacy-control-card p,
.privacy-clear-status {
  color: #d8e3ee;
  font-size: 0.9rem;
  line-height: 1.45;
}

.privacy-clear-status {
  grid-column: 1 / -1;
  min-height: 1.2em;
  color: #9ff2df;
}

.library-panel {
  position: fixed;
  inset: 10px;
  z-index: 210;
  display: grid;
  place-items: stretch;
  background: rgba(4, 8, 12, 0.72);
}

.library-dialog {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(85, 214, 190, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 38%),
    var(--panel);
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.48);
  overflow: hidden;
}

.library-head {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(85, 214, 190, 0.1), transparent 46%),
    rgba(6, 12, 18, 0.38);
}

.library-head .eyebrow {
  margin-bottom: 2px;
  font-size: 0.68rem;
}

.library-head h2 {
  font-size: 0.92rem;
}

.library-layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
}

.library-nav {
  min-height: 0;
  overflow: auto;
  padding: 11px;
  border-right: 1px solid var(--line);
  background: rgba(6, 12, 18, 0.24);
}

.library-nav .field {
  margin-bottom: 9px;
}

.library-nav-summary {
  display: grid;
  gap: 3px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid rgba(85, 214, 190, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(85, 214, 190, 0.1), transparent 72%),
    rgba(255, 255, 255, 0.04);
}

.library-nav-summary span,
.library-filter-summary,
.library-case-button span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 820;
  line-height: 1.28;
  text-transform: uppercase;
}

.library-nav-summary b {
  color: #e9fff8;
  font-size: 0.92rem;
}

.library-nav select {
  min-width: 0;
  width: 100%;
}

.library-search-field input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01)), #141e2b;
}

.library-search-field input::placeholder {
  color: #758795;
}

.library-filter-summary {
  margin: 2px 0 10px;
  text-transform: none;
}

.library-case-list {
  display: grid;
  gap: 6px;
}

.library-category-heading {
  position: sticky;
  top: -11px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 7px 8px;
  border: 1px solid rgba(85, 214, 190, 0.16);
  border-radius: 7px;
  color: #bffff2;
  background: rgba(8, 15, 22, 0.95);
  font-size: 0.68rem;
  font-weight: 880;
  text-transform: uppercase;
}

.library-category-heading b {
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #07131d;
  text-align: center;
  background: var(--accent);
}

.library-case-button {
  min-height: 34px;
  display: grid;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #dbe7f2;
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.8rem;
  text-align: left;
  font-weight: 760;
  cursor: pointer;
}

.library-case-button b,
.library-case-button small,
.library-case-button span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.library-case-button small {
  color: #aebdcc;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.26;
}

.library-case-button-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.library-case-button.active {
  color: #031716;
  border-color: rgba(85, 214, 190, 0.9);
  background: var(--accent);
}

.library-case-button.active small,
.library-case-button.active span {
  color: rgba(3, 23, 22, 0.76);
}

.library-empty-state {
  padding: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  color: #bdcbd6;
  background: rgba(255, 255, 255, 0.035);
  font-size: 0.82rem;
  line-height: 1.38;
}

.heart-marker-key {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(132px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 6px 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--line-soft);
  background: rgba(14, 32, 39, 0.96);
  color: #e1edf0;
  font-size: 0.78rem;
  line-height: 1.4;
  max-height: 160px;
  overflow-y: auto;
}

.heart-marker-key[hidden] {
  display: none;
}

.heart-marker-key:focus-visible {
  outline: 2px solid #ffd8a3;
  outline-offset: -2px;
}

.heart-marker-key-heading {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.heart-marker-key-heading strong {
  color: #e5f7ed;
  font-size: 0.82rem;
}

.heart-marker-key-heading span {
  color: #a9c0c6;
  font-size: 0.71rem;
}

.heart-marker-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin: 0;
}

.heart-marker-list > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.heart-marker-list dt {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 1px 5px;
  border: 1px solid rgba(241, 185, 108, 0.55);
  border-radius: 4px;
  background: rgba(241, 185, 108, 0.12);
  color: #ffd8a3;
  font-weight: 800;
  text-align: center;
}

.heart-marker-list dd {
  min-width: 0;
  margin: 0;
}

.heart-marker-note {
  grid-column: 1 / -1;
  margin: 0;
  color: #abc4c9;
  font-size: 0.73rem;
}

.library-heart-marker-key {
  grid-area: cue;
  height: max-content;
  max-height: 180px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.heart-marker-shortcut {
  position: absolute;
  z-index: 25;
  left: 12px;
  bottom: 60px;
  display: block;
  max-width: min(360px, calc(100% - 24px));
  overflow: hidden;
  padding: 6px 9px;
  border: 1px solid rgba(241, 185, 108, 0.65);
  border-radius: 6px;
  background: rgba(7, 18, 24, 0.88);
  color: #ffe5bb;
  font-size: 0.7rem;
  font-weight: 750;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}

.heart-marker-shortcut[hidden] {
  display: none;
}

.heart-marker-shortcut strong {
  color: #ffd8a3;
}

.library-heart-card.mode-cutaway.conduction-guide-on .heart-marker-shortcut,
.heart-view.mode-cutaway.conduction-guide-on .heart-marker-shortcut {
  top: 100px;
  bottom: auto;
}

body.focus-patient #heartMarkerShortcut {
  display: none;
}

@media (max-width: 520px) {
  .library-heart-card.mode-2d .heart-marker-shortcut {
    top: 58px;
    bottom: auto;
  }

  .heart-view .heart-marker-shortcut {
    top: auto;
    bottom: 60px;
  }

  .heart-view.mode-3d .heart-marker-shortcut {
    top: 58px;
    bottom: auto;
  }

  .heart-view.mode-cutaway .heart-marker-shortcut {
    top: 100px;
    bottom: auto;
  }

  .library-heart-card.mode-2d .heart-marker-shortcut-meaning,
  .heart-view .heart-marker-shortcut-meaning {
    display: none;
  }
}

.library-detail {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(540px, 1.55fr) minmax(260px, 0.55fr);
  grid-template-areas:
    "summary summary"
    "strip strip"
    "heart metrics"
    "clinical clinical"
    "related related";
  align-content: start;
  gap: 10px;
  padding: 12px;
}

.library-detail.has-heart-markers {
  grid-template-areas:
    "summary summary"
    "strip strip"
    "cue cue"
    "heart metrics"
    "clinical clinical"
    "related related";
}

.library-summary {
  grid-area: summary;
  display: grid;
  gap: 5px;
  max-width: none;
}

.library-summary-top {
  display: block;
  gap: 14px;
}

.library-summary h3 {
  margin-bottom: 0;
  color: var(--text);
  font-size: clamp(1.05rem, 1.4vw, 1.55rem);
  line-height: 1.08;
  text-transform: none;
}

.library-summary p:last-child {
  color: #c9d7e2;
  font-size: 0.88rem;
  line-height: 1.34;
}

.library-case-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.library-case-meta span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(85, 214, 190, 0.18);
  border-radius: 999px;
  color: #dcebf5;
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.7rem;
  font-weight: 820;
}

.case-review-badge {
  flex: 0 0 auto;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #08121a;
  background: #c7d4df;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.16);
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.case-review-badge.compact {
  min-height: 20px;
  padding: 3px 7px;
  font-size: 0.6rem;
}

.case-review-badge.new {
  color: #06131c;
  border-color: rgba(125, 211, 252, 0.72);
  background: #7dd3fc;
}

.case-review-badge.software {
  color: #031713;
  border-color: rgba(94, 234, 212, 0.72);
  background: #5eead4;
}

.case-review-badge.clinical {
  color: #07140e;
  border-color: rgba(134, 239, 172, 0.78);
  background: #86efac;
}

.case-review-badge.icon-only {
  position: relative;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  overflow: hidden;
  text-indent: -999px;
}

.case-review-badge.icon-only.seal {
  border: 1px solid rgba(179, 255, 210, 0.86);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 48%, #d9ffe8 0 28%, #86efac 30% 48%, #20c997 52% 68%, #0f8f73 70% 100%);
  box-shadow:
    0 0 0 2px rgba(134, 239, 172, 0.18),
    0 8px 16px rgba(0, 0, 0, 0.22),
    inset 0 0 0 2px rgba(255, 255, 255, 0.46);
}

.case-review-badge.icon-only.seal::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  width: 7px;
  height: 12px;
  border-right: 3px solid #052c21;
  border-bottom: 3px solid #052c21;
  transform: rotate(42deg);
}

.case-review-badge.icon-only.seal::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(5, 44, 33, 0.36);
  border-radius: 50%;
}

.case-review-badge.needs {
  color: #241006;
  border-color: rgba(251, 146, 60, 0.78);
  background: #fb923c;
}

.library-case-button.active .case-review-badge,
.library-case-meta .case-review-badge {
  color: #06131c;
}

.library-bpm-control {
  display: grid;
  grid-template-columns: auto minmax(150px, 260px) 42px;
  gap: 9px;
  align-items: center;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.72rem;
  font-weight: 820;
  text-transform: uppercase;
}

.library-bpm-control input {
  width: 100%;
  accent-color: var(--accent);
}

.library-bpm-control output {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.library-rate-range-hint {
  grid-column: 1 / -1;
  color: #b7c8d3;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  text-transform: none;
}

.library-heart-card {
  grid-area: heart;
  position: relative;
  height: clamp(440px, 56vh, 680px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:
    radial-gradient(circle at center, rgba(154, 221, 216, 0.12), rgba(8, 13, 17, 0) 58%),
    #071015;
}

.library-heart-expand-button {
  display: inline-grid;
  place-items: center;
  z-index: 28;
}

.library-heart-expand-button .icon-collapse {
  display: none;
}

.library-panel.library-heart-expanded .library-heart-expand-button .icon-expand {
  display: none;
}

.library-panel.library-heart-expanded .library-heart-expand-button .icon-collapse {
  display: block;
}

.library-panel.library-heart-expanded .library-heart-card {
  position: fixed;
  inset: 72px 22px 22px;
  z-index: 260;
  height: auto;
  min-height: 0;
  border-color: rgba(85, 214, 190, 0.42);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.58);
}

.library-panel.library-heart-expanded .library-heart-scene {
  min-height: 0;
}

.library-panel.library-heart-expanded .library-heart-svg {
  position: absolute;
  left: 50%;
  top: 50%;
  height: min(56vh, 62%);
  max-height: none;
  transform: translate(-50%, -50%) scale(var(--library-2d-zoom, 1.25));
  transform-origin: center;
}

.library-panel.library-heart-expanded .library-heart-2d-scene {
  padding: 64px 24px 26px;
}

.library-conduction-guide {
  right: 12px;
  bottom: 12px;
  width: min(340px, calc(100% - 24px));
  max-height: min(68%, 420px);
}

.library-heart-mode-toggle {
  top: 12px;
  left: 12px;
  display: flex;
  max-width: calc(100% - 68px);
}

.library-conduction-controls {
  top: 56px;
  left: 12px;
}

.library-heart-2d-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  place-items: center;
  padding: 58px 20px 22px;
  background:
    linear-gradient(180deg, rgba(8, 14, 22, 0.12), rgba(8, 14, 22, 0.72)),
    radial-gradient(circle at 50% 44%, rgba(228, 81, 87, 0.24), transparent 18rem);
  --heart-scale: 1;
  --atrial-scale: 1;
  --ra-scale: 1;
  --la-scale: 1;
  --right-ventricle-scale: 1;
  --left-ventricle-scale: 1;
  --right-wall-response-opacity: 0;
  --left-wall-response-opacity: 0;
  --septum-scale: 1;
  --septum-displacement-x: 0px;
  --septum-local-distance-scale: 1;
  --tricuspid-scale: 1;
  --mitral-scale: 1;
  --pulmonary-valve-scale: 1;
  --aortic-valve-scale: 1;
  --rv-papillary-scale: 1;
  --lv-papillary-scale: 1;
  --signal-opacity: 0.28;
  --signal-left-opacity: 0.28;
  --signal-right-opacity: 0.28;
  --ischemia-anterior-opacity: 0;
  --ischemia-inferior-opacity: 0;
  --ischemia-lateral-opacity: 0;
  --posterior-risk-indicator-opacity: 0;
  --rapid-anterior-opacity: 0;
  --rapid-septal-opacity: 0;
  --rapid-lateral-opacity: 0;
  --rapid-inferior-opacity: 0;
  --rapid-posterior-opacity: 0;
  --rapid-reciprocal-opacity: 0;
  --rapid-vector-opacity: 0;
  --rapid-vector-toward-opacity: 0.22;
  --rapid-vector-away-opacity: 0.22;
  --rapid-vector-perpendicular-opacity: 0.22;
  --rapid-edge-opacity: 0;
  --flutter-opacity: 0;
  --fib-opacity: 0;
  --fib-shift: 0;
  --ectopic-atrial-opacity: 0;
  --mat-source-a-opacity: 0;
  --mat-source-b-opacity: 0;
  --mat-source-c-opacity: 0;
  --focal-source-opacity: 0;
  --slow-av-transit-opacity: 0;
  --junctional-source-opacity: 0;
  --proximal-his-opacity: 0;
  --distal-conduction-source-opacity: 0;
  --nodal-circuit-opacity: 0;
  --protected-focus-opacity: 0;
  --ventricular-origin-opacity: 0;
  --ventricular-origin-color: #ffba7d;
  --left-tissue-activation-opacity: 0;
  --right-tissue-activation-opacity: 0;
  --vf-opacity: 0;
  --sa-node-opacity: 0.42;
  --av-node-opacity: 0.42;
  --retrograde-opacity: 0;
  --retrograde-av-opacity: 0;
  --preexcitation-opacity: 0;
  --accessory-path-access-opacity: 0;
  --accessory-retrograde-opacity: 0;
  --lvh-cavity-scale: 1;
  --av-valve-scale: 1;
  --outflow-valve-scale: 1;
  --papillary-scale: 1;
  --coronary-opacity: 0.62;
  --flow-offset: 0;
  --library-2d-zoom: 1.25;
}

.library-heart-card.mode-2d .library-heart-2d-scene {
  display: grid;
}

.library-heart-card.mode-2d .library-heart-scene {
  display: none;
}

.library-heart-card.mode-3d .library-heart-scene,
.library-heart-card.mode-cutaway .library-heart-scene {
  display: block;
}

.library-heart-card.mode-3d .library-heart-2d-scene,
.library-heart-card.mode-cutaway .library-heart-2d-scene {
  display: none;
}

.library-heart-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 440px;
  cursor: grab;
  touch-action: none;
}

.library-heart-scene:active {
  cursor: grabbing;
}

.library-heart-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.heart-3d-scene[data-rear-teaching-reveal="true"]::after,
.library-heart-scene[data-rear-teaching-reveal="true"]::after {
  content: "Posterior teaching reveal: front section viewed through translucent wall";
  position: absolute;
  z-index: 5;
  top: 64px;
  right: 12px;
  max-width: min(220px, 42%);
  padding: 7px 9px;
  border: 1px solid rgba(129, 206, 207, 0.5);
  border-radius: 7px;
  background: rgba(8, 26, 31, 0.82);
  color: #d3f8f5;
  font-size: 0.68rem;
  line-height: 1.28;
  pointer-events: none;
}

@media (max-width: 520px) {
  .heart-3d-scene[data-rear-teaching-reveal="true"]::after,
  .library-heart-scene[data-rear-teaching-reveal="true"]::after {
    content: "Rear teaching view";
    top: 102px;
    right: 8px;
    max-width: none;
    padding: 4px 6px;
    font-size: 0.62rem;
    white-space: nowrap;
  }
}

.heart-3d-scene[data-posterior-accessory-teaching-cue="true"]::after,
.library-heart-scene[data-posterior-accessory-teaching-cue="true"]::after {
  content: "Schematic accessory cue: front route hidden";
  position: absolute;
  z-index: 5;
  top: 94px;
  left: 12px;
  max-width: min(220px, 54%);
  padding: 7px 9px;
  border: 1px solid rgba(244, 199, 107, 0.55);
  border-radius: 7px;
  background: rgba(8, 26, 31, 0.82);
  color: #ffe4a7;
  font-size: 0.68rem;
  line-height: 1.28;
  pointer-events: none;
}

.heart-3d-scene[data-posterior-junctional-teaching-cue="true"]::after,
.library-heart-scene[data-posterior-junctional-teaching-cue="true"]::after {
  content: "J schematic cue; view Cutaway for the inner illustration";
  position: absolute;
  z-index: 5;
  top: 94px;
  left: 12px;
  max-width: min(220px, 54%);
  padding: 7px 9px;
  border: 1px solid rgba(246, 199, 110, 0.55);
  border-radius: 7px;
  background: rgba(8, 26, 31, 0.82);
  color: #ffe4a7;
  font-size: 0.68rem;
  line-height: 1.28;
  pointer-events: none;
}

.heart-3d-scene[data-nodal-teaching-loop="true"]::before,
.library-heart-scene[data-nodal-teaching-loop="true"]::before {
  content: "Schematic AV-junction loop";
  position: absolute;
  z-index: 5;
  top: 100px;
  left: 12px;
  max-width: min(190px, 40%);
  padding: 7px 9px;
  border: 1px solid rgba(156, 233, 255, 0.5);
  border-radius: 7px;
  background: rgba(8, 26, 31, 0.82);
  color: #dff7ff;
  font-size: 0.68rem;
  line-height: 1.28;
  pointer-events: none;
}

.heart-3d-scene[data-protected-focus-teaching-cue="true"]::before,
.library-heart-scene[data-protected-focus-teaching-cue="true"]::before {
  content: "Schematic protected focus clock";
  position: absolute;
  z-index: 5;
  top: 100px;
  left: 12px;
  max-width: min(190px, 40%);
  padding: 7px 9px;
  border: 1px solid rgba(156, 234, 245, 0.5);
  border-radius: 7px;
  background: rgba(8, 26, 31, 0.82);
  color: #e8fbff;
  font-size: 0.68rem;
  line-height: 1.28;
  pointer-events: none;
}

.heart-3d-scene[data-wall-response-teaching-sheen="true"]::before,
.library-heart-scene[data-wall-response-teaching-sheen="true"]::before {
  content: "Warm sheen: wall response timing";
  position: absolute;
  z-index: 5;
  top: 100px;
  left: 12px;
  max-width: min(190px, 40%);
  padding: 7px 9px;
  border: 1px solid rgba(241, 182, 139, 0.5);
  border-radius: 7px;
  background: rgba(8, 26, 31, 0.82);
  color: #ffe8d8;
  font-size: 0.68rem;
  line-height: 1.28;
  pointer-events: none;
}

.heart-view.mode-2d[data-wall-response-teaching-sheen="true"]::after,
.library-heart-2d-scene[data-wall-response-teaching-sheen="true"]::after {
  content: "Warm sheen: wall response timing";
  position: absolute;
  z-index: 5;
  top: 100px;
  left: 12px;
  max-width: min(190px, 40%);
  padding: 7px 9px;
  border: 1px solid rgba(241, 182, 139, 0.5);
  border-radius: 7px;
  background: rgba(8, 26, 31, 0.82);
  color: #ffe8d8;
  font-size: 0.68rem;
  line-height: 1.28;
  pointer-events: none;
}

@media (max-width: 520px) {
  .library-heart-2d-scene[data-wall-response-teaching-sheen="true"]::after {
    content: "Warm sheen:\A wall timing";
    white-space: pre-line;
    width: 90px;
    max-width: 90px;
    box-sizing: border-box;
  }
}

.library-heart-svg {
  position: absolute;
  left: 33%;
  top: 50%;
  width: auto;
  height: min(66%, 390px);
  max-height: none;
  max-width: calc(100% - 40px);
  aspect-ratio: 360 / 420;
  transform: translate(-50%, -50%) scale(var(--library-2d-zoom, 1.25));
  transition: transform 160ms ease;
}

.library-heart-svg .chamber-labels {
  font-size: 13px;
}

.library-heart-2d-controls {
  position: absolute;
  z-index: 5;
  left: 16px;
  bottom: 16px;
  display: none;
  align-items: center;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgba(85, 214, 190, 0.34);
  border-radius: 7px;
  background: rgba(9, 15, 23, 0.76);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.library-heart-card.mode-2d .library-heart-2d-controls {
  display: flex;
}

.library-heart-2d-zoom-button {
  min-width: 34px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 5px;
  color: #dce9f3;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.95rem;
  font-weight: 900;
  cursor: pointer;
}

.library-heart-2d-zoom-button:hover {
  border-color: rgba(85, 214, 190, 0.72);
  background: rgba(85, 214, 190, 0.16);
}

.library-heart-2d-zoom-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.library-heart-2d-zoom-button.reset {
  min-width: 44px;
  font-size: 0.76rem;
}

.library-heart-2d-zoom-label {
  min-width: 48px;
  color: #dce9f3;
  font-size: 0.76rem;
  font-weight: 850;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.library-heart-svg .heart-wall {
  fill: url(#library-heartWall);
}

.library-heart-svg .myocardium-depth {
  fill: url(#library-heartMuscleDepth);
}

.library-heart-svg .chamber {
  fill: url(#library-heartInner);
  filter: url(#library-heartInnerShadow);
}

.library-heart-svg .right-endocardium,
.library-heart-svg .right-atrial-pocket {
  fill: url(#library-rightChamberBlue);
}

.library-heart-svg .left-endocardium,
.library-heart-svg .left-atrial-pocket {
  fill: url(#library-leftChamberRed);
}

.library-heart-svg .aorta {
  fill: url(#library-vesselRedGradient);
}

.library-heart-svg .pulmonary {
  fill: url(#library-vesselBlueGradient);
}

.library-heart-svg .vena-cava {
  fill: url(#library-vesselBlueGradient);
}

.library-heart-svg .pulmonary-vein {
  fill: url(#library-vesselRedGradient);
}

.library-heart-svg .valve-leaflet,
.library-heart-svg .outflow-valve {
  fill: url(#library-valvePearl);
}

.library-heart-svg .coronary {
  stroke: url(#library-coronaryGold);
}

.library-heart-svg .node,
.library-heart-svg .signal,
.library-heart-svg .ischemia,
.library-heart-svg .flutter-field,
.library-heart-svg .coronary-layer {
  filter: url(#library-softGlow);
}

.library-metrics {
  grid-area: metrics;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 7px;
  margin: 0;
}

.library-metrics div {
  min-height: 64px;
  padding: 9px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.library-metrics dt {
  margin-bottom: 4px;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 850;
  text-transform: uppercase;
}

.library-metrics dd {
  margin: 0;
  color: #f2f7fb;
  font-size: 0.84rem;
  font-weight: 760;
  line-height: 1.25;
}

.library-clinical-panel {
  grid-area: clinical;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(85, 214, 190, 0.08), transparent 40%),
    rgba(255, 255, 255, 0.035);
}

.library-clinical-panel > div:first-child {
  display: grid;
  gap: 3px;
}

.library-clinical-panel p {
  color: #c9d7e2;
  font-size: 0.78rem;
  line-height: 1.35;
}

.library-clinical-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.library-clinical-grid article {
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
}

.library-clinical-grid h4 {
  margin: 0 0 3px;
  color: var(--accent);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.library-related-panel {
  grid-area: related;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.library-related-panel[hidden] {
  display: none;
}

.library-related-panel article {
  min-width: 0;
  display: grid;
  gap: 9px;
  align-content: start;
  padding: 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(249, 160, 63, 0.06), transparent 52%),
    rgba(255, 255, 255, 0.035);
}

.library-related-panel p:not(.panel-label) {
  color: #bdcbd6;
  font-size: 0.76rem;
  line-height: 1.34;
}

.library-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.library-related-button {
  min-width: min(100%, 210px);
  max-width: 100%;
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 7px;
  color: #e5f1f8;
  text-align: left;
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.library-related-button:hover,
.library-related-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(85, 214, 190, 0.36);
  background: rgba(85, 214, 190, 0.08);
}

.library-related-button b {
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.library-related-button small,
.library-related-empty {
  color: #aebdcc;
  font-size: 0.7rem;
  line-height: 1.25;
}

.library-strip {
  grid-area: strip;
  width: 100%;
  min-width: 0;
  height: 318px;
  height: max-content;
  min-height: 318px;
  min-height: max-content;
  display: grid;
  grid-template-rows: auto minmax(260px, auto);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: var(--paper);
}

.library-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  min-width: 0;
  min-height: 54px;
  padding: 7px 10px;
  color: #dce8f3;
  background: #111a25;
  border-bottom: 1px solid var(--line);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.library-strip-title {
  min-width: 0;
  flex: 1 1 220px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.library-strip-title #libraryRateLabel {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  padding: 4px 7px;
  border: 1px solid rgba(85, 214, 190, 0.3);
  border-radius: 999px;
  color: #eafff7;
  background: rgba(85, 214, 190, 0.1);
  font-variant-numeric: tabular-nums;
}

.library-strip-controls {
  width: min(100%, 630px);
  min-width: 0;
  flex: 1 1 420px;
  display: grid;
  grid-template-columns: auto minmax(105px, 130px) minmax(160px, 1fr);
  align-items: center;
  gap: 10px;
}

.library-strip-lead-control {
  min-width: 0;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.library-strip-lead-control select {
  min-width: 0;
  width: 56px;
  height: 26px;
  padding: 0 3px;
  border: 1px solid rgba(85, 214, 190, 0.34);
  border-radius: 5px;
  color: #eaf7fb;
  background: #111a25;
  font: inherit;
}

.library-readout-toggle {
  min-width: 96px;
  justify-content: center;
}

.library-readout-toggle span {
  min-width: 16px;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1;
}

#libraryCanvas {
  width: 100%;
  min-height: 260px;
  height: clamp(260px, 30vh, 340px);
  display: block;
  background: var(--paper);
}

.help-only {
  display: none;
}

.app-shell.help-on .reference-strip.help-only {
  display: grid;
}

body.focus-patient,
body.focus-monitor {
  overflow: hidden;
}

body.focus-patient .placement-panel,
body.focus-monitor .monitor-panel {
  position: fixed;
  inset: 10px;
  z-index: 100;
  border-radius: 8px;
  max-height: calc(100vh - 20px);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72), 0 22px 60px rgba(0, 0, 0, 0.45);
}

body.focus-patient .placement-panel {
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
}

body.focus-monitor .monitor-panel {
  grid-template-rows: auto auto minmax(0, 1fr);
}

body.focus-monitor .feedback-grid {
  display: none;
}

body.focus-monitor .clinical-panel {
  display: none;
}

body.focus-patient .patient-switcher,
body.focus-patient .legend-panel,
body.focus-patient .help-panel {
  display: none;
}

body.focus-patient .placement-panel {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}

@media (max-height: 500px) {
  body.focus-patient .heart-marker-key {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    max-height: 66px;
    padding: 4px 8px;
    font-size: 0.68rem;
  }

  body.focus-patient .heart-marker-key-heading span,
  body.focus-patient .heart-marker-note {
    display: none;
  }

  body.focus-patient .heart-marker-key.has-many-cues .heart-marker-key-heading strong::after {
    content: " · Scroll for more ↓";
    color: #ffd8a3;
    font-size: 0.65rem;
    font-weight: 700;
  }

  body.focus-patient .heart-marker-list {
    gap: 2px 8px;
  }
}

body.focus-patient .placement-area,
body.focus-monitor .ecg-frame {
  height: auto;
  min-height: 0;
}

body.focus-patient .placement-area.heart-on .heart-view {
  padding: 70px 32px 42px;
}

body.focus-patient .placement-area.heart-on .heart-svg {
  width: min(80vw, calc((100vh - 190px) * 0.857), 900px);
  height: auto;
  max-height: calc(100vh - 190px);
}

body.focus-patient .placement-area.heart-on .heart-view.comparison-2d-on .heart-svg {
  align-self: start;
  width: min(62vw, calc((100vh - 390px) * 0.857), 700px);
  max-height: calc(100vh - 390px);
  margin-top: 4px;
}

body.focus-patient .placement-area.heart-on .heart-3d-scene {
  inset: 0;
}

@media (max-width: 1180px) {
  .module-card-grid,
  .skill-module-grid,
  .practice-test-layout,
  .course-layout,
  .module-placeholder-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .course-layout { grid-template-columns: 260px minmax(0, 1fr); }
  .course-content-grid { grid-template-columns: minmax(0, 1fr); }

  .launch-hero {
    grid-template-columns: 1fr;
  }

  .sim-grid {
    grid-template-columns: 1fr;
  }

  .placement-panel,
  .monitor-panel {
    min-height: auto;
  }

  .monitor-panel {
    grid-template-rows: auto auto auto auto auto;
  }

  .ecg-frame {
    height: 46vh;
    min-height: 340px;
  }
}

@media (max-width: 740px) {
  .app-shell {
    padding: 12px;
  }

  .brand-block {
    width: 100%;
    flex-wrap: wrap;
  }

  .brand-block > div {
    min-width: 0;
    flex: 1 1 calc(100% - 70px);
  }

  .brand-block > button {
    flex: 1 1 110px;
  }

  .launch-menu-head,
  .module-topbar,
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .launch-menu-actions,
  .module-section-head,
  .module-topbar-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .module-card-grid,
  .skill-module-grid,
  .practice-test-layout,
  .course-layout,
  .course-content-grid,
  .clinical-review-layout,
  .clinical-review-detail-grid,
  .clinical-review-simple-grid,
  .clinical-review-notes-grid,
  .clinical-review-checklist,
  .module-placeholder-layout {
    grid-template-columns: 1fr;
  }

  .module-section-head span {
    max-width: none;
    text-align: left;
  }

  .onboarding-dialog {
    left: 12px !important;
    top: 12px !important;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .onboarding-body {
    grid-template-columns: 1fr;
  }

  .onboarding-rail {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  }

  .onboarding-rail-steps {
    grid-template-columns: repeat(auto-fit, minmax(38px, 1fr));
  }

  .onboarding-rail-step {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .onboarding-rail-step b {
    display: none;
  }

  .onboarding-visual {
    grid-template-columns: 1fr;
  }

  .onboarding-visual-icon {
    grid-row: auto;
    min-height: 92px;
  }

  .onboarding-actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .onboarding-actions #onboardingBackBtn {
    margin-right: 0;
  }

  .onboarding-spotlight {
    display: none;
  }

  .practice-test-head,
  .course-lesson-head,
  .course-intro-head,
  .course-demo-toolbar,
  .course-demo-actions,
  .clinical-review-head,
  .clinical-review-card-head,
  .clinical-review-footer,
  .practice-answer-panel {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .practice-head-actions,
  .course-demo-toolbar,
  .course-demo-actions,
  .course-check-actions,
  .course-nav-actions,
  .clinical-review-actions,
  .clinical-review-footer > div,
  .practice-ecg-toolbar {
    justify-content: stretch;
  }

  .practice-head-actions button,
  .course-check-actions button,
  .course-nav-actions button,
  .onboarding-actions button,
  .course-hint-button,
  .clinical-review-actions button,
  .clinical-review-footer button,
  .practice-answer-panel button,
  .practice-control,
  .practice-lead-field,
  .course-lead-field {
    width: 100%;
  }

  .course-visual-cues {
    grid-template-columns: 1fr;
  }

  .course-intro-grid {
    grid-template-columns: 1fr;
  }

  .course-intro-actions {
    align-self: start;
  }

  .course-meta-grid,
  .course-applied-grid {
    grid-template-columns: 1fr;
  }

  .course-applied-head {
    align-items: stretch;
    flex-direction: column;
  }

  .course-applied-module {
    max-width: none;
  }

  .course-image-aid-grid {
    grid-template-columns: 1fr;
  }

  .launch-hero,
  .module-placeholder-primary {
    padding: 20px;
  }

  .launch-hero h2,
  .module-placeholder-primary h2 {
    font-size: 2rem;
  }

  .topbar-actions {
    justify-content: stretch;
  }

  .topbar-actions .field,
  .topbar-actions button {
    flex: 1 1 auto;
  }

  select {
    width: 100%;
    min-width: 0;
  }

  .placement-panel {
    grid-template-rows: auto auto auto auto auto;
  }

  .placement-area {
    height: 68vh;
    min-height: 520px;
  }

  .panel-head,
  .monitor-head,
  .monitor-controls,
  .legend-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .monitor-controls {
    display: flex;
  }

  .monitor-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .monitor-head > div {
    min-width: 0;
    width: 100%;
  }

  .monitor-head .vitals {
    width: 100%;
    flex-wrap: wrap;
  }

  .bpm-control,
  .lead-strip-control {
    width: 100%;
  }

  .bpm-control {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bpm-control > span {
    grid-column: 1 / -1;
  }

  .score-card {
    align-items: start;
  }

  .electrode {
    --pad-size: min(var(--profile-pad-size, 48px), 48px);
  }

  .feedback-grid,
  .clinical-grid,
  .comparison-canvases,
  .library-clinical-grid,
  .library-related-panel,
  .about-grid,
  .privacy-grid,
  .terms-grid,
  .reference-strip,
  .help-list {
    grid-template-columns: 1fr;
  }

  .privacy-control-card {
    grid-template-columns: 1fr;
  }

  .clinical-panel-head,
  .comparison-head,
  .vector-axis-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .feedback-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .feedback-card:last-child {
    border-bottom: 0;
  }

  .status-list {
    grid-template-columns: 1fr;
  }

  .heart-view.mode-3d .heart-3d-hints,
  .heart-view.mode-cutaway .heart-3d-hints {
    left: 12px;
    right: 12px;
    bottom: 58px;
  }

  .heart-view.mode-3d .heart-metrics,
  .heart-view.mode-cutaway .heart-metrics {
    left: 12px;
    right: 12px;
    bottom: 16px;
    justify-content: flex-start;
  }

  .library-panel {
    inset: 8px;
  }

  .library-layout {
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  }

  .library-detail {
    grid-template-columns: minmax(460px, 1.45fr) minmax(240px, 0.55fr);
    gap: 9px;
    padding: 10px;
  }

  .library-heart-card {
    height: clamp(380px, 50vh, 580px);
  }

  .library-heart-scene {
    min-height: 380px;
  }

  #libraryCanvas {
    height: clamp(260px, 28vh, 310px);
  }

  .library-nav {
    max-height: none;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
}

@media (max-width: 860px) {
  .library-heart-svg {
    left: 30%;
    top: 51%;
    height: min(60%, 230px);
  }

  .library-heart-card.mode-2d .library-rapid-2d-info {
    width: min(260px, calc(100% - 32px));
  }

  .library-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .library-nav {
    max-height: 260px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .library-nav-summary {
    display: none;
  }

  .library-detail {
    grid-template-columns: 1fr;
    grid-template-areas:
      "summary"
      "strip"
      "heart"
      "metrics"
      "clinical"
      "related";
  }

  .library-detail.has-heart-markers {
    grid-template-areas:
      "summary"
      "strip"
      "cue"
      "heart"
      "metrics"
      "clinical"
      "related";
  }

  .heart-marker-key {
    grid-template-columns: 1fr;
  }

  .library-summary-top {
    grid-template-columns: 1fr;
  }

  .library-strip-head {
    align-items: stretch;
    flex-direction: column;
  }

  .library-strip-title,
  .library-strip-controls {
    flex: 0 0 auto;
  }

  .library-strip-controls {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .library-strip-lead-control select {
    width: min(100%, 120px);
  }

  .library-readout-toggle {
    width: 100%;
  }

  .library-bpm-control {
    grid-template-columns: auto minmax(0, 1fr) 42px;
  }

  .library-panel:has(#libraryCaseSelect option:is(
    [value="afToOrganizedFlutterTransition"],
    [value="selectedAntidromicAvrt"],
    [value="selectedLbbbSeptalFlashRebound"],
    [value="selectedDddFlutterPvabLockinAms"],
    [value="selectedAlternatingWenckebachFlutterNineToTwo"],
    [value="selectedPvcRetrogradeVaTriggeredAf"],
    [value="selectedAfTerminationConversionPauseJunctionalEscape"]):checked)
  .library-bpm-control {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .library-panel:has(#libraryCaseSelect option:is(
    [value="afToOrganizedFlutterTransition"],
    [value="selectedAntidromicAvrt"],
    [value="selectedLbbbSeptalFlashRebound"],
    [value="selectedDddFlutterPvabLockinAms"],
    [value="selectedAlternatingWenckebachFlutterNineToTwo"],
    [value="selectedPvcRetrogradeVaTriggeredAf"],
    [value="selectedAfTerminationConversionPauseJunctionalEscape"]):checked)
  .library-bpm-control > span {
    grid-column: 1 / -1;
  }

  .library-panel:has(#libraryCaseSelect option:is(
    [value="afToOrganizedFlutterTransition"],
    [value="selectedAntidromicAvrt"],
    [value="selectedLbbbSeptalFlashRebound"],
    [value="selectedDddFlutterPvabLockinAms"],
    [value="selectedAlternatingWenckebachFlutterNineToTwo"],
    [value="selectedPvcRetrogradeVaTriggeredAf"],
    [value="selectedAfTerminationConversionPauseJunctionalEscape"]):checked)
  .library-bpm-control input {
    grid-column: 1;
    min-height: 28px;
  }

  .library-panel:has(#libraryCaseSelect option:is(
    [value="afToOrganizedFlutterTransition"],
    [value="selectedAntidromicAvrt"],
    [value="selectedLbbbSeptalFlashRebound"],
    [value="selectedDddFlutterPvabLockinAms"],
    [value="selectedAlternatingWenckebachFlutterNineToTwo"],
    [value="selectedPvcRetrogradeVaTriggeredAf"],
    [value="selectedAfTerminationConversionPauseJunctionalEscape"]):checked)
  .library-bpm-control output {
    grid-column: 2;
  }

  .library-heart-card {
    height: clamp(320px, 42vh, 460px);
  }

  .library-heart-scene {
    min-height: 320px;
  }
}

.course-mobile-picker {
  display: none;
}

@media (max-width: 740px) {
  .course-layout,
  .course-layout.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .course-sidebar,
  .course-sidebar.collapsed {
    display: block;
    min-height: 0;
    padding: 8px;
  }

  .course-sidebar:not(.collapsed) {
    max-height: min(66vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .course-sidebar.collapsed {
    max-height: none;
    overflow: visible;
  }

  .course-sidebar .sidebar-collapse-toggle,
  .course-sidebar.collapsed .sidebar-collapse-toggle {
    min-height: 44px;
    flex-direction: row;
    justify-content: space-between;
    padding: 9px 12px;
    writing-mode: horizontal-tb;
  }

  .course-sidebar.collapsed .sidebar-collapse-toggle b {
    writing-mode: horizontal-tb;
  }

  .course-mobile-picker,
  .course-sidebar.collapsed > .course-mobile-picker {
    display: grid;
    gap: 4px;
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
  }

  .course-mobile-picker select {
    min-height: 44px;
    width: 100%;
  }

  .course-sidebar:not(.collapsed) > .course-overview-card,
  .course-sidebar:not(.collapsed) > .course-review-queue,
  .course-sidebar:not(.collapsed) > .course-lesson-list {
    margin-top: 10px;
  }
}

@media (max-width: 520px) {
  .library-heart-card.mode-2d .library-heart-svg {
    left: 50%;
  }

  .library-heart-card.mode-2d.clinical-2d-on {
    height: 500px;
  }

  .library-heart-card.mode-2d.clinical-2d-on .library-heart-svg {
    top: 40%;
    height: 42%;
  }

  .library-heart-card.mode-2d.clinical-2d-on .library-rapid-2d-info {
    top: auto;
    right: 12px;
    bottom: 62px;
    left: 12px;
    width: auto;
  }

  .library-panel.library-heart-expanded .library-heart-card.mode-2d.clinical-2d-on {
    height: auto;
  }

  .library-panel.library-heart-expanded .library-heart-card.mode-2d.clinical-2d-on .library-heart-svg {
    top: 40%;
    height: 42%;
  }

  /* This rhythm can show a blocked P while the preceding P still reaches His.
     Keep its provenance caption in a reserved strip on narrow screens. */
  .heart-view[data-causal-attribution-capable="true"] .heart-svg {
    transform: translateY(-10px);
  }

  .heart-view[data-causal-attribution-capable="true"] .heart-3d-scene,
  body.focus-patient .placement-area.heart-on .heart-view[data-causal-attribution-capable="true"] .heart-3d-scene {
    bottom: 160px;
  }

  .placement-area.heart-on:has(> .heart-view.mode-3d .heart-causal-attribution:is([data-attribution-kind^="pmt-"], [data-attribution-kind^="sinus-tracking"])),
  .placement-area.heart-on:has(> .heart-view.mode-cutaway .heart-causal-attribution:is([data-attribution-kind^="pmt-"], [data-attribution-kind^="sinus-tracking"])) {
    height: calc(68vh + 152px);
    min-height: 672px;
  }

  .placement-area.heart-on .heart-view.mode-3d:has(.heart-causal-attribution:is([data-attribution-kind^="pmt-"], [data-attribution-kind^="sinus-tracking"])) .heart-3d-scene,
  .placement-area.heart-on .heart-view.mode-cutaway:has(.heart-causal-attribution:is([data-attribution-kind^="pmt-"], [data-attribution-kind^="sinus-tracking"])) .heart-3d-scene {
    top: 112px;
    bottom: 200px;
  }

  .heart-view[data-causal-attribution-capable="true"] .heart-causal-attribution {
    top: auto;
    right: 12px;
    bottom: 100px;
    left: 12px;
    max-width: none;
  }

  .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="pmt-"] {
    bottom: 112px;
  }

  .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="pmt-"]) .heart-svg {
    transform: translateY(-22px);
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card[data-causal-attribution-capable="true"] {
    height: calc(clamp(320px, 42vh, 460px) + 72px);
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"] {
    height: 572px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card[data-causal-attribution-capable="true"] .library-heart-2d-scene,
  .library-panel:not(.library-heart-expanded) .library-heart-card[data-causal-attribution-capable="true"] .library-heart-scene {
    bottom: 72px;
    height: calc(100% - 72px);
    min-height: 0;
  }

  /* Keep the rotated great vessels below the mobile mode and lead controls.
     Preserve the rendered heart size by adding the header space to the card. */
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-3d,
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway {
    height: calc(clamp(320px, 42vh, 460px) + 88px);
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-3d[data-causal-attribution-capable="true"],
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway[data-causal-attribution-capable="true"] {
    height: calc(clamp(320px, 42vh, 460px) + 160px);
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-3d[data-causal-attribution-capable="true"]:has(.heart-causal-attribution:is([data-attribution-kind^="pmt-"], [data-attribution-kind^="sinus-tracking"])),
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway[data-causal-attribution-capable="true"]:has(.heart-causal-attribution:is([data-attribution-kind^="pmt-"], [data-attribution-kind^="sinus-tracking"])) {
    height: calc(clamp(320px, 42vh, 460px) + 196px);
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-3d .library-heart-scene,
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway .library-heart-scene {
    top: 106px;
    bottom: 12px;
    height: auto;
    min-height: 0;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-3d[data-causal-attribution-capable="true"] .library-heart-scene,
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway[data-causal-attribution-capable="true"] .library-heart-scene {
    bottom: 72px;
    height: auto;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-3d[data-causal-attribution-capable="true"]:has(.heart-causal-attribution:is([data-attribution-kind^="pmt-"], [data-attribution-kind^="sinus-tracking"])) .library-heart-scene,
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway[data-causal-attribution-capable="true"]:has(.heart-causal-attribution:is([data-attribution-kind^="pmt-"], [data-attribution-kind^="sinus-tracking"])) .library-heart-scene {
    bottom: 108px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway .library-heart-scene[data-rear-teaching-reveal="true"]::after {
    top: 8px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"] .library-rapid-2d-info {
    bottom: 134px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card[data-causal-attribution-capable="true"] .library-heart-2d-controls {
    bottom: 88px;
  }

  .library-heart-card[data-causal-attribution-capable="true"] .heart-causal-attribution {
    top: auto;
    right: 12px;
    bottom: 9px;
    left: 12px;
    max-width: none;
  }

  .library-panel.library-heart-expanded .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"] .library-rapid-2d-info {
    bottom: 144px;
  }

  .library-panel.library-heart-expanded .library-heart-card[data-causal-attribution-capable="true"] .library-heart-2d-controls {
    bottom: 86px;
  }

  .library-panel.library-heart-expanded .library-heart-card[data-causal-attribution-capable="true"] .heart-causal-attribution {
    bottom: 9px;
  }

  /* Trial 37's longer route explanation needs its own mobile row below the
     territory panel and 2D zoom controls. Keep those controls uncovered. */
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial37-"]) {
    height: 652px;
  }

  .library-panel .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial37-"]) .library-rapid-2d-info {
    bottom: 221px;
  }

  .library-panel .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial37-"]) .library-heart-2d-controls {
    bottom: 169px;
  }
}

.module-topbar-actions .field[hidden] {
  display: none !important;
}

.placement-input-help {
  margin: 0;
  padding: 8px 14px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.electrode.selected {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(85, 214, 190, 0.25);
}

.placement-attempt-summary {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.practice-mode-bar,
.practice-booster-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.practice-mode-bar p,
.practice-booster-actions p {
  flex: 1 1 240px;
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.practice-mode-bar button[aria-pressed="true"] {
  border-color: var(--accent);
  background: #21524e;
  color: #fff;
}

.practice-observation-card {
  margin: 8px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 0.85rem;
  line-height: 1.45;
}

.practice-observation-card summary {
  cursor: pointer;
  font-weight: 700;
}

.practice-observation-card p {
  margin: 8px 0 0;
}

.practice-feedback-row {
  display: grid;
  grid-template-columns: minmax(105px, 0.22fr) minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  line-height: 1.45;
}

.practice-feedback-row + .practice-feedback-row {
  border-top: 1px solid var(--line-soft);
}

.practice-feedback-row b {
  color: var(--accent);
}

@media (max-width: 740px) {
  .practice-feedback-row { grid-template-columns: 1fr; gap: 2px; }
}

.practice-booster-actions[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.course-layout.sidebar-collapsed,
.practice-test-layout.sidebar-collapsed {
  grid-template-columns: 58px minmax(0, 1fr);
}

/* Keep the rotating cutaway unobstructed while its conduction explanation is open. */
.heart-view.mode-cutaway.conduction-guide-on,
.library-heart-card.mode-cutaway.conduction-guide-on {
  --conduction-panel-width: clamp(250px, 38%, 340px);
}

.heart-view.mode-cutaway.conduction-guide-on .heart-3d-scene,
.library-heart-card.mode-cutaway.conduction-guide-on .library-heart-scene {
  top: 74px;
  right: var(--conduction-panel-width);
  width: auto;
  height: auto;
  min-height: 0;
}

.heart-view.mode-cutaway.conduction-guide-on .conduction-guide,
.library-heart-card.mode-cutaway.conduction-guide-on .conduction-guide {
  top: 98px;
  right: 12px;
  bottom: 12px;
  left: auto;
  width: calc(var(--conduction-panel-width) - 24px);
  max-height: none;
  align-content: start;
}

.heart-view.mode-cutaway.conduction-guide-on .heart-metrics {
  right: calc(var(--conduction-panel-width) + 16px);
  bottom: 58px;
}

@media (max-width: 700px) {
  body:not(.focus-patient) .placement-area.heart-on:has(.heart-view.mode-cutaway.conduction-guide-on) {
    min-height: 630px;
  }

  .library-heart-card.mode-cutaway.conduction-guide-on {
    height: 600px;
  }

  .library-panel.library-heart-expanded .library-heart-card.mode-cutaway.conduction-guide-on {
    height: auto;
    min-height: 0;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-3d-scene,
  .library-heart-card.mode-cutaway.conduction-guide-on .library-heart-scene {
    top: 74px;
    right: 0;
    bottom: 190px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-3d-scene {
    bottom: 228px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .conduction-guide,
  .library-heart-card.mode-cutaway.conduction-guide-on .conduction-guide {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 190px;
    max-height: none;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
  }

  .heart-view.mode-cutaway.conduction-guide-on .conduction-controls,
  .library-heart-card.mode-cutaway.conduction-guide-on .conduction-controls {
    top: auto;
    bottom: 195px;
    left: 12px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-metrics {
    display: none;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-3d-hints,
  .library-heart-card.mode-cutaway.conduction-guide-on .heart-3d-hints {
    left: 8px;
    right: auto;
    bottom: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-3d-hints span,
  .library-heart-card.mode-cutaway.conduction-guide-on .heart-3d-hints span {
    min-height: 24px;
    padding: 4px 7px;
    font-size: 0.68rem;
  }

  .library-heart-card.mode-cutaway.conduction-guide-on .heart-3d-hints {
    right: 8px;
    left: auto;
    align-items: flex-end;
  }
}

@media (max-width: 520px) {
  /* The mobile heart header reserves 106px above the scene. A conduction
     guide also needs its own lower panel instead of sharing that scene. */
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on {
    height: 632px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on .library-heart-scene {
    top: 106px;
    bottom: 190px;
    height: auto;
    min-height: 0;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on[data-causal-attribution-capable="true"] {
    height: 704px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on[data-causal-attribution-capable="true"] .library-heart-scene {
    bottom: 262px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on[data-causal-attribution-capable="true"] .conduction-guide {
    bottom: 72px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on[data-causal-attribution-capable="true"] .conduction-controls {
    bottom: 267px;
  }
}

/* Keep the compact VVI rate and replay status in the bottom band, below the
   off-heart device explanation and the symbol-key shortcut. */
.heart-view:has(.heart-causal-attribution[data-attribution-kind^="vvi-"]) .heart-metrics {
  right: 12px;
  left: 12px;
  justify-content: flex-end;
}

.heart-view:has(.heart-causal-attribution[data-attribution-kind^="vvi-"]) #heartViewBpm {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Trial 37's two-row Skills readout needs a separate bottom band. Keep the
   2D symbol shortcut and the causal caption above that band. */
.placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial37-"]) {
  height: calc(clamp(620px, calc(100vh - 220px), 780px) + 80px);
}

.placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial37-"]) .heart-marker-shortcut {
  bottom: 140px;
}

.placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial37-"] {
  bottom: 152px;
}

/* Trial 38's explanatory text and two-row rate/lead readout need separate
   room below the 2D heart. Keep the septal wall clear of both text bands. */
body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial38-"]) {
  height: calc(clamp(620px, calc(100vh - 220px), 780px) + 120px);
}

.placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial38-"]) .heart-svg {
  transform: translateY(-105px);
}

.placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial38-"] {
  bottom: 140px;
}

/* Trial 39's four device chips and longer explanation need a reserved band
   below the 2D heart, above the two-row rate and lead readout. */
.placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial39-"]) {
  height: calc(clamp(620px, calc(100vh - 220px), 780px) + 300px);
}

.placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial39-"]) .heart-svg {
  align-self: start;
  margin-top: 47px;
  max-height: 480px;
}

.placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial39-"] {
  bottom: 140px;
}

body.focus-patient .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial38-"]) .heart-svg {
  transform: none;
}

@media (max-width: 1180px) {
  .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial37-"]) {
    height: calc(68vh + 80px);
    min-height: 600px;
  }

  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial38-"]) {
    height: calc(68vh + 120px);
    min-height: 640px;
  }

  .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial39-"]) {
    height: calc(68vh + 360px);
    min-height: 880px;
  }
}

@media (max-width: 520px) {
  body.focus-patient .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial38-"]) .heart-svg {
    width: min(58vw, 230px);
    height: auto;
    max-height: 300px;
    transform: translateY(-70px);
  }

  body.focus-patient .placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial38-"] {
    bottom: 115px;
  }

  .placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial37-"] {
    bottom: 180px;
  }

  .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial39-"]) {
    height: calc(68vh + 320px);
    min-height: 860px;
  }

  .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial39-"]) .heart-svg {
    margin-top: 20px;
    max-height: 410px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial39-"]) {
    height: 800px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial39-"]) .library-heart-2d-scene {
    bottom: 300px;
    height: auto;
    min-height: 0;
  }

  .library-panel .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial39-"]) .library-rapid-2d-info {
    bottom: 310px;
  }

  .library-panel .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial39-"]) .library-heart-2d-controls {
    bottom: 250px;
  }

  .heart-view:has(.heart-causal-attribution[data-attribution-kind^="vvi-"]) #heartViewLead {
    display: none;
  }

  .heart-view.mode-3d:has(.heart-causal-attribution[data-attribution-kind^="vvi-"]) .heart-marker-shortcut,
  .heart-view.mode-cutaway:not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="vvi-"]) .heart-marker-shortcut {
    top: auto;
    bottom: 190px;
  }

  .library-heart-card:is(.mode-3d, .mode-cutaway):has(.heart-causal-attribution[data-attribution-kind^="vvi-"]) .heart-marker-shortcut {
    top: auto;
    right: 12px;
    bottom: 90px;
    left: auto;
  }

  .library-heart-card:is(.mode-3d, .mode-cutaway):has(.heart-causal-attribution[data-attribution-kind^="vvi-"]) .heart-marker-shortcut-meaning {
    display: none;
  }
}

@media (max-width: 360px) {
  .placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial39-"] {
    bottom: 150px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial39-"]) .library-heart-2d-scene {
    bottom: 370px;
  }

  .library-panel .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial39-"]) .library-rapid-2d-info {
    bottom: 370px;
  }

  .library-panel .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial39-"]) .library-heart-2d-controls {
    bottom: 310px;
  }
}

@media (max-width: 520px) {
  /* Trial 35 needs a separate symbol-key row between the model and its
     moment-by-moment explanation, including in the expanded heart view. */
  .library-panel:not(.library-heart-expanded) .library-heart-card:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial35-"]) {
    height: calc(clamp(320px, 42vh, 460px) + 200px);
  }

  .library-heart-card:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial35-"]) .library-heart-scene {
    bottom: 112px;
    height: auto;
  }

  .library-panel.library-heart-expanded .library-heart-card:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial35-"]) .library-heart-scene {
    top: 88px;
  }

  .library-heart-card:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial35-"]) .heart-marker-shortcut {
    top: auto;
    bottom: 82px;
  }

  .library-panel .library-heart-card.mode-cutaway.conduction-guide-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial35-"]) .library-heart-scene {
    bottom: 272px;
  }

  .library-panel .library-heart-card.mode-cutaway.conduction-guide-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial35-"]) .conduction-guide {
    bottom: 82px;
  }

  .library-panel .library-heart-card.mode-cutaway.conduction-guide-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial35-"]) .conduction-controls {
    bottom: 277px;
  }
}

/* Trial 40's longer 2D explanation needs room above the rate/status ribbon. */
body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial40-"]) {
  height: calc(clamp(620px, calc(100vh - 220px), 780px) + 100px);
}

body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial40-"] {
  bottom: 130px;
}

body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial40-"]) .heart-svg {
  height: min(calc(84% - 84px), 760px);
}

/* Trial 40's cutaway stage ladder and causal explanation both need readable
   space. Reserve a lower explanation band without shrinking the heart scene. */
@media (min-width: 701px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution[data-attribution-kind^="trial40-"]) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 210px);
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial40-"]) .heart-3d-scene,
  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial40-"]) .conduction-guide {
    bottom: 210px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution[data-attribution-kind^="trial40-"] {
    bottom: 12px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial40-"]) .heart-metrics {
    right: auto;
    bottom: 12px;
    left: 12px;
    max-width: calc(100% - 260px);
  }
}

@media (max-width: 700px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial40-"]) {
    height: calc(68vh + 120px);
    min-height: 640px;
  }

  body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial40-"]) .heart-svg {
    height: calc(84% - 100.8px);
  }

  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution[data-attribution-kind^="trial40-"]) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 200px);
    min-height: 830px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial40-"]) .heart-3d-scene {
    top: 98px;
    bottom: 400px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial40-"]) .conduction-controls {
    bottom: 350px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution[data-attribution-kind^="trial40-"] {
    right: 12px;
    bottom: 200px;
    left: 12px;
    max-width: none;
  }
}

@media (max-width: 360px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution[data-attribution-kind^="trial40-"]) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 280px);
    min-height: 910px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial40-"]) .heart-3d-scene {
    top: 132px;
    bottom: 445px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial40-"]) .conduction-controls {
    bottom: 395px;
  }
}

/* The selected eight-step guides for Trials 41 and 42 are scrollable. Place
   their long attributions below the guide so the explanations stay clear. */
@media (min-width: 701px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 210px);
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-3d-scene,
  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .conduction-guide {
    bottom: 210px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"]) {
    bottom: 12px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-metrics {
    right: auto;
    bottom: 12px;
    left: 12px;
    max-width: calc(100% - 260px);
  }
}

@media (max-width: 700px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 200px);
    min-height: 830px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-3d-scene {
    top: 98px;
    bottom: 400px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .conduction-controls {
    bottom: 350px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"]) {
    right: 12px;
    bottom: 200px;
    left: 12px;
    max-width: none;
  }
}

@media (max-width: 360px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 280px);
    min-height: 910px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-3d-scene {
    top: 132px;
    bottom: 445px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .conduction-controls {
    bottom: 395px;
  }
}

/* Trials 41 and 42 keep the 2D explanation below the heart diagram, with the
   symbol key above it and the rate/status ribbon in its own lower band. */
body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) {
  height: calc(clamp(620px, calc(100vh - 220px), 780px) + 200px);
}

body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-svg {
  height: min(calc(84% - 168px), 760px);
  transform: translateY(-100px);
}

.placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"]),
.placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-marker-shortcut {
  bottom: 160px;
}

/* The intact exterior caption already sits at the top. Its key shortcut,
   and the cutaway caption/key, must clear the two-row Skills status ribbon. */
@media (min-width: 521px) {
  .placement-area.heart-on .heart-view:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-marker-shortcut {
    bottom: 130px;
  }
}

@media (min-width: 701px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway:not(.conduction-guide-on) .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 120px);
  }

  .heart-view.mode-cutaway:not(.conduction-guide-on):has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-3d-scene {
    bottom: 120px;
  }

  .heart-view.mode-cutaway:not(.conduction-guide-on) .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"]) {
    bottom: 130px;
  }
}

@media (max-width: 700px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) {
    height: calc(68vh + 320px);
    min-height: 890px;
  }

  body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-svg {
    height: min(calc(84% - 269px), 760px);
    transform: translateY(-160px);
  }

  .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-marker-shortcut {
    bottom: 350px;
  }

  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway:not(.conduction-guide-on) .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) {
    height: calc(68vh + 370px);
    min-height: 940px;
  }

  .heart-view.mode-cutaway:not(.conduction-guide-on):has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-3d-scene {
    bottom: 370px;
  }

  .heart-view.mode-cutaway:not(.conduction-guide-on) .heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"]) {
    bottom: 180px;
  }
}

@media (max-width: 360px) {
  .placement-area.heart-on .heart-view.mode-cutaway:has(.heart-causal-attribution:is([data-attribution-kind^="trial41-"], [data-attribution-kind^="trial42-"])) .heart-marker-shortcut {
    top: 140px;
    bottom: auto;
  }
}

/* Trial 42's longer gap explanation needs a larger dedicated cutaway band. */
@media (min-width: 701px) {
  .placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial42-"] {
    bottom: 120px;
  }

  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway:not(.conduction-guide-on) .heart-causal-attribution[data-attribution-kind^="trial42-"]) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 320px);
  }

  .heart-view.mode-cutaway:not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial42-"]) .heart-3d-scene {
    bottom: 320px;
  }
}

/* Trials 43 and 44 keep their source explanation in a reserved band, clear of
   the diagram, status ribbon, and cutaway guide at narrow widths. */
body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) {
  height: calc(clamp(620px, calc(100vh - 220px), 780px) + 200px);
}

body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-svg {
  height: min(calc(84% - 168px), 760px);
  transform: translateY(-128px);
}

@media (min-width: 701px) {
  body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial44-"]) .heart-svg {
    transform: translateY(-144px);
  }
}

.placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"]),
.placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-marker-shortcut {
  bottom: 160px;
}

@media (min-width: 521px) {
  .placement-area.heart-on .heart-view:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-marker-shortcut {
    bottom: 130px;
  }
}

@media (min-width: 701px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway:not(.conduction-guide-on) .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 120px);
  }

  .heart-view.mode-cutaway:not(.conduction-guide-on):has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-3d-scene {
    bottom: 120px;
  }

  .heart-view.mode-cutaway:not(.conduction-guide-on) .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"]) {
    bottom: 130px;
  }

  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 210px);
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-3d-scene,
  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .conduction-guide {
    bottom: 210px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"]) {
    bottom: 12px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-metrics {
    right: auto;
    bottom: 12px;
    left: 12px;
    max-width: calc(100% - 260px);
  }
}

@media (max-width: 700px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) {
    height: calc(68vh + 320px);
    min-height: 890px;
  }

  body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-svg {
    height: min(calc(84% - 269px), 760px);
    transform: translateY(-160px);
  }

  .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-marker-shortcut {
    bottom: 350px;
  }

  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway:not(.conduction-guide-on) .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) {
    height: calc(68vh + 370px);
    min-height: 940px;
  }

  .heart-view.mode-cutaway:not(.conduction-guide-on):has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-3d-scene {
    bottom: 370px;
  }

  .heart-view.mode-cutaway:not(.conduction-guide-on) .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"]) {
    bottom: 180px;
  }

  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 200px);
    min-height: 830px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-3d-scene {
    top: 98px;
    bottom: 400px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .conduction-controls {
    bottom: 350px;
  }

  .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"]) {
    right: 12px;
    bottom: 200px;
    left: 12px;
    max-width: none;
  }
}

@media (max-width: 360px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway.conduction-guide-on .heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) {
    height: calc(clamp(620px, calc(100vh - 220px), 780px) + 280px);
    min-height: 910px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-3d-scene {
    top: 132px;
    bottom: 445px;
  }

  .heart-view.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .conduction-controls {
    bottom: 395px;
  }

  .placement-area.heart-on .heart-view.mode-cutaway:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .heart-marker-shortcut {
    top: 140px;
    bottom: auto;
  }
}

@media (max-width: 860px) {
  .library-panel:has(#libraryCaseSelect option:is([value="selectedAfVtCaptureFusion"], [value="selectedAtrialDissociationConductedPPrime"]):checked) .library-bpm-control {
    grid-template-columns: minmax(0, 1fr) 42px;
  }

  .library-panel:has(#libraryCaseSelect option:is([value="selectedAfVtCaptureFusion"], [value="selectedAtrialDissociationConductedPPrime"]):checked) .library-bpm-control > span {
    grid-column: 1 / -1;
  }

  .library-panel:has(#libraryCaseSelect option:is([value="selectedAfVtCaptureFusion"], [value="selectedAtrialDissociationConductedPPrime"]):checked) .library-bpm-control input {
    grid-column: 1;
    min-height: 28px;
  }

  .library-panel:has(#libraryCaseSelect option:is([value="selectedAfVtCaptureFusion"], [value="selectedAtrialDissociationConductedPPrime"]):checked) .library-bpm-control output {
    grid-column: 2;
  }
}

@media (max-width: 520px) {
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) {
    height: 940px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .library-heart-scene {
    bottom: 460px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .conduction-guide {
    bottom: 265px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution:is([data-attribution-kind^="trial43-"], [data-attribution-kind^="trial44-"])) .conduction-controls {
    bottom: 465px;
  }
}

/* Trial 45's two-clock explanation is longer than a symbol tooltip. Give the
   model, guide, explanation, key, and rate status separate bands. */
body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial45-"]) {
  height: calc(clamp(620px, calc(100vh - 220px), 780px) + 220px);
}

body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .heart-svg {
  height: min(calc(84% - 175px), 760px);
  transform: translateY(-128px);
}

.placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial45-"] {
  bottom: 200px;
}

.placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .heart-marker-shortcut {
  bottom: 150px;
  max-width: min(220px, calc(100% - 24px));
}

@media (min-width: 701px) {
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    height: 760px;
  }

  .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-heart-scene,
  .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .conduction-guide {
    bottom: 250px;
  }

  .library-heart-card.mode-cutaway.conduction-guide-on .heart-causal-attribution[data-attribution-kind^="trial45-"] {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
  }
}

@media (max-width: 700px) {
  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    height: calc(68vh + 340px);
    min-height: 910px;
  }

  body:not(.focus-patient) .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .heart-svg {
    height: min(calc(84% - 275px), 760px);
    transform: translateY(-150px);
  }

  .placement-area.heart-on .heart-view.mode-2d .heart-causal-attribution[data-attribution-kind^="trial45-"] {
    right: 12px;
    bottom: 215px;
    left: 12px;
    max-width: none;
  }

  .placement-area.heart-on .heart-view.mode-2d:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .heart-marker-shortcut {
    bottom: 170px;
  }

  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-3d .heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    height: max(850px, calc(68vh + 300px));
  }

  .heart-view.mode-3d:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .heart-3d-scene {
    top: 132px;
    bottom: 350px;
  }

  .heart-view.mode-3d .heart-causal-attribution[data-attribution-kind^="trial45-"] {
    top: auto;
    right: 12px;
    bottom: 155px;
    left: 12px;
    max-width: none;
  }

  body:not(.focus-patient) .placement-area.heart-on:has(> .heart-view.mode-cutaway .heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    min-height: 920px;
  }

  .heart-view.mode-cutaway .heart-causal-attribution[data-attribution-kind^="trial45-"] {
    right: 12px;
    bottom: 170px;
    left: 12px;
    max-width: none;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    height: 700px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-heart-scene {
    top: 106px;
    bottom: 250px;
  }

  .library-heart-card:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .heart-marker-shortcut {
    top: auto;
    bottom: 180px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    height: 960px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-heart-scene {
    top: 106px;
    bottom: 410px;
  }

  .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .conduction-guide {
    bottom: 210px;
  }

  .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .conduction-controls {
    bottom: 415px;
  }
}

@media (max-width: 360px) {
  .library-panel:not(.library-heart-expanded) .library-heart-card:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    height: 780px;
  }

  .library-heart-card:is(.mode-3d, .mode-cutaway):not(.conduction-guide-on):has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .heart-marker-shortcut {
    bottom: 225px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-cutaway.conduction-guide-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    height: 1040px;
  }
}

@media (max-width: 520px) {
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    height: 700px;
  }

  .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-heart-svg {
    top: 200px;
    height: 240px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-rapid-2d-info {
    bottom: 225px;
  }

  .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-heart-2d-controls {
    bottom: 180px;
  }
}

@media (max-width: 360px) {
  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) {
    height: 830px;
  }

  .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-heart-svg {
    top: 260px;
    height: 200px;
  }

  .library-panel:not(.library-heart-expanded) .library-heart-card.mode-2d.clinical-2d-on[data-causal-attribution-capable="true"]:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-rapid-2d-info {
    bottom: 275px;
  }

  .library-heart-card.mode-2d.clinical-2d-on:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-heart-2d-controls {
    bottom: 225px;
  }
}

@media (max-width: 700px) {
  .heart-view:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .heart-3d-scene[data-nodal-teaching-loop="true"]::before,
  .library-heart-card:has(.heart-causal-attribution[data-attribution-kind^="trial45-"]) .library-heart-scene[data-nodal-teaching-loop="true"]::before {
    top: 8px;
  }
}

/* An ECG-only evidence epoch cannot display an invented heart animation. */
.heart-motion-unavailable[hidden] {
  display: none;
}

.heart-motion-unavailable {
  position: absolute;
  inset: 70px 24px 58px;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px solid rgba(111, 195, 195, 0.35);
  border-radius: 10px;
  background: rgba(8, 22, 29, 0.94);
  color: #dbf2ee;
  font-size: clamp(0.95rem, 1.7vw, 1.18rem);
  font-weight: 700;
  text-align: center;
}

.heart-view[data-motion-unavailable="true"] .heart-svg,
.heart-view[data-motion-unavailable="true"] .heart-3d-scene,
.heart-view[data-motion-unavailable="true"] .heart-causal-attribution,
.heart-view[data-motion-unavailable="true"] .conduction-guide,
.heart-view[data-motion-unavailable="true"] .rapid-2d-info,
.heart-view[data-motion-unavailable="true"] .heart-marker-shortcut,
.library-heart-card[data-motion-unavailable="true"] .library-heart-2d-scene,
.library-heart-card[data-motion-unavailable="true"] .library-heart-scene,
.library-heart-card[data-motion-unavailable="true"] .heart-causal-attribution,
.library-heart-card[data-motion-unavailable="true"] .conduction-guide,
.library-heart-card[data-motion-unavailable="true"] .rapid-2d-info,
.library-heart-card[data-motion-unavailable="true"] .heart-marker-shortcut {
  display: none !important;
}

/* The Library uses one vertical reading surface on phones and small tablets. */
.library-browse-toggle {
  display: none;
}

@media (max-width: 860px) {
  .library-layout {
    display: block;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .library-nav {
    max-height: none;
    min-height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .library-browse-toggle {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-bottom: 4px;
  }

  .library-nav:not(.browse-open) > .library-search-field,
  .library-nav:not(.browse-open) > .library-group-field,
  .library-nav:not(.browse-open) > .library-filter-summary,
  .library-nav:not(.browse-open) > .library-case-list {
    display: none;
  }

  .library-detail {
    min-height: auto;
    overflow: visible;
    grid-template-areas:
      "summary"
      "heart"
      "strip"
      "metrics"
      "clinical"
      "related";
  }

  .library-detail.has-heart-markers {
    grid-template-areas:
      "summary"
      "cue"
      "heart"
      "strip"
      "metrics"
      "clinical"
      "related";
  }
}

@media (max-width: 740px) {
  .course-layout.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
}