.engineering-lab {
  --lab-ink: #07101f;
  --lab-line: #253951;
  --lab-muted: #abc0d8;
  --lab-cyan: #91e8fb;
  position: relative;
  padding: clamp(76px, 8vw, 124px) 0 48px;
  color: #edf5ff;
  background: #060f1e;
  border-top: 1px solid #24405a;
  scroll-margin-top: 76px;
}
.lab-intro { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 72px; margin-bottom: 52px; }
.lab-intro h2 { margin: 0; font-size: clamp(42px, 5.3vw, 76px); font-weight: 500; line-height: 1.02; letter-spacing: -.035em; }
.lab-intro p { max-width: 38ch; margin: 0; color: #d1e0f2; font-size: 20px; line-height: 1.6; }
.lab-intro .lab-disclosure { margin-top: 22px; color: var(--lab-cyan); font-size: 12px; }
.lab-scenario-header { padding-block: 22px; border-block: 1px solid var(--lab-line); }
.lab-scenario-header h3 { margin: 0; color: #b4efff; font-size: clamp(26px, 2.5vw, 34px); font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.lab-scenario-description { max-width: 80ch; min-height: 3.2em; margin: 22px 0 30px; color: var(--lab-muted); font-size: 14px; }
.lab-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 280px; border-block: 1px solid var(--lab-line); }
.lab-system { min-width: 0; background: radial-gradient(ellipse at 55% 45%, #102a42 0%, #091728 50%, #07101f 100%); }
.lab-canvas { position: relative; height: 390px; overflow: hidden; }
.lab-canvas::before { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#92c9ff05 1px, transparent 1px), linear-gradient(90deg, #92c9ff05 1px, transparent 1px); background-size: 32px 32px; content: ""; }
.lab-routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lab-routes path { fill: none; stroke: #29435b; stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: stroke 160ms, opacity 160ms; }
.lab-routes path.is-route { stroke: #78cfe8; stroke-width: 2; }
.lab-routes path.is-traversed { stroke: #b2f3ff; }
.lab-routes path.is-travelling { stroke: #b2f3ff; stroke-width: 3; stroke-dasharray: 5 12; }
.lab-routes--mobile { display: none; }
.lab-node { position: absolute; z-index: 2; left: var(--x); top: var(--y); display: flex; width: 110px; min-height: 90px; padding: 4px; transform: translate(-50%, calc(-50% + 21px)); align-items: center; flex-direction: column; color: #a3b9d0; text-align: center; }
.lab-node__symbol { display: grid; width: 40px; height: 40px; place-items: center; margin-bottom: 9px; border: 1px solid #49647e; border-radius: 10px; background: #0c1b2d; color: #b5cfe5; font-size: 11px; font-variant-numeric: tabular-nums; }
.lab-node strong { font-size: 11px; font-weight: 500; line-height: 1.4; }
.lab-node small { margin-top: 3px; color: #abc0d8; font-size: 10px; white-space: nowrap; }
.lab-node.is-route { color: #e7f7ff; }
.lab-node.is-route .lab-node__symbol { border-color: #70b2d4; color: #b4efff; }
.lab-node.is-current .lab-node__symbol { border-color: #b4efff; color: #041727; background: #b4efff; }
.lab-node.is-current .lab-node__symbol { box-shadow: 0 7px 30px #44b9e63b; }
.lab-diagram-caption { display: flex; justify-content: space-between; gap: 15px; padding: 15px 20px; color: var(--lab-muted); font-size: 11px; }
.lab-legend { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.lab-legend i { width: 20px; height: 2px; background: var(--lab-cyan); }
.lab-inspector { padding: 28px 25px; border-left: 1px solid var(--lab-line); background: #0b192a; }
.lab-inspector__header { display: flex; justify-content: space-between; color: #abc0d8; font-size: 11px; }
.lab-inspector h3 { margin: 27px 0 14px; font-size: 27px; font-weight: 500; letter-spacing: -.025em; line-height: 1.15; }
.lab-inspector > p { color: #c0d1e6; font-size: 13px; line-height: 1.65; }
.lab-inspector dl { margin: 25px 0; font-size: 11px; }
.lab-inspector dl > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--lab-line); }
.lab-inspector dt { color: #a7bed6; }
.lab-inspector dd { min-width: 0; margin: 0; color: #e4f2ff; overflow-wrap: anywhere; }
.lab-inspector code { font-size: 10px; }
.lab-inspector .lab-inspector__note { margin: 0; color: #a9bfd5; font-size: 11px; }
.lab-result { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; padding-block: 38px; border-bottom: 1px solid var(--lab-line); }
.lab-status { display: inline-block; color: var(--lab-cyan); font-size: 12px; }
.lab-outcome h3 { max-width: 24ch; margin: 14px 0 12px; font-size: 31px; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.lab-outcome p { max-width: 43ch; margin: 0; color: var(--lab-muted); font-size: 14px; }
.lab-trace { min-width: 0; }
.lab-trace h3 { display: flex; justify-content: space-between; margin: 0 0 17px; font-size: 13px; font-weight: 500; }
.lab-trace h3 span { color: #a7bed6; font-size: 11px; }
.lab-trace ol { min-height: 280px; margin: 0; padding: 0; list-style: none; }
.lab-trace li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid #1e3148; color: #dceaff; font-size: 11px; }
.lab-trace li > span { color: #a9bfd5; }
.lab-trace code { color: #bcf0fd; font-size: 11px; overflow-wrap: anywhere; }
.lab-trace .lab-trace-empty { display: block; color: #a9bfd5; }
.lab-footer { display: flex; justify-content: space-between; gap: 24px; padding-top: 29px; }
.lab-footer p { margin: 0; font-size: 14px; line-height: 1.9; }
.lab-footer a { color: #b5eeff; text-underline-offset: 5px; }
.lab-footer p:last-child { color: #bacde4; text-align: right; font-size: 12px; }
.lab-footer p:last-child span { color: #a7bed6; }
.lab-noscript { margin-top: 30px; color: #d1e0f2; font-size: 13px; }
.lab-scenario-summary { margin: 0; }
.lab-scenario-summary > div { padding: 24px 0; border-bottom: 1px solid var(--lab-line); }
.lab-scenario-summary dt { margin-bottom: 8px; color: #b4efff; font-size: 20px; font-weight: 500; }
.lab-scenario-summary dd { max-width: 75ch; margin: 0; color: var(--lab-muted); font-size: 15px; }
.engineering-lab.is-animated .lab-scenario-summary { display: none; }
@keyframes lab-route-flow { to { stroke-dashoffset: -34; } }
@media (prefers-reduced-motion: no-preference) {
  .engineering-lab.is-visible.is-running .lab-routes path.is-travelling { animation: lab-route-flow 800ms linear infinite; }
}
@media (max-width: 1040px) {
  .lab-workspace { grid-template-columns: minmax(0, 1fr); }
  .lab-inspector { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; border-left: 0; border-top: 1px solid var(--lab-line); }
  .lab-inspector__header, .lab-inspector__note { grid-column: 1/-1; }
  .lab-inspector h3 { margin-top: 20px; }
  .lab-inspector > p:not(.lab-inspector__note) { grid-column: 1; margin-top: 0; }
  .lab-inspector dl { grid-column: 2; grid-row: 2/4; margin-top: 18px; }
  .lab-intro { gap: 38px; }
  .lab-result { gap: 35px; }
}
@media (max-width: 760px) {
  .lab-canvas { height: 440px; }
  .lab-routes--desktop { display: none; }
  .lab-routes--mobile { display: block; }
  .lab-node { width: min(100px, 29%); }
  .lab-node[data-lab-node="intake"] { left: 16.667%; top: 20%; }
  .lab-node[data-lab-node="ai"] { left: 50%; top: 20%; }
  .lab-node[data-lab-node="validation"] { left: 83.333%; top: 20%; }
  .lab-node[data-lab-node="rules"] { left: 83.333%; top: 50%; }
  .lab-node[data-lab-node="review"] { left: 50%; top: 50%; }
  .lab-node[data-lab-node="decision"] { left: 16.667%; top: 50%; }
  .lab-node[data-lab-node="audit"] { left: 50%; top: 80%; }
}
@media (max-width: 600px) {
  .engineering-lab { padding-top: 64px; }
  .lab-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .lab-intro h2 { font-size: 48px; }
  .lab-intro p { font-size: 17px; }
  .lab-intro .lab-disclosure { margin-top: 16px; }
  .lab-scenario-description { min-height: 6.4em; }
  .lab-node strong { font-size: 11px; }
  .lab-node small { font-size: 9px; }
  .lab-diagram-caption { padding-inline: 10px; font-size: 10px; }
  .lab-inspector { display: block; padding: 24px; }
  .lab-inspector h3 { margin-top: 22px; }
  .lab-inspector dl { margin-top: 22px; }
  .lab-result { grid-template-columns: 1fr; gap: 30px; }
  .lab-trace li { gap: 6px; font-size: 10px; }
  .lab-trace code { font-size: 10px; }
  .lab-footer { flex-direction: column; }
  .lab-footer p:last-child { text-align: left; }
}