#connect-board[data-connection="connected"] {
  background: #e0f4ec;
  border-color: #289777;
  color: #126044;
  min-width: 130px;
}
#connect-board[data-connection="disconnected"] {
  border-color: #98a7b5;
}
#connect-board[data-connection="checking"] {
  background: #fff4db;
  border-color: #d8a63f;
  color: #765612;
}
#connection-summary {
  font-size: 11px;
  max-width: 270px;
}
.board-steps {
  padding-left: 24px;
  display: grid;
  gap: 12px;
}
.board-steps li p {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.55;
}
.board-steps li::marker {
  font-weight: 700;
  color: #18765d;
}
#hardware-guide {
  border: 1px solid #d3dee5;
  border-radius: 8px;
  padding: 12px;
  margin-top: 12px;
}
#hardware-guide summary,
#io-diagnostics summary {
  cursor: pointer;
  font-weight: 600;
}
#io-diagnostics {
  margin-top: 14px;
}
.io-table-wrap {
  overflow: auto;
}
#io-live small {
  display: block;
  color: #69808e;
  font-size: 11px;
}
.io-value {
  display: inline-grid;
  place-items: center;
  border: 1px solid #c7d7de;
  border-radius: 4px;
  width: 28px;
  height: 26px;
}
.io-value.on {
  color: #047554;
  background: #ddf6ea;
  border-color: #5cbb97;
}
.ladder-cell[data-input-value]::after {
  content: "I=" attr(data-input-value);
  position: absolute;
  top: 15px;
  right: 1px;
  font: 9px monospace;
  background: #eef2f6;
  color: #526775;
  border-radius: 3px;
  padding: 1px 3px;
  pointer-events: none;
}
.ladder-cell.input-on::after {
  background: #0c8262;
  color: white;
}
.rail-handle {
  min-height: 32px !important;
  cursor: ew-resize !important;
  background: #284c61 !important;
  color: white !important;
  z-index: 6 !important;
}
@media (max-width: 700px) {
  #connection-summary {
    display: none;
  }
  #connect-board {
    min-width: 0 !important;
    font-size: 11px;
    padding: 5px 8px;
  }
  .io-table-wrap {
    font-size: 12px;
  }
}
.game-panel {
  position: absolute;
  inset: 4%;
  border: 1px solid #738a9a;
  border-radius: 13%;
  background: #243b4a;
  box-shadow: inset 0 0 0 4px #dce5eb;
}
.game-screw {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #70899b;
  top: 5%;
}
.game-screw.a {
  left: 5%;
}
.game-screw.b {
  right: 5%;
}
.scene-object .physical-control.game-pad,
.scene-object .physical-control.game-cell {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  border-radius: 12%;
  border: 2px solid #112934;
  transform: none;
  background: var(--pad-color, #192e3c);
  color: #ffffffa3;
  box-shadow: inset 0 -7px 0 #0003;
  display: grid;
  place-items: center;
  font-size: 30px;
  transition:
    filter 100ms,
    box-shadow 100ms;
}
.scene-object.game-lit .game-pad {
  filter: brightness(1.35);
  box-shadow:
    inset 0 0 15px #ffffff80,
    0 0 18px var(--pad-color);
}
.scene-object.is-pressed .game-pad,
.scene-object.is-pressed .game-cell {
  box-shadow: inset 0 3px 8px #0008;
  transform: translateY(2px);
}
.pad-led {
  position: absolute;
  right: 9%;
  top: 9%;
  width: 7px;
  height: 7px;
  background: #112c33;
  border-radius: 50%;
}
.game-lit .pad-led {
  background: white;
}
.scene-object .physical-control.game-cell {
  background: #f2f7fa;
  box-shadow: inset 0 -4px 0 #beced9;
  color: #1c7699;
}
.game-mark {
  font: 700 54px/1 system-ui;
}
.game-o .game-mark {
  color: #c86b34;
}
.game-x.game-o .game-mark {
  color: #c63737;
}
.cell-dot {
  position: absolute;
  bottom: 8%;
  width: 4px;
  height: 4px;
  background: #879da9;
  border-radius: 50%;
}
.score-panel {
  position: absolute;
  inset: 5%;
  border-radius: 8px;
  background: #172e3b;
  border: 5px solid #b5c6d2;
  box-shadow: inset 0 0 0 2px #0b1c25;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9%;
}
.score-caption {
  font: 9px monospace;
  letter-spacing: 2px;
  color: #91aebc;
}
.score-value {
  font: 500 clamp(24px, 4vw, 48px) / 1.2 monospace;
  color: #62e3bb;
  letter-spacing: 2px;
}
.score-indicator {
  position: absolute;
  right: 8%;
  top: 15%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #60d5b0;
}
@media (prefers-reduced-motion: reduce) {
  .game-pad,
  .game-cell {
    transition: none !important;
  }
}
#connect-board.usb-lost {
  background: #fff0eb;
  border-color: #d27761;
  color: #9b3a29;
}

.brand .industrial-wordmark{font-weight:400;color:#9ccec6}.topbar .brand{white-space:nowrap}@media(max-width:650px){.topbar .brand strong{font-size:11px}.brand .industrial-wordmark{display:block;font-size:9px;line-height:1.1}.topbar .brand .edition{display:none}}