:root{
  --bioai-graphic-accent:var(--lab-accent,#1a73d9);
  --bioai-graphic-soft:var(--lab-soft,#edf5ff);
  --bioai-graphic-ink:#f8fbff;
  --bioai-graphic-muted:#bfd2df;
  --bioai-graphic-line:rgba(226,240,248,.28);
}

.framework-masthead,
.trimcode-masthead,
.state-machine-masthead,
body.hrs-lab-page .hrs-hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  padding:0!important;
  color:#f8fbff!important;
  background:
    radial-gradient(circle at 82% 38%,color-mix(in srgb,var(--bioai-graphic-accent) 24%,transparent),transparent 31%),
    linear-gradient(112deg,#0d2d43 0%,#0d3b52 55%,#0b6470 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
}

.framework-masthead::after,
.trimcode-masthead::after,
.state-machine-masthead::after,
body.hrs-lab-page .hrs-hero::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%;
  box-shadow:none;
  pointer-events:none;
}

body.hrs-lab-page .hrs-hero::before{
  display:none!important;
}

.bioai-hero-layout{
  box-sizing:border-box;
  width:min(1780px,100%);
  min-height:310px;
  margin:0 auto;
  padding:48px clamp(40px,4vw,72px);
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:clamp(34px,5vw,84px);
  align-items:center;
  text-align:left;
}

body.hrs-lab-page .hrs-hero-inner{
  min-height:310px!important;
  padding:48px 0!important;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr)!important;
  gap:clamp(34px,5vw,84px)!important;
  align-items:center!important;
}

.masthead .bioai-hero-text,
.masthead .bioai-hero-text h1,
.masthead .bioai-hero-text p{
  margin-left:0!important;
  margin-right:0!important;
  text-align:left!important;
}

.masthead .bioai-hero-text h1,
body.hrs-lab-page .bioai-hero-text h1{
  max-width:16ch!important;
  margin:8px 0 14px!important;
  color:#f8fbff!important;
  font-size:clamp(40px,3.8vw,62px)!important;
  line-height:.96!important;
  letter-spacing:-.045em!important;
}

.masthead .bioai-hero-text .eyebrow,
body.hrs-lab-page .bioai-hero-text .hrs-eyebrow{
  color:color-mix(in srgb,var(--bioai-graphic-accent) 70%,white)!important;
}

.masthead .bioai-hero-text .subtitle,
body.hrs-lab-page .bioai-hero-text .hrs-hero-copy{
  max-width:650px!important;
  margin:0!important;
  color:#c8d9e6!important;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;
  font-size:clamp(15px,1.15vw,18px)!important;
  line-height:1.48!important;
  white-space:normal!important;
}

.masthead .bioai-hero-text .subtitle{
  max-width:650px!important;
  white-space:normal!important;
}

.bioai-hero-side{
  display:grid;
  gap:24px;
  align-self:end;
}

.bioai-framework-graphic{
  width:100%;
  min-width:0;
  margin:0;
  padding:10px 0 8px clamp(26px,3vw,48px);
  border:0;
  border-left:1px solid rgba(228,240,248,.22);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  color:var(--bioai-graphic-ink);
  overflow:hidden;
}

.masthead .bioai-framework-graphic{
  --bioai-graphic-ink:#f8fbff;
  --bioai-graphic-muted:#bfd2df;
  background:transparent;
}

.bioai-framework-graphic svg{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:520/226;
}

.bioai-framework-graphic figcaption{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-top:5px;
  color:#bfd2df;
  font:700 .63rem/1.3 Inter,system-ui,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.bioai-svg-link{
  fill:none;
  stroke:var(--bioai-graphic-accent);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.55;
}

.bioai-svg-link--soft{
  stroke:var(--bioai-graphic-line);
  stroke-width:1.5;
  opacity:.9;
}

.bioai-svg-node{
  fill:rgba(255,255,255,.055);
  stroke:var(--bioai-graphic-line);
  stroke-width:1.5;
}

.bioai-svg-node--accent{
  fill:color-mix(in srgb,var(--bioai-graphic-accent) 16%,transparent);
  stroke:var(--bioai-graphic-accent);
  stroke-width:2;
}

.bioai-svg-fill{
  fill:var(--bioai-graphic-accent);
  opacity:.12;
}

.bioai-svg-dot{
  fill:var(--bioai-graphic-accent);
}

.bioai-svg-label{
  fill:#f2f8fc;
  font:700 12px/1 Inter,system-ui,sans-serif;
  letter-spacing:.04em;
}

.bioai-svg-label--small{
  fill:#bfd2df;
  font-size:9px;
  letter-spacing:.09em;
}

.bioai-svg-label--accent{
  fill:var(--bioai-graphic-accent);
}

.lab-stage-graphic{
  margin:18px 0 16px;
  padding:14px 14px 10px;
  border:1px solid var(--lab-line);
  border-radius:18px;
  background:linear-gradient(135deg,#fff,var(--lab-soft));
}

.lab-stage-graphic svg{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:720/250;
}

.lab-stage-graphic figcaption{
  margin:7px 2px 0;
  color:#60758a;
  font:650 .72rem/1.4 Inter,system-ui,sans-serif;
}

.lab-stage-link{
  fill:none;
  stroke:#c7d5e1;
  stroke-width:3;
  stroke-linecap:round;
  transition:stroke .18s ease,stroke-width .18s ease,opacity .18s ease;
}

.lab-stage-node rect{
  fill:#fff;
  stroke:#c7d5e1;
  stroke-width:1.5;
  transition:fill .18s ease,stroke .18s ease;
}

.lab-stage-node text{
  fill:#435a70;
  font:750 12px/1 Inter,system-ui,sans-serif;
  letter-spacing:.035em;
  pointer-events:none;
}

.lab-stage-node.is-active rect{
  fill:var(--lab-soft);
  stroke:var(--lab-accent);
  stroke-width:2.5;
}

.lab-stage-node.is-active text{
  fill:var(--lab-accent);
}

.lab-stage-link.is-active{
  stroke:var(--lab-accent);
  stroke-width:4;
}

.lab-stage-output rect{
  fill:var(--lab-accent);
  stroke:var(--lab-accent);
}

.lab-stage-output text{
  fill:#fff;
  font:800 12px/1 Inter,system-ui,sans-serif;
  letter-spacing:.08em;
}

.lab-stage-label{
  fill:#60758a;
  font:800 10px/1 Inter,system-ui,sans-serif;
  letter-spacing:.12em;
}

.lab-stage-graphic-marker{
  fill:var(--lab-accent);
  opacity:.15;
}

@media(max-width:1050px){
  .bioai-hero-layout{grid-template-columns:1fr;gap:28px;padding-block:42px}
  body.hrs-lab-page .hrs-hero-inner{grid-template-columns:1fr!important;gap:28px!important;padding-block:42px!important}
  .bioai-framework-graphic{max-width:720px;margin-inline:auto}
  .masthead .bioai-hero-text,
  .masthead .bioai-hero-text h1,
  .masthead .bioai-hero-text p{text-align:center!important;margin-inline:auto!important}
  body.hrs-lab-page .bioai-hero-text{max-width:760px}
}

@media(max-width:620px){
  .bioai-hero-layout{padding:38px 24px}
  body.hrs-lab-page .hrs-hero-inner{padding:38px 0!important}
  .bioai-framework-graphic{padding:22px 0 6px;border-left:0;border-top:1px solid rgba(228,240,248,.22)}
  .bioai-framework-graphic figcaption{font-size:.56rem}
  .lab-stage-graphic{padding:9px 9px 7px}
  .lab-stage-node text{font-size:10px}
}

@media(prefers-reduced-motion:reduce){
  .lab-stage-link,.lab-stage-node rect{transition:none}
}