/* ══════════════════════════════════════════════════════════════
   Reaction Lab — chemistry sandbox card (home page, below #topics)
   Depends on tokens defined in scholars-ui.css (:root vars).
   ══════════════════════════════════════════════════════════════ */

#lab {
  padding: 48px 24px;
  position: relative;
}
.lab-wrap {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: linear-gradient(165deg, #FAF5FF 0%, #FFF8FC 50%, #FDFBFF 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  padding: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1.4rem, 3vw, 2.6rem);
}
.lab-sound-toggle {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 50%;
  color: var(--purple-700);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 5px 16px rgba(74, 38, 105, 0.1);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.lab-sound-toggle:hover { transform: scale(1.06); background: rgba(255, 255, 255, 0.9); }
.lab-sound-toggle:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 3px; }
.lab-sound-toggle svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lab-sound-off { display: none; }
.lab-sound-toggle[aria-pressed="true"] .lab-sound-on { display: none; }
.lab-sound-toggle[aria-pressed="true"] .lab-sound-off { display: block; }
/* Leave room for the sound control in the intro only. Applying this to every
   revealed child also inset the entire bench and element shelf on the right. */
.lab-intro { padding-right: 48px; }
[data-theme="dark"] .lab-sound-toggle {
  color: #e9d5ff;
  background: rgba(139, 92, 246, 0.14);
  border-color: rgba(192, 132, 252, 0.3);
}
/* compact heading — the card must fit one screen */
#lab .home-heading-friendly {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
}
#lab .section-label { margin-bottom: 8px; }
.lab-sub {
  color: var(--text-muted);
  font-size: clamp(0.88rem, 1.1vw, 0.98rem);
  line-height: 1.6;
  max-width: 62ch;
  margin-top: 10px;
}

/* ── Stage (flask canvas) ── */
.lab-bench { margin-top: 4px; }
.lab-stage {
  position: relative;
  height: clamp(150px, 24vh, 240px);
  margin: 0 auto;
  max-width: 720px;
}
.lab-stage canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  pointer-events: none;
}
.lab-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  transform-origin: 50% 92%;
  will-change: transform;
}
.lab-hint {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%) rotate(-4deg);
  font-family: 'Caveat', cursive;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  color: var(--text-muted);
  opacity: 0.8;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s var(--ease-out);
}
.lab-hint.gone {
  opacity: 0;
  transform: translate(-50%, -30%) rotate(-4deg);
}
.lab-hint-text {
  display: inline-block;
  text-shadow: 0 0.35px 0 currentColor;
  will-change: clip-path, opacity;
}
.lab-hint.writing .lab-hint-text {
  animation: lab-pencil-reveal 2.45s cubic-bezier(0.22, 0.68, 0.28, 1) both;
}
.lab-hint.erasing .lab-hint-text {
  animation: lab-pencil-erase 0.72s ease-in forwards;
}
@keyframes lab-pencil-reveal {
  from { clip-path: inset(-12% 100% -12% 0); opacity: 0.55; }
  to   { clip-path: inset(-12% 0 -12% 0); opacity: 1; }
}
@keyframes lab-pencil-erase {
  from { clip-path: inset(-12% 0 -12% 0); opacity: 1; }
  to   { clip-path: inset(-12% 0 -12% 100%); opacity: 0.2; }
}
.lab-note {
  position: absolute;
  left: calc(50% + clamp(58px, 11vw, 118px));
  top: 12%;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.1;
  color: var(--purple-700);
  transform: rotate(6deg) scale(0);
  transform-origin: left bottom;
  pointer-events: none;
  white-space: nowrap;
  transition: transform 0.5s var(--ease-spring);
}
.lab-note.show { transform: rotate(6deg) scale(1); }

/* ── Console: equation strip + actions ── */
.lab-console {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 24px;
  margin-top: 2px;
  min-height: 62px;
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out);
}
.lab-console.gone {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}
.lab-eq { display: flex; align-items: center; gap: 12px; }
.lab-slot {
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 50%;
  border: 2px dashed rgba(147, 51, 234, 0.32);
  background: rgba(255, 255, 255, 0.72);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.25s ease, transform 0.3s var(--ease-spring), background 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.lab-slot:hover { border-color: rgba(147, 51, 234, 0.55); transform: scale(1.06); }
.lab-slot:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 3px; }
.lab-slot.filled { border-style: solid; border-color: rgba(147, 51, 234, 0.45); cursor: grab; }
.lab-slot.filled:active { cursor: grabbing; }
.lab-slot.drag-over {
  border-style: solid;
  border-color: rgba(147, 51, 234, 0.8);
  transform: scale(1.14);
  box-shadow: 0 0 0 4px rgba(192, 132, 252, 0.35), 0 0 18px rgba(168, 85, 247, 0.45);
  background: rgba(233, 213, 255, 0.45);
  animation: slot-pulse 0.7s ease-in-out infinite;
}
@keyframes slot-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(192,132,252,0.35), 0 0 18px rgba(168,85,247,0.45); }
  50%       { box-shadow: 0 0 0 7px rgba(192,132,252,0.55), 0 0 28px rgba(168,85,247,0.65); }
}
.lab-slot.deny { animation: lab-deny 0.4s ease; }
.lab-slot-q {
  font-weight: 800;
  font-size: 18px;
  color: var(--text-muted);
  opacity: 0.55;
}
.lab-slot .el-disc {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.lab-slot .el-shape {
  left: 50%;
  top: 50%;
}
.lab-slot .el-sym {
  font-size: 12.5px;
  line-height: 1;
  overflow: visible;
}
.lab-op {
  font-weight: 800;
  font-size: 20px;
  color: var(--text-muted);
  opacity: 0.7;
}
.lab-out {
  min-width: 58px;
  text-align: left;
  font-weight: 800;
  font-size: 19px;
  color: var(--text);
  letter-spacing: 0.01em;
}
.lab-out sub { font-size: 0.62em; }
.lab-out.pop { animation: lab-pop 0.45s var(--ease-spring); }

.lab-actions { display: flex; align-items: center; gap: 8px; }
/* Solid, on-brand CTA — no gradient, no glow, no pulse. A single deep
   violet from the site palette reads as calmer and more intentional than a
   breathing pink-purple gradient, and it's shared by both labs' Mix/Add
   actions (Reaction Lab's Mix, Ion Lab's Add reagent/Warm gently/etc.). */
.lab-mix {
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  padding: 12px 36px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--purple-deep);
  box-shadow: 0 8px 18px -11px rgba(76, 29, 149, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s ease, opacity 0.3s ease, filter 0.3s ease, background 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.lab-mix:not(:disabled):hover { background: #6d28d9; transform: translateY(-2px) scale(1.04); }
.lab-mix:not(:disabled):active { transform: scale(0.95); }
.lab-mix:focus-visible { outline: 2px solid var(--purple-700); outline-offset: 3px; }
.lab-mix:disabled {
  opacity: 0.35;
  filter: saturate(0.35);
  cursor: default;
  box-shadow: none;
}
/* the ready/armed state stays flat rather than pulsing, matching the calmer,
   non-breathing CTA above */
.lab-mix.armed { animation: none; }

/* The rinse control is an actionable reset, not a text link — a distinct
   secondary-button surface, shared by both labs' Rinse actions. */
.lab-rinse {
  font: inherit;
  font-weight: 700;
  font-size: 13.5px;
  min-height: 42px;
  color: var(--purple-700);
  background: rgba(233, 213, 255, 0.58);
  border: 1px solid rgba(147, 51, 234, 0.34);
  padding: 10px 20px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px -10px rgba(109, 40, 217, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.lab-rinse:hover {
  color: var(--purple-700);
  background: rgba(216, 180, 254, 0.72);
  border-color: rgba(147, 51, 234, 0.52);
  transform: translateY(-1px);
}
.lab-rinse:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 2px; }

[data-theme="dark"] .lab-rinse {
  color: #e9d5ff;
  background: rgba(139, 92, 246, 0.2);
  border-color: rgba(192, 132, 252, 0.42);
  box-shadow: 0 7px 18px -11px rgba(192, 132, 252, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] .lab-rinse:hover {
  color: #fff;
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(216, 180, 254, 0.62);
}

/* ── Result panel (swaps in for the console) ── */
.lab-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-top: 2px;
  min-height: 62px;
  opacity: 0;
  transform: translateY(14px) scale(0.96);
}
.lab-result.show {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s ease, transform 0.55s var(--ease-spring);
}
.lab-result-name {
  font-weight: 800;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  letter-spacing: 0.01em;
  color: var(--text);
}
.lab-result-formula {
  font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  background: var(--gradient-text);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-travel 7s linear infinite;
}
.lab-result-formula sub {
  font-size: 0.62em;
  -webkit-text-fill-color: transparent;
}
.lab-result-text {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 56ch;
  margin: 2px 0 0;
}
/* the post-result "again" button sits in a tighter space than the main
   console's Rinse, so it stays compact rather than dominating that gap */
.lab-again {
  margin-top: 0;
  min-height: 34px;
  padding: 7px 14px;
  font-size: 12.5px;
  box-shadow: 0 4px 11px -8px rgba(109, 40, 217, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

[data-theme="dark"] .lab-again {
  box-shadow: 0 4px 11px -8px rgba(192, 132, 252, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* ── Element shelf ── */
.lab-shelf-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.lab-shelf-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.lab-shelf-frame {
  position: relative;
}
.lab-shelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 2px;
  transition: opacity 0.3s ease;
}
.lab-shelf.locked { pointer-events: none; opacity: 0.55; }

.el-token {
  flex: 0 0 72px;
  background: none;
  border: 0;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 2px 5px;
  border-radius: 16px;
  cursor: grab;
  /* Keep horizontal shelf scrolling, but reserve upward/downward gestures
     for dragging an element into the flask. */
  touch-action: pan-x;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, transform 0.3s var(--ease-spring), opacity 0.25s ease;
}
.el-token:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-3px); }
.el-token:hover .el-disc { transform: scale(1.1); }
.el-token:active { cursor: grabbing; }
.el-token:focus-visible { outline: 2px solid var(--purple-600); outline-offset: 1px; }
.el-token[aria-pressed="true"] {
  background: rgba(233, 213, 255, 0.55);
  box-shadow: inset 0 0 0 1.5px rgba(147, 51, 234, 0.4);
}
.el-token.dragging { opacity: 0.3; }
.el-token.deny { animation: lab-deny 0.4s ease; }

.el-disc {
  position: relative;
  width: 42px;
  height: 42px;
  transition: transform 0.3s var(--ease-spring);
  filter:
    drop-shadow(0 2px 1px rgba(255, 255, 255, 0.35))
    drop-shadow(0 5px 5px rgba(43, 25, 62, 0.26));
}
.el-shape {
  position: absolute;
  left: calc(50% + var(--sample-x, 0px));
  top: calc(50% + var(--sample-y, 0px));
  width: var(--sample-w, 96%);
  height: var(--sample-h, 96%);
}
.el-sym {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--el-ink, #2b2430);
  letter-spacing: 0.01em;
  pointer-events: none;
}
.el-name {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.03em;
}

/* Material recipes — colors come from --m-hi / --m-mid / --m-lo set per
   element; --rot gives each sample its own resting angle. Clipped shapes
   can't cast box-shadows, so depth comes from layered gradients. */
.el-shape { transform: translate(-50%, -50%) rotate(var(--rot, 0deg)); }

/* Eight specimen cuts make individual samples differ in mass and outline.
   Gases and liquids retain their physically distinct orb/drop silhouettes. */
.sample-1 .el-shape:not(.kind-gas):not(.kind-liquid) { clip-path: polygon(18% 7%, 58% 0, 91% 20%, 100% 58%, 78% 96%, 35% 100%, 5% 78%, 0 34%); }
.sample-2 .el-shape:not(.kind-gas):not(.kind-liquid) { clip-path: polygon(9% 20%, 42% 2%, 83% 10%, 100% 40%, 90% 82%, 58% 100%, 17% 91%, 0 59%); }
.sample-3 .el-shape:not(.kind-gas):not(.kind-liquid) { clip-path: polygon(27% 0, 76% 6%, 100% 34%, 88% 76%, 62% 100%, 18% 91%, 0 55%, 8% 20%); }
.sample-4 .el-shape:not(.kind-gas):not(.kind-liquid) { clip-path: polygon(14% 10%, 68% 0, 96% 24%, 100% 67%, 67% 94%, 25% 100%, 0 70%, 5% 31%); }
.sample-5 .el-shape:not(.kind-gas):not(.kind-liquid) { clip-path: polygon(34% 1%, 80% 12%, 100% 48%, 82% 91%, 43% 100%, 8% 80%, 0 37%); }
.sample-6 .el-shape:not(.kind-gas):not(.kind-liquid) { clip-path: polygon(20% 0, 70% 4%, 94% 29%, 100% 72%, 54% 100%, 12% 88%, 0 46%); }
.sample-7 .el-shape:not(.kind-gas):not(.kind-liquid) { clip-path: polygon(8% 25%, 37% 1%, 77% 8%, 100% 38%, 91% 76%, 69% 100%, 25% 94%, 0 64%); }
.sample-8 .el-shape:not(.kind-gas):not(.kind-liquid) { clip-path: polygon(25% 5%, 61% 0, 93% 18%, 100% 53%, 76% 100%, 31% 93%, 1% 72%, 8% 30%); }

/* Cut faces and a dark lower edge create real depth instead of a flat icon. */
.el-shape:not(.kind-gas):not(.kind-liquid)::before {
  content: "";
  position: absolute;
  inset: 7% 12% 45% 10%;
  clip-path: polygon(0 15%, 58% 0, 100% 48%, 62% 100%, 14% 78%);
  background: linear-gradient(145deg, rgba(255,255,255,0.72), rgba(255,255,255,0.04) 68%);
  mix-blend-mode: screen;
  opacity: 0.72;
}
.el-shape:not(.kind-gas):not(.kind-liquid)::after {
  content: "";
  position: absolute;
  inset: 49% 5% 4% 12%;
  clip-path: polygon(0 8%, 52% 24%, 100% 0, 82% 78%, 40% 100%, 9% 72%);
  background: linear-gradient(165deg, transparent, rgba(0,0,0,0.32));
  opacity: 0.72;
}

/* metal — an irregular nugget with a bright milled facet */
.el-shape.kind-metal {
  clip-path: polygon(30% 2%, 68% 7%, 96% 30%, 99% 62%, 78% 95%, 40% 99%, 8% 78%, 1% 38%);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.95) 6%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(308deg, rgba(0, 0, 0, 0.3) 4%, rgba(0, 0, 0, 0) 42%),
    conic-gradient(from 210deg at 46% 42%,
      var(--m-lo), var(--m-hi) 55deg, var(--m-mid) 110deg,
      var(--m-lo) 180deg, var(--m-hi) 235deg, var(--m-mid) 300deg, var(--m-lo) 360deg);
}
/* alkali — a soft waxy lump with a freshly-cut face */
.el-shape.kind-alkali {
  clip-path: polygon(24% 6%, 62% 1%, 92% 20%, 99% 55%, 84% 88%, 48% 99%, 12% 88%, 1% 50%);
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.9) 12%, rgba(255, 255, 255, 0.25) 34%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(300deg, rgba(0, 0, 0, 0.22) 6%, rgba(0, 0, 0, 0) 40%),
    radial-gradient(120% 120% at 60% 78%, var(--m-lo), var(--m-mid) 55%, var(--m-hi));
}
/* stone — a rough speckled rock */
.el-shape.kind-stone {
  clip-path: polygon(20% 8%, 60% 1%, 90% 18%, 99% 52%, 84% 90%, 44% 99%, 10% 86%, 2% 44%);
  background:
    radial-gradient(3px 3px at 26% 62%, var(--m-lo) 98%, transparent),
    radial-gradient(2.5px 2.5px at 64% 38%, var(--m-lo) 98%, transparent),
    radial-gradient(2px 2px at 46% 20%, rgba(255, 255, 255, 0.45) 98%, transparent),
    radial-gradient(2.5px 2.5px at 72% 72%, var(--m-lo) 98%, transparent),
    linear-gradient(130deg, rgba(255, 255, 255, 0.4) 4%, rgba(255, 255, 255, 0) 36%),
    linear-gradient(310deg, rgba(0, 0, 0, 0.32) 4%, rgba(0, 0, 0, 0) 44%),
    radial-gradient(130% 130% at 55% 82%, var(--m-lo), var(--m-mid) 52%, var(--m-hi));
}
/* crystal — a cut gem with hard conic facets */
.el-shape.kind-crystal {
  clip-path: polygon(50% 0%, 88% 22%, 100% 66%, 72% 100%, 28% 100%, 0% 66%, 12% 22%);
  background:
    conic-gradient(from 200deg at 50% 38%,
      var(--m-hi) 0deg 42deg, var(--m-mid) 42deg 118deg,
      var(--m-lo) 118deg 205deg, var(--m-mid) 205deg 285deg,
      var(--m-hi) 285deg 360deg);
}
/* gas — a glass sample orb with a slowly drifting inner cloud */
.el-shape.kind-gas {
  left: 50%;
  top: 50%;
  width: 96%;
  height: 96%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(30% 22% at 32% 24%, rgba(255, 255, 255, 0.95), transparent 70%),
    radial-gradient(100% 100% at 50% 45%, rgba(255, 255, 255, 0.18), var(--m-hi) 60%, var(--m-lo));
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    inset 0 -6px 12px rgba(120, 140, 190, 0.18),
    0 0 0 1px rgba(150, 160, 200, 0.14);
}
.el-shape.kind-gas::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(60% 55% at 50% 60%, var(--m-mid), transparent 78%);
  filter: blur(1.5px);
  animation: lab-gas-drift 4.5s ease-in-out infinite alternate;
}
@keyframes lab-gas-drift {
  from { transform: translate(-8%, 5%) scale(0.95); }
  to { transform: translate(9%, -7%) scale(1.08); }
}
/* liquid — a heavy bead */
.el-shape.kind-liquid {
  border-radius: 50% 50% 50% 50% / 62% 62% 40% 40%;
  background:
    radial-gradient(26% 20% at 34% 24%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(120% 120% at 50% 88%, var(--m-lo), var(--m-mid) 55%, var(--m-hi) 96%);
  box-shadow:
    inset 0 -6px 10px rgba(0, 0, 0, 0.3),
    inset 0 3px 6px rgba(255, 255, 255, 0.35);
}

/* ── Drag ghost ── */
.lab-ghost {
  position: fixed;
  /* anchor to the viewport origin — with `top/left: auto` a fixed element
     keeps its static position (end of <body>, i.e. the bottom of the whole
     page), which threw the translate()-positioned ghost far off-screen and
     made drags look invisible */
  top: 0;
  left: 0;
  z-index: 400;
  pointer-events: none;
  will-change: transform;
  margin: 0;
}
/* .el-disc is a <span>: on the shelf the flex .el-token blockifies it, but
   inside the plain ghost div it stays inline and its box collapses, leaving
   only the symbol text visible — force it block so the shape has its area */
.lab-ghost .el-disc { display: block; width: 46px; height: 46px; }

/* ── Shared micro-animations ── */
@keyframes lab-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes lab-deny {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px) rotate(-2deg); }
  60% { transform: translateX(4px) rotate(1.5deg); }
}

/* ── Nav "Lab" pill ── */
/* ── Dark mode ── */
[data-theme="dark"] .lab-wrap {
  background: #1e1632;
  border-color: rgba(139, 92, 246, 0.14);
}
[data-theme="dark"] .lab-hint { color: #9b8ec4; }
[data-theme="dark"] .lab-note { color: #d8b4fe; }
[data-theme="dark"] .lab-slot {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(192, 132, 252, 0.35);
}
[data-theme="dark"] .lab-slot.filled { border-color: rgba(216, 180, 254, 0.55); }
[data-theme="dark"] .lab-slot-q { color: #9b8ec4; }
[data-theme="dark"] .lab-out { color: #ede8f5; }
[data-theme="dark"] .lab-op { color: #9b8ec4; }
[data-theme="dark"] .el-token:hover { background: rgba(139, 92, 246, 0.14); }
[data-theme="dark"] .el-token[aria-pressed="true"] {
  background: rgba(139, 92, 246, 0.22);
  box-shadow: inset 0 0 0 1.5px rgba(192, 132, 252, 0.5);
}
[data-theme="dark"] .el-name { color: #9b8ec4; }
[data-theme="dark"] .el-disc { filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5)); }
[data-theme="dark"] .el-shape.kind-gas + .el-sym {
  color: #f5f3ff;
  text-shadow: 0 1px 3px rgba(12, 7, 24, 0.9);
}
[data-theme="dark"] .lab-result-name { color: #ede8f5; }

/* ── Responsive ── */
@media (max-width: 768px) {
  #lab { padding: 36px 16px; }
  #lab .home-heading-friendly { font-size: clamp(1.35rem, 6vw, 1.6rem); }
  .lab-sub { font-size: 0.83rem; line-height: 1.5; margin-top: 6px; }
  .lab-stage { height: clamp(140px, 22vh, 200px); }
  .lab-shelf-label { margin: 10px 0 6px; }
  .el-token { gap: 2px; padding: 5px 2px 4px; }
  .lab-shelf .el-token { flex: none; }
  .lab-hint { font-size: 1rem; }
  /* two rows that scroll sideways — keeps the card inside one screen */
  .lab-shelf-frame::before,
  .lab-shelf-frame::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .lab-shelf-frame::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 248, 252, 1) 0%, rgba(255, 248, 252, 0) 100%);
  }
  .lab-shelf-frame::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 248, 252, 1) 0%, rgba(255, 248, 252, 0) 100%);
  }
  .lab-shelf-frame.has-scrolled.can-scroll-left::before,
  .lab-shelf-frame.has-scrolled.can-scroll-right::after {
    opacity: 1;
  }
  .lab-shelf {
    display: grid;
    justify-content: start;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: 62px;
    overflow-x: auto;
    padding: 6px 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lab-shelf::-webkit-scrollbar { display: none; }
  .lab-note { left: auto; right: 4%; top: 2%; }
  .lab-console {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    min-height: 56px;
  }
  .lab-eq {
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 50px 20px 50px;
    column-gap: 12px;
    align-items: center;
    justify-content: center;
  }
  .lab-eq > .lab-op:first-of-type {
    text-align: center;
  }
  .lab-eq > .lab-op:nth-of-type(2) {
    position: absolute;
    top: 50%;
    left: calc(50% + 84px);
    transform: translateY(-50%);
  }
  .lab-out {
    position: absolute;
    top: 50%;
    left: calc(50% + 114px);
    transform: translateY(-50%);
    min-width: 24px;
    text-align: center;
  }
  .lab-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
  .lab-result { min-height: 56px; }
  .lab-mix { padding: 10px 28px; font-size: 14px; }
  .lab-slot { width: 50px; height: 50px; flex-basis: 50px; }
}

/* ── Reduced motion ── */
@media (max-width: 768px) {
  [data-theme="dark"] .lab-shelf-frame::before {
    background: linear-gradient(to right, rgba(30, 22, 50, 1) 0%, rgba(30, 22, 50, 0) 100%);
  }
  [data-theme="dark"] .lab-shelf-frame::after {
    background: linear-gradient(to left, rgba(30, 22, 50, 1) 0%, rgba(30, 22, 50, 0) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lab-mix.armed { animation: none; }
  .lab-result-formula { animation: none; }
  .lab-note, .lab-hint, .lab-result, .lab-console,
  .el-token, .el-disc, .lab-slot, .lab-mix { transition: none; }
  .lab-out.pop, .lab-slot.deny, .el-token.deny { animation: none; }
  .el-shape.kind-gas::after { animation: none; }
}