#connect-board[data-connection="connected"] {
  background: var(--ok-bg);
  border-color: var(--accent-400);
  color: var(--ok-ink);
  min-width: 130px;
}
#connect-board[data-connection="disconnected"] {
  border-color: var(--n-400);
}
#connect-board[data-connection="checking"] {
  background: var(--warn-bg);
  border-color: var(--warn);
  color: var(--warn-ink);
}
#connection-summary {
  font-size: var(--fs-xs);
  max-width: 270px;
}
.board-steps {
  padding-left: 24px;
  display: grid;
  gap: 12px;
}
.board-steps li p {
  margin: 4px 0;
  font-size: var(--fs-md);
  line-height: 1.55;
}
.board-steps li::marker {
  font-weight: 700;
  color: var(--accent-600);
}
#hardware-guide {
  border: 1px solid var(--n-200);
  border-radius: var(--r-md);
  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: var(--n-600);
  font-size: var(--fs-xs);
}
.io-value {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--n-300);
  border-radius: var(--r-sm);
  width: 28px;
  height: 26px;
}
.io-value.on {
  color: var(--ok-ink);
  background: var(--ok-bg);
  border-color: var(--accent-200);
}
.ladder-cell[data-input-value]::after {
  content: "I=" attr(data-input-value);
  position: absolute;
  top: 15px;
  right: 1px;
  font: var(--fs-2xs) var(--font-mono);
  background: var(--n-50);
  color: var(--n-600);
  border-radius: var(--r-xs);
  padding: 1px 3px;
  pointer-events: none;
}
.ladder-cell.input-on::after {
  background: var(--accent-400);
  color: var(--n-0);
}
.rail-handle {
  min-height: 32px !important;
  cursor: ew-resize !important;
  background: var(--n-800) !important;
  color: var(--n-0) !important;
  z-index: 6 !important;
}
@media (max-width: 700px) {
  #connection-summary {
    display: none;
  }
  #connect-board {
    min-width: 0 !important;
    font-size: var(--fs-xs);
    padding: 5px 8px;
  }
  .io-table-wrap {
    font-size: var(--fs-sm);
  }
}
.game-panel {
  position: absolute;
  inset: 4%;
  border: 1px solid var(--n-500);
  border-radius: 13%;
  background: var(--n-800);
  box-shadow: inset 0 0 0 4px var(--n-200);
}
.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 var(--n-850);
  transform: none;
  background: var(--pad-color, var(--n-850));
  color: color-mix(in srgb, var(--n-0) 64%, transparent);
  box-shadow: inset 0 -7px 0 color-mix(in srgb, var(--n-950) 20%, transparent);
  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 color-mix(in srgb, var(--n-0) 50%, transparent), var(--sh-2);
}
.scene-object.is-pressed .game-pad,
.scene-object.is-pressed .game-cell {
  box-shadow: inset 0 3px 8px color-mix(in srgb, var(--n-950) 53%, transparent);
  transform: translateY(2px);
}
.pad-led {
  position: absolute;
  right: 9%;
  top: 9%;
  width: 7px;
  height: 7px;
  background: var(--n-900);
  border-radius: 50%;
}
.game-lit .pad-led {
  background: var(--n-0);
}
.scene-object .physical-control.game-cell {
  background: var(--n-50);
  box-shadow: inset 0 -4px 0 var(--n-300);
  color: var(--accent-500);
}
.game-mark {
  font: 700 54px/1 var(--font-ui);
}
.game-o .game-mark {
  color: var(--warn-ink);
}
.game-x.game-o .game-mark {
  color: var(--fault-ink);
}
.cell-dot {
  position: absolute;
  bottom: 8%;
  width: 4px;
  height: 4px;
  background: var(--n-500);
  border-radius: 50%;
}
.score-panel {
  position: absolute;
  inset: 5%;
  border-radius: var(--r-md);
  background: var(--n-850);
  border: 5px solid var(--n-300);
  box-shadow: inset 0 0 0 2px var(--n-950);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 9%;
}
.score-caption {
  font: var(--fs-2xs) var(--font-mono);
  letter-spacing: 2px;
  color: var(--n-400);
}
.score-value {
  font: 500 clamp(24px, 4vw, 48px) / 1.2 monospace;
  color: var(--accent-on-dark);
  letter-spacing: 2px;
}
.score-indicator {
  position: absolute;
  right: 8%;
  top: 15%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-200);
}
@media (prefers-reduced-motion: reduce) {
  .game-pad,
  .game-cell {
    transition: none !important;
  }
}
#connect-board.usb-lost {
  background: var(--fault-bg);
  border-color: var(--fault);
  color: var(--fault-ink);
}

.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}}