.lab-step-link { display: block; border-radius: 12px; }
.lab-step-link:hover { color: #a9f3ff; }
.lab-step-link:focus-visible { outline: 2px solid #b5f4ff; outline-offset: 3px; }
.lab-journey-notes { padding-block: 32px; display: grid; gap: 14px; }
.lab-journey-notes section { padding: 18px 22px; background: #123451; border: 1px solid #5a9fc4; border-radius: 14px; scroll-margin-top: 90px; }
.lab-journey-notes h2 { margin: 0; font-size: 18px; }
.lab-journey-notes p { margin: 4px 0 0; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lab-header {
  background: linear-gradient(105deg,#174368,#276c9d 50%,#123650);
  border-bottom: 1px solid #a6eaff;
  box-shadow: 0 0 20px #52c9ff66;
}
.lab-header .header__inner { height: 64px; gap: clamp(8px,1.6vw,25px); }
.lab-header .nav { gap: clamp(8px,1.4vw,22px); }
.lab-header .nav>a { color: #edfaff; font-size: 11px; }
.lab-header .header__actions .nav-cta {
  background: linear-gradient(#237eac,#0d3758);
  border: 1px solid #9ceaff;
  border-radius: 32px;
  min-height: 34px;
  color: #fff;
  box-shadow: inset 0 0 10px #49cfff70,0 0 12px #42bfff40;
}
.ai-lab-hero {
  color: #eef9ff;
  background: linear-gradient(90deg,#071c35a0,transparent 27% 73%,#071c353d), linear-gradient(180deg,#06182d77,transparent 33% 66%,#071c3588),
    #0c2542 url("./assets/ai-lab/studio.jpg") center / cover no-repeat;
  overflow: hidden;
}
.lab-stage {
  position: relative;
  isolation: isolate;
  width: min(1672px,100%);
  height: clamp(530px,39vw,660px);
  margin-inline: auto;
}
.lab-intro {
  position: absolute; left: 16.5%; top: 15%;
  font: 500 clamp(12px,1.25vw,22px)/1.25 system-ui,sans-serif;
  text-shadow: 0 2px 8px #092d50;
}
.lab-intro b { color: #80e5ff; font-size: 1.45em; font-style: italic; }
.lab-intro h1 {
  margin: 0; font-size: clamp(34px,4vw,68px); font-style: italic; line-height: 1;
  background: linear-gradient(#fff,#a7c9e2); background-clip: text; color: transparent;
  text-shadow: none;
}
.lab-intro p { margin: .55em 0 0 1.2em; }
.lab-dido {
  position: absolute; left: 1.5%; bottom: -4%; width: 20%; height: 77%;
  object-fit: contain; object-position: left bottom;
  filter: drop-shadow(0 0 9px #42d8ff);
}
.lab-doctor {
  position: absolute; right: 3%; bottom: calc(4% + 88px); width: clamp(290px,36%,590px); height: min(65%,360px); margin: 0;
  overflow: hidden; mask-image: linear-gradient(#000 67%,#0009 85%,transparent 100%);
  filter: drop-shadow(0 0 5px #65e6ff) drop-shadow(0 0 13px #369bd5);
}
.lab-doctor img {
  width: 100%; height: auto; display: block;
}
.lab-center {
  position: absolute; inset: 9% 32% 23%;
  display: grid; grid-template-rows: auto minmax(0,1fr);
  justify-items: center; gap: clamp(8px,1vw,16px);
}
.lab-center::before,.lab-center::after {
  content: ""; position: absolute; inset-block: 7% 4%; width: 19%;
  border-radius: 50%; pointer-events: none;
  filter: drop-shadow(0 0 6px #48d9ff) drop-shadow(0 0 12px #168bdd);
}
.lab-center::before,.lab-center::after {
  --rail-edge: linear-gradient(180deg,#93c4d8 0%,#142a40 22%,#dbc0a0 46%,#7193a8 65%,#10283e 82%,#7ad6fa 100%);
  background: var(--rail-edge);
  mask-image: radial-gradient(ellipse closest-side,#0000 75%,#000 83% 97%,#0000 100%);
  filter: drop-shadow(0 0 5px #6ed7f8);
}
.lab-center::before { left: -3%; clip-path: inset(0 51% 0 0); }
.lab-center::after { right: -3%; clip-path: inset(0 0 0 51%); }
.lab-motion {
  position: relative; width: min(74%,340px); display: grid; place-items: center;
}
.lab-motion video,.lab-motion__still {
  grid-area: 1 / 1;
  display: block; width: 100%; height: clamp(94px,9vw,150px); object-fit: contain;
}
.lab-motion video { visibility: hidden; }
.lab-motion.is-playing video { visibility: visible; }
.lab-motion.is-playing .lab-motion__still { visibility: hidden; }
.lab-motion__play {
  position: absolute; inset-block-end: 0; z-index: 1;
  padding: 3px 10px; border: 1px solid #a6eaff; border-radius: 16px;
  background: #123650; color: white; font-size: 11px;
}
.lab-hologram {
  width: min(76%,430px); height: 100%; min-height: 0;
  display: grid; grid-template-rows: minmax(0,1fr) auto; align-items: end;
}
.lab-tooth {
  position: relative; z-index: 1; width: 68%; height: 100%; min-height: 0; object-fit: contain; object-position: center bottom; margin: 0 auto -2%;
  filter: drop-shadow(0 0 8px #56d9ff);
}
.lab-step-art::after {
  border: 2px solid #a6f4ff; border-radius: 50%;
  background: repeating-radial-gradient(ellipse,#134e7d 0 14%,#75e9ff 16%,#125482 18% 25%);
  box-shadow: 0 5px 0 #a4c8dc,0 11px 0 #183b58,0 0 18px #48daff;
}
.lab-platform { width: 100%; height: auto; filter: drop-shadow(0 3px 8px #4ad6ff); }
.lab-cards {
  position: absolute; bottom: 4%; left: 19%; right: 12%;
  display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px;
}
.lab-cards a {
  display: grid; grid-template-columns: minmax(32px,28%) 1fr auto; align-items: center; gap: 8px;
  min-height: 70px; padding: 7px 10px; line-height: 1.2;
  border: 1px solid #b2edff; border-radius: 16px;
  background: linear-gradient(145deg,#a9e1f779,#226594e6 32%,#113b60e6 74%,#8bceed9c);
  box-shadow: inset 0 0 10px #b0e8ff91,0 0 15px #71ddff4a;
  color: white;
}
.lab-cards a:hover { background-color: #63b5dd; }
.lab-cards b { font: 650 clamp(12px,1.32vw,21px)/1.1 system-ui,sans-serif; }
.lab-cards small,.lab-journey small { display: block; margin-top: 4px; font-size: clamp(10px,1vw,14px); }
.lab-cards svg { height: auto; filter: drop-shadow(0 0 5px #69e7ff); }
.lab-cards i { font: 24px/1 system-ui,sans-serif; }
.lab-journey {
  padding: 16px 5% 26px; text-align: center; color: #effaff;
  border-top: 2px solid #9ee8ff;
  border-radius: 48% 48% 0 0 / 17% 17% 0 0;
  background: radial-gradient(ellipse at 50% 100%,#4b91bf,#164971 70%,#0a294a);
  box-shadow: 0 -5px 25px #6cd8ff80;
}
.lab-journey h2 { margin: 0 0 10px; font: 650 clamp(18px,2vw,31px)/1.3 system-ui,sans-serif; }
.lab-journey h2 em { color: #82e7ff; font-style: normal; }
.lab-journey__track { position: relative; max-width: 1350px; margin: auto; }
.lab-journey__curve { position: absolute; width: 94%; height: 60px; left: 3%; top: 33px; overflow: visible; }
.lab-journey__curve path { fill: none; stroke: #9af1ff; stroke-width: 3px; filter: drop-shadow(0 0 5px #03baff); }
.lab-journey ol { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.lab-step-art { position: relative; width: min(100%,138px); margin: auto auto 9px; }
.lab-step-art svg { position: relative; z-index: 1; height: auto; filter: drop-shadow(0 0 5px #40d6ff); }
.lab-step-art::after { content: ""; position: absolute; left: 5%; right: 5%; bottom: 4%; height: 22%; }
.lab-step-no { display: inline-grid; place-items: center; width: 23px; height: 23px; border: 1px solid #97ecff; border-radius: 50%; background: #11577e; }
.lab-journey li { font: 500 clamp(11px,1.15vw,17px)/1.4 system-ui,sans-serif; }
@media (max-width: 930px) { .lab-header .nav { background: #143e5e; } }
@media (max-width: 700px) {
  .lab-header .header__inner { height: 56px; }
  .lab-stage { height: auto; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.65fr) minmax(0,1fr); align-items: end; padding: 18px 12px; gap: 8px; }
  .lab-intro,.lab-dido,.lab-doctor,.lab-center,.lab-cards { position: relative; inset: auto; transform: none; width: 100%; }
  .lab-intro { grid-area: 1/1/2/4; text-align: left; }
  .lab-intro p { margin-inline-start: 0; }
  .lab-center { grid-area: 2/2/4/3; gap: 5px; grid-template-rows: auto auto; }
  .lab-motion video,.lab-motion__still { height: auto; aspect-ratio: 16/9; }
  .lab-hologram { width: 78%; height: auto; }
  .lab-tooth { height: auto; }
  .lab-dido { grid-area: 3/1; height: auto; }
  .lab-doctor { grid-area: 2/3/4/4; height: auto; aspect-ratio: 1.04; width: 154%; justify-self: end; align-self: end; }
  .lab-cards { grid-area: 4/1/5/4; gap: 5px; }
  .lab-cards a { display: grid; grid-template-columns: 1fr; text-align: center; gap: 4px; min-height: 86px; padding: 6px 4px; border-radius: 10px; }
  .lab-cards svg { width: 35px; margin: auto; }
  .lab-cards i { display: none; }
  .lab-journey { border-radius: 26px 26px 0 0; }
  .lab-journey ol { grid-template-columns: 1fr; gap: 8px; max-width: 340px; margin: auto; }
  .lab-step-link { display: grid; grid-template-columns: 64px 1fr; gap: 8px; align-items: center; text-align: left; }
  .lab-step-link > div:last-child { background: #164d74; border: 1px solid #6fc5e8; border-radius: 24px; padding: 7px 12px; }
  .lab-step-art { margin: 0; }
  .lab-journey__curve { top: 3%; bottom: 3%; left: 10%; width: 0; height: auto; border-left: 2px solid #91f0ff; filter: drop-shadow(0 0 5px #06c3ff); }
}
/* The studio's existing panels and robotic arm remain visible behind the foreground. */
.lab-stage::before,.lab-stage::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1; left: 50%;
  transform: translateX(-50%);
}
.lab-stage::before {
  top: -5%; width: min(44%,700px); height: clamp(62px,9vw,143px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    #c7f9ff 0%,#5cdcff 14%,#126095 27%,#0a2540 39%,#9bccdf 43%,
    #284b69 47%,#081c34 54%,#a7c4d4 59%,#26425c 64%,#091a30 70%,transparent 72%);
  box-shadow: inset 0 8px 16px #020c1d8c,0 14px 24px #030d217a;
}
.lab-stage::after {
  top: 4%; width: 36%; height: 72%;
  background: radial-gradient(ellipse at 50% 0%,#77e5ff67, #2ba5f129 35%,transparent 72%);
}
@media (max-width: 700px) {
  .lab-stage::before { width: 57%; height: 64px; top: 0; }
  .lab-stage::after { width: 62%; }
  .lab-center { min-width: 0; }
  .lab-center::before,.lab-center::after { width: 23%; }
}