.scan-lab .section-heading p,
.system-lab .section-heading p {
  max-width: 59ch;
}

.lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(290px, 1fr);
  align-items: start;
  gap: clamp(16px, 2.6vw, 34px);
}

.lab-board {
  min-width: 0;
  overflow: hidden;
  color: #e6ebf0;
  background: #1c2025;
  border: 1px solid #414950;
  border-radius: 8px;
}

.lab-board > svg {
  display: block;
  width: 100%;
  height: auto;
  background: #20262b;
}

.lab-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 16px;
  font: 700 11px/1.3 var(--mono);
  letter-spacing: .07em;
}

.lab-bar > span {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.lab-bar i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.lab-replay {
  padding: 5px 8px;
  color: #eff2f6;
  background: #2a3036;
  border: 1px solid #64707c;
  border-radius: 4px;
  letter-spacing: 0;
}

.lab-replay:hover { border-color: var(--amber); }
.lab-board :focus-visible { outline-color: var(--amber); }

.lab-board figcaption {
  padding: 10px 16px;
  color: #bfc8d0;
  border-top: 1px solid #414950;
  font-size: 12px;
}

.lab-wire,
.lab-line,
.lab-trace,
.lab-pulse,
.lab-ring {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lab-wire { stroke: #65737e; stroke-width: 4; }
.lab-line { stroke: #7a8996; stroke-width: 1.5; }
.lab-dotted { stroke: #434e58; stroke-dasharray: 3 5; }
.lab-device { fill: #303a42; stroke: #81929e; stroke-width: 1.6; }
.lab-screen { fill: #161b20; stroke: #576875; stroke-width: 1.5; }
.lab-pin { fill: #a8b8c5; }
.lab-accent-shape { fill: #3b2d19; stroke: var(--amber); stroke-width: 1.4; }
.lab-label { fill: #d0d9e2; font: 700 13px var(--mono); letter-spacing: .02em; }
.lab-gold { fill: #ffc870; }
.lab-screen-text { fill: #f7fafb; font: 700 23px var(--mono); }
.lab-code { font-size: 34px; }
.lab-trace { stroke: #f3ae42; stroke-width: 4; }
.lab-pulse { opacity: 0; stroke: #fff3cb; stroke-width: 5; stroke-dasharray: 8 100; }
.lab-ring { stroke: #ffc870; stroke-width: 2; stroke-dasharray: 4 4; }
.is-playing .lab-pulse { animation: lab-pulse 1.35s ease-out; }
.is-playing .lab-ring { animation: lab-ring 1.25s ease-out; }
.is-playing .lab-plug { animation: lab-plug .7s ease-out; }

@keyframes lab-pulse {
  0% { opacity: 0; stroke-dashoffset: 108; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: 8; }
}
@keyframes lab-ring {
  0%, 100% { opacity: 1; }
  45% { opacity: .25; }
}
@keyframes lab-plug {
  from { transform: translateX(22px); }
  to { transform: translateX(0); }
}

.lab-sidebar {
  min-width: 0;
  padding: clamp(16px, 2vw, 25px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.lab-choices {
  display: grid;
  gap: 6px;
  margin-bottom: 20px;
}

.lab-choices button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 7px 10px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 14px;
  font-weight: 750;
  text-align: left;
}

.lab-choices button > span {
  color: #654315;
  font: 750 12px var(--mono);
}

.lab-choices button[aria-pressed="true"] {
  background: var(--surface-hover);
  border-color: #a56819;
  box-shadow: inset 3px 0 #a56819;
}

.lab-reading + .lab-reading { margin-top: 20px; }
.lab-reading[hidden] + .lab-reading { margin-top: 0; }

.lab-reading h3 {
  font-size: clamp(22px, 2.3vw, 29px);
  line-height: 1.16;
}

.lab-reading p {
  margin: 9px 0 10px;
  color: var(--muted);
  font-size: 15px;
}

.system-lab {
  color: #f1f4f7;
  background: #17191c;
}

.system-lab .eyebrow { color: #ffc870; }
.system-lab .eyebrow-no { border-color: #8b6837; }
.system-lab .section-heading p,
.system-lab .lab-reading p { color: #c4ccd4; }
.system-lab .lab-sidebar { background: #22272c; border-color: #414950; }
.system-lab .lab-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.system-lab .lab-choices button {
  color: #f0f3f5;
  background: #2b333a;
  border-color: #6a7783;
}
.system-lab .lab-choices button[aria-pressed="true"] {
  color: #ffd18a;
  background: #403320;
  border-color: var(--amber);
  box-shadow: inset 3px 0 var(--amber);
}
.system-lab .text-link { color: #ffc870; }
.system-lab :focus-visible { outline-color: var(--amber); }

.scan-help {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: center;
  gap: clamp(28px, 6vw, 86px);
}

.scan-photo {
  position: relative;
  overflow: hidden;
  background: #23272b;
  border: 1px solid #3a424a;
  border-radius: 8px;
}

.scan-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.scan-photo figcaption {
  position: absolute;
  inset: auto auto 12px 12px;
  padding: 6px 9px;
  color: #f2f4f6;
  background: #16191dee;
  border-radius: 4px;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .055em;
}

.scan-help p { max-width: 48ch; margin: 14px 0 20px; color: var(--muted); }

.scan-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}

.scan-actions > .scan-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  color: #24180b;
  background: var(--amber);
  border-radius: 5px;
  font-weight: 800;
  text-decoration: none;
}

.scan-primary:hover { background: #ffc768; }

.home-faq { max-width: 860px; }
.home-faq .section-heading { margin-bottom: 18px; }
.home-faq details { border-block-start: 1px solid var(--line); }
.home-faq details:last-child { border-block-end: 1px solid var(--line); }
.home-faq summary { cursor: pointer; padding: 14px 4px; font-weight: 800; }
.home-faq details p { max-width: 66ch; margin: 0 4px 15px; color: var(--muted); }
.home-faq details a { color: #6d4109; }

@media (max-width: 860px) {
  .lab-grid { grid-template-columns: minmax(0, 1fr); }
  .scan-help { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 450px) {
  .lab-bar { padding-inline: 10px; }
  .lab-board figcaption { padding-inline: 10px; }
  .lab-reading .text-link { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .lab-replay { display: none; }
}