.lab {
  --cw0: var(--cw, 100vw);
  --u-coll: max(var(--gutter), (var(--cw0) - var(--maxw)) / 2 + var(--gutter));
  --u-colw: clamp(18rem, var(--cw0) * 0.555 - var(--u-coll) - 2.25rem, 34rem);
  --hw: clamp(250px, 42svh, 420px);
  --lab-mint: #95f2ba;
}
.lab-side {
  --u-coll: var(--gutter);
  --u-colw: calc(var(--cw0) * 0.555 - var(--gutter) - 1.25rem);
}
.lab .under-track {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.lab .under {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  margin-top: 0;
  background: var(--u-satin) url(assets/grain-r1.png);
}
.lab .u-pier {
  display: none;
}
.lab .lab-win {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.lab .lab-pic {
  position: absolute;
  left: 0;
  top: 0;
  width: 2048px;
  height: 3390px;
  transform-origin: 0 0;
}
.lab-js .lab-pic {
  will-change: transform;
}
.lab-js:not(.lab-ready) .lab-ov,
.lab-js:not(.lab-ready) .lab-labels {
  visibility: hidden;
}
.lab .lab-pic > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 2048px;
  height: 3390px;
  display: block;
}
.lab .lab-ov {
  position: absolute;
  left: 0;
  top: 0;
  width: 2048px;
  height: 3390px;
  overflow: visible;
}
.lab .lab-pic::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80px;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(7, 10, 14, 0),
      rgb(7, 10, 14));
}
.lab-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lab-wide .lab-shade,
.lab-side .lab-shade {
  background:
    radial-gradient(
      ellipse calc(var(--u-colw) * 0.95) 36vh at calc(var(--u-coll) + var(--u-colw) * 0.42) var(--shade-y, 42%),
      rgba(7, 10, 14, var(--shade-a, 0.58)),
      rgba(7, 10, 14, 0) 100%),
    linear-gradient(
      90deg,
      rgba(7, 10, 14, var(--shade-l, 0.36)),
      rgba(7, 10, 14, 0) calc(var(--u-coll) + var(--u-colw) + 2rem)),
    var(--lab-top);
}
.lab {
  --lab-top:
    linear-gradient(
      180deg,
      rgba(7, 10, 14, 0.72),
      rgba(7, 10, 14, 0.5) var(--hh, 84px),
      rgba(7, 10, 14, 0) calc(var(--hh, 84px) + 2.5rem));
}
.lab-small .lab-shade {
  background: var(--lab-top);
}
.lab-wide .descent,
.lab-side .descent {
  --color-text-secondary: #c6d6cd;
}
.lab-wide #northstar > .wrap,
.lab-side #northstar > .wrap {
  position: relative;
  isolation: isolate;
}
.lab-wide #northstar > .wrap::before,
.lab-side #northstar > .wrap::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: -2rem;
  bottom: -2rem;
  left: calc(var(--u-coll) - 3.5rem);
  width: calc(var(--u-colw) + 7rem);
  background:
    linear-gradient(
      90deg,
      rgba(7, 10, 14, 0),
      rgba(7, 10, 14, 0.5) 3.5rem,
      rgba(7, 10, 14, 0.5) calc(100% - 3.5rem),
      rgba(7, 10, 14, 0));
  -webkit-mask-image:
    linear-gradient(
      180deg,
      transparent,
      #000 10rem,
      #000 calc(100% - 4rem),
      transparent);
  mask-image:
    linear-gradient(
      180deg,
      transparent,
      #000 10rem,
      #000 calc(100% - 4rem),
      transparent);
}
.lab-small .under-track {
  z-index: 4;
}
.lab-small .under {
  height: var(--h0, 100svh);
  clip-path: inset(0 0 var(--cut, 0px) 0);
  pointer-events: none;
}
.lab-small .lab-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24px;
  pointer-events: none;
  transform: translateY(calc(var(--h0, 100svh) - var(--cut, 0px) - 24px));
  background:
    linear-gradient(
      180deg,
      rgba(7, 10, 14, 0),
      rgba(7, 10, 14, 0.55));
  box-shadow: inset 0 -1px 0 rgba(244, 250, 246, 0.12);
}
.lab-wide .lab-edge,
.lab-side .lab-edge {
  display: none;
}
.lab-fx {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}
.lab-fx-dodge {
  mix-blend-mode: color-dodge;
}
.lab-fx-glow {
  mix-blend-mode: screen;
}
.lab-js:not(.lab-ready) .lab-fx {
  visibility: hidden;
}
.lab-js:not(.lab-noflow) .lab-still {
  display: none;
}
.lab-st-halo {
  fill: var(--lab-mint);
  opacity: 0.2;
}
.lab-st-glow {
  fill: var(--lab-mint);
  opacity: 0.34;
}
.lab-st-core {
  fill: var(--lab-mint);
  opacity: 0.82;
}
.lab-st-hot {
  fill: #d4ffe6;
  opacity: 0.8;
}
.lab-st-seam {
  fill: none;
  stroke-width: 1;
}
.lab-st-pt {
  fill: #f2fff8;
}
.lab-st-ptg {
  fill: var(--lab-mint);
  opacity: 0.9;
}
.lab-st-lglow {
  fill: none;
  stroke: var(--lab-mint);
  stroke-width: 3.2;
  opacity: 0.35;
}
.lab-st-lcore {
  fill: none;
  stroke: var(--lab-mint);
  stroke-width: 1.5;
  opacity: 0.85;
}
.lab-st-rims {
  fill: none;
  stroke: #d4ffe6;
  stroke-width: 0.9;
  opacity: 0.45;
  stroke-linecap: round;
}
.lab-st-act {
  fill: none;
  stroke: #ecf4f0;
  stroke-width: 1.2;
  opacity: 0.55;
}
.lab-st-ring {
  fill: none;
  stroke: var(--lab-mint);
  stroke-width: 0.9;
  opacity: 0.85;
}
.lab-st-token {
  fill: #ecf4f0;
  stroke: #f2fff8;
  stroke-width: 0.5;
}
.lab-mod {
  opacity: var(--mod, 1);
}
.lab-t1 {
  font: 600 13.2px/1 var(--font-sans, Inter, sans-serif);
  fill: #eef3f0;
  letter-spacing: -0.005em;
}
.lab-t2 {
  font: 500 11.4px/1 var(--font-sans, Inter, sans-serif);
  fill: #aeb8b3;
}
.lab-ring {
  fill: none;
  stroke: var(--lab-mint);
  stroke-width: 1.4;
}
.lab-band {
  fill: #c4ffdf;
}
.lab-band-glow {
  fill: var(--lab-mint);
  opacity: 0.45;
}
.lab-led {
  fill: #d4ffe8;
}
.lab-led-glow {
  fill: var(--lab-mint);
  opacity: 0.6;
}
@keyframes lab-breathe {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.lab-anim .lab-mod .lab-led,
.lab-anim .lab-mod .lab-led-glow {
  animation: lab-breathe 2.8s ease-in-out infinite;
}
.motion-paused .lab-mod .lab-led,
.motion-paused .lab-mod .lab-led-glow {
  animation-play-state: paused;
}
.lab {
  --lab-pearl: #e3eeff;
  --lab-pearl-glow: #8fb3ea;
}
.lab-caps {
  fill: var(--lab-pearl);
  opacity: calc(var(--cap, 1) * 0.75);
}
.lab-leds {
  opacity: var(--led, 1);
}
.lab-lanes .lab-led {
  fill: #f2f7fc;
}
.lab-lanes .lab-led-glow {
  fill: var(--lab-pearl-glow);
  opacity: 0.7;
}
.lab-lab[data-lab=test]::before,
.lab-lab[data-lab=limit]::before,
.lab-lab[data-lab=observed]::before {
  border-color: var(--lab-pearl);
}
.lab-lab[data-lab=test]::after,
.lab-lab[data-lab=limit]::after,
.lab-lab[data-lab=observed]::after {
  background: rgba(233, 240, 248, 0.7);
}
.lab-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.lab-lab {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  width: 0;
  height: 0;
  opacity: 0;
}
.lab-lab::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--lab-mint);
  box-shadow: 0 0 0 2px rgba(7, 10, 14, 0.62), inset 0 0 0 1px rgba(7, 10, 14, 0.4);
  box-sizing: border-box;
}
.lab-lab::after {
  content: "";
  position: absolute;
  right: 6px;
  top: -0.5px;
  width: 9px;
  height: 1px;
  background: rgba(149, 242, 186, 0.7);
}
.lab-lab > span {
  position: absolute;
  right: 15px;
  top: 0;
  transform: translateY(calc(-50% + var(--dy, 0px)));
  white-space: nowrap;
  padding: 0.3rem 0.6rem 0.32rem;
  border-radius: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: #f4faf6;
  background: rgba(7, 10, 14, 0.86);
  box-shadow: inset 0 0 0 1px rgba(244, 250, 246, 0.14), 0 6px 14px -6px rgba(0, 0, 0, 0.8);
}
.lab-lab.is-right::after {
  right: auto;
  left: 6px;
}
.lab-lab.is-right > span {
  right: auto;
  left: 15px;
}
.lab .vision {
  --hold: 0px;
  height: auto;
  position: relative;
  z-index: 1;
}
.lab .vision-stage {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
  background: none;
}
.lab .vision-copy {
  position: relative;
  top: auto;
  bottom: auto;
}
.lab .vision h1 {
  text-shadow: 0 1px 18px rgba(7, 10, 14, 0.45);
}
.lab .vision-sub {
  margin: 1rem 0 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: #e9f0ec;
  max-width: 30rem;
  text-shadow: 0 1px 12px rgba(7, 10, 14, 0.6);
}
.lab .vision-sub .sub-l {
  display: block;
}
.lab .vision-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}
.lab .vision-row .button {
  margin: 0;
}
.lab .vision-status {
  margin: 0;
  color: #e9f0ec;
  background: rgba(7, 10, 14, 0.62);
}
.lab-wide .vision,
.lab-side .vision {
  height: 100vh;
  height: 100svh;
}
.lab-wide .vision-stage,
.lab-side .vision-stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(var(--hh, 84px) + clamp(1.5rem, 9vh, 7rem));
  box-sizing: border-box;
}
.lab-wide .vision-copy,
.lab-side .vision-copy,
.lab-wide .descent > .section > .wrap,
.lab-side .descent > .section > .wrap {
  max-width: none;
  margin: 0;
  padding-left: var(--u-coll);
  padding-right: 0;
}
.lab-wide .vision-copy > *,
.lab-side .vision-copy > * {
  max-width: var(--u-colw);
}
.lab-wide .vision h1 {
  font-size: min(4.25rem, var(--u-colw) / 8.4);
}
.lab-side .vision-stage {
  padding-top: calc(var(--hh, 64px) + 0.75rem);
}
.lab-side .vision h1 {
  font-size: min(2.4rem, var(--u-colw) / 8.6);
}
.lab-side .vision h1 .line {
  white-space: nowrap;
}
.lab-side .vision-sub {
  font-size: 0.9375rem;
  margin-top: 0.6rem;
}
.lab-side .vision-row {
  margin-top: 1rem;
}
html.lab-small {
  scroll-padding-top: var(--hw);
}
.lab-small .vision {
  padding-top: var(--h0, 70svh);
  box-sizing: border-box;
}
.lab-small .vision-copy {
  padding-top: clamp(1.25rem, 5vw, 2rem);
  padding-bottom: 0.5rem;
}
.lab-small .vision h1 {
  font-size: clamp(2.1rem, 9.5vw, 3.25rem);
}
.lab-small .vision h1 .line {
  white-space: nowrap;
}
.lab-wide .site-header .wrap {
  max-width: none;
  padding-left: var(--u-coll);
  padding-right: max(var(--gutter), (var(--cw0) - var(--maxw)) / 2 + var(--gutter));
}
.lab-wide .site-footer .wrap {
  max-width: none;
  padding-left: var(--u-coll);
}
.lab .site-header {
  text-shadow: 0 1px 10px rgba(7, 10, 14, 0.55);
}
.lab .nav .nav-link {
  color: var(--color-text);
}
.lab .vision-pause {
  position: fixed;
  z-index: 7;
}
html.lab.lab-js .vision-pause {
  visibility: visible;
}
.lab-wide .vision-pause,
.lab-side .vision-pause {
  right: 1rem;
  bottom: 1rem;
}
.lab-small .vision-pause {
  top: calc(var(--hw) - 52px);
  bottom: auto;
  right: 0.75rem;
}
.lab-wide .descent > .section .wrap > *,
.lab-side .descent > .section .wrap > * {
  max-width: var(--u-colw);
}
.lab-wide .descent > .section .wrap .scene-text,
.lab-side .descent > .section .wrap .scene-text {
  max-width: var(--u-colw);
}
.lab .descent > .section {
  position: relative;
  z-index: 1;
}
.lab-wide .descent > .section + .section::before,
.lab-side .descent > .section + .section::before {
  left: calc(var(--u-coll) - 1.5rem);
  width: calc(var(--u-colw) + 1.5rem);
  transform: none;
}
.lab-side .descent > .section {
  padding-top: 3.5rem;
  padding-bottom: 3rem;
}
.lab-small .descent > .section,
.lab-small .descent > .section:not(.how) {
  padding-top: clamp(3rem, 11vw, 4.5rem);
}
.lab-small .descent .sec-head {
  margin-top: 0;
}
.lab-small .descent > .section.loop {
  padding-bottom: clamp(3rem, 10vw, 4.5rem);
}
.lab-small .descent > .loop .sec-head {
  padding-top: 0;
}
.lab .descent > .loop {
  padding-bottom: clamp(5rem, 12vh, 8rem);
}
.lab .proof-figure {
  background: none;
  padding: 0;
  border: 0;
  margin-top: 1.25rem;
}
.lab .proof-figure::before {
  display: none;
}
.lab .proof-mention a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(149, 242, 186, 0.6);
  text-underline-offset: 3px;
}
.lab .proof-mention a:hover {
  text-decoration-color: var(--lab-mint);
}
.lab .evidence {
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid rgba(244, 250, 246, 0.12);
  outline: none;
}
.lab .evidence h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
}
.lab .ev-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.lab .ev {
  position: relative;
  padding: 0 0 0 1.4rem;
  border-left: 1px solid rgba(149, 242, 186, 0.35);
}
.lab .ev p {
  margin: 0;
}
.lab .ev-when {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lab-mint);
}
.lab .ev-name {
  margin-top: 0.3rem !important;
  font-weight: 600;
  color: var(--color-text);
}
.lab .ev-state {
  margin-top: 0.2rem !important;
  color: var(--color-text-secondary);
}
.lab .ev-note {
  margin-top: 0.4rem !important;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}
.lab .ev .tech {
  margin-top: 0.6rem;
}
.lab .ev-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 0;
  color: var(--color-text-secondary);
  font-size: 0.9375rem;
}
.lab .ev-status .ms-dot {
  position: static;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--lab-mint);
  background: none;
}
.lab-anim .rv > * {
  opacity: 0;
  translate: 0 14px;
}
.lab-anim .rv.in > * {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease var(--rd, 0s), translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0s);
}
.lab .button {
  position: relative;
  border-radius: 999px;
  min-height: 50px;
  padding: 0 1.25rem 0 1.5rem;
  gap: 0.6rem;
  font-weight: 600;
  color: #06140d;
  border: 0;
  background: #8eefb4 linear-gradient(#a0f6c4, #86eaae);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(8, 96, 64, 0.3),
    0 3px 0 #3f9a6b,
    0 4px 2px rgba(0, 0, 0, 0.45),
    0 10px 20px rgba(0, 0, 0, 0.26);
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease;
}
.lab .button::before {
  display: none;
}
.lab .button svg {
  transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lab .button:hover {
  background: #a6f7c8 linear-gradient(#b4fad1, #98f1bd);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(8, 96, 64, 0.3),
    0 3px 0 #3f9a6b,
    0 4px 2px rgba(0, 0, 0, 0.45),
    0 10px 20px rgba(0, 0, 0, 0.26);
}
.lab .button:hover svg {
  transform: translateY(2px);
}
.lab .button:active {
  transform: translateY(3px);
  translate: none;
  background: #82e6aa linear-gradient(#86e9ad, #7ee3a6);
  box-shadow:
    inset 0 1px 3px rgba(4, 50, 32, 0.35),
    inset 0 0 0 1px rgba(8, 96, 64, 0.36),
    0 0 0 #3f9a6b,
    0 1px 1px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2);
}
.lab .button:focus-visible {
  outline: 2px solid #f4faf6;
  outline-offset: 5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(8, 96, 64, 0.3),
    0 3px 0 #3f9a6b,
    0 4px 2px rgba(0, 0, 0, 0.45);
}
.lab .nav .nav-cta,
.lab .motion-toggle {
  border: 0;
  border-radius: 999px;
  color: var(--color-text);
  background: #181c23 linear-gradient(#1b2027, #15191f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 0 0 1px rgba(196, 206, 218, 0.24),
    0 3px 0 #05070a,
    0 4px 2px rgba(0, 0, 0, 0.35);
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.12s ease,
    color 0.16s ease;
}
.lab .nav .nav-cta:hover,
.lab .motion-toggle:hover {
  color: var(--color-text);
  background: #1d232b linear-gradient(#212831, #1a1f26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(149, 242, 186, 0.55),
    0 3px 0 #05070a,
    0 4px 2px rgba(0, 0, 0, 0.35);
}
.lab .nav .nav-cta:active,
.lab .motion-toggle:active,
.lab .motion-toggle[aria-pressed=true] {
  transform: translateY(3px);
  translate: none;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(196, 206, 218, 0.3),
    0 0 0 #05070a,
    0 1px 1px rgba(0, 0, 0, 0.3);
}
.lab .motion-toggle[aria-pressed=true] {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(149, 242, 186, 0.6),
    0 0 0 #05070a;
}
.lab .tech summary::before {
  border-radius: 50%;
  color: var(--lab-mint);
  background-color: #191e24;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(196, 206, 218, 0.26),
    0 2px 0 #05070a;
}
.lab .tech summary:hover::before {
  background-color: #1d232a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(149, 242, 186, 0.6),
    0 2px 0 #05070a;
}
.lab .tech summary:active::before {
  translate: 0 2px;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(196, 206, 218, 0.3),
    0 0 0 #05070a;
}
.lab .tech-body.is-moving {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .lab .button,
  .lab .nav .nav-cta,
  .lab .motion-toggle,
  .lab .tech summary::before {
    transition: none;
  }
}
