/* Scenes that teach lighting control (scripts/lib/story-controls.mjs), first used by the ReadyToGo
   guide (/guides/ready2go). Loaded after lab-geber.css, lab-hyperion.css and lab-story.css.
   As everywhere on the story pages, the base rules are the finished, readable state: no JS or
   reduced motion shows every tier, the assembled kit, the lit room and every diagram. Pinning and
   scrubbing live only under prefers-reduced-motion: no-preference for .js pages, and lab-geber.js
   writes the progress values. Only transform and opacity change. */

.lab--guide { --r2g-line: #8fca5e; }
.lab--guide h3 { color: inherit; }
.lab--guide .lab-title, .lab--guide .lab-hero__line { text-wrap: balance; }

/* The brand lockup in the hero and coda: the ReadyToGo mark and wordmark, set in the site's type. */
.lab-hero__title--brand { font-size: clamp(3rem, 1rem + 8vw, 8rem); letter-spacing: -0.05em; line-height: 1.06; }
.lab-brand { display: inline-flex; align-items: center; gap: 0.16em; }
.lab-brand__mark { width: 0.78em; height: auto; flex: none; transform: translateY(0.04em); }
.lab-hero__by { display: flex; justify-content: center; margin: clamp(14px, 2vw, 22px) 0 0; }
.lab-hero__by .r2g-by__logo { height: clamp(34px, 2.4rem + 1vw, 52px); }
.lab-coda__name--brand { font-size: clamp(2.6rem, 1rem + 6vw, 6rem); letter-spacing: -0.05em; }

/* ---------------------------------------------------------------- tiers */
.lab-tiers { text-align: center; }
.lab-tiers__panels {
  display: grid; gap: clamp(36px, 5vw, 56px); width: min(100% - 2 * var(--gutter), 1240px);
  margin: clamp(28px, 4vw, 48px) auto 0; padding: 0; list-style: none;
}
@media (min-width: 1000px) { .lab-tiers__panels { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lab-tiers__panel { opacity: var(--v, 1); }
.lab-tiers__figure { margin: 0; }
.lab-tiers__svg { display: block; width: 100%; height: auto; }
.lab-tiers__wall { fill: rgba(243, 241, 236, 0.025); stroke: rgba(243, 241, 236, 0.24); stroke-width: 1.5; }
.lab-tiers__label { fill: var(--lab-dim); font-family: var(--font); font-size: 18px; letter-spacing: 0.01em; }
.lab-tiers__light { fill: #f7efe0; }
/* A room's step in the panel's build: 0 until its turn, then 1. */
.lab-tiers__room { --turn: clamp(0, calc(var(--k, 1) * 7 - var(--i)), 1); }
.lab-tiers__glow { fill: var(--tier-glow); opacity: calc(var(--l) * var(--turn)); }
.lab-tiers__switch { fill: none; stroke: var(--lab-ink); stroke-width: 1.5; }
.lab-tiers__kit { fill: var(--lab-bg); stroke: var(--r2g-line); stroke-width: 2.2; }
.lab-tiers__kit-dot { fill: var(--r2g-line); }
.lab-tiers__kit, .lab-tiers__kit-dot { transform-box: fill-box; transform-origin: center; transform: scale(var(--turn)); }
.lab-tiers__dali { fill: none; stroke: var(--r2g-line); stroke-width: 1.4; stroke-linejoin: round; opacity: calc(var(--turn) * 0.7); }
.lab-tiers__net { fill: none; stroke: var(--lab-ink); stroke-width: 2.2; opacity: calc(clamp(0, calc(var(--k, 1) * 2 - 0.6), 1) * 0.85); }
.lab-tiers__controller { fill: var(--lab-bg); stroke: var(--lab-ink); stroke-width: 2; opacity: clamp(0, calc(var(--k, 1) * 3 - 1.6), 1); }
.lab-tiers__pulse {
  fill: #fff6e4; transform: translateX(calc(var(--k, 1) * var(--run) * 1px));
  opacity: calc(clamp(0, calc(var(--k, 1) * 6), 1) * clamp(0, calc((1 - var(--k, 1)) * 8), 1));
}
.lab-tiers__network .lab-tiers__net { filter: drop-shadow(0 0 4px rgba(255, 246, 228, 0.25)); }
.lab-tiers__caption { margin-top: clamp(14px, 2vw, 22px); text-align: left; }
.lab-tiers__step { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lab-dim); }
.lab-tiers__num {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--lab-faint); font-size: 0.75rem; letter-spacing: 0; color: var(--lab-ink);
}
.lab-tiers__step .r2g-lockup { text-transform: none; letter-spacing: 0; color: var(--lab-ink, #f3f1ec); }
.lab-tiers__step .r2g-lockup__name { font-size: 1.15rem; }
.lab-tiers__panel:nth-child(2) .lab-tiers__num { border-color: var(--r2g-line); color: var(--r2g-line); }
.lab-tiers__name { margin: 0 0 6px; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.lab-tiers__copy { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--lab-dim); }
.lab-tiers__aside { max-width: 48rem; margin-inline: auto; }
@media (max-width: 699px) { .lab-tiers__label { display: none; } }

@media (prefers-reduced-motion: no-preference) {
  .js .lab-tiers { height: 440vh; }
  .js .lab-tiers--single { height: 220vh; }
  .js .lab-tiers .lab-pin__stage { display: flex; flex-direction: column; justify-content: center; padding-block: 2vh 76px; }
  .js .lab-tiers .lab-head .lab-copy { display: none; }
  .js .lab-tiers__panels { grid-template-columns: minmax(0, 1fr); width: min(100% - 2 * var(--gutter), 1100px); margin-top: clamp(16px, 3vh, 36px); }
  .js .lab-tiers__panel { grid-area: 1 / 1; }
  .js .lab-tiers__panel:not(:first-child) .lab-tiers__room { will-change: opacity; }
  .js .lab-tiers__aside { margin-top: clamp(10px, 2vh, 24px); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .js .lab-tiers__figure { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
  .js .lab-tiers__svg { max-height: calc(var(--lab-stage) - 360px); }
  .js .lab-tiers__caption { margin-top: 0; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899px) {
  .js .lab-tiers__svg { width: min(100%, (var(--lab-stage) - 440px) * 800 / 470); margin-inline: auto; }
  .js .lab-tiers__caption { text-align: center; }
  .js .lab-tiers__step { justify-content: center; }
}

/* ---------------------------------------------------------------- what's in a kit */
.lab-kit { text-align: center; }
.lab-kit__figure { width: min(100% - 2 * var(--gutter), 860px); margin: clamp(24px, 4vw, 44px) auto 0; }
.lab-kit__svg { display: block; width: 100%; height: auto; overflow: visible; }
.lab-kit__ceiling, .lab-kit__wall { stroke: rgba(243, 241, 236, 0.22); stroke-width: 1.5; }
.lab-kit__tag { fill: var(--lab-dim); font-family: var(--font); font-size: 15px; letter-spacing: 0.08em; }
.lab-kit__tag--dali { fill: var(--r2g-line); }
.lab-kit__mains { fill: none; stroke: rgba(243, 241, 236, 0.5); stroke-width: 1.5; opacity: var(--m, 1); }
.lab-kit__dali { fill: none; stroke: var(--r2g-line); stroke-width: 2.4; stroke-linejoin: round; opacity: var(--d, 1); }
.lab-kit__box, .lab-kit__plate { fill: #1b1a18; stroke: rgba(243, 241, 236, 0.75); stroke-width: 1.5; }
.lab-kit__bolt { fill: var(--r2g-line); }
.lab-kit__knob circle { fill: #f3f1ec; }
.lab-kit__knob line { stroke: #1b1a18; stroke-width: 2.4; stroke-linecap: round; }
.lab-kit__knob { transform: rotate(calc(var(--dim, 0) * -150deg)); }
.lab-kit__part--switch { transform: translateX(calc((1 - var(--a0, 1)) * -40px)); opacity: var(--a0, 1); }
.lab-kit__part--psu { transform: translateY(calc((1 - var(--a1, 1)) * -36px)); opacity: var(--a1, 1); }
.lab-kit__part--lights { transform: translateY(calc((1 - var(--a2, 1)) * -36px)); opacity: var(--a2, 1); }
.lab-kit__can { fill: #e9e6df; }
.lab-kit__lens { fill: #fff8ea; opacity: calc(0.25 + 0.75 * var(--on, 1) * (1 - 0.6 * var(--dim, 0))); }
.lab-kit__cone { opacity: calc(var(--on, 1) * (1 - 0.65 * var(--dim, 0))); }
/* The press: up from the control to the DALI line, then along it to the last light. */
.lab-kit__signal {
  fill: #fff6e4;
  transform: translate(calc(max(0, var(--s, 1) * (var(--up) + var(--across)) - var(--up)) * 1px), calc(min(var(--s, 1) * (var(--up) + var(--across)), var(--up)) * -1px));
  opacity: calc(clamp(0, calc(var(--s, 1) * 12), 1) * clamp(0, calc((1 - var(--s, 1)) * 12), 1));
  filter: drop-shadow(0 0 6px rgba(255, 246, 228, 0.8));
}
.lab-kit__marker circle { fill: var(--lab-bg); stroke: var(--lab-faint); stroke-width: 1.5; }
.lab-kit__marker text { fill: var(--lab-ink); font-family: var(--font); font-size: 15px; text-anchor: middle; }
.lab-kit__parts {
  display: grid; gap: 10px 28px; width: min(100% - 2 * var(--gutter), 860px); margin: clamp(20px, 3vw, 32px) auto 0; padding: 0;
  list-style: none; text-align: left;
}
@media (min-width: 760px) { .lab-kit__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lab-kit__item { display: flex; gap: 12px; align-items: baseline; font-size: 1rem; line-height: 1.45; color: var(--lab-dim); opacity: calc(0.4 + 0.6 * var(--hl, 1)); }
.lab-kit__item strong { font-weight: 500; color: var(--lab-ink); }
.lab-kit__num {
  flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--lab-faint); font-size: 0.75rem; color: var(--lab-ink); transform: translateY(-1px);
}
@media (prefers-reduced-motion: no-preference) {
  .js .lab-kit { height: 400vh; }
  .js .lab-kit .lab-pin__stage { display: flex; flex-direction: column; justify-content: center; padding-block: 2vh 76px; }
  .js .lab-kit__figure { width: min(100% - 2 * var(--gutter), 760px, (var(--lab-stage) - 480px) * 600 / 340); margin-top: clamp(12px, 2.5vh, 32px); }
  .js .lab-kit__item { font-size: 0.94rem; }
  .js .lab-kit__parts { margin-top: clamp(10px, 2vh, 24px); }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 699px) {
  .js .lab-kit .lab-head .lab-copy { display: none; }
  .js .lab-kit__figure { width: min(100% - 2 * var(--gutter), (var(--lab-stage) - 420px) * 600 / 340); }
  .js .lab-kit__parts { gap: 6px; }
  .js .lab-kit__item { font-size: 0.92rem; }
}

/* ---------------------------------------------------------------- dimmer */
.lab-dimmer { padding-block: 0; }
.lab-dimmer__media { position: relative; overflow: hidden; }
.lab-dimmer__media img { aspect-ratio: 2400 / 1340; object-fit: cover; }
.lab-dimmer__dim { display: none; }
.lab-dimmer__text { padding: clamp(32px, 6vw, 64px) var(--gutter) clamp(56px, 9vw, 112px); text-align: center; }
.lab-dimmer__control { display: inline-flex; align-items: center; gap: 18px; margin-top: 1.6rem; }
.lab-dimmer__plate { display: grid; place-items: center; width: 52px; height: 74px; border-radius: 6px; background: rgba(243, 241, 236, 0.9); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); }
.lab-dimmer__knob {
  position: relative; width: 30px; height: 30px; border-radius: 50%; background: #fbfaf7;
  box-shadow: 0 0 0 2px rgba(255, 226, 176, 0.9), 0 0 16px rgba(255, 226, 176, 0.65), inset 0 -2px 4px rgba(0, 0, 0, 0.12);
  transform: rotate(calc(var(--t, 0) * -200deg));
}
.lab-dimmer__tick { position: absolute; left: 50%; top: 4px; width: 2px; height: 8px; margin-left: -1px; border-radius: 1px; background: #8c877d; }
.lab-dimmer__level { position: relative; width: 120px; height: 4px; border-radius: 4px; background: rgba(243, 241, 236, 0.18); overflow: hidden; }
.lab-dimmer__fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #f0b265, #fbf1dc); transform-origin: 0 50%; transform: scaleX(calc(1 - 0.82 * var(--t, 0))); }
/* Pressing the dial (a button once lab-geber.js runs) switches the lights off and on. */
.lab-dimmer__off { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease; }
.lab-dimmer.is-off .lab-dimmer__off { opacity: 1; }
button.lab-dimmer__plate { padding: 0; border: 0; cursor: pointer; font: inherit; transition: transform 0.15s ease, box-shadow 0.3s ease; }
button.lab-dimmer__plate:hover { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(255, 226, 176, 0.35); }
button.lab-dimmer__plate:focus-visible { outline: 2px solid #fbf1dc; outline-offset: 4px; }
button.lab-dimmer__plate:active .lab-dimmer__knob { scale: 0.88; }
.lab-dimmer__knob { transition: box-shadow 0.5s ease, scale 0.12s ease; }
.lab-dimmer.is-off .lab-dimmer__knob { box-shadow: 0 0 0 2px rgba(140, 135, 125, 0.5), inset 0 -2px 4px rgba(0, 0, 0, 0.12); }
.lab-dimmer__fill { transition: opacity 0.5s ease; }
.lab-dimmer.is-off .lab-dimmer__fill { opacity: 0; }
.lab-dimmer__hint { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 241, 236, 0.7); }
@media (prefers-reduced-motion: no-preference) {
  .js .lab-dimmer { height: 320vh; }
  .js .lab-dimmer .lab-pin__stage { display: grid; }
  .js .lab-dimmer__media { position: absolute; inset: 0; }
  .js .lab-dimmer__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 45%; }
  .js .lab-dimmer__dim { display: block; opacity: var(--t, 0); }
  .js .lab-dimmer .lab-dimmer__off { display: block; }
  .js .lab-dimmer .lab-pin__stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(0deg, rgba(5, 5, 6, 0.86), rgba(5, 5, 6, 0.45) 36%, rgba(5, 5, 6, 0) 60%);
  }
  .js .lab-dimmer__text { position: relative; z-index: 1; align-self: end; padding-bottom: clamp(84px, 11vh, 120px); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 28px rgba(0, 0, 0, 0.75); }
}

/* ---------------------------------------------------------------- choosing a kit */
.lab-choose__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: clamp(14px, 2vw, 22px);
  max-width: 1200px; margin-top: clamp(32px, 5vw, 56px); padding: 0; list-style: none;
}
.lab-choose__card {
  display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--lab-faint); border-radius: var(--radius-lg); background: rgba(243, 241, 236, 0.025);
  opacity: clamp(0, calc(var(--p, 1) * 1.6 - var(--c) * 0.15), 1);
  transform: translateY(calc((1 - clamp(0, calc(var(--p, 1) * 1.6 - var(--c) * 0.15), 1)) * 28px));
}
.lab-choose__need { margin: 0 0 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--r2g-line); }
.lab-choose__kit { margin: 0 0 14px; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; }
.lab-choose__svg { display: block; width: 100%; height: auto; margin: 4px 0 14px; overflow: visible; }
.lab-choose__copy { margin: 0 0 14px; font-size: 0.98rem; line-height: 1.5; color: var(--lab-dim); }
.lab-choose__more { margin: auto 0 0; font-size: 0.92rem; }
.lab-node { fill: #1b1a18; stroke: rgba(243, 241, 236, 0.78); stroke-width: 1.5; }
.lab-node__accent { fill: #f3f1ec; stroke: none; }
.lab-node__accent-line { stroke: #f3f1ec; stroke-width: 2; stroke-linecap: round; }
.lab-node__arc { fill: none; stroke: var(--r2g-line); stroke-width: 2; stroke-linecap: round; }
.lab-node__wave { fill: none; stroke: #f3f1ec; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.lab-node__lights rect { fill: #e9e6df; stroke: none; }
.lab-node__beam { fill: rgba(255, 226, 176, 0.22); stroke: none; }
.lab-node__strip { fill: #fff3dc; stroke: none; filter: drop-shadow(0 0 4px rgba(255, 226, 176, 0.8)); }
.lab-node__label, .lab-wire__label { font-family: var(--font); text-anchor: middle; }
.lab-node__label { fill: var(--lab-ink); font-size: 13px; }
.lab-wire__label { fill: var(--lab-dim); font-size: 11px; letter-spacing: 0.06em; }
.lab-wire path { fill: none; stroke-width: 2.2; stroke-linecap: round; }
.lab-wire--dali path { stroke: var(--r2g-line); }
.lab-wire--wireless path:first-child { stroke: rgba(243, 241, 236, 0.6); stroke-dasharray: 1 6; }
.lab-wire__waves { stroke: rgba(243, 241, 236, 0.75) !important; stroke-width: 1.6 !important; }
.lab-wire--dc path { stroke: var(--amber); }
.lab-wire--mains path { stroke: rgba(243, 241, 236, 0.6); }
.lab-node, .lab-wire { opacity: clamp(0, calc(var(--p, 1) * 2.2 - var(--i) * 0.35), 1); }
.lab-choose__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: clamp(20px, 3vw, 32px); padding: 0; list-style: none; font-size: 0.88rem; color: var(--lab-dim); }
.lab-choose__legend li { display: inline-flex; align-items: center; gap: 10px; }
.lab-choose__key { display: inline-block; width: 26px; height: 0; border-top: 2.5px solid; }
.lab-choose__key--dali { border-color: var(--r2g-line); }
.lab-choose__key--wireless { border-top-style: dotted; border-color: rgba(243, 241, 236, 0.7); }
.lab-choose__key--dc { border-color: var(--amber); }
.lab-choose__key--mains { border-color: rgba(243, 241, 236, 0.6); }

/* ---------------------------------------------------------------- call to action and the kits */
.lab-cta__action { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 28px; }
.guide-kits__intro { max-width: 46rem; margin: 0 0 clamp(28px, 4vw, 44px); color: var(--muted); }
.guide-kits__group + .guide-kits__group { margin-top: clamp(44px, 6vw, 72px); }
.guide-kits__head { display: grid; gap: 18px; align-items: center; margin-bottom: 20px; }
.guide-kits__head p { max-width: 44rem; margin: 0; color: var(--muted); }
.guide-kits__head .section-title { margin-bottom: 0.4rem; }
@media (min-width: 760px) { .guide-kits__head { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; } }
.guide-kits__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); }
.guide-kit { scroll-margin-top: calc(var(--header-height, 72px) + 16px); }
.guide-kit:target { outline: 2px solid var(--r2g, #6fae3e); outline-offset: 4px; }
.guide-kit .spec-table { margin-top: 14px; }
.guide-kits__designers { max-width: 46rem; margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--line); }
.guide-kits__designers p { margin: 0; color: var(--muted); }
.guide-kits__quote { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: clamp(28px, 4vw, 40px) 0 0; }
.guide-kits__note { color: var(--muted); }

/* ---------------------------------------------------------------- wireless mesh */
/* A building in section. Base rules are the finished state: wireless, every room meshed and lit,
   all three steps listed. lab-geber.js (meshSetter) writes --z (zoom on the first room), --dd/--do
   (the DALI line drawn / shown), --s (a press along it), --won (lights answering the wire), --rad
   (radios), --h (hops so far, 0 to 4), --g (rooms joined, 0 to 3) and --v on each step. */
.lab-mesh { text-align: center; }
.lab-mesh__body { width: min(100% - 2 * var(--gutter), 1100px); margin: clamp(24px, 4vw, 44px) auto 0; }
.lab-mesh__figure { margin: 0; }
/* Which system the drawing shows: "Traditional wired DALI-2" while the DALI line is up (--do), then
   "Wireless DALI-2" once the radios arrive (--rad). Without JS the wireless label shows. */
.lab-mesh__mode { display: grid; justify-content: center; margin: 0 0 clamp(8px, 1.6vw, 16px); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.lab-mesh__mode-item { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 16px; border-radius: 999px; border: 1px solid currentColor; }
.lab-mesh__mode-item svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lab-mesh__mode-item--wired svg { height: 12px; }
.lab-mesh__mode-item--wireless svg circle { fill: currentColor; stroke: none; }
.lab-mesh__mode-item--wired { color: var(--r2g-line); opacity: calc(var(--do, 0) * (1 - var(--rad, 1))); }
.lab-mesh__mode-item--wireless { color: #ffe2b0; opacity: var(--rad, 1); }
.lab-mesh__svg { display: block; width: 100%; height: auto; }
.lab-mesh__view { transform: translate(calc(var(--z, 0) * -20px), calc(var(--z, 0) * -390px)) scale(calc(1 + var(--z, 0))); }
.lab-mesh__slab { fill: rgba(243, 241, 236, 0.07); stroke: rgba(243, 241, 236, 0.22); stroke-width: 1.2; }
.lab-mesh__wall, .lab-mesh__ground { stroke: rgba(243, 241, 236, 0.26); stroke-width: 1.5; }
.lab-mesh__wall--inner { stroke-dasharray: 2 0; stroke: rgba(243, 241, 236, 0.18); }
.lab-mesh__can { fill: #e9e6df; }
.lab-mesh__plate { fill: #1b1a18; stroke: rgba(243, 241, 236, 0.8); stroke-width: 1.4; }
.lab-mesh__button, .lab-mesh__sensor { fill: #f3f1ec; }
/* Each room's place in step 3: the first room is always in; the others join as --g passes them. */
.lab-mesh__room { --in: clamp(0, calc(var(--g, 3) - var(--n)), 1); }
.lab-mesh__room--first { --in: 1; }
.lab-mesh__devices, .lab-mesh__lights .lab-mesh__can { opacity: clamp(0, calc(var(--in) * 3), 1); }
.lab-mesh__room:not(.lab-mesh__room--first) .lab-mesh__devices { opacity: calc(0.25 + 0.75 * clamp(0, calc(var(--in) * 3), 1)); }
/* A light is on when the wire reaches it (first room, step 1), when the hop reaches it (first room, step 2), or once its room has joined. */
.lab-mesh__light { --on: clamp(0, calc((var(--in) - 0.45) * 3), 1); }
.lab-mesh__room--first .lab-mesh__light { --on: max(var(--won, 0), clamp(0, calc((var(--h, 4) - var(--j) - 0.85) * 6), 1)); }
.lab-mesh__cone { opacity: var(--on); }
.lab-mesh__lens { fill: #fff8ea; opacity: calc(0.15 + 0.85 * var(--on)); filter: drop-shadow(0 0 4px rgba(255, 236, 200, 0.9)); }
.lab-mesh__radio { opacity: calc(var(--rad, 1) * clamp(0, calc(var(--in) * 3 - 0.4), 1)); }
.lab-mesh__radio circle { fill: #f3f1ec; }
.lab-mesh__radio path { fill: none; stroke: #f3f1ec; stroke-width: 1.5; stroke-linecap: round; }
.lab-mesh__hop { stroke: rgba(255, 236, 200, 0.55); stroke-width: 1.4; stroke-dasharray: 1.5 5; stroke-linecap: round; opacity: calc(var(--rad, 1) * clamp(0, calc(var(--in) * 3 - 0.8), 1)); }
.lab-mesh__hop--join { stroke: rgba(255, 236, 200, 0.75); }
/* The press hopping from device to device in the first room: hop i runs while --h passes i. */
.lab-mesh__pulse {
  --t: clamp(0, calc(var(--h, 4) - var(--i)), 1);
  fill: #fff6e4; filter: drop-shadow(0 0 6px rgba(255, 246, 228, 0.9));
  transform: translate(calc(var(--t) * var(--dx) * 1px), calc(var(--t) * var(--dy) * 1px));
  opacity: calc(clamp(0, calc(var(--t) * 14), 1) * clamp(0, calc((1 - var(--t)) * 14), 1));
}
/* Step 1: the twin-pair DALI line (a wide green stroke with a dark gap down its middle). */
.lab-mesh__dali, .lab-mesh__dali-gap { fill: none; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: calc((1 - var(--dd, 1)) * 100); opacity: var(--do, 0); }
.lab-mesh__dali { stroke: var(--r2g-line); stroke-width: 5; }
.lab-mesh__dali-gap { stroke: var(--lab-bg, #0b0b0c); stroke-width: 1.6; }
.lab-mesh__tag { fill: var(--r2g-line); font-family: var(--font); font-size: 13px; letter-spacing: 0.08em; opacity: var(--do, 0); }
.lab-mesh__signal {
  fill: #fff6e4; filter: drop-shadow(0 0 6px rgba(255, 246, 228, 0.9));
  transform: translate(calc(max(0, var(--s, 0) * (var(--up) + var(--across)) - var(--up)) * 1px), calc(min(var(--s, 0) * (var(--up) + var(--across)), var(--up)) * -1px));
  opacity: calc(clamp(0, calc(var(--s, 0) * 12), 1) * clamp(0, calc((1 - var(--s, 0)) * 12), 1));
}
.lab-mesh__steps { display: grid; gap: clamp(18px, 3vw, 32px); margin: clamp(24px, 4vw, 40px) 0 0; padding: 0; list-style: none; text-align: left; }
@media (min-width: 900px) { .lab-mesh__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lab-mesh__step { opacity: var(--v, 1); }
.lab-mesh__name { margin: 0 0 6px; font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.lab-mesh__copy { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--lab-dim); }
.lab-mesh__step:first-child .lab-tiers__num { border-color: var(--r2g-line); color: var(--r2g-line); }
@media (prefers-reduced-motion: no-preference) {
  .js .lab-mesh { height: 520vh; }
  .js .lab-mesh .lab-pin__stage { display: flex; flex-direction: column; justify-content: center; padding-block: 2vh 76px; }
  .js .lab-mesh .lab-head .lab-copy { display: none; }
  .js .lab-mesh__body { margin-top: clamp(12px, 2.5vh, 28px); }
  .js .lab-mesh__svg { width: min(100%, (var(--lab-stage) - 400px) * 800 / 400); margin-inline: auto; }
  .js .lab-mesh__steps { grid-template-columns: minmax(0, 1fr); width: min(100%, 640px); margin: clamp(12px, 2.5vh, 28px) auto 0; text-align: center; }
  .js .lab-mesh__step { grid-area: 1 / 1; }
  .js .lab-mesh__step .lab-tiers__step { justify-content: center; }
}

/* ---------------------------------------------------------------- comparison */
.lab-compare__wrap { max-width: 1200px; margin-top: clamp(28px, 4vw, 48px); }
.lab-compare__table { width: 100%; border-collapse: collapse; text-align: left; font-size: 1rem; line-height: 1.45; }
.lab-compare__table th, .lab-compare__table td { padding: 16px 18px; vertical-align: top; border-bottom: 1px solid var(--lab-faint); }
.lab-compare__table thead th { border-bottom-color: rgba(243, 241, 236, 0.4); }
.lab-compare__table tbody th { width: 18%; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lab-dim); }
.lab-compare__table td { color: var(--lab-ink); }
.lab-compare__name { display: block; font-size: clamp(1.3rem, 1rem + 0.9vw, 1.75rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; color: var(--lab-ink); margin: 0; }
.lab-compare__lead { display: block; margin-top: 6px; font-size: 0.92rem; font-weight: 400; color: var(--lab-dim); }
.lab-compare__row--key th, .lab-compare__row--key td { border-bottom: 0; background: rgba(255, 226, 176, 0.06); }
.lab-compare__row--key th { color: #e8c48c; }
.lab-compare__row--key td { font-size: 1.08rem; }
.lab-compare__cards { display: none; gap: 16px; padding: 0; margin: 0; list-style: none; }
.lab-compare__card { padding: 22px 20px; border: 1px solid var(--lab-faint); border-radius: var(--radius-lg); background: rgba(243, 241, 236, 0.025); text-align: left; }
.lab-compare__card dl { margin: 14px 0 0; }
.lab-compare__card dl > div { padding: 10px 0; border-top: 1px solid var(--lab-faint); }
.lab-compare__card dt { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lab-dim); }
.lab-compare__card dd { margin: 4px 0 0; color: var(--lab-ink); }
.lab-compare__card .lab-compare__row--key { margin: 4px -10px 0; padding: 12px 10px; border-radius: 10px; background: rgba(255, 226, 176, 0.07); border-top: 0; }
.lab-compare__card .lab-compare__row--key dt { color: #e8c48c; }
@media (max-width: 859px) {
  .lab-compare__table { display: none; }
  .lab-compare__cards { display: grid; }
}
.lab-compare__aside { max-width: 46rem; margin-inline: auto; }
.lab-compare__aside .lab-link { white-space: nowrap; }
/* The lead row (where each system was developed): larger values, each after a small location marker. */
.lab-compare__row--lead td, .lab-compare__row--lead dd { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.35rem); letter-spacing: -0.01em; }
.lab-compare__row--lead th, .lab-compare__row--lead dt { color: var(--lab-ink); }
.lab-compare__pin { display: inline-block; width: 0.62em; height: 0.82em; margin-right: 0.45em; vertical-align: -0.05em; }
.lab-compare__pin path { fill: none; stroke: #e8c48c; stroke-width: 1.4; }
.lab-compare__pin circle { fill: #e8c48c; }
/* Rows rise in as each reaches the screen (--p on the row, written by lab-geber.js). */
.lab-compare [data-row] { opacity: var(--p, 1); transform: translateY(calc((1 - var(--p, 1)) * 18px)); }
.lab-compare__card .lab-compare__row { opacity: clamp(0, calc(var(--p, 1) * 2.4 - var(--r) * 0.18), 1); }

/* ---------------------------------------------------------------- crossover to a sister guide */
.lab-crossover { border-top: 1px solid var(--lab-faint); }
.lab-crossover__inner { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; max-width: 1200px; }
@media (min-width: 900px) { .lab-crossover__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.lab-crossover__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); }
.lab-crossover__text { text-align: left; }
.lab-crossover__brand { margin: 0 0 1rem; }
.lab-crossover__title { margin: 0 0 0.5em; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; }
.lab-crossover__action { margin: 0; }
.lab-crossover__inner { opacity: var(--p, 1); transform: translateY(calc((1 - var(--p, 1)) * 28px)); }

/* An interlude may carry an eyebrow above its two lines. */
.lab-statement__eyebrow { margin: 0 0 1.2rem; text-align: center; }