.js8-lab {
  color: var(--chalk);
  background: var(--bench);
  border-block: 1px solid var(--ink);
}
.js8-lab .shell { padding-block: clamp(72px, 9vw, 132px); }
.js8-lab-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: clamp(34px, 7vw, 110px);
  align-items: end;
  margin-bottom: 42px;
}
.js8-lab h2 {
  margin: 15px 0 0;
  font: 600 clamp(60px, 9vw, 128px)/.79 var(--display);
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.js8-lab-intro {
  max-width: 650px;
  justify-self: end;
  margin: 0;
  color: #b7b5aa;
  font: 400 13px/1.7 var(--mono);
}
.instrument {
  border: 1px solid #4a4a42;
  background: #0b0b09;
  box-shadow: 10px 10px 0 #000;
}
.instrument-topbar {
  min-height: 58px;
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  color: #9e9d93;
  border-bottom: 1px solid #3b3b34;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.instrument-id { display: flex; align-items: center; gap: 10px; }
.instrument-id::before { content: ""; width: 11px; height: 11px; background: var(--signal); box-shadow: 0 0 0 4px rgba(215,255,56,.12); }
.instrument-status { display: flex; flex-wrap: wrap; gap: 8px; }
.status-chip { padding: 7px 9px; border: 1px solid #45453e; }
.status-chip[data-state="ready"], .status-chip[data-state="pass"] { color: var(--signal); border-color: #68791f; }
.status-chip[data-state="busy"] { color: #111; border-color: var(--orange); background: var(--orange); }
.status-chip[data-state="error"] { color: #fff; border-color: #b83d25; background: #b83d25; }
.instrument-grid { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); }
.instrument-controls { padding: 24px; border-right: 1px solid #3b3b34; }
.instrument-scope { min-width: 0; padding: 24px; }
.control-group + .control-group { margin-top: 28px; padding-top: 24px; border-top: 1px solid #34342f; }
.control-label { display: block; margin-bottom: 12px; color: #8a8980; font: 500 9px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.control-row { display: flex; flex-wrap: wrap; gap: 8px; }
.instrument button, .instrument input, .instrument select {
  min-height: 44px;
  border-radius: 0;
  font: 500 10px var(--mono);
  letter-spacing: .035em;
}
.instrument button {
  padding: 0 14px;
  color: var(--chalk);
  border: 1px solid #55554d;
  background: #171713;
  cursor: pointer;
  text-transform: uppercase;
  transition: color .16s, background .16s, border-color .16s, transform .16s;
}
.instrument button:hover:not(:disabled), .instrument button:focus-visible { color: var(--ink); border-color: var(--signal); background: var(--signal); }
.instrument button:active:not(:disabled) { transform: translate(2px, 2px); }
.instrument button:disabled { opacity: .42; cursor: wait; }
.instrument button.primary { color: var(--signal-ink); border-color: var(--signal); background: var(--signal); }
.instrument button.warn { border-color: #8c412f; }
.instrument input, .instrument select {
  padding: 0 12px;
  color: var(--signal);
  border: 1px solid #55554d;
  background: #050504;
  outline: none;
}
.instrument input:focus, .instrument select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(52,120,246,.3); }
#js8-frame { width: min(100%, 200px); text-transform: none; }
#js8-type { width: 74px; }
.instrument-note { margin: 12px 0 0; color: #737269; font: 400 9px/1.55 var(--mono); }
.instrument-note strong { color: var(--orange); font-weight: 500; }
.scope-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 10px; color: #8a8980; font: 500 9px var(--mono); text-transform: uppercase; }
.scope-frame { position: relative; min-height: 250px; border: 1px solid #363630; background: #030303; overflow: hidden; }
.scope-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.2) 3px 4px); }
#js8-scope { width: 100%; height: 250px; display: block; }
.scope-axis { display: flex; justify-content: space-between; margin-top: 7px; color: #65645d; font: 400 8px var(--mono); }
.decode-ledger { margin-top: 24px; border-top: 1px solid #3b3b34; }
.ledger-row { min-height: 54px; display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 18px; padding: 12px 0; border-bottom: 1px solid #2c2c27; font-family: var(--mono); }
.ledger-label { color: #77766e; font-size: 9px; text-transform: uppercase; }
.ledger-value { min-width: 0; color: var(--chalk); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.ledger-value.signal { color: var(--signal); }
.ledger-meta { color: #77766e; font-size: 9px; text-align: right; }
.telemetry { max-height: 180px; overflow: auto; margin-top: 20px; padding: 14px; color: #8c8b82; border: 1px solid #2c2c27; background: #060605; font: 400 9px/1.65 var(--mono); white-space: pre-wrap; }
.instrument-foot {
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  color: #6f6e66;
  border-top: 1px solid #3b3b34;
  font: 400 8px/1.5 var(--mono);
  text-transform: uppercase;
}
.instrument-foot a { color: var(--signal); border-bottom: 1px solid #5b6b18; }
.bbs-door { color: var(--ink); background: var(--paper-2); border-bottom: 1px solid var(--ink); }
.bbs-door-grid { min-height: 170px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px; }
.bbs-door h3 { margin: 8px 0 0; font: 600 clamp(35px, 5vw, 66px)/.9 var(--display); text-transform: uppercase; }
.bbs-door a { min-width: 180px; min-height: 54px; display: grid; place-items: center; padding: 0 20px; color: var(--chalk); background: var(--bench); border: 1px solid var(--ink); font: 500 10px var(--mono); text-transform: uppercase; }
.bbs-door a:hover { color: var(--ink); background: var(--signal); }
@media (max-width: 900px) {
  .js8-lab-head, .instrument-grid { grid-template-columns: 1fr; }
  .js8-lab-intro { justify-self: start; }
  .instrument-controls { border-right: 0; border-bottom: 1px solid #3b3b34; }
}
@media (max-width: 680px) {
  .js8-lab .shell { padding-inline: 14px; }
  .instrument { box-shadow: 5px 5px 0 #000; }
  .instrument-controls, .instrument-scope { padding: 16px; }
  .ledger-row { grid-template-columns: 72px 1fr; }
  .ledger-meta { grid-column: 2; text-align: left; }
  .bbs-door-grid { padding-block: 34px; grid-template-columns: 1fr; }
  .bbs-door a { justify-self: stretch; }
}