.lab003-page {
  background:#f8f8f6;
}

.lab003-hero .lab-overview {
  max-width:720px;
}

.lab003-stage-list {
  list-style:none;
  margin:18px 0 0;
  padding:0;
  min-height:0;
}

.lab003-stage-list li {
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(190px,.58fr);
  gap:clamp(20px,2vw,34px);
  height:100%;
  min-height:0;
  align-items:center;
  animation:lab003StageIn .34s ease both;
}

.lab003-stage-list figure {
  margin:0;
  height:100%;
  min-height:0;
  overflow:hidden;
  background:#efefed;
}

.lab003-secret-figure {
  aspect-ratio:auto;
}

.lab003-secret-demo {
  position:relative;
  width:100%;
  height:100%;
  padding:7% 8%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8%;
  overflow:hidden;
  background:#f6f6f4;
  color:rgba(20,20,20,.62);
  font-family:Monaco,Menlo,"SFMono-Regular",Consolas,monospace;
}

.lab003-secret-column { min-width:0; }
.lab003-secret-column em {
  display:block;
  margin-bottom:13px;
  color:rgba(20,20,20,.30);
  font-size:6px;
  font-style:normal;
  letter-spacing:.13em;
}
.lab003-secret-column > span { display:block; }

.lab003-secret-demo pre {
  display:inline;
  margin:0;
  white-space:pre-wrap;
  font:8px/1.65 Monaco,Menlo,"SFMono-Regular",Consolas,monospace;
  letter-spacing:.04em;
}

.lab003-secret-cursor {
  font-size:8px;
  animation:lab003SecretBlink .9s steps(1,end) infinite;
}

.lab003-secret-demo small {
  position:absolute;
  right:8%;
  bottom:7%;
  font-size:7px;
  letter-spacing:.12em;
  color:rgba(20,20,20,.36);
}

.lab003-secret-demo small i {
  display:inline-block;
  width:4px;
  height:4px;
  margin-right:7px;
  border-radius:50%;
  background:currentColor;
  animation:lab003SecretBlink 1.15s steps(2,end) infinite;
}

@keyframes lab003SecretBlink { 50% { opacity:0; } }

.lab003-stage-list img {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  filter:grayscale(1);
  opacity:.88;
  transition:opacity .5s ease, filter .5s ease;
}

.lab003-stage-list li:hover img {
  opacity:1;
  filter:grayscale(.82);
}

.lab003-stage-list div {
  padding-top:2px;
}

.lab003-stage-list span,
.lab003-system-note pre {
  font-size:9px;
  line-height:1.7;
  letter-spacing:.12em;
  color:rgba(20,20,20,.48);
}

.lab003-stage-list h3 {
  margin:11px 0 14px;
  font-size:17px;
  font-weight:400;
  letter-spacing:.055em;
}

.lab003-stage-list p,
.lab003-system-note p {
  margin:0;
  font-size:10px;
  line-height:1.75;
  color:rgba(20,20,20,.68);
}

.lab003-system-note pre {
  margin:14px 0 0;
  padding:0;
  background:transparent;
  border:0;
  color:rgba(20,20,20,.66);
}

.lab003-sequence-head,
.lab003-step-nav {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}

.lab003-sequence-head h2 {
  margin:0;
}

.lab003-stage-tabs {
  display:flex;
  align-items:center;
  gap:12px;
}

.lab003-stage-tabs button,
.lab003-step-nav button {
  appearance:none;
  border:0;
  border-bottom:1px solid transparent;
  padding:4px 1px;
  background:transparent;
  color:rgba(20,20,20,.34);
  font:9px/1.2 Monaco,Menlo,"SFMono-Regular",Consolas,monospace;
  letter-spacing:.13em;
  cursor:pointer;
}

.lab003-stage-tabs button:hover,
.lab003-stage-tabs button.is-active,
.lab003-step-nav button:hover {
  color:rgba(20,20,20,.86);
  border-bottom-color:currentColor;
}

.lab003-step-nav {
  padding-top:12px;
  color:rgba(20,20,20,.45);
  font-size:8px;
  letter-spacing:.13em;
}

@keyframes lab003StageIn {
  from { opacity:0; transform:translateY(5px); }
  to { opacity:1; transform:none; }
}

@media (min-width:1000px) and (min-height:680px) {
  html,
  body.lab003-page {
    height:100%;
    overflow:hidden;
  }

  .lab003-page .lab-detail-shell {
    height:100vh;
    min-height:0;
  }

  .lab003-page .lab-detail-content {
    min-height:0;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(330px,.78fr) minmax(560px,1.22fr);
    grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:
      "hero sequence"
      "footer footer";
    column-gap:clamp(46px,6vw,108px);
    row-gap:14px;
  }

  .lab003-page .lab003-hero {
    grid-area:hero;
    min-height:0;
    overflow:hidden;
  }

  .lab003-page .lab003-sequence {
    grid-area:sequence;
    min-height:0;
    overflow:hidden;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
  }

  .lab003-page .lab003-stage-list {
    height:100%;
    overflow:hidden;
  }

  .lab003-page .lab-detail-footer {
    grid-area:footer;
    margin:0;
    padding-top:10px;
  }

  .lab003-page .lab-detail-title {
    font-size:clamp(24px,2.15vw,38px);
  }

  .lab003-page .lab-detail-meta {
    margin-top:clamp(28px,4.2vh,52px);
  }

  .lab003-page .lab-overview {
    margin-top:clamp(28px,4vh,48px);
  }

  .lab003-page .lab003-system-note {
    margin-top:clamp(22px,3vh,36px);
  }
}

@media (max-width:760px) {
  .lab003-stage-list {
    gap:40px;
  }
  .lab003-stage-list li {
    grid-template-columns:1fr;
    gap:16px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .lab003-stage-list img {
    transition:none;
  }
  .lab003-secret-cursor,.lab003-secret-demo small i {
    animation:none;
  }
}