:root {
  --site-width: 1280px;
  --navy: #19372f;
  --blue: #24a36b;
  --blue-soft: #def7eb;
  --teal: #24b6bd;
  --teal-soft: #dcf7f5;
  --violet: #6acb8f;
  --violet-soft: #e5f7ea;
  --coral: #f0a33b;
  --coral-soft: #fff2dc;
  --green: #24a36b;
  --green-soft: #def7eb;
  --amber: #f0a33b;
  --ink: #19372f;
  --muted: #6a7d72;
  --line: #d7e8df;
  --soft: #f6fbf7;
  --white: #ffffff;
  --shadow: 0 8px 22px rgba(32, 82, 61, .07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  color: var(--ink);
  background: #f6fbf7;
  font: 14px/1.55 Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}
body.capture-mode {
  --site-width: 100vw;
  min-width: 0;
  overflow-x: hidden;
}
body.capture-mode .topbar,
body.capture-mode main,
body.capture-mode footer { width: 100vw; }
body.capture-mode .workspace { grid-template-columns: 210px minmax(0, 1fr); }
body.capture-mode .workspace.full { display: block; }
body.capture-mode .hero { grid-template-columns: minmax(340px, .9fr) minmax(420px, 1fr); }
body.capture-mode .docs { grid-template-columns: 180px minmax(0, 1fr); }
body.capture-mode .prioritization-grid { grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.2fr) minmax(190px, .7fr); }
body.capture-mode .gene-visual-grid,
body.capture-mode .gene-ko-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.capture-mode .plot { min-width: 0; }
a { color: var(--blue); text-decoration: none; }
h1, h2, h3, p { margin-top: 0; overflow-wrap: anywhere; }
h1 { margin-bottom: 9px; color: var(--navy); font-size: 35px; line-height: 1.14; }
h2 { margin-bottom: 4px; color: var(--navy); font-size: 20px; }
h3 { color: var(--navy); font-size: 16px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand nav actions";
  align-items: center;
  gap: 14px;
  min-height: 60px;
  width: min(var(--site-width), 100%);
  margin: 0 auto;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .97);
}
.brand { grid-area: brand; display: flex; align-items: center; gap: 9px; color: var(--navy); font-size: 17px; font-weight: 900; white-space: nowrap; }
.brand-mark {
  display: block;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.topbar nav {
  grid-area: nav;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-self: center;
  align-items: center;
  justify-content: center;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  scrollbar-width: none;
}
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: max-content;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #50675c;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.topbar nav a:hover,
.topbar nav a.active {
  border-color: rgba(49, 95, 140, .32);
  background: rgba(49, 95, 140, .10);
  color: var(--blue);
}
.release-tag, .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 12px;
  background: var(--teal-soft);
  color: #13824f;
  font-size: 11px;
  font-weight: 700;
}
.release-tag svg, .badge svg, .button svg, .panel-title svg, .layer-icon svg, .section-icon svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.hero {
  display: grid;
  position: relative;
  min-height: 460px;
  grid-template-columns: 540px 660px;
  gap: 16px;
  padding: 48px 32px 36px;
  border-bottom: 1px solid #e2eee6;
  background: linear-gradient(90deg, #fff 0%, #fff 52%, #f6fbf7 100%);
  isolation: isolate;
  overflow: hidden;
}
.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
  padding: 16px 0 20px;
}
.hero-copy > * { position: relative; z-index: 1; }
.hero h1 { max-width: 690px; font-size: 51px; }
.hero p:not(.eyebrow) { max-width: 680px; color: #5d7568; font-size: 17px; }
.hero-visual {
  position: relative;
  z-index: 1;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid #d7e8df;
  background: #f3faf5;
}
.hero > *, main, section, .band, .workspace, .content-stack, .panel, .layer-grid article, .cancer-card, .metric > div {
  min-width: 0;
}
.is-hidden { display: none !important; }
.plot, .js-plotly-plot, .plot-container, .svg-container { max-width: 100% !important; min-width: 0; }
.loading-state {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid #d7e8df;
  background: #f6fbf7;
  color: #517063;
  font-size: 12px;
  font-weight: 700;
}
.plot .loading-state,
.plot.loading-state { min-height: inherit; }
.loading-spinner {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 3px solid #d8efe4;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .78s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 1px solid #d7e8df;
  background: #f6fbf7;
  color: #64796d;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.visual-label { position: absolute; top: 14px; left: 16px; z-index: 2; color: var(--blue); font-size: 12px; font-weight: 700; }
.atlas-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: #fff;
  isolation: isolate;
}
.atlas-illustration::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.32) 48%, rgba(255, 255, 255, 0.86) 100%),
    url("/static/images/home-tumor-microenvironment-background.jpg?v=20260604-1") center center / cover no-repeat;
  content: "";
  mix-blend-mode: multiply;
  opacity: 0.34;
  pointer-events: none;
}
.atlas-illustration img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
  object-fit: contain;
}
.eyebrow {
  margin-bottom: 7px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
.actions { display: flex; gap: 10px; margin-top: 25px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 14px;
  border: 1px solid #b8d6c4;
  border-radius: 5px;
  background: #fff;
  color: #315a49;
  cursor: pointer;
  font-size: 13px;
}
.button:hover { border-color: var(--blue); color: var(--blue); }
.button.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.button-image-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border-radius: 5px;
  object-fit: cover;
}

.band { padding: 36px 32px; }
.band.white { border-top: 1px solid #e2eee6; border-bottom: 1px solid #e2eee6; background: #fff; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 19px; }
.section-head > p { max-width: 460px; margin-bottom: 1px; color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px; }
.metric-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fff;
}
.metric-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}
.metric-icon svg { width: 17px; height: 17px; }
.metric b { display: block; overflow: hidden; color: var(--navy); font-size: 23px; line-height: 1.05; text-overflow: ellipsis; }
.metric span { color: var(--muted); font-size: 11px; }
.metric.tone-teal .metric-icon { background: var(--teal-soft); color: var(--teal); }
.metric.tone-violet .metric-icon { background: var(--violet-soft); color: var(--violet); }
.metric.tone-coral .metric-icon { background: var(--coral-soft); color: var(--coral); }
.metric.tone-green .metric-icon { background: var(--green-soft); color: var(--green); }
.summary-chart-card {
  margin-top: 18px;
  padding: 16px 16px 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.summary-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}
.summary-chart-head h3 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
}
.plot.home-coverage-chart,
.home-coverage-chart {
  height: 390px;
  border: 1px solid #e2eee6;
}
.layer-grid, .cancer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.layer-grid article, .cancer-card {
  position: relative;
  padding: 19px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.layer-grid article { border-top: 3px solid var(--blue); }
.layer-grid article:nth-child(2) { border-top-color: var(--teal); }
.layer-grid article:nth-child(3) { border-top-color: var(--violet); }
.layer-title { display: flex; align-items: center; gap: 10px; }
.layer-icon, .section-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}
.layer-grid article:nth-child(2) .layer-icon { background: var(--teal-soft); color: var(--teal); }
.layer-grid article:nth-child(3) .layer-icon { background: var(--violet-soft); color: var(--violet); }
.layer-icon.image-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  overflow: hidden;
  border: 1px solid #d9eadf;
  background: #fff;
  box-shadow: 0 8px 18px rgba(32, 82, 61, .08);
}
.layer-icon.image-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.layer-grid p, .cancer-card p { color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; }
.text-link svg { width: 13px; height: 13px; }
.home-carousel {
  padding: 30px 32px 28px;
  border-bottom: 1px solid #e2eee6;
  background: #fff;
}
.home-carousel-stage {
  position: relative;
  overflow: visible;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.home-carousel-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 14px;
}
.home-carousel-slide {
  display: block;
  aspect-ratio: 5760 / 1879;
  background: #fff;
  border: 1px solid #d9eadf;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.home-carousel-slide:hover {
  border-color: #94cfa9;
  box-shadow: 0 8px 18px rgba(32, 82, 61, .12);
  transform: translateY(-1px);
}
.home-carousel-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.home-carousel-arrow {
  display: none;
  width: 44px;
  height: 56px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: rgba(25, 55, 47, .78);
  color: #fff;
  cursor: pointer;
  transform: translateY(-50%);
}
.home-carousel-arrow:hover { background: rgba(36, 163, 107, .95); }
.home-carousel-arrow:focus-visible, .home-carousel-thumb:focus-visible { outline: 3px solid #a8dfbc; outline-offset: 3px; }
.home-carousel-arrow.previous { left: 14px; }
.home-carousel-arrow.next { right: 14px; }
.home-carousel-arrow svg { width: 24px; height: 24px; }
.home-carousel-thumbs {
  display: none;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.home-carousel-thumb {
  padding: 3px;
  overflow: hidden;
  border: 2px solid transparent;
  background: #fff;
  cursor: pointer;
  opacity: .68;
}
.home-carousel-thumb:hover { opacity: .9; }
.home-carousel-thumb.active {
  border-color: var(--blue);
  box-shadow: 0 4px 11px rgba(36, 163, 107, .18);
  opacity: 1;
}
.home-carousel-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 5760 / 1879;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .home-carousel-track { transition: none; }
}
@media (max-width: 760px) {
  .home-carousel-track { grid-template-columns: 1fr; }
}

.page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 32px 23px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}
.page-head .section-icon { width: 42px; height: 42px; border-radius: 8px; }
.page-head .section-icon svg { width: 20px; height: 20px; }
.page-head p:last-child { margin-bottom: 0; color: var(--muted); }
.workspace { display: grid; grid-template-columns: 224px 976px; gap: 16px; padding: 18px 32px 32px; }
.workspace.full { display: block; }
select {
  min-width: 0;
  padding-right: 34px !important;
  overflow: hidden;
  appearance: none;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, #4d735d 50%),
    linear-gradient(135deg, #4d735d 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filters, .panel { min-width: 0; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); }
.filters { height: max-content; padding: 14px; border-top: 3px solid var(--teal); }
.filters h3 { display: flex; align-items: center; gap: 7px; margin-bottom: 13px; }
.filters h3 svg { width: 15px; height: 15px; color: var(--teal); }
.filters label { display: block; margin: 12px 0; color: #536c60; font-size: 12px; }
.filters select, .filters input, .toolbar input {
  width: 100%;
  margin-top: 5px;
  padding: 8px;
  border: 1px solid #c8ddcf;
  border-radius: 4px;
  color: #284739;
}
.filters .button { width: 100%; margin-top: 4px; }
.hint { margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.content-stack { display: grid; min-width: 0; gap: 15px; }
.bulk-workspace {
  display: block;
}
.bulk-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  align-items: start;
  margin-bottom: 15px;
  padding: 17px 18px 18px;
}
.bulk-filters h3 {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.25;
}
.bulk-filters label {
  margin: 0;
  color: #385d4c;
  font-size: 13px;
  font-weight: 700;
}
.bulk-filters select {
  min-height: 42px;
  margin-top: 7px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
}
.panel { padding: 14px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.panel-title { display: flex; align-items: center; gap: 7px; color: var(--navy); }
.panel-title svg { color: var(--blue); }
.panel-head h2 { margin: 0; font-size: 16px; }
.explain-card {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.explain-card > div {
  padding: 12px;
  border: 1px solid #d9eadf;
  border-radius: 6px;
  background: linear-gradient(180deg, #f6fbf7 0%, #fff 100%);
}
.explain-card b {
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 13px;
}
.explain-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.plot {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 290px;
  overflow: hidden;
}
.plot.large { height: 455px; }
.plot.medium { height: 300px; }
.plot.small { height: 315px; }
.plot.drug-candidate-plot {
  height: 500px;
  border: 1px solid #edf2f7;
}
.plot-grid { display: grid; min-width: 0; gap: 14px; }
.plot-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plot-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plot-grid.spatial-ko-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.plot-grid.spatial-ko-grid > :last-child { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
.plot-grid.spatial-ko-grid > .plot { height: 350px; overflow: hidden; border: 1px solid #edf2f7; }
.plot-grid.spatial-ko-grid .modebar { right: 6px !important; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.gene-visual-grid { display: grid; gap: 15px; }
.gene-visual-card { border: 1px solid #e2eee6; border-radius: 8px; padding: 12px; background: #fbfdfb; }
.gene-visual-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.gene-visual-head h3 { margin: 0; color: var(--navy); font-size: 14px; }
.gene-visual-head select { max-width: 280px; }
.plot.gene-visual-plot {
  width: min(560px, 100%);
  height: 310px;
  margin: 0 auto;
}
.gene-context-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 12px;
}
.gene-context-grid .gene-visual-plot {
  width: 100%;
  max-width: none;
  border: 1px solid #edf2f7;
  overflow: hidden;
}
.gene-bulk-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 420px));
  justify-content: center;
  gap: 16px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.gene-bulk-grid .plot {
  width: 100%;
  max-width: 420px;
  justify-self: center;
}
.gene-ko-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}
.gene-ko-grid > .plot, .gene-ko-grid .transition-panel { border: 1px solid #edf2f7; overflow: hidden; }
.transition-panel { background: #fff; }
.transition-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3px;
  margin: 10px 0 0;
  max-width: none;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.transition-note div { display: flex; gap: 6px; align-items: baseline; }
.transition-note div::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  margin-top: .45em;
  border-radius: 999px;
  background: var(--blue);
}
.transition-note dt { min-width: 48px; color: var(--navy); font-weight: 700; }
.transition-note dd { margin: 0; }
.empty-note { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.figure-gallery { display: grid; gap: 18px; }
.figure-card { border-top: 1px solid #e6edf5; background: #fff; }
.figure-card:first-child { border-top: 0; }
.figure-card h3 { margin: 0; padding: 14px 18px 0; font-size: 15px; }
.figure-note { margin: 3px 18px 10px; color: var(--muted); font-size: 12px; }
.figure-stage { position: relative; display: grid; min-height: 610px; place-items: center; padding: 62px 18px 18px; background: #fff; }
.figure-stage.media-loading::before {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid #d8efe4;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin .78s linear infinite;
  content: "";
}
.figure-stage.media-loading::after {
  position: absolute;
  z-index: 2;
  top: calc(50% + 26px);
  left: 50%;
  color: #517063;
  content: "Loading figure...";
  font-size: 12px;
  font-weight: 700;
  transform: translateX(-50%);
}
.figure-stage.media-loading .figure-image { opacity: .2; }
.figure-stage.media-error::after {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  padding: 8px 10px;
  border: 1px solid #f0c7c7;
  background: #fff8f8;
  color: #9b2c2c;
  content: "Figure preview unavailable.";
  font-size: 12px;
  font-weight: 700;
  transform: translate(-50%, -50%);
}
.figure-stage.compact { min-height: 300px; padding: 10px; border: 1px solid #e8eef6; }
.figure-image { display: block; max-width: 100%; max-height: 760px; object-fit: contain; }
.figure-stage.compact .figure-image { max-height: 285px; }
.figure-stage.analysis-figure { min-height: 520px; padding: 16px; border: 1px solid #e8eef6; }
.figure-stage.analysis-figure.volcano { min-height: 390px; }
.figure-stage.analysis-figure.volcano .figure-image { max-height: 370px; }
.figure-stage.analysis-figure.tall { min-height: 900px; }
.figure-stage.analysis-figure .figure-image { max-height: 860px; }
.figure-gallery.compact-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.figure-gallery.compact-gallery .figure-card { border: 1px solid #e6edf5; }
.figure-gallery.compact-gallery .figure-card:only-child { grid-column: 1 / -1; width: calc(50% - 7px); justify-self: center; }
.figure-gallery.communication-circle-gallery { gap: 14px; }
.figure-stage.communication-circle { min-height: 455px; padding: 48px 14px 14px; border: 1px solid #e8eef6; }
.figure-stage.communication-circle .figure-image { max-height: 415px; }
.figure-stage.communication-dotplot { min-height: 620px; padding: 16px; border: 1px solid #e8eef6; }
.figure-stage.communication-dotplot .figure-image { max-height: 590px; }
.figure-stage.bulk-compact { min-height: 350px; padding: 44px 14px 14px; }
.figure-stage.bulk-compact .figure-image { max-height: 310px; }
.figure-stage.bulk-standard { min-height: 660px; padding: 54px 16px 16px; }
.figure-stage.bulk-standard .figure-image { max-height: 625px; }
.figure-stage.bulk-expanded { min-height: 700px; padding: 54px 16px 16px; }
.figure-stage.bulk-expanded .figure-image { max-height: 660px; }
.figure-card.bulk-wide { grid-column: 1 / -1; }
.figure-stage.bulk-wide { min-height: 520px; padding: 54px 16px 16px; }
.figure-stage.bulk-wide .figure-image { width: 100%; max-height: 490px; }
.figure-download {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 6px 14px rgba(36, 163, 107, .2);
}
.figure-download:hover { background: #1d8555; color: #fff; }
.figure-download svg { width: 19px; height: 19px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th, td { padding: 8px; border-bottom: 1px solid #e2eee6; text-align: left; white-space: nowrap; }
th { background: #f3faf5; color: #536c60; }
.table-wrap { max-height: 420px; overflow: auto; }
.full-table-wrap { max-height: none; overflow-x: auto; overflow-y: visible; }
.overview-table { font-size: 15px; }
.overview-table th, .overview-table td { padding: 12px 14px; }
.overview-table th { font-size: 13px; font-weight: 800; letter-spacing: 0; }
.overview-table td:first-child { font-weight: 800; color: var(--blue); }
.overview-table-controls { font-size: 14px; }
.organ-atlas {
  display: grid;
  grid-template-columns: minmax(460px, 520px) minmax(330px, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 8px 8px 0;
}
.organ-map {
  position: relative;
  aspect-ratio: 3318 / 7255;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #e1ece5;
  background: linear-gradient(180deg, #fbfdfb 0%, #f3faf5 100%);
}
.organ-map img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .78;
  filter: saturate(.78) contrast(.98);
}
.organ-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.organ-guide {
  pointer-events: none;
}
.organ-guide path {
  fill: rgba(112, 128, 142, .10);
  stroke: rgba(86, 103, 118, .28);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.organ-guide .adrenal-guide {
  fill: rgba(112, 128, 142, .12);
  stroke-width: 2.4;
}
.organ-label {
  cursor: pointer;
  outline: none;
}
.organ-label polyline {
  fill: none;
  stroke: rgba(65, 91, 116, .24);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke .16s ease, stroke-width .16s ease, opacity .16s ease;
}
.organ-label circle {
  fill: rgba(255, 255, 255, .92);
  stroke: rgba(70, 100, 128, .42);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  transition: fill .16s ease, stroke .16s ease, r .16s ease;
}
.organ-label rect {
  fill: rgba(255, 255, 255, .86);
  stroke: rgba(148, 170, 190, .42);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 5px 8px rgba(28, 56, 91, .08));
  transition: fill .16s ease, stroke .16s ease, filter .16s ease;
}
.organ-label text {
  pointer-events: none;
  letter-spacing: 0;
  font-family: Arial, sans-serif;
}
.organ-label-name {
  fill: #183756;
  font-size: 78px;
  font-weight: 800;
}
.organ-label-cancers {
  fill: #286375;
  font-size: 64px;
  font-weight: 800;
}
.organ-label:hover polyline,
.organ-label:focus polyline,
.organ-label.active polyline {
  stroke: rgba(18, 100, 140, .78);
  stroke-width: 3;
}
.organ-label:hover circle,
.organ-label:focus circle,
.organ-label.active circle {
  fill: #ffffff;
  stroke: rgba(18, 100, 140, .82);
}
.organ-label:hover rect,
.organ-label:focus rect,
.organ-label.active rect {
  fill: #ffffff;
  stroke: rgba(18, 100, 140, .72);
  filter: drop-shadow(0 8px 14px rgba(18, 100, 140, .16));
}
.organ-node {
  cursor: pointer;
  outline: none;
}
.organ-node path,
.organ-node ellipse,
.organ-node circle {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  vector-effect: non-scaling-stroke;
  transition: fill .16s ease, stroke .16s ease, stroke-width .16s ease, filter .16s ease;
}
.organ-node:hover path,
.organ-node:hover ellipse,
.organ-node:hover circle,
.organ-node:focus path,
.organ-node:focus ellipse,
.organ-node:focus circle {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  filter: none;
}
.organ-node.active path,
.organ-node.active ellipse,
.organ-node.active circle {
  fill: transparent;
  stroke: transparent;
  stroke-width: 0;
  filter: none;
}
.organ-map-hint {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 7px 10px;
  border: 1px solid rgba(176, 195, 213, .75);
  background: rgba(255, 255, 255, .84);
  color: #4f6880;
  font-size: 12px;
  font-weight: 700;
}
.organ-site-pills {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 6px;
  max-width: calc(100% - 140px);
}
.organ-site-pills button {
  min-height: 27px;
  padding: 5px 8px;
  border: 1px solid rgba(176, 195, 213, .78);
  background: rgba(255, 255, 255, .88);
  color: #38516f;
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}
.organ-site-pills button:hover,
.organ-site-pills button.active {
  border-color: rgba(165, 24, 52, .52);
  background: rgba(255, 240, 243, .94);
  color: #a51834;
}
.organ-detail {
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding: 18px 20px 20px;
  border: 1px solid #dde9f5;
  border-top: 3px solid rgba(18, 100, 140, .46);
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}
.organ-panel-head h3 {
  margin: 5px 0 16px;
  color: var(--navy);
  font-size: 24px;
}
.organ-cancer-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.organ-cancer-card {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 2px;
  padding: 16px;
  border: 1px solid #dce7f2;
  border-left: 3px solid var(--blue);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(27, 62, 101, .05);
}
.organ-cancer-card h4 {
  margin: 2px 0 10px;
  color: var(--navy);
  font-size: 17px;
}
.organ-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.organ-stat-grid span {
  padding: 8px;
  border: 1px solid #e2ebf4;
  background: #f5f9fd;
  color: var(--muted);
  font-size: 12px;
}
.organ-stat-grid strong {
  display: block;
  color: var(--navy);
  font-size: 15px;
}
.organ-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.organ-actions .button { padding: 7px 10px; }
.organ-index {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e6edf5;
}
.organ-index h4 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 15px;
}
.organ-index-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.organ-index-button {
  display: grid;
  min-height: 45px;
  align-content: center;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid #dce7f2;
  border-left: 3px solid transparent;
  border-radius: 4px;
  background: #f8fbff;
  color: #29445f;
  cursor: pointer;
  text-align: left;
}
.organ-index-button span {
  overflow: hidden;
  color: #5a738b;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organ-index-button strong {
  overflow: hidden;
  color: var(--navy);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.organ-index-button:hover,
.organ-index-button.active {
  border-color: #9dc4dd;
  border-left-color: rgba(18, 100, 140, .76);
  background: #ffffff;
  box-shadow: 0 5px 12px rgba(25, 74, 118, .08);
}
@media (max-width: 900px) {
  .organ-atlas { grid-template-columns: 1fr; }
  .organ-map { max-width: 430px; margin: 0 auto; }
  .organ-detail { min-height: 0; }
  .organ-index-grid { grid-template-columns: 1fr; }
}
.stacked-table { padding-top: 14px; border-top: 1px solid #e6edf3; }
.stacked-table:first-child { padding-top: 0; border-top: 0; }
.stacked-table + .stacked-table { margin-top: 18px; }
.stacked-table h3 { margin-bottom: 8px; font-size: 14px; }
.table-controls { display: flex; align-items: center; gap: 12px; padding-top: 11px; color: var(--muted); font-size: 12px; }
.table-controls label { display: flex; align-items: center; gap: 6px; }
.table-controls select { padding: 6px; border: 1px solid #cbd8e2; border-radius: 4px; color: #243e55; }
.table-pager { display: flex; flex: 1; align-items: center; justify-content: center; gap: 10px; }
.table-controls .button { padding: 6px 10px; font-size: 12px; }
.button:disabled { cursor: default; opacity: .45; }
.tissue-preview { display: grid; height: 315px; grid-template-rows: 36px minmax(0, 1fr); overflow: hidden; border: 1px solid #e8eef6; background: #fff; }
.tissue-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px; border-bottom: 1px solid #e8eef6; color: var(--navy); font-size: 12px; font-weight: 700; }
.tissue-preview-body { position: relative; min-height: 0; overflow: hidden; background: #f8fbff; }
.tissue-preview img { position: absolute; inset: 14px 32px; display: block; width: calc(100% - 64px); height: calc(100% - 28px); object-fit: contain; }
.subnav { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 32px 0; }
.tab {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--line);
  border-radius: 4px 4px 0 0;
  background: #fff;
  color: #4c647b;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}
.tab svg { width: 20px; height: 20px; }
.tab.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.tab-view { display: none; }
.tab-view.active { display: grid; }
.toolbar { margin-bottom: 12px; }
.toolbar input { max-width: 460px; }
.download-workspace { padding-top: 24px; }
.download-panel { padding: 20px 24px 18px; overflow: hidden; }
.download-panel .panel-head { margin-bottom: 18px; }
.download-toolbar {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(360px, 1fr);
  gap: 16px;
  align-items: end;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid #e2ebf4;
  background: #f8fbff;
}
.download-toolbar label {
  display: grid;
  gap: 7px;
  color: #4a6074;
  font-size: 12px;
  font-weight: 700;
}
.download-toolbar select,
.download-toolbar input {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cbd8e2;
  border-radius: 5px;
  color: #243e55;
  font-size: 13px;
  font-weight: 500;
}
.download-toolbar input { background: #fff; }
.download-sections {
  display: grid;
  gap: 20px;
}
.download-section {
  border: 1px solid #dce8f3;
  background: #fbfdff;
}
.download-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #dce8f3;
  background: #f3f8fd;
}
.download-section-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #18365f;
  font-size: 17px;
  font-weight: 800;
}
.download-section-icon.image-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border: 1px solid rgba(72, 135, 220, 0.22);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(24, 54, 95, 0.12);
}
.download-section-icon.image-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.download-section-head svg { width: 18px; height: 18px; color: var(--blue); }
.download-table .table-wrap {
  max-height: 460px;
  border: 0;
  background: #fff;
}
.download-table th,
.download-table td { padding: 10px 12px; }
.download-table .table-controls {
  padding: 12px 14px;
  border-top: 1px solid #e6edf3;
  background: #fff;
}
.prioritization-grid {
  display: grid;
  grid-template-columns: minmax(300px, .95fr) minmax(560px, 1.45fr) minmax(220px, .72fr);
  gap: 14px;
}
.prioritization-plot { height: 470px; }
.evidence-guide dl { margin: 0; }
.evidence-guide dt {
  margin-top: 8px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}
.evidence-guide dt:first-child { margin-top: 0; }
.evidence-guide dd {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.prioritization-toolbar {
  display: grid;
  grid-template-columns: 210px 360px;
  gap: 12px;
  margin-bottom: 12px;
}
.prioritization-toolbar label {
  color: #4a6074;
  font-size: 12px;
  font-weight: 700;
}
.prioritization-toolbar select,
.prioritization-toolbar input {
  width: 100%;
  margin-top: 5px;
  padding: 8px;
  border: 1px solid #cbd8e2;
  border-radius: 4px;
  color: #243e55;
}
.prioritization-toolbar input { background: #fff; }
.sortable-table th { padding: 0; }
.sortable-table th button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #476178;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
}
.sortable-table th button:hover { color: var(--blue); }
.gene-link { font-weight: 700; }
.cancer-card { border-left: 3px solid var(--blue); }
.cancer-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.mini-stat { padding: 4px 7px; border-radius: 3px; background: #f2f6fb; color: #55708b; font-size: 11px; }

.docs { display: grid; grid-template-columns: 190px 996px; gap: 30px; padding: 24px 32px 45px; }
.docs aside { position: sticky; top: 88px; display: grid; height: max-content; gap: 4px; padding: 12px; border: 1px solid var(--line); background: #fff; }
.docs aside a { padding: 6px; color: #455f78; font-size: 12px; }
.docs aside a:hover { background: var(--blue-soft); }
.docs aside .nav-primary {
  color: #263f5b;
  font-weight: 700;
}
.docs aside .nav-secondary {
  position: relative;
  margin-left: 11px;
  padding-left: 14px;
  color: #55708b;
  font-size: 11px;
}
.docs aside .nav-secondary::before {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9db4c8;
  content: "";
  transform: translateY(-50%);
}
.docs article { padding: 22px; border: 1px solid var(--line); background: #fff; }
.docs article h2 { margin-top: 22px; }
.help-docs article { display: grid; gap: 22px; padding: 26px; }
.help-docs article h2 { margin: 0; padding-top: 4px; color: var(--navy); font-size: 24px; }
.help-docs article > p { margin: 0; color: #4f6680; line-height: 1.65; }
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.contact-card,
.affiliation-card,
.doc-module {
  border: 1px solid #e1e9f2;
  background: #fff;
  box-shadow: 0 10px 22px rgba(15, 42, 78, .06);
}
.contact-card h3 {
  margin: 0;
  padding: 18px 18px 16px;
  border-bottom: 1px solid #e8eef5;
  color: var(--navy);
  font-size: 15px;
  font-weight: 700;
}
.contact-card p {
  margin: 0;
  padding: 17px 18px;
  color: #223a52;
  font-size: 13px;
}
.contact-card b { color: #ef5965; }
.contact-card a { color: var(--navy); }
.affiliation-card { padding: 18px; }
.affiliation-card h3 { margin: 0 0 12px; color: var(--navy); font-size: 15px; }
.affiliation-card p { margin: 0; color: #263c53; line-height: 1.58; }
.symbol-note {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e1e9f2;
  color: #51687f;
  font-size: 12px;
}
.symbol-note b { color: var(--navy); }
.doc-module {
  display: grid;
  grid-template-columns: minmax(300px, .78fr) minmax(420px, 1fr);
  gap: 18px;
  padding: 18px;
  align-items: start;
}
.doc-copy h3 { margin: 0 0 9px; color: var(--navy); font-size: 18px; }
.doc-copy p { margin: 0 0 10px; color: #4f6680; line-height: 1.62; }
.formula-card {
  margin: 12px 0 14px;
  padding: 16px 18px;
  border: 1px solid #dbe8f4;
  background: linear-gradient(180deg, #fbfdff 0%, #f5f9fd 100%);
  color: #18395c;
}
.formula-title {
  margin-bottom: 10px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.latex-formula {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  padding: 12px 14px;
  border: 1px solid #e1ebf5;
  background: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  line-height: 1.5;
}
.latex-formula + .latex-formula { margin-top: 8px; }
.compact-equation { justify-content: center; font-size: 25px; }
.expanded-equation { font-size: 20px; }
.math-var { font-style: italic; font-weight: 700; }
.formula-explain {
  margin: 12px 0 0;
  color: #405970;
  line-height: 1.6;
}
.formula-explain b { color: var(--navy); }
.latex-formula sub { font-size: .62em; }
.paren { font-size: 28px; line-height: 1; }
.sigma { font-size: 34px; line-height: .75; }
.doc-copy ul { margin: 10px 0 0; padding-left: 18px; color: #405970; line-height: 1.58; }
.doc-copy li + li { margin-top: 5px; }
.doc-module.visual-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.doc-module.visual-grid .doc-copy { grid-column: 1 / -1; }
.doc-module.visual-grid.single-visual figure { grid-column: 1 / -1; }
.doc-module.visual-grid.triple-visual {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.doc-module figure { margin: 0; }
.doc-module img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  object-position: top center;
  border: 1px solid #dce7f1;
  background: #f4f8fc;
}
.doc-module figcaption { margin-top: 7px; color: var(--muted); font-size: 12px; }
.doc-module figure + figure { margin-top: 0; }
.tutorial-module {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: -8px;
}
.tutorial-module.single { grid-template-columns: minmax(0, 1fr); }
.tutorial-module figure {
  margin: 0;
  justify-self: center;
  width: 100%;
  padding: 14px;
  border: 1px solid #dce7f1;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15, 42, 78, .11);
}
.tutorial-module img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  border: 1px solid #d7e2ec;
  background: #fff;
  box-shadow: 0 12px 24px rgba(20, 48, 83, .13);
}
.tutorial-module figcaption {
  margin: 12px auto 0;
  max-width: 820px;
  color: #52697f;
  font-size: 12px;
  line-height: 1.55;
}
.tutorial-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.tutorial-note-card {
  padding: 15px 16px;
  border: 1px solid #dde8f3;
  border-left: 3px solid var(--blue);
  background: #fbfdff;
  box-shadow: 0 8px 18px rgba(16, 42, 86, .045);
}
.tutorial-note-card.full { grid-column: 1 / -1; }
.tutorial-note-card h3 {
  margin: 0 0 8px;
  color: var(--navy);
  font-size: 15px;
}
.tutorial-note-card p {
  margin: 0 0 8px;
  color: #4f6680;
  line-height: 1.58;
}
.tutorial-note-card p:last-child { margin-bottom: 0; }
.tutorial-note-card p + p { margin-top: 9px; }
.references-list {
  margin: 0;
  padding-left: 22px;
  color: #405970;
  line-height: 1.55;
}
.references-list li + li { margin-top: 8px; }
.tutorial-note-card ul {
  margin: 0;
  padding-left: 18px;
  color: #405970;
  line-height: 1.55;
}
.tutorial-note-card li + li { margin-top: 5px; }
.tutorial-note-card b { color: #ef5965; }
@media (max-width: 900px) {
  .docs { display: block; }
  .docs aside { position: static; margin-bottom: 16px; }
  .contact-grid, .doc-module, .doc-module.visual-grid, .doc-module.visual-grid.triple-visual, .tutorial-notes { grid-template-columns: 1fr; }
  .tutorial-note-card.full { grid-column: auto; }
}
pre { overflow: auto; padding: 12px; background: #f2f6f8; }
footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: min(var(--site-width), 100%);
  margin: 0 auto;
  padding: 17px 32px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
}
footer span { color: #bdd0e3; }
footer a { color: #e8f4ff; text-decoration: underline; text-underline-offset: 3px; }

main { width: min(var(--site-width), 100%); margin: 0 auto; background: #f7fafe; }
body[data-page="home"] main {
  position: relative;
  overflow: hidden;
}
body[data-page="home"] main > section > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 1180px) {
  .topbar {
    min-height: 82px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    row-gap: 8px;
    column-gap: 12px;
    padding: 9px 18px 8px;
  }
  .topbar nav {
    flex-basis: auto;
    align-self: auto;
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 0;
  }
  .topbar nav a {
    min-height: 30px;
    flex: 0 0 auto;
  }
  .release-tag { margin-left: auto; }
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 34px 24px 30px;
  }
  .hero-copy { min-height: 0; }
  .hero h1 { font-size: 40px; }
  .hero-visual { min-height: 280px; }
  .metric-grid,
  .metric-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layer-grid,
  .two-col,
  .plot-grid.three,
  .plot-grid.four,
  .plot-grid.spatial-ko-grid,
  .prioritization-grid,
  .download-toolbar {
    grid-template-columns: 1fr;
  }
  .plot-grid.spatial-ko-grid > :last-child { width: 100%; }
  .workspace,
  .bulk-workspace {
    grid-template-columns: 1fr;
    padding: 18px 24px 30px;
  }
  .filters { position: static; }
  .docs {
    grid-template-columns: minmax(160px, .26fr) minmax(0, 1fr);
    gap: 18px;
    padding: 20px 24px 36px;
  }
}

@media (max-width: 760px) {
  h1 { font-size: 29px; }
  h2 { font-size: 18px; }
  .topbar {
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "brand"
      "actions"
      "nav";
    min-height: 0;
    row-gap: 8px;
  }
  .brand { font-size: 15px; }
  .topbar-actions {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
  .release-tag {
    margin-left: 0;
    white-space: nowrap;
  }
  .page-head,
  .band,
  .subnav,
  .workspace,
  .bulk-workspace,
  .docs {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero { padding: 28px 16px 24px; }
  .hero h1 { font-size: 34px; }
  .hero p:not(.eyebrow) { font-size: 15px; }
  .hero-visual { min-height: 230px; }
  .section-head,
  .panel-head,
  .download-section-head,
  footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .metric-grid,
  .metric-grid.compact,
  .contact-grid,
  .doc-module,
  .doc-module.visual-grid,
  .doc-module.visual-grid.triple-visual {
    grid-template-columns: 1fr;
  }
  .tab {
    min-height: 42px;
    padding: 10px 12px;
    font-size: 14px;
  }
  .table-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .table-pager {
    width: 100%;
    justify-content: space-between;
  }
  .prioritization-toolbar { grid-template-columns: 1fr; }
  .plot { height: 300px; }
  .plot.large { height: 360px; }
  .plot.home-coverage-chart,
  .home-coverage-chart { height: 310px; }
  .figure-stage.communication-dotplot { min-height: 360px; }
  .figure-stage.communication-dotplot .figure-image { max-height: 340px; }
  .docs { display: block; }
  .docs aside {
    position: static;
    margin-bottom: 16px;
  }
}

/* Advanced research theme layer */
:root,
:root[data-theme="light"] {
  --navy: #172A45;
  --blue: #315F8C;
  --blue-soft: #E6EEF6;
  --teal: #4A8A8F;
  --teal-soft: #E5F0F1;
  --violet: #6A5D93;
  --violet-soft: #ECE9F3;
  --coral: #A84F5F;
  --coral-soft: #F4E4E8;
  --green: #5E7D63;
  --green-soft: #E8EEE8;
  --amber: #B8873A;
  --ink: #24364D;
  --muted: #66758A;
  --line: #DCE4EC;
  --soft: #F5F8FB;
  --white: #ffffff;
  --panel-bg: rgba(255, 255, 255, .92);
  --panel-bg-solid: #ffffff;
  --plot-bg: #ffffff;
  --plot-ink: #3C4D63;
  --legend-bg: rgba(255, 255, 255, .86);
  --topbar-bg: rgba(255, 255, 255, .78);
  --shadow: 0 14px 34px rgba(23, 42, 69, .075);
  --shadow-hover: 0 18px 42px rgba(23, 42, 69, .12);
  --focus-ring: 0 0 0 3px rgba(49, 95, 140, .22);
}

:root[data-theme="dark"] {
  --navy: #E8EEF7;
  --blue: #8BB7E2;
  --blue-soft: rgba(139, 183, 226, .16);
  --teal: #88BFC3;
  --teal-soft: rgba(136, 191, 195, .14);
  --violet: #B3A5DB;
  --violet-soft: rgba(179, 165, 219, .16);
  --coral: #D98898;
  --coral-soft: rgba(217, 136, 152, .16);
  --green: #A4B88B;
  --green-soft: rgba(164, 184, 139, .14);
  --amber: #D8B16A;
  --ink: #DFE7F1;
  --muted: #A5B2C2;
  --line: rgba(185, 199, 216, .22);
  --soft: #111827;
  --white: #172132;
  --panel-bg: rgba(23, 33, 50, .86);
  --panel-bg-solid: #172132;
  --plot-bg: #182335;
  --plot-ink: #C4CFDD;
  --legend-bg: rgba(23, 33, 50, .88);
  --topbar-bg: rgba(13, 22, 36, .86);
  --shadow: 0 16px 38px rgba(0, 0, 0, .32);
  --shadow-hover: 0 20px 48px rgba(0, 0, 0, .42);
  --focus-ring: 0 0 0 3px rgba(139, 183, 226, .25);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 12% -10%, rgba(49, 95, 140, .11), transparent 34%),
    linear-gradient(180deg, var(--soft), color-mix(in srgb, var(--soft) 88%, var(--panel-bg-solid)));
  transition: background-color .22s ease, color .22s ease;
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 18% -6%, rgba(139, 183, 226, .14), transparent 32%),
    radial-gradient(circle at 82% 2%, rgba(179, 165, 219, .10), transparent 30%),
    linear-gradient(180deg, #0D1624, #121C2B);
}

.topbar {
  border-bottom-color: color-mix(in srgb, var(--line) 72%, transparent);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(248, 251, 254, .92));
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px rgba(23, 42, 69, .045);
}

:root[data-theme="dark"] .topbar {
  border-bottom-color: rgba(139, 183, 226, .28);
  background:
    linear-gradient(180deg, rgba(12, 22, 36, .96), rgba(10, 20, 33, .92)),
    #0D1624;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] .brand {
  color: #E8FFF9;
  text-shadow: 0 0 14px rgba(139, 183, 226, .16);
}

.topbar-actions {
  grid-area: actions;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  white-space: nowrap;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel-bg-solid) 78%, transparent);
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}

.theme-toggle svg { width: 14px; height: 14px; color: var(--blue); }
.theme-toggle:hover { border-color: var(--blue); color: var(--blue); }
.theme-toggle:focus-visible,
.button:focus-visible,
select:focus-visible,
input:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.button,
.tab,
.text-link,
.figure-download,
.organ-index-button,
.organ-site-pills button {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease;
}

.topbar nav a {
  transition: color .14s ease, border-color .14s ease, background-color .14s ease;
}

:root[data-theme="dark"] .topbar nav {
  background: transparent;
}

:root[data-theme="dark"] .topbar nav a {
  border-color: rgba(139, 183, 226, .08);
  background: rgba(255, 255, 255, .025);
  color: #B9C7DA;
}

:root[data-theme="dark"] .topbar nav a:hover,
:root[data-theme="dark"] .topbar nav a.active {
  border-color: rgba(139, 183, 226, .56);
  background: linear-gradient(135deg, rgba(139, 183, 226, .22), rgba(179, 165, 219, .14));
  color: #F2F6FC;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035), 0 8px 20px rgba(0, 0, 0, .18);
}

.brand,
.topbar nav a,
.release-tag,
.badge,
.filters label,
.bulk-filters label,
.hint,
.table-controls,
.page-head p:last-child,
.section-head > p,
.layer-grid p,
.cancer-card p { color: var(--muted); }

.brand,
h1,
h2,
h3,
.panel-title,
.metric b,
.bulk-filters h3,
.tissue-preview-head { color: var(--navy); }

.release-tag,
.badge {
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  background: var(--blue-soft);
  color: var(--blue);
}

.hero,
.page-head,
.band.white,
.home-carousel,
.atlas-illustration,
.home-carousel-stage,
.filters,
.panel,
.metric,
.layer-grid article,
.cancer-card,
.figure-card,
.figure-stage,
.download-section,
.gene-visual-card,
.explain-card > div {
  background: var(--panel-bg);
  border-color: var(--line);
}

.hero {
  background:
    linear-gradient(110deg, var(--panel-bg-solid) 0%, var(--panel-bg-solid) 47%, var(--soft) 100%);
}

.filters,
.panel,
.metric,
.summary-chart-card,
.layer-grid article,
.cancer-card,
.home-carousel-stage,
.download-section,
.gene-visual-card,
.organ-index-button {
  border-radius: 8px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.panel:hover,
.metric:hover,
.layer-grid article:hover,
.cancer-card:hover,
.home-carousel-stage:hover,
.download-section:hover,
.organ-index-button:hover {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.filters:hover {
  border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
  box-shadow: var(--shadow-hover);
}

.button {
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
  background: var(--panel-bg-solid);
  color: var(--ink);
  font-weight: 700;
}

.button:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}

.button.primary {
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue), #243F63);
  color: #fff;
  box-shadow: 0 10px 24px rgba(49, 95, 140, .22);
}

.button.primary:hover { color: #fff; box-shadow: 0 12px 28px rgba(49, 95, 140, .3); }
.text-link:hover svg,
.figure-download:hover svg,
.button:hover svg { transform: translateX(2px); }

.text-link svg,
.figure-download svg,
.button svg { transition: transform .18s ease; }

select,
.filters select,
.filters input,
.toolbar input,
.bulk-filters select,
.download-toolbar select,
.download-toolbar input,
.table-controls select {
  border-color: var(--line);
  background-color: var(--panel-bg-solid);
  color: var(--ink);
}

.plot,
.figure-stage,
.table-wrap {
  background: var(--plot-bg);
  border-color: var(--line);
}

.js-plotly-plot {
  animation: plotFadeIn .22s ease both;
}

@keyframes plotFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.loading-state {
  position: relative;
  flex-direction: column;
  overflow: hidden;
  border-color: var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 52%, var(--panel-bg-solid)), var(--panel-bg-solid));
  color: var(--muted);
}

.loading-state::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.42) 45%, transparent 62%);
  animation: shimmer 1.35s ease-in-out infinite;
  content: "";
  transform: translateX(-100%);
}

:root[data-theme="dark"] .loading-state::before {
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 45%, transparent 62%);
}

.skeleton-line {
  display: block;
  width: min(180px, 62%);
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 70%, transparent);
}

.skeleton-line.wide { width: min(240px, 76%); margin-top: 4px; }

@keyframes shimmer {
  to { transform: translateX(100%); }
}

.loading-spinner {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
  border-top-color: var(--blue);
}

.subnav {
  position: relative;
  background: color-mix(in srgb, var(--soft) 80%, transparent);
}

.tab {
  border-color: var(--line);
  background: var(--panel-bg);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(18, 60, 53, .04);
}

.tab:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}

.tab.active {
  border-color: var(--blue);
  background: linear-gradient(135deg, var(--blue), #243F63);
  color: #fff;
  box-shadow: 0 12px 24px rgba(49, 95, 140, .22);
}

.tab-view.active {
  animation: tabEnter .18s ease both;
}

@keyframes tabEnter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.figure-stage.media-loading::before {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
  border-top-color: var(--blue);
}

.figure-stage.media-loading::after {
  color: var(--muted);
}

.figure-stage.media-error::after {
  border-color: color-mix(in srgb, var(--coral) 40%, var(--line));
  background: var(--coral-soft);
  color: var(--coral);
}

.figure-download {
  background: rgba(18, 60, 53, .86);
  backdrop-filter: blur(10px);
}

.figure-download:hover {
  background: var(--blue);
}

table th {
  background: color-mix(in srgb, var(--blue-soft) 54%, var(--panel-bg-solid));
  color: var(--navy);
}

table td {
  border-color: var(--line);
  color: var(--ink);
}

:root[data-theme="dark"] .atlas-illustration,
:root[data-theme="dark"] .home-carousel-stage,
:root[data-theme="dark"] .home-carousel-slide,
:root[data-theme="dark"] .figure-stage,
:root[data-theme="dark"] .organ-map,
:root[data-theme="dark"] .tissue-preview-body,
:root[data-theme="dark"] .doc-module img,
:root[data-theme="dark"] .tutorial-module figure {
  border-color: rgba(162, 197, 187, .26);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .035), transparent 42%),
    #0D1715;
}

:root[data-theme="dark"] .atlas-illustration::before {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.32) 48%, rgba(255, 255, 255, 0.86) 100%),
    url("/static/images/home-tumor-microenvironment-background.jpg?v=20260604-1") center center / cover no-repeat;
  opacity: .42;
  mix-blend-mode: multiply;
}

:root[data-theme="dark"] .atlas-illustration {
  border-color: rgba(175, 214, 202, .22);
  background: #F4FAFC;
}

:root[data-theme="dark"] .atlas-illustration img,
:root[data-theme="dark"] .home-carousel-slide img,
:root[data-theme="dark"] img.figure-image,
:root[data-theme="dark"] .organ-map img,
:root[data-theme="dark"] .tissue-preview img,
:root[data-theme="dark"] .doc-module img,
:root[data-theme="dark"] .tutorial-module img {
  border-color: rgba(205, 222, 217, .72);
  border-radius: 6px;
  background: #F2F6F8;
  filter: brightness(.9) contrast(.98) saturate(.96);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .32);
}

:root[data-theme="dark"] .atlas-illustration img {
  background: transparent;
  filter: none;
  mix-blend-mode: multiply;
  opacity: 1;
  box-shadow: none;
}

:root[data-theme="dark"] .tutorial-module figure {
  box-shadow: 0 18px 40px rgba(0, 0, 0, .34);
}

:root[data-theme="dark"] main,
:root[data-theme="dark"] .band {
  background: #0B1513;
}

:root[data-theme="dark"] .band.white {
  border-color: rgba(175, 214, 202, .16);
  background: #101D1A;
}

:root[data-theme="dark"] .organ-atlas {
  background: transparent;
}

:root[data-theme="dark"] .organ-map {
  border-color: rgba(175, 214, 202, .28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)),
    #0B1513;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 18px 44px rgba(0, 0, 0, .38);
}

:root[data-theme="dark"] .organ-map img {
  opacity: .52;
  filter: brightness(.58) contrast(.96) saturate(.76);
  box-shadow: none;
}

:root[data-theme="dark"] .organ-label polyline {
  stroke: rgba(156, 190, 181, .32);
}

:root[data-theme="dark"] .organ-label circle {
  fill: rgba(219, 239, 233, .72);
  stroke: rgba(95, 213, 190, .48);
}

:root[data-theme="dark"] .organ-label rect {
  fill: rgba(13, 27, 24, .84);
  stroke: rgba(164, 207, 196, .34);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .22));
}

:root[data-theme="dark"] .organ-label-name {
  fill: #CDE8E1;
}

:root[data-theme="dark"] .organ-label-cancers {
  fill: #6BD9C7;
}

:root[data-theme="dark"] .organ-label:hover rect,
:root[data-theme="dark"] .organ-label:focus rect,
:root[data-theme="dark"] .organ-label.active rect {
  fill: rgba(16, 38, 34, .94);
  stroke: rgba(139, 183, 226, .78);
}

:root[data-theme="dark"] .organ-label:hover circle,
:root[data-theme="dark"] .organ-label:focus circle,
:root[data-theme="dark"] .organ-label.active circle {
  fill: rgba(214, 246, 240, .9);
  stroke: rgba(139, 183, 226, .9);
}

:root[data-theme="dark"] .organ-detail,
:root[data-theme="dark"] .organ-cancer-card,
:root[data-theme="dark"] .organ-stat-grid span,
:root[data-theme="dark"] .organ-index-button {
  border-color: rgba(175, 214, 202, .2);
  background: rgba(18, 32, 29, .78);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] .organ-detail {
  border-top-color: rgba(139, 183, 226, .62);
  background:
    linear-gradient(180deg, rgba(139, 183, 226, .045), rgba(255, 255, 255, .012)),
    rgba(18, 32, 29, .74);
}

:root[data-theme="dark"] .organ-index {
  border-top-color: rgba(175, 214, 202, .16);
}

:root[data-theme="dark"] .organ-index-button:hover,
:root[data-theme="dark"] .organ-index-button.active {
  border-color: rgba(139, 183, 226, .45);
  border-left-color: rgba(139, 183, 226, .86);
  background: rgba(19, 42, 38, .9);
}

:root[data-theme="dark"] .organ-index-button span {
  color: #8EB4AA;
}

:root[data-theme="dark"] .organ-site-pills button,
:root[data-theme="dark"] .organ-map-hint {
  border-color: rgba(175, 214, 202, .24);
  background: rgba(13, 27, 24, .82);
  color: #B9D3CC;
}

:root[data-theme="dark"] footer {
  background: #08110F;
}

:root[data-theme="dark"] .download-workspace {
  background:
    linear-gradient(180deg, rgba(139, 183, 226, .025), rgba(255, 255, 255, 0) 220px),
    #0D1624;
}

:root[data-theme="dark"] .download-panel {
  border-color: rgba(175, 214, 202, .22);
  background: rgba(13, 27, 24, .78);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

:root[data-theme="dark"] .download-toolbar {
  border-color: rgba(175, 214, 202, .2);
  background: rgba(9, 19, 17, .86);
}

:root[data-theme="dark"] .download-toolbar label {
  color: #9DB8B0;
}

:root[data-theme="dark"] .download-toolbar select,
:root[data-theme="dark"] .download-toolbar input,
:root[data-theme="dark"] .table-controls select {
  border-color: rgba(175, 214, 202, .22);
  background-color: #0B1715;
  color: #D9ECE7;
}

:root[data-theme="dark"] .download-toolbar input::placeholder {
  color: rgba(157, 184, 176, .64);
}

:root[data-theme="dark"] .download-section {
  border-color: rgba(175, 214, 202, .2);
  background: #0B1513;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .3);
}

:root[data-theme="dark"] .download-section-head {
  border-bottom-color: rgba(175, 214, 202, .18);
  background:
    linear-gradient(90deg, rgba(139, 183, 226, .08), rgba(179, 165, 219, .025)),
    #101D1A;
}

:root[data-theme="dark"] .download-section-head h3 {
  color: #DFF6F0;
}

:root[data-theme="dark"] .download-section-icon.image-icon {
  border-color: rgba(175, 214, 202, .28);
  background: #12201D;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] .download-section-icon.image-icon img {
  filter: brightness(.82) contrast(.96) saturate(.9);
}

:root[data-theme="dark"] .download-table .table-wrap {
  border-top: 1px solid rgba(175, 214, 202, .14);
  background: #07110F;
}

:root[data-theme="dark"] .download-table table {
  background: #07110F;
}

:root[data-theme="dark"] .download-table th {
  border-bottom-color: rgba(175, 214, 202, .18);
  background: #263C36;
  color: #D9ECE7;
}

:root[data-theme="dark"] .download-table td {
  border-bottom-color: rgba(175, 214, 202, .1);
  background: rgba(11, 21, 19, .96);
  color: #9DB8B0;
}

:root[data-theme="dark"] .download-table tbody tr:nth-child(even) td {
  background: rgba(14, 27, 24, .96);
}

:root[data-theme="dark"] .download-table .text-link {
  color: #46D6C5;
}

:root[data-theme="dark"] .download-table .table-controls {
  border-top-color: rgba(175, 214, 202, .16);
  background: #091310;
  color: #9DB8B0;
}

:root[data-theme="dark"] .download-table .button {
  border-color: rgba(175, 214, 202, .26);
  background: #10201D;
  color: #D9ECE7;
}

:root[data-theme="dark"] .download-table .button:disabled {
  border-color: rgba(175, 214, 202, .14);
  background: #16211F;
  color: rgba(157, 184, 176, .48);
}

:root[data-theme="dark"] .download-section .badge {
  border-color: rgba(139, 183, 226, .34);
  background: rgba(139, 183, 226, .12);
  color: #B9D8F5;
}

:root[data-theme="dark"] .summary-chart-card {
  border-color: rgba(175, 214, 202, .2);
  background: rgba(13, 27, 24, .82);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] .summary-chart-head h3 {
  color: #DFF6F0;
}

:root[data-theme="dark"] .home-coverage-chart {
  border-color: rgba(175, 214, 202, .16);
  background: #13231F;
}

:root[data-theme="dark"] .docs {
  background: #0B1513;
}

:root[data-theme="dark"] .docs aside,
:root[data-theme="dark"] .docs article,
:root[data-theme="dark"] .contact-card,
:root[data-theme="dark"] .affiliation-card,
:root[data-theme="dark"] .doc-module,
:root[data-theme="dark"] .tutorial-note-card {
  border-color: rgba(175, 214, 202, .2);
  background: rgba(13, 27, 24, .82);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] .docs aside a {
  color: #9DB8B0;
}

:root[data-theme="dark"] .docs aside a:hover {
  background: rgba(139, 183, 226, .1);
}

:root[data-theme="dark"] .docs aside .nav-primary,
:root[data-theme="dark"] .doc-copy h3,
:root[data-theme="dark"] .contact-card h3,
:root[data-theme="dark"] .affiliation-card h3,
:root[data-theme="dark"] .tutorial-note-card h3,
:root[data-theme="dark"] .formula-explain b,
:root[data-theme="dark"] .symbol-note b {
  color: #DFF6F0;
}

:root[data-theme="dark"] .docs aside .nav-secondary,
:root[data-theme="dark"] .help-docs article > p,
:root[data-theme="dark"] .doc-copy p,
:root[data-theme="dark"] .doc-copy ul,
:root[data-theme="dark"] .contact-card p,
:root[data-theme="dark"] .affiliation-card p,
:root[data-theme="dark"] .tutorial-note-card p,
:root[data-theme="dark"] .tutorial-note-card ul,
:root[data-theme="dark"] .references-list,
:root[data-theme="dark"] .formula-explain,
:root[data-theme="dark"] .symbol-note {
  color: #9DB8B0;
}

:root[data-theme="dark"] .contact-card h3 {
  border-bottom-color: rgba(175, 214, 202, .16);
}

:root[data-theme="dark"] .contact-card a {
  color: #74E4D5;
}

:root[data-theme="dark"] .formula-card {
  border-color: rgba(175, 214, 202, .2);
  background:
    linear-gradient(180deg, rgba(139, 183, 226, .05), rgba(255, 255, 255, .01)),
    #0D1715;
  color: #D9ECE7;
}

:root[data-theme="dark"] .latex-formula {
  border-color: rgba(175, 214, 202, .18);
  background: #091310;
  color: #D9ECE7;
}

:root[data-theme="dark"] .doc-module img,
:root[data-theme="dark"] .tutorial-module figure {
  border-color: rgba(175, 214, 202, .2);
  background: #0B1513;
}

:root[data-theme="dark"] .doc-module img,
:root[data-theme="dark"] .tutorial-module img {
  border-color: rgba(175, 214, 202, .22);
  background: #17221F;
  filter: brightness(.76) contrast(.96) saturate(.9);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

:root[data-theme="dark"] .tutorial-module figcaption {
  color: #9DB8B0;
}

:root[data-theme="dark"] .tissue-preview {
  border-color: rgba(175, 214, 202, .2);
  background: #0B1513;
}

:root[data-theme="dark"] .tissue-preview-head {
  border-bottom-color: rgba(175, 214, 202, .16);
  background: #101D1A;
  color: #DFF6F0;
}

:root[data-theme="dark"] .tissue-preview-body {
  background: #07110F;
}

:root[data-theme="dark"] .tissue-preview img {
  border-color: rgba(175, 214, 202, .18);
  background: #07110F;
  filter: brightness(.72) contrast(.96) saturate(.86);
  box-shadow: none;
}

:root[data-theme="dark"] img.figure-image,
:root[data-theme="dark"] .home-carousel-slide img {
  filter: brightness(.9) contrast(.98) saturate(.96);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 760px) {
  .topbar-actions {
    width: auto;
    justify-content: space-between;
  }
  .theme-toggle { min-height: 28px; }
}