.lab-page{background:#050607;padding:0 0 clamp(3rem,6vw,6rem)}
.lab-page-wrap{padding-top:0}
.laboratory-app{position:relative;background:#050607;border:1px solid #4b545d;border-top:0;border-radius:0 0 12px 12px;box-shadow:0 30px 90px rgba(0,0,0,.62);overflow:hidden}

.lab-progress{display:grid;grid-template-columns:repeat(6,1fr);background:#07090b;color:#66717b;border-bottom:1px solid var(--line);position:relative;z-index:6}
.lab-progress span{padding:.82rem .5rem;text-align:center;font-family:'Oswald';font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;border-right:1px solid rgba(255,255,255,.07)}
.lab-progress span:last-child{border-right:0}
.lab-progress span.active{color:var(--electric);text-shadow:0 0 10px rgba(139,216,247,.45)}
.lab-message{padding:2rem;text-align:center;position:relative;z-index:5}

.lab-step{position:relative;isolation:isolate;padding:clamp(1.35rem,3vw,2.4rem);overflow:hidden;background:#07090b;min-height:620px}
.lab-builder-grid{position:relative;z-index:4;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);gap:2rem;align-items:start}
.lab-controls{position:relative;z-index:4;min-width:0}

/* Dramatic Tesla-discharge atmosphere. No literal coil object: only oversized electrical arcs behind the builder fields. */
.lab-tesla-bg{position:absolute;z-index:0;left:-8%;top:-8%;width:82%;height:116%;pointer-events:none;user-select:none;opacity:.52;filter:saturate(1.2)}
.lab-tesla-bg:after{content:"";position:absolute;inset:-8%;background:radial-gradient(ellipse at 45% 45%,rgba(68,188,255,.09),transparent 34%),radial-gradient(ellipse at 15% 80%,rgba(180,75,255,.07),transparent 30%);filter:blur(8px)}
.lab-lightning{position:absolute;inset:0;width:100%;height:100%;overflow:visible;mix-blend-mode:screen}
.strike{fill:none;stroke:#f8feff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px #64cfff) drop-shadow(0 0 24px #279ff5) drop-shadow(0 0 44px #7e5cff)}
.strike-a{animation:teslaStrikeA 5.4s steps(1,end) infinite}
.strike-b{animation:teslaStrikeB 7.1s steps(1,end) infinite}
.strike-c{animation:teslaStrikeC 6.2s steps(1,end) infinite}
.strike-d{animation:teslaStrikeD 8.3s steps(1,end) infinite}
.strike-e{animation:teslaStrikeE 9.4s steps(1,end) infinite}
@keyframes teslaStrikeA{0%,7%,9%,11%,100%{opacity:0}8%,10%{opacity:.95}}
@keyframes teslaStrikeB{0%,42%,44%,46%,100%{opacity:0}43%,45%{opacity:.9}}
@keyframes teslaStrikeC{0%,72%,74%,76%,100%{opacity:0}73%,75%{opacity:.86}}
@keyframes teslaStrikeD{0%,27%,29%,31%,100%{opacity:0}28%,30%{opacity:.9}}
@keyframes teslaStrikeE{0%,57%,59%,61%,100%{opacity:0}58%,60%{opacity:.78}}

/* Controls are intentionally opaque: the coil is atmosphere, never UI chrome. */
.lab-field{position:relative;padding:1.05rem 1.1rem;margin:0 0 .8rem;border:1px solid #343b42;border-radius:7px;background:#0b0e11;box-shadow:0 9px 24px rgba(0,0,0,.32)}
.lab-field:first-child{padding-top:1.05rem}
.lab-field label{display:flex;gap:.75rem;align-items:center;font:1rem 'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.11em;color:#f3f5f6}
.lab-field label span{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border:1px solid #67727c;border-radius:50%;background:#11161a;color:var(--electric);font:.78rem 'Oswald'}
.lab-field p{margin:.4rem 0 .8rem;color:#89949e;font-size:.9rem}
.lab-field select{width:100%;padding:1rem;border:1px solid #59636c;border-radius:4px;background:#11161a;color:#fff;font:inherit;box-shadow:none}
.lab-field select:focus{outline:none;border-color:var(--electric-2);box-shadow:0 0 0 2px #173846}
.lab-field select:disabled{opacity:.5}
.lab-foundation-size{margin-top:.9rem;padding:.9rem;border:1px solid #39434b;border-radius:5px;background:#101418}
.lab-foundation-size label{font-size:.78rem;margin-bottom:.55rem;color:#c7d0d6}
.lab-foundation-size label span{display:none}
.lab-foundation-size select{margin:0;background:#151a1f}
.lab-actions{margin-top:1.5rem}
.lab-table{position:sticky;top:104px;background:#101418;color:#fff;padding:2rem;border:1px solid #4e5861;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.52)}
.lab-table h2{font-size:2.4rem}
.lab-summary-list{list-style:none;padding:0;margin:0}
.lab-summary-list li{padding:.85rem 0;border-bottom:1px solid #252c32}
.lab-summary-list strong,.lab-summary-list span{display:block}
.lab-summary-list strong{font-family:'Oswald';text-transform:uppercase;letter-spacing:.08em;font-size:.73rem;color:#87929c}
.lab-summary-list span{color:#fff;font-size:.96rem}
.lab-warning{margin-top:1rem;padding:1rem;border:1px solid #8b6d3c;background:#201b12;color:#d7c9ae}
.lab-review-note{margin-top:1rem;color:#7e8993;font-size:.84rem}
.lab-empty-options{margin-top:.75rem;padding:.9rem;border:1px dashed #4b545d;background:#0c1013;color:#89949e;font-size:.87rem}

.lab-reveal{position:relative;padding:clamp(3rem,8vw,7rem);text-align:center;background:radial-gradient(circle at 50% 45%,rgba(139,216,247,.12),transparent 28%),#030405;color:#fff}
.lab-reveal:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 70px,rgba(255,255,255,.013) 71px 72px)}
.lab-reveal>*{position:relative}
.lab-reveal h2{font-size:clamp(3.6rem,9vw,7rem);color:#fff;text-shadow:0 0 26px rgba(139,216,247,.44)}
.lab-reveal #lab-final{max-width:720px;margin:0 auto 2rem;text-align:left;padding:2rem;background:#0a0d10;border:1px solid #59636c;border-radius:6px}
.lab-reveal .button-row{justify-content:center}
50%{opacity:1;transform:scale(1.04);filter:drop-shadow(0 0 26px #fff)}}

@media(max-width:850px){
  .lab-builder-grid{grid-template-columns:1fr}
  .lab-table{position:static}
  .lab-progress{grid-template-columns:repeat(6,1fr)}
  .lab-progress span{font-size:.62rem;padding:.7rem .3rem}
  .lab-tesla-bg{left:-18%;top:-4%;width:110%;height:108%;opacity:.38}
}
@media(max-width:620px){
  .lab-page .wrap{width:100%;padding-left:0;padding-right:0}
  .laboratory-app{border-left:0;border-right:0;border-radius:0}
  .lab-progress{overflow-x:auto;grid-template-columns:repeat(5,minmax(104px,1fr));scrollbar-width:none}
  .lab-progress::-webkit-scrollbar{display:none}
  .lab-step{padding:1rem;min-height:0}
  .lab-tesla-bg{left:-42%;top:0;width:165%;height:100%;opacity:.28}
}
@media(prefers-reduced-motion:reduce){.strike,.strike-a{opacity:.35}}

/* Laboratory v1.5 — rink-neon field glow, borrowed from Shop discovery tiles. */
.lab-controls .lab-field{
  --lab-neon:139,216,247;
  background:#0b0e11;
  border-color:rgba(var(--lab-neon),.58);
  box-shadow:
    inset 0 0 0 1px rgba(var(--lab-neon),.035),
    0 0 8px rgba(var(--lab-neon),.10),
    0 0 20px rgba(var(--lab-neon),.07),
    0 9px 24px rgba(0,0,0,.38);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.lab-controls .lab-field:nth-of-type(1){--lab-neon:70,210,255}   /* Foundation — rink blue */
.lab-controls .lab-field:nth-of-type(2){--lab-neon:255,72,190}  /* Plate — neon pink */
.lab-controls .lab-field:nth-of-type(3){--lab-neon:113,255,99}  /* Wheels — neon green */
.lab-controls .lab-field:nth-of-type(4){--lab-neon:255,222,71}  /* Toe component — neon yellow */
.lab-controls .lab-field:nth-of-type(5){--lab-neon:255,92,92}   /* Bearings — electric red */
.lab-controls .lab-field:nth-of-type(6){--lab-neon:185,105,255} /* Laces — neon purple */
.lab-controls .lab-field:hover,
.lab-controls .lab-field:focus-within{
  border-color:rgba(var(--lab-neon),.92);
  box-shadow:
    inset 0 0 0 1px rgba(var(--lab-neon),.06),
    0 0 10px rgba(var(--lab-neon),.18),
    0 0 28px rgba(var(--lab-neon),.13),
    0 12px 28px rgba(0,0,0,.44);
}
.lab-controls .lab-field label span{
  color:rgb(var(--lab-neon));
  border-color:rgba(var(--lab-neon),.58);
  text-shadow:0 0 8px rgba(var(--lab-neon),.5);
  box-shadow:0 0 8px rgba(var(--lab-neon),.08);
}
.lab-controls .lab-field select{
  background:#11161a;
  border-color:rgba(var(--lab-neon),.52);
}
.lab-controls .lab-field select:focus{
  border-color:rgb(var(--lab-neon));
  box-shadow:0 0 0 2px rgba(var(--lab-neon),.14),0 0 14px rgba(var(--lab-neon),.12);
}
.lab-controls .lab-foundation-size{
  background:#101418;
  border-color:rgba(var(--lab-neon),.36);
}

/* Laboratory v4 — live registered layer renderer + commerce controls */
.lab-stage{position:relative;aspect-ratio:1/1;width:100%;margin:0 0 1.35rem;overflow:hidden;border:1px solid #343d45;border-radius:8px;background:radial-gradient(circle at 50% 55%,rgba(139,216,247,.09),transparent 42%),linear-gradient(180deg,#080b0d,#030405);box-shadow:inset 0 0 45px rgba(0,0,0,.6)}
.lab-stage:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.lab-stage-empty{position:absolute;z-index:100;inset:0;display:grid;place-items:center;padding:2rem;text-align:center;color:#68737c;font:700 .78rem 'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.12em}
.lab-stage-empty[hidden]{display:none}
.lab-build-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.lab-color-field{margin:.9rem 0 0;padding:.8rem;border:1px solid #39434b;border-radius:5px;background:#101418}
.lab-color-field legend{padding:0 .35rem;color:#aeb8bf;font:700 .74rem 'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em}
.lab-color-swatches{display:flex;flex-wrap:wrap;gap:.55rem}
.lab-color-swatch{display:flex;align-items:center;gap:.45rem;padding:.5rem .65rem;border:1px solid #46515a;border-radius:999px;background:#11161a;color:#dfe5e9;cursor:pointer}
.lab-color-swatch.is-selected{border-color:var(--electric);box-shadow:0 0 0 1px rgba(139,216,247,.22),0 0 14px rgba(139,216,247,.12)}
.lab-color-dot{width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.lab-color-name{font-size:.78rem}
.lab-variation-confirm{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;margin-top:.85rem;padding:.75rem .85rem;border:1px solid #39434b;border-radius:5px;background:#101418}
.lab-variation-confirm span{color:#86919a;font:700 .7rem 'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.08em}
.lab-variation-confirm strong{font-size:.86rem;color:#fff}
.lab-variation-confirm em{font-style:normal;color:var(--electric);font-weight:700}
.lab-compatibility-note{padding:.7rem .8rem!important;margin:.8rem 0 0!important;border-left:2px solid #59636c;background:#0d1114;color:#9ba6ae!important;font-size:.8rem!important}
.lab-summary-list small{display:block;margin-top:.2rem;color:#8d99a2;font-size:.76rem}
.lab-build-total{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-top:1rem;padding:1rem;border-top:1px solid #303840;border-bottom:1px solid #303840}
.lab-build-total span{color:#8e99a1;font:700 .74rem 'Oswald',Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em}
.lab-build-total strong{color:var(--electric);font-size:1.35rem}
.lab-ready-note{margin:1rem 0 0;color:#b9e9c2;font-size:.85rem}
.lab-final-stage{position:relative;aspect-ratio:1/1;max-width:520px;margin:0 auto 1.5rem;overflow:hidden;border:1px solid #39434b;border-radius:8px;background:#050708}
.lab-final-stage .lab-stage-empty{display:none}
.lab-buy-form{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1.25rem}
.lab-buy-form .btn{width:100%;text-align:center}
@media(max-width:620px){.lab-buy-form{grid-template-columns:1fr}.lab-variation-confirm{grid-template-columns:1fr}.lab-table{padding:1.25rem}}


/* Laboratory geometry patch v3
   Component artwork remains untouched. These role transforms create the
   mechanical clearance requested for the live builder profile. */
.lab-build-layer{
  transform-origin:50% 50%;
  will-change:transform;
}

/* Foundation stays on the master canvas baseline. */
.lab-build-layer--boot{
  transform:translate3d(0,0,0);
}

/* Lift the complete plate/truck assembly slightly into the sole.
   This exposes the plate rail while pulling kingpins/hangers away from
   the virtual ground line. */
.lab-build-layer--plate{
  transform:translate3d(0,-2.75%,0);
}

/* Wheels sit below the truck axle area rather than swallowing the trucks.
   Current v2 wheel artwork already has the desired reduced diameter, so
   this patch changes position only — no additional image scaling. */
.lab-build-layer--wheels{
  transform:translate3d(0,7.25%,0);
}

/* Toe components belong mechanically to the plate and move with it. */
.lab-build-layer--toe-component{
  transform:translate3d(0,-2.75%,0);
}

/* Non-visual layers and future accessory layers remain neutral. */
.lab-build-layer--bearings,
.lab-build-layer--laces{
  transform:translate3d(0,0,0);
}


/* Launch compatibility patch v5 */
.lab-loride-wheel-note{
  margin-top:.75rem!important;
  border-left-color:#d2aa3a!important;
  color:#ded3aa!important;
}

/* Stopless plate confirmation */
.lab-stopless-confirm{
  display:grid;
  gap:.28rem;
  padding:.9rem 1rem;
  border:1px solid #4b545d;
  border-left:3px solid #8bd8f7;
  border-radius:5px;
  background:#0d1114;
}
.lab-stopless-confirm strong{
  color:#fff;
  font:700 .86rem 'Oswald',Arial,sans-serif;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.lab-stopless-confirm span{color:#9da8b0;font-size:.82rem}

/* v8: single-option component summary */
.lab-auto-variation{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.65rem;
  margin-top:.75rem;
  padding:.8rem 1rem;
  border:1px solid #343c42;
  border-radius:4px;
  background:#0d1114;
}
.lab-auto-variation span{
  color:#859099;
  font:700 .72rem 'Oswald',Arial,sans-serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.lab-auto-variation strong{color:#e7eaec;font-weight:700}
.lab-auto-variation b{color:#fff;font-size:1rem}


/* Laboratory v9 — code-only mechanical layering correction.
   NO builder image files are modified by this patch. */

/* Phenolic wheel faces sit over the LoRide axle/truck artwork.
   Boot remains above them at its normal layer 40. */
.lab-build-product--sure-grip-phenolic-sliders{
  z-index:35!important;
}

/* Jam plugs: use the existing v8 image, but display only the thin installed
   upper lip and tuck it against the Rock plate's toe mounting area.
   Carrera Toe Stop is unaffected. */
.lab-build-product--sure-grip-rock-jam-plugs{
  transform:translate3d(1.15%,-3.55%,0)!important;
  clip-path:inset(0 0 22% 0);
}


/* Laboratory v10 — visual reset.
   Phenolic Sliders stay selectable/purchasable, but the LoRide plate's
   existing built-in wheel artwork is the only visual representation. */
.lab-build-product--sure-grip-phenolic-sliders{
  display:none!important;
}

/* Do not crop, shift, scale, or otherwise alter jam-plug artwork in CSS.
   Manual jam-plug layers will render at their own authored coordinates. */
.lab-build-product--sure-grip-rock-jam-plugs{
  clip-path:none!important;
  transform:none!important;
}

/* v4.13 — It's Alive reveal + explicit Locker save */
.lab-reveal{overflow:hidden;isolation:isolate}
.lab-reveal.is-alive .lab-strike-flash{position:absolute;inset:0;z-index:8;pointer-events:none;background:#fff;animation:aliveStrike .7s ease-out both}
.lab-smoke{position:absolute!important;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.lab-smoke i{position:absolute;left:50%;top:45%;width:42vw;height:28vw;max-width:620px;max-height:410px;border-radius:50%;background:radial-gradient(circle,rgba(220,225,228,.72) 0,rgba(125,135,142,.42) 36%,rgba(40,45,49,0) 72%);filter:blur(22px);opacity:0}
.lab-reveal.is-alive .lab-smoke i{animation:aliveSmoke 1.65s ease-out both}
.lab-smoke i:nth-child(1){transform:translate(-72%,-30%);animation-delay:.15s!important}.lab-smoke i:nth-child(2){transform:translate(-30%,-45%);animation-delay:.22s!important}.lab-smoke i:nth-child(3){transform:translate(-62%,-5%);animation-delay:.3s!important}.lab-smoke i:nth-child(4){transform:translate(-18%,-10%);animation-delay:.38s!important}
.lab-reveal.is-alive #lab-final,.lab-reveal.is-alive h2,.lab-reveal.is-alive .lab-charge,.lab-reveal.is-alive>.button-row{animation:aliveReveal .7s 1.05s both}
@keyframes aliveStrike{0%{opacity:0}8%{opacity:.95}15%{opacity:.05}22%{opacity:.72}34%,100%{opacity:0}}
@keyframes aliveSmoke{0%{opacity:0;scale:.55}22%{opacity:.88}100%{opacity:0;scale:1.65;translate:0 -10%}}
@keyframes aliveReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lab-save-build{margin:1.25rem 0;padding:1rem;border:1px solid #3d4952;background:#070a0c}.lab-save-build label,.lab-save-build strong{display:block;font-family:'Oswald';text-transform:uppercase;letter-spacing:.09em;color:#fff;margin-bottom:.55rem}.lab-save-row{display:flex;gap:.65rem;align-items:stretch}.lab-save-row input{min-width:0;flex:1;background:#020304;color:#fff;border:1px solid #59636c;padding:.8rem .9rem;font:inherit}.lab-save-build p{margin:.55rem 0 0;color:#aeb7be;font-size:.85rem}.lab-save-login .btn{margin-top:.4rem}.lab-buy-form{display:flex;gap:.65rem;flex-wrap:wrap}.lab-buy-form .btn{flex:1 1 220px}
@media(max-width:620px){.lab-save-row{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.lab-reveal.is-alive .lab-strike-flash,.lab-reveal.is-alive .lab-smoke i,.lab-reveal.is-alive #lab-final,.lab-reveal.is-alive h2,.lab-reveal.is-alive .lab-charge,.lab-reveal.is-alive>.button-row{animation:none}.lab-smoke{display:none}}

/* 4.14 cleanup: keep the It's Alive payoff above the fold. */
.lab-reveal{padding:clamp(1rem,2.8vw,2.25rem);scroll-margin-top:92px;min-height:0}
.lab-reveal h2{margin:.15rem 0 .65rem;line-height:.9}
.lab-reveal #lab-final{margin:0 auto 1rem;padding:1.25rem}
.lab-final-stage{max-height:420px;max-width:520px;overflow:hidden}
.lab-reveal.is-alive #lab-final,.lab-reveal.is-alive h2,.lab-reveal.is-alive>.button-row{animation:aliveReveal .7s 1.05s both}

/* v4.16 polish: wheel clearance, reveal lightning, commerce CTA */
.lab-buy-now{background:linear-gradient(180deg,#a52bd1,#65108d)!important;color:#fff!important;border-color:#c95cf1!important;box-shadow:0 0 24px rgba(165,43,209,.28)!important}


/* v4.17 — sticky Laboratory Table + mobile repair */

/* Sticky was being defeated by overflow:hidden ancestors. clip preserves
   the artwork boundary without creating the scroll container that breaks sticky. */
.laboratory-app,
.lab-step{
  overflow:clip;
}

@media (min-width:851px){
  .lab-table{
    position:sticky;
    top:96px;
    align-self:start;
    max-height:calc(100vh - 116px);
    overflow:auto;
    scrollbar-width:thin;
  }
}

/* Tablet/mobile becomes a clean single-column configurator.
   The live preview appears first and remains normal-flow rather than covering controls. */
@media (max-width:850px){
  .lab-builder-grid{
    grid-template-columns:minmax(0,1fr);
    gap:1rem;
  }
  .lab-table{
    position:relative;
    top:auto;
    order:-1;
    width:min(100%,560px);
    max-width:560px;
    margin:0 auto;
    padding:1.25rem;
    max-height:none;
    overflow:visible;
  }
  .lab-controls{
    order:2;
    min-width:0;
  }
  .lab-stage{
    width:100%;
    max-width:480px;
    margin-left:auto;
    margin-right:auto;
  }
  .lab-table h2{
    font-size:clamp(1.9rem,8vw,2.4rem);
  }
}

/* There are six progress steps. The old mobile rule created only five tracks. */
@media (max-width:620px){
  .lab-progress{
    grid-template-columns:repeat(6,minmax(104px,1fr));
  }
  .lab-step{
    padding:.75rem;
  }
  .lab-field{
    padding:.9rem;
  }
  .lab-field select,
  .lab-foundation-size select{
    max-width:100%;
    min-width:0;
  }
  .lab-table{
    width:100%;
    padding:1rem;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
  .lab-stage{
    max-width:420px;
  }
  .lab-summary-list li{
    padding:.65rem 0;
  }
}