:root {
  --topic-hero-ink: #f8fbff;
  --topic-hero-muted: #c8d9e6;
}

.lab-graphic-host {
  --hero-accent-a: #59d4c8;
  --hero-accent-b: #7aa7ff;
  --hero-accent-c: #ffc44d;
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  min-height: 250px !important;
  background:
    radial-gradient(circle at 82% 35%, color-mix(in srgb, var(--hero-accent-a) 22%, transparent), transparent 31%),
    linear-gradient(112deg, #0d2d43 0%, #0d3b52 55%, #0b6470 100%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .13) !important;
}

.lab-graphic-host::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -190px;
  border: 54px solid rgba(255, 255, 255, .045);
  border-radius: 50%;
  pointer-events: none;
}

:is(.lab-graphic-host.lab-topic-layout, .lab-graphic-host .lab-topic-layout) {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr) !important;
  grid-template-areas:
    "copy art"
    "copy progress" !important;
  column-gap: clamp(38px, 5vw, 86px) !important;
  row-gap: 14px !important;
  align-items: center !important;
}

.lab-graphic-host .lab-topic-layout > .lab-topic-copy,
.lab-graphic-host.lab-topic-layout > .lab-topic-copy {
  grid-area: copy !important;
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 760px !important;
  min-width: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
}

.lab-graphic-host .lab-topic-copy .eyebrow {
  width: auto !important;
  margin: 0 0 9px !important;
  text-align: left !important;
}

.lab-graphic-host .lab-topic-copy h1,
.lab-graphic-host .lab-topic-copy .title,
.lab-graphic-host .lab-topic-copy .masthead-title {
  width: auto !important;
  max-width: 16ch !important;
  margin: 0 0 14px !important;
  font-size: clamp(40px, 3.8vw, 62px) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  text-align: left !important;
}

.lab-graphic-host .lab-topic-copy .subtitle,
.lab-graphic-host .lab-topic-copy [class*="hero__subtitle"],
.lab-graphic-host .lab-topic-copy [class*="hero__lead"],
.lab-graphic-host .lab-topic-copy > p:not(.eyebrow):not(.learning-kicker) {
  width: auto !important;
  max-width: 650px !important;
  margin: 0 !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  line-height: 1.48 !important;
  white-space: normal !important;
  text-align: left !important;
}

.lab-graphic-host h1,
.lab-graphic-host .title,
.lab-graphic-host .masthead-title {
  color: var(--topic-hero-ink) !important;
}

.lab-graphic-host .eyebrow {
  color: color-mix(in srgb, var(--hero-accent-a) 74%, white) !important;
}

.lab-graphic-host .subtitle,
.lab-graphic-host [class*="hero__subtitle"],
.lab-graphic-host [class*="hero__lead"] {
  color: var(--topic-hero-muted) !important;
}

.lab-graphic-host .lab-topic-art,
.lab-graphic-host .lab-topic-graphic,
.lab-graphic-host.lab-topic-layout > .lab-topic-art,
.lab-graphic-host.lab-topic-layout > .lab-topic-graphic {
  grid-area: art !important;
  position: relative !important;
  z-index: 3 !important;
  inset: auto !important;
  justify-self: end !important;
  align-self: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 520px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-left: clamp(26px, 3vw, 48px) !important;
  border-left: 1px solid rgba(228, 240, 248, .22) !important;
  transform: none !important;
  pointer-events: none;
}

.lab-graphic-host .lab-topic-progress,
.lab-graphic-host .lab-topic-layout > .hero-progress,
.lab-graphic-host .lab-topic-layout > .iml-hero__progress,
.lab-graphic-host .lab-topic-layout > .dl-hero__progress,
.lab-graphic-host .lab-topic-layout > .el-hero-progress,
.lab-graphic-host.lab-topic-layout > .lab-topic-progress,
.lab-graphic-host.lab-topic-layout > .hero-progress,
.lab-graphic-host.lab-topic-layout > .iml-hero__progress,
.lab-graphic-host.lab-topic-layout > .dl-hero__progress,
.lab-graphic-host.lab-topic-layout > .el-hero-progress {
  grid-area: progress !important;
  position: relative !important;
  inset: auto !important;
  justify-self: end !important;
  align-self: start !important;
  width: min(100%, 180px) !important;
  margin: 0 !important;
  transform: none !important;
}

.lab-graphic-host .lab-topic-progress strong,
.lab-graphic-host.lab-topic-layout > .lab-topic-progress strong {
  text-align: right !important;
}

.lab-topic-graphic svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lab-topic-graphic .diagram-line {
  fill: none;
  stroke: rgba(228, 240, 248, .24);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.lab-topic-graphic .diagram-line.emphasis {
  stroke: var(--hero-accent-a);
  stroke-width: 3;
}

.lab-topic-graphic .diagram-line.secondary { stroke: var(--hero-accent-b); }
.lab-topic-graphic .diagram-line.warm { stroke: var(--hero-accent-c); }
.lab-topic-graphic .diagram-node {
  fill: var(--hero-accent-a);
  stroke: rgba(255, 255, 255, .88);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.lab-topic-graphic .diagram-node.secondary { fill: var(--hero-accent-b); }
.lab-topic-graphic .diagram-node.warm { fill: var(--hero-accent-c); }
.lab-topic-graphic .diagram-panel {
  fill: rgba(255, 255, 255, .055);
  stroke: rgba(255, 255, 255, .22);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}
.lab-topic-graphic .diagram-label {
  fill: rgba(242, 248, 252, .72);
  font: 700 11px/1 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
}

body[data-topic-hero="supervised"] .lab-graphic-host { --hero-accent-a:#56cec3; --hero-accent-b:#81a9ff; --hero-accent-c:#ffc14c; }
body[data-topic-hero="agents"] .lab-graphic-host { --hero-accent-a:#62d0c5; --hero-accent-b:#ae84f3; --hero-accent-c:#ffc14c; }
body[data-topic-hero="reference"] .lab-graphic-host { --hero-accent-a:#ffc14c; --hero-accent-b:#64cabc; --hero-accent-c:#8aa9ff; }
body[data-topic-hero="rhythms"] .lab-graphic-host { --hero-accent-a:#ff8c69; --hero-accent-b:#5cccbc; --hero-accent-c:#ffc14c; }
body[data-topic-hero="visualization"] .lab-graphic-host { --hero-accent-a:#61cdbf; --hero-accent-b:#8aa9ff; --hero-accent-c:#ffc14c; }
body[data-topic-hero="unsupervised"] .lab-graphic-host { --hero-accent-a:#62cdbf; --hero-accent-b:#8aa9ff; --hero-accent-c:#ffc14c; }
body[data-topic-hero="reinforcement"] .lab-graphic-host { --hero-accent-a:#ffc14c; --hero-accent-b:#61c9bd; --hero-accent-c:#ff8066; }
body[data-topic-hero="language"] .lab-graphic-host { --hero-accent-a:#61cdbf; --hero-accent-b:#8aa9ff; --hero-accent-c:#ffc14c; }
body[data-topic-hero="living"] .lab-graphic-host { --hero-accent-a:#65d0c1; --hero-accent-b:#7fa8ff; --hero-accent-c:#ffc14c; }
body[data-topic-hero="nuclear"] .lab-graphic-host { --hero-accent-a:#c58cff; --hero-accent-b:#62cebf; --hero-accent-c:#ffc14c; }
body[data-topic-hero="sql"] .lab-graphic-host { --hero-accent-a:#ff8a62; --hero-accent-b:#65cbc0; --hero-accent-c:#ffc14c; }
body[data-topic-hero="sankey-learn"] .lab-graphic-host { --hero-accent-a:#62cfc4; --hero-accent-b:#86aaff; --hero-accent-c:#c58cff; }

/* Existing diagrams keep their own geometry; this layer gives them the shared contrast. */
body[data-topic-hero="sql"] .sql-relations-art,
body[data-topic-hero="interactive"] .iml-hero__signal,
body[data-topic-hero="deep"] .dl-hero__network,
body[data-topic-hero="infrastructure"] .hero-architecture,
body[data-topic-hero="sankey-learn"] .hero-flow {
  opacity: .94 !important;
  filter: saturate(1.15) brightness(1.1);
}

body[data-topic-hero="sql"] .sql-art-lines,
body[data-topic-hero="sql"] .sql-art-table,
body[data-topic-hero="sql"] .sql-art-table.alternate {
  color: rgba(255,255,255,.64) !important;
  stroke: currentColor !important;
}

/* Sankey gateway: bring the real flow system beside the title instead of leaving a blank stage. */
body[data-topic-hero="sankey-gateway"] .hero {
  min-height: 420px !important;
  padding: 58px clamp(26px, 4vw, 66px) !important;
  align-items: center !important;
  background:
    radial-gradient(circle at 84% 25%, rgba(52, 183, 184, .24), transparent 31%),
    linear-gradient(112deg, #0d2c43 0%, #0d4056 58%, #0b6570 100%) !important;
}
body[data-topic-hero="sankey-gateway"] .hero-copy { max-width: 100% !important; }
body[data-topic-hero="sankey-gateway"] .hero h1,
body[data-topic-hero="sankey-gateway"] .hero .eyebrow { color: #f8fbff !important; }
body[data-topic-hero="sankey-gateway"] .gateway-breathing-space { display: none !important; }
body[data-topic-hero="sankey-gateway"] .movie-card {
  grid-area: art !important;
  width: 100% !important;
  max-width: 660px !important;
  margin: 0 !important;
  align-self: center !important;
  transform: none !important;
  pointer-events: auto !important;
}

@media (max-width: 980px) {
  :is(.lab-graphic-host.lab-topic-layout, .lab-graphic-host .lab-topic-layout) {
    grid-template-columns: minmax(0, 1.05fr) minmax(240px, .95fr) !important;
    column-gap: 28px !important;
  }

  .lab-graphic-host .lab-topic-art,
  .lab-graphic-host .lab-topic-graphic,
  .lab-graphic-host.lab-topic-layout > .lab-topic-art,
  .lab-graphic-host.lab-topic-layout > .lab-topic-graphic { padding-left: 24px !important; }
}

@media (max-width: 760px) {
  .lab-graphic-host { min-height: 310px !important; }
  :is(.lab-graphic-host.lab-topic-layout, .lab-graphic-host .lab-topic-layout) {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "copy"
      "art"
      "progress" !important;
    gap: 22px !important;
  }

  .lab-graphic-host .lab-topic-layout > .lab-topic-copy,
  .lab-graphic-host.lab-topic-layout > .lab-topic-copy { max-width: 100% !important; }

  .lab-graphic-host .lab-topic-copy h1,
  .lab-graphic-host .lab-topic-copy .title,
  .lab-graphic-host .lab-topic-copy .masthead-title {
    max-width: 100% !important;
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  .lab-graphic-host .lab-topic-art,
  .lab-graphic-host .lab-topic-graphic,
  .lab-graphic-host.lab-topic-layout > .lab-topic-art,
  .lab-graphic-host.lab-topic-layout > .lab-topic-graphic {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 430px !important;
    padding: 20px 0 0 !important;
    border-top: 1px solid rgba(228, 240, 248, .22) !important;
    border-left: 0 !important;
    opacity: .88 !important;
  }

  .lab-graphic-host .lab-topic-progress,
  .lab-graphic-host .lab-topic-layout > .hero-progress,
  .lab-graphic-host .lab-topic-layout > .iml-hero__progress,
  .lab-graphic-host .lab-topic-layout > .dl-hero__progress,
  .lab-graphic-host .lab-topic-layout > .el-hero-progress,
  .lab-graphic-host.lab-topic-layout > .lab-topic-progress,
  .lab-graphic-host.lab-topic-layout > .hero-progress,
  .lab-graphic-host.lab-topic-layout > .iml-hero__progress,
  .lab-graphic-host.lab-topic-layout > .dl-hero__progress,
  .lab-graphic-host.lab-topic-layout > .el-hero-progress {
    justify-self: start !important;
  }

  body[data-topic-hero="sankey-gateway"] .hero {
    min-height: 0 !important;
    padding: 44px 22px !important;
  }
  body[data-topic-hero="sankey-gateway"] .hero-copy { max-width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-topic-graphic,
  .lab-topic-graphic * { animation: none !important; transition: none !important; }
}