/* lab page styles. Owned by the lab page; uses the tokens defined in index.html */
  .pg-lab { overflow-x: clip; }

  /* 1. the field: eleven stills floating in depth behind the title */
  .lf { position: relative; margin: calc(-110px - env(safe-area-inset-top, 0px)) calc(var(--m) * -1) 0; padding: calc(110px + env(safe-area-inset-top, 0px)) var(--m) 0; height: max(150vh, 940px); overflow: clip; }
  .lf__head { position: relative; z-index: 20; pointer-events: none; margin-bottom: 0; max-width: 62vw; }
  .pg-lab .lf__head .pg__title { font-size: clamp(2.9rem, 6.3vw, 7.4rem); max-width: 9.6em; }
  .lf__head .pg__lede { max-width: 26em; }
  .lf__how { color: rgba(11,14,42,.56); }
  .lf__field { position: absolute; inset: 0; }
  .lf__c { position: absolute; display: block; padding: 0; border: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--night); cursor: pointer; opacity: 0; scale: .94; will-change: transform; transform-origin: 50% 50%;
    box-shadow: 0 calc(var(--d) * 18px) calc(var(--d) * 36px) rgba(11,14,42, calc(var(--d) * .14)); }
  .lf.in .lf__c { opacity: var(--o); scale: 1; transition: opacity 1.6s var(--ease) calc(var(--k) * 90ms + 450ms), scale 2s var(--ease) calc(var(--k) * 90ms + 450ms); }
  .lf__c img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
  .lf__c::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(to top, rgba(5,6,26,.55), rgba(5,6,26,0)); pointer-events: none; }
  .lf__n { position: absolute; z-index: 1; left: 10px; top: 9px; font: 500 .625rem/1 var(--text); letter-spacing: .12em; color: rgba(255,255,255,.86); text-shadow: 0 1px 8px rgba(0,0,0,.35); }
  .lf__name { position: absolute; z-index: 1; left: 12px; bottom: 10px; color: #fff; font: 300 calc(.8rem + var(--d) * .55rem)/1 var(--display); letter-spacing: -.01em; }
  @media (hover: hover) {
    .lf__c:hover { opacity: 1 !important; }
  }

  /* 2. the bench */
  .bench-sec { position: relative; z-index: 2; margin-top: clamp(40px, 12vh, 130px); }
  .bench__lbl { margin-bottom: 14px; color: rgba(11,14,42,.62); }
  .bench { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: var(--m); align-items: end; }
  .bench__screen { position: relative; }
  .bench__hit { position: absolute; inset: -22px; z-index: 0; }
  .bench__info { position: relative; z-index: 1; }
  .bench__win { z-index: 1; position: relative; isolation: isolate; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: var(--night); display: grid; place-items: center; }
  .bench__still { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.2s var(--ease); }
  .bench__still.top { z-index: 2; }
  .bench__still.shown { opacity: 1; }
  .bench__still img { display: block; width: 100%; height: 100%; object-fit: cover; scale: 1.05; transition: scale 1.9s var(--ease); }
  .bench__still.shown img { scale: 1; }
  .bench__still.now, .bench__still.now img { transition: none; }
  .bench__win.flying .bench__still { visibility: hidden; }
  .bench__win::after { content: ''; position: absolute; inset: 0; z-index: 3; background: rgba(5,6,26,.26); pointer-events: none; transition: opacity .9s var(--ease); }
  .bench__win.is-live::after { opacity: 0; }
  .bench__live { position: absolute; inset: 0; z-index: 4; opacity: 0; pointer-events: none; transition: opacity 1.4s var(--ease); }
  .bench__live.shown { opacity: 1; pointer-events: auto; }
  .bench__live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
  .bench__win.is-live .bench__live { inset: 6px; border-radius: 15px; overflow: hidden; box-shadow: 0 0 0 8px var(--night); }
  .bench__on { position: relative; z-index: 5; color: var(--star); background: rgba(5,6,26,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(243,242,251,.45); border-radius: 999px; padding: 14px 24px; min-height: 44px; font: 500 .9375rem/1 var(--text); cursor: pointer; transition: opacity .7s var(--ease), background-color .4s, color .4s; }
  .bench__on:hover { background: var(--star); color: var(--ink); }
  .bench__win.is-live .bench__on { opacity: 0; pointer-events: none; }
  .bench__wait { position: absolute; z-index: 5; left: 20px; bottom: 18px; margin: 0; display: grid; gap: 10px; color: var(--star); font: 500 .71875rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
  .bench__win.waking .bench__wait { opacity: 1; }
  .bench__wait i { position: relative; display: block; width: 140px; height: 1px; overflow: hidden; background: rgba(243,242,251,.25); }
  .bench__wait i::after { content: ''; position: absolute; inset: 0; background: var(--star); animation: labWait 2.4s var(--slow) infinite; }
  @keyframes labWait { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

  .bench__info { display: grid; gap: 12px; padding-bottom: 6px; }
  .bench__n, .bench__name, .bench__tools { transition: opacity 1s var(--ease) .1s; }
  .bench__n { color: rgba(11,14,42,.62); }
  .bench__name { margin: 0; font: 300 clamp(2.4rem, 4.4vw, 4.6rem)/.96 var(--display); letter-spacing: -.025em; }
  .bench__q { margin: 0; font: 300 clamp(1.4rem, 2.1vw, 2.1rem)/1.18 var(--display); font-style: italic; min-height: 2.36em; }
  .bench__q .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .12em .16em 0; margin: 0 -.12em -.16em 0; }
  .bench__q .w > span { display: inline-block; translate: 0 112%; transition: translate 1.25s var(--ease); }
  .bench__info.in .bench__q .w > span { translate: 0 0; }
  .bench__info.out .bench__n, .bench__info.out .bench__name, .bench__info.out .bench__tools, .bench__info.out .bench__q { opacity: 0; transition: opacity .42s var(--ease); }
  .bench__tools { color: rgba(11,14,42,.62); }
  .bench__go { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
  .bench__go .ghost { min-height: 44px; }

  .lab-fly { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; background-position: center; background-size: cover; background-color: var(--night); will-change: transform, width, height; box-shadow: 0 30px 80px rgba(11,14,42,.22); transition: opacity .35s var(--ease); }
  .lab-fly.gone { opacity: 0; }

  /* 3. the rack: a strip you drag or swipe */
  .rack-wrap { margin-top: clamp(40px, 7vh, 72px); }
  .rack__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
  .rack__how { color: rgba(11,14,42,.56); }
  .rack { list-style: none; margin: 0 calc(var(--m) * -1); padding: 4px var(--m) 8px; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; user-select: none; -webkit-user-select: none; position: relative; scroll-padding-inline: var(--m); }
  .rack::-webkit-scrollbar { display: none; }
  .rack::after { content: ''; flex: 0 0 1px; }
  .rack > li { flex: 0 0 clamp(200px, 19vw, 290px); }
  .rack.dragging { cursor: grabbing; }
  .rack.dragging .rack__b { pointer-events: none; }
  .rack__b { display: grid; gap: 10px; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: inherit; color: rgba(11,14,42,.62); transition: color .6s var(--ease); }
  .rack__pic { display: block; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; outline: 1px solid transparent; outline-offset: 3px; transition: outline-color .6s var(--ease); background: var(--night); }
  .rack__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease); -webkit-user-drag: none; }
  .rack__meta { display: flex; gap: 10px; align-items: baseline; }
  .rack__b:hover .rack__pic img { scale: 1.05; }
  .rack__b.on { color: var(--ink); }
  .rack__b.on .rack__pic { outline-color: var(--ink); }
  .rack__b:focus-visible { outline: none; }
  .rack__b:focus-visible .rack__pic { outline: 2px solid var(--blue); }
  .rack__name { font: 300 1.35rem/1 var(--display); letter-spacing: -.01em; }
  .rack__b.on .rack__name { font-style: italic; }
  .rack__bar { position: relative; height: 1px; margin-top: 16px; background: var(--rule); overflow: hidden; }
  .rack__bar i { position: absolute; left: 0; top: 0; display: block; height: 100%; width: 30%; background: var(--ink); }

  /* 4. the questions, as large type */
  .qs { margin-top: clamp(110px, 18vh, 200px); }
  .qs__head { display: grid; gap: 14px; margin-bottom: clamp(24px, 5vh, 48px); }
  .qs__t { margin: 0; font: 300 clamp(2.4rem, 5vw, 5.2rem)/1 var(--display); letter-spacing: -.03em; }
  .qs__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
  .qs__row { display: grid; grid-template-columns: 5em minmax(0, 1fr) minmax(0, 14em); gap: 8px var(--m); align-items: baseline; width: 100%; padding: clamp(18px, 3.2vh, 32px) 0; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
  .qs__n { color: rgba(11,14,42,.56); }
  .qs__q { font: 300 clamp(1.7rem, 3.4vw, 3.6rem)/1.04 var(--display); letter-spacing: -.02em; text-wrap: balance; transition: opacity .9s var(--ease), translate 1.1s var(--ease); }
  .qs__who { display: grid; gap: 6px; justify-items: end; text-align: right; }
  .qs__name { font: 300 1.3rem/1 var(--display); }
  .qs__who .lbl { color: rgba(11,14,42,.56); }
  @media (hover: hover) {
    .qs__list:hover .qs__row:not(:hover) .qs__q { opacity: .3; }
    .qs__row:hover .qs__q { translate: 14px 0; }
  }
  .qs__row:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
  .qs__peek { position: fixed; left: 0; top: 0; z-index: 29; width: clamp(220px, 21vw, 330px); aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; pointer-events: none; background: var(--night); opacity: 0; scale: .92; transition: opacity .7s var(--ease), scale 1s var(--ease); will-change: transform; }
  .qs__peek.on { opacity: 1; scale: 1; }
  .qs__peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s var(--ease); }
  .qs__peek img.on { opacity: 1; }

  /* reduced motion: the end state, no travel */
  .lab-calm .lf__c, .lab-calm .bench__still, .lab-calm .bench__still img, .lab-calm .bench__q .w > span, .lab-calm .bench__live, .lab-calm .qs__q { transition: none !important; }
  .lab-calm .lf__c { opacity: var(--o); scale: 1; }
  .lab-calm .bench__wait i::after { animation: none; }

@media (max-width: 760px) {
  .lf { height: max(142svh, 1080px); }
  .lf__head { max-width: none; }
  .pg-lab .lf__head .pg__title { font-size: clamp(2.6rem, 11.5vw, 3.6rem); }
  .lf__c { border-radius: 8px; }
  .lf__n { left: 8px; top: 7px; font-size: .5625rem; }
  .lf__name { left: 9px; bottom: 7px; font-size: calc(.75rem + var(--d) * .3rem); }
  .bench { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .bench__win { border-radius: 14px; }
  .bench__q { min-height: 0; }
  .rack { scroll-snap-type: x mandatory; gap: 12px; }
  .rack > li { flex-basis: 62vw; scroll-snap-align: start; }
  .rack__name { font-size: 1.2rem; }
  .qs__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .qs__who { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 12px; }
  .qs__q { font-size: clamp(1.6rem, 7vw, 2.2rem); }
}