:root {
  --bg: #0f172a;
  --card: #1e293b;
  --card-border: #334155;
  --tx: #f8fafc;
  --tx-muted: #94a3b8;
  --ac: #10b981;
  --ac-hover: #059669;
  --ac-txt: #04241a;
  --board: #065f46;
  --pin: #f59e0b;
  --code-bg: #020617;
  --err: #ef4444;
  --wire-col: #15803d;
  --canvas: #2b3036;
}

[data-theme="light"] {
  --bg: #f1f5f9;
  --card: #ffffff;
  --card-border: #cbd5e1;
  --tx: #0f172a;
  --tx-muted: #64748b;
  --ac: #059669;
  --ac-hover: #047857;
  --ac-txt: #04241a;
  --board: #047857;
  --pin: #d97706;
  --code-bg: #1e293b;
  --err: #dc2626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header {
  background: var(--card);
  border-bottom: 1px solid var(--card-border);
  padding: 10px 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.platform-link {
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--ac-txt);
  background: var(--ac);
  border-radius: 8px;
  padding: 6px 10px;
}
.platform-link:hover { background: var(--ac-hover); }
h1 { font-size: 18px; font-weight: 700; color: var(--tx); }

.bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

button, select, input {
  font: inherit;
  color: var(--tx);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

button:hover { border-color: var(--ac); }
button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, a:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
}
button.btn-primary { background: var(--ac); color: var(--ac-txt); border-color: var(--ac); font-weight: 600; }
button.btn-primary:hover { background: var(--ac-hover); }
button.btn-danger { background: var(--err); color: #fff; border-color: var(--err); font-weight: 600; }

main {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  padding: 16px;
  flex: 1;
  max-width: 1600px;
  margin: 0 auto;
  width: 100%;
}

@media(max-width: 1024px) {
  main { grid-template-columns: 1fr; }
}

.panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.panel-title {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 8px;
}

.palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  background: rgba(0,0,0,0.1);
  border-radius: 8px;
  max-height: 120px;
  overflow-y: auto;
}

.palette button {
  font-size: 12px;
  padding: 4px 10px;
  background: var(--card);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.workspace-container {
  position: relative;
  background: #020617;
  border: 1px solid var(--card-border);
  border-radius: 10px;
  min-height: 540px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

svg#wires-svg {
  position: absolute;
  left: -2500px;
  top: -2500px;
  width: 9000px;
  height: 7000px;
  overflow: hidden;
  pointer-events: auto;
  z-index: 5;
}

svg#wires-svg path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: stroke;
}

#workspace.wiring, #workspace.wiring .arduino-board { cursor: crosshair; }
svg#wires-svg path.jumper-core { cursor: pointer; }

svg#wires-svg g.jumper:hover .jumper-core {
  filter: brightness(1.28);
  stroke-width: 5.2;
}
svg#wires-svg .jumper-flow {
  stroke: #fde047;
  stroke-width: 2.2;
  stroke-dasharray: 7 10;
  stroke-linecap: round;
  opacity: 0;
  filter: drop-shadow(0 0 2px #facc15);
}
svg#wires-svg g.jumper.live .jumper-core {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
}
svg#wires-svg g.jumper.live .jumper-flow {
  opacity: 0.95;
  animation: wire-current 0.42s linear infinite;
}
@keyframes wire-current { to { stroke-dashoffset: -36; } }
@media (prefers-reduced-motion: reduce) {
  svg#wires-svg g.jumper.live .jumper-flow { animation: none; opacity: 0.8; stroke-dasharray: none; }
}

/* Wokwi-style Arduino Uno: teal PCB, silkscreen, female headers */
.arduino-board {
  position: absolute;
  left: 12px;
  top: 48px;
  width: 486px;
  height: 360px;
  padding: 0;
  background: transparent;
  border-radius: 8px;
  border: none;
  /* no box shadow: it drew a rectangular plate around the board. The board image casts its own. */
  box-shadow: none;
  color: #fff;
  z-index: 2;
  cursor: grab;
  touch-action: none;
}
.uno-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28));
}
.arduino-board.board-esp32 { width: 680px; height: 283px; }
.board-esp32 .uno-reset { left: 15%; top: 22.67%; width: 22px; height: 22px; }
.board-esp32 #led-on { left: 22.22%; top: 43.33%; }
.board-esp32 #led-l { left: 22.22%; top: 53.33%; }
.board-esp32 #led-tx, .board-esp32 #led-rx { display: none; }
/* a real ESP32 DevKit: a red power LED, and a blue LED on GPIO2 (dim blue while off) */
.board-esp32 #led-on, .board-esp32 #led-l { width: 12px; height: 7px; border-radius: 2px; transform: translate(-50%, -50%); }
.board-esp32 #led-on { background: #5b1a1a; box-shadow: none; }
.board-esp32 #led-on.on-pow { background: #ef4444; box-shadow: 0 0 8px 3px rgba(239, 68, 68, .7); }
.board-esp32 #led-l { background: #1e3a5f; box-shadow: none; }
.board-esp32 .status-led.on-l { background: #38bdf8; box-shadow: 0 0 10px 4px rgba(56, 189, 248, .75); }
.arduino-board.dragging {
  cursor: grabbing;
  z-index: 4;
}
.arduino-board .uno-reset { cursor: pointer; }

.uno-mh {
  position: absolute;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--canvas) 0 3.5px, #e5e7eb 4.2px 5px, #737373 5.2px 6px, transparent 6.2px);
  z-index: 3;
}
.uno-usb {
  position: absolute;
  left: -10px;
  top: 42px;
  width: 48px;
  height: 34px;
  background: linear-gradient(180deg, #f3f4f6, #9ca3af 48%, #6b7280);
  border: 1px solid #4b5563;
  border-radius: 2px 4px 4px 2px;
  box-shadow: inset 0 0 0 2px #e5e7eb, 2px 2px 4px rgba(0,0,0,.35);
  z-index: 3;
}
.uno-usb::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 7px;
  width: 20px;
  height: 18px;
  background: #111827;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px #4b5563, inset 4px 5px 0 2px #9ca3af;
}
.uno-jack {
  position: absolute;
  left: -8px;
  top: 112px;
  width: 36px;
  height: 28px;
  background: linear-gradient(180deg, #3f3f46, #0a0a0a);
  border-radius: 3px;
  border: 1px solid #000;
  box-shadow: inset 0 1px 0 #71717a, 2px 2px 3px rgba(0,0,0,.4);
  z-index: 3;
}
.uno-jack::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #0a0a0a 0 5px, #a1a1aa 6px 7px, #18181b 8px);
}
.uno-usb, .uno-jack { display: none; }
.uno-reset {
  position: absolute;
  left: 20.37%;
  top: 15%;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 4;
}
.uno-reset:active { transform: translate(-50%, -50%); box-shadow: none; }
.uno-chip {
  position: absolute;
  left: 124px;
  top: 86px;
  width: 132px;
  height: 46px;
  background: linear-gradient(180deg, #3f3f46, #18181b 30%, #09090b);
  border: 1px solid #000;
  border-radius: 2px;
  box-shadow: 0 1px 0 #52525b;
  z-index: 1;
}
.uno-chip span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 8px;
  letter-spacing: .4px;
  color: #e4e4e7;
}
.uno-chip i {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: 6px;
  transform: translateX(-50%);
  background: #09090b;
  border-radius: 0 0 8px 8px;
}
.uno-chip::before, .uno-chip::after {
  content: '';
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 5px;
  background: repeating-linear-gradient(#d4d4d8 0 2px, transparent 2px 3.6px);
}
.uno-chip::before { left: -5px; }
.uno-chip::after { right: -5px; }
.uno-xtal {
  position: absolute;
  left: 50px;
  top: 154px;
  width: 28px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f4f4f5, #a1a1aa 45%, #52525b);
  border: 1px solid #3f3f46;
}
.uno-icsp {
  position: absolute;
  width: 26px;
  height: 16px;
  background:
    radial-gradient(circle at 5px 4px, #e4e4e7 1.4px, transparent 1.6px),
    radial-gradient(circle at 13px 4px, #e4e4e7 1.4px, transparent 1.6px),
    radial-gradient(circle at 21px 4px, #e4e4e7 1.4px, transparent 1.6px),
    radial-gradient(circle at 5px 12px, #e4e4e7 1.4px, transparent 1.6px),
    radial-gradient(circle at 13px 12px, #e4e4e7 1.4px, transparent 1.6px),
    radial-gradient(circle at 21px 12px, #e4e4e7 1.4px, transparent 1.6px),
    #111;
  border-radius: 1px;
  z-index: 1;
}
.arduino-board > .status-led {
  position: absolute;
  z-index: 3;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#led-on { left: 83.7%; top: 32%; }
#led-l { left: 41.3%; top: 31.25%; }
#led-tx { left: 41.3%; top: 36.25%; }
#led-rx { left: 41.3%; top: 40%; }
.uno-leds span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .2px;
  color: #fff;
  line-height: 1;
}
.uno-logo {
  position: absolute;
  left: 128px;
  top: 146px;
  font-family: Arial, Helvetica, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .6px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  pointer-events: none;
}
.uno-logo b { font-size: 18px; font-style: italic; margin-left: 3px; }
.silk {
  position: absolute;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .4px;
  color: rgba(255,255,255,.95);
  pointer-events: none;
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
}
.silk-digital { top: 22px; left: 8px; }
.silk-power { bottom: 36px; right: 176px; }
.silk-analog { bottom: 36px; right: 22px; }

.hdr {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  background: transparent;
  box-shadow: none;
  z-index: 3;
  pointer-events: none;
}
.hdr-top, .hdr-bot { top: 0; bottom: 0; right: auto; }
.hdr-strip {
  display: flex;
  align-items: center;
  height: 14px;
  padding: 0 2px;
  background: linear-gradient(180deg, #52525b, #18181b 38%, #09090b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.45);
}
.uno-reset:hover { border-color: #0a0a0a; }

.arduino-board .pin-node {
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  cursor: crosshair;
  color: #fff;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.arduino-board .pin-node .hole {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fafafa, #a1a1aa 46%, #27272a 78%);
  box-shadow: inset 0 0 0 0.5px #000;
  pointer-events: none;
}
.arduino-board .pin-node span { display: none; }
.hdr-top .pin-node span { top: 16px; }
.hdr-bot .pin-node span { bottom: 16px; }
.arduino-board .pin-node.is-pwm span { color: #fde68a; }
.arduino-board .pin-node::after { content: none; }
.hdr-bot .pin-node::after { top: -14px; bottom: -4px; }
/* hovering or starting a wire only rings the pin; it keeps its place (the same centring as above) */
.arduino-board .pin-node:hover,
.arduino-board .pin-node.wire-source {
  background: transparent;
  transform: translate(-50%, -50%);
  z-index: 4;
  outline: none;
}
.arduino-board .pin-node:hover .hole,
.arduino-board .pin-node.wire-source .hole {
  box-shadow: 0 0 0 2px #fff;
}
.arduino-board .pin-node.wire-source .hole { animation: pl .8s infinite; }
.arduino-board .pin-node.active-high {
  background: transparent;
  box-shadow: none;
  color: #fff;
}
.arduino-board .pin-node.active-high .hole {
  background: radial-gradient(circle at 35% 30%, #fffbeb, #facc15 55%, #a16207);
  box-shadow: 0 0 6px #facc15;
}
.status-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #14532d;
  display: inline-block;
  box-shadow: inset 0 0 2px rgba(0,0,0,.55);
}
#led-l, #led-tx, #led-rx { background: #713f12; }
.status-led.on-pow { background: #4ade80; box-shadow: 0 0 6px #4ade80; }
.status-led.on-l, .status-led.on-tx { background: #fde047; box-shadow: 0 0 7px #facc15; }

.comps-area {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.comp-box {
  position: absolute;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 150px;
  pointer-events: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 3;
  cursor: grab;
  touch-action: none;
}

.comp-box:active {
  cursor: grabbing;
}

.comp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 12px;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 4px;
}

.comp-close {
  background: none;
  border: none;
  color: var(--tx-muted);
  font-size: 14px;
  padding: 0 4px;
  cursor: pointer;
}
.comp-close:hover { color: var(--err); }

.comp-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
}

.led-node {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  background: #334155;
  transition: all 0.1s;
}

.pir-sensor-indicator {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #334155;
  border: 2px solid #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
}
.pir-sensor-indicator.active {
  background: #ef4444;
  box-shadow: 0 0 12px #ef4444;
  border-color: #f87171;
}


.lcd-screen {
  background: transparent;
  color: #f4f7d4;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 10px;
  padding: 11px 8px;
  border-radius: 3px;
  width: 123.75px;
  height: 50.25px;
  white-space: pre;
  line-height: 13px;
  border: none;
  overflow: hidden;
  text-shadow: 0 0 4px rgba(255,255,255,.4);
}

/* 7-segment module: black board, pin holes, and seven segments that light up */
.seg-svg { position: relative; width: 70px; height: 112px; }
.seg-body { display: block; width: 100%; height: 100%; }
.seg-body .seg-hole { fill: #e4e4e7; }
.seg-body .seg-lit { fill: #2e2e33; }
.seg-body .seg-lit.on { fill: #ff2d2d; filter: drop-shadow(0 0 5px rgba(255,45,45,.9)); }
.relay-switch {
  width: 40px; height: 20px;
  background: #334155;
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
}
.relay-switch.active { background: #10b981; }
.relay-switch::after {
  content: '';
  position: absolute;
  left: 3px; top: 3px; width: 14px; height: 14px;
  background: #fff; border-radius: 50%;
  transition: transform 0.2s;
}
.relay-switch.active::after { transform: translateX(20px); }

.terminals {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-top: 4px;
  border-top: 1px dashed var(--card-border);
  padding-top: 4px;
}

.term-pin {
  width: 11px;
  height: 11px;
  background: radial-gradient(circle at 35% 30%, #fafafa, #9ca3af 48%, #27272a 80%);
  border-radius: 50%;
  cursor: crosshair;
  border: 1px solid #111;
  box-shadow: 0 0 0 1px rgba(255,255,255,.15);
  position: relative;
}
.term-pin:hover, .term-pin.wire-source {
  transform: none;
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}
.term-pin::after {
  content: attr(data-lbl);
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--tx-muted);
}

.code-editor-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

textarea#code-input {
  width: 100%;
  height: 280px;
  background: var(--code-bg);
  color: #38bdf8;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  resize: vertical;
  tab-size: 2;
  outline: none;
}

.serial-console {
  background: var(--code-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  height: 160px;
}

.serial-output {
  flex: 1;
  padding: 8px;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #4ade80;
  overflow-y: auto;
  white-space: pre-wrap;
}

.serial-input-bar {
  display: flex;
  border-top: 1px solid var(--card-border);
}
.serial-input-bar input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 6px 10px;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: 12px;
}

.wire-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,0.2);
  border-radius: 6px;
  font-size: 12px;
}

.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.color-dot.selected { outline: 2px solid #38bdf8; outline-offset: 1px; transform: scale(1.12); }

.scope-panel {
  height: 80px;
  background: #020617;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

canvas#scope-canvas {
  width: 100%;
  height: 100%;
}

/* ===== UI v4 overrides ===== */
header{position:sticky;top:0;z-index:50;padding:8px 14px}
.brand span{display:none}
.speedbox{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-muted)}
.speedbox input{width:80px;padding:0;accent-color:var(--ac)}
.run-big{padding:8px 22px;font-size:15px;min-width:110px}
.status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;border:1px solid var(--card-border);font-size:12px}
.status-pill i{width:9px;height:9px;border-radius:50%;background:#64748b}
.status-pill.run i{background:#22c55e;box-shadow:0 0 8px #22c55e;animation:pl 1s infinite}
.status-pill.err i{background:var(--err)}
@keyframes pl{50%{opacity:.35}}
.header-start{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 auto}
details.menu{position:relative;flex:0 0 auto}
details.menu summary{list-style:none;cursor:pointer;padding:6px 12px;border:1px solid var(--card-border);border-radius:6px;background:var(--card)}
details.menu summary::-webkit-details-marker{display:none}
.menu-list{position:absolute;left:0;right:auto;top:110%;z-index:60;background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;min-width:280px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.menu-list button{text-align:left;border:none;background:transparent}
.menu-list button:hover{background:rgba(16,185,129,.15)}
.menu-rule{height:1px;margin:4px 2px;background:var(--card-border);border:0}
.menu-note{font-size:12px;color:var(--tx-muted);padding:4px 8px}
.project-name{display:block;font-size:12px;font-weight:700;color:var(--tx-muted)}
.serial-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.serial-tools label{font-size:11px;color:var(--tx-muted);display:inline-flex;gap:4px;align-items:center}
.serial-tools button,.serial-tools span{font-size:11px}
dialog .dlg-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
dialog .dlg-actions button{flex:1}
.img-menu{position:fixed;z-index:80;min-width:260px;background:var(--card);border:1px solid var(--card-border);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:2px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.img-menu button{text-align:left;border:none;background:transparent;color:var(--tx)}
.img-menu button:hover{background:rgba(16,185,129,.15)}
.img-menu[hidden]{display:none}
.tabs{display:none;gap:6px;padding:8px 12px 0}
.tabs button{flex:1;padding:9px}
.tabs button.on{background:var(--ac);color:#fff;border-color:var(--ac)}
@media(max-width:1024px){.tabs{display:flex}
 main[data-tab=circuit] #panel-code,main[data-tab=code] #panel-circuit{display:none}
 .brand h1{font-size:15px}
 header .bar{width:100%}
 .example-search,#example-select{flex:1 1 140px;min-width:0}}
main{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
#panel-code{position:sticky;top:64px}
@media(max-width:1024px){#panel-code{position:static}}
.circuit-tools,.code-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.circuit-tools button,.code-tools button{padding:4px 10px;font-size:12px}
.circuit-tools button:disabled,.code-tools button:disabled{opacity:.38;cursor:default}
.example-search{width:160px;min-width:0}
.menu-speed{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:13px;color:var(--tx-muted)}
.menu-speed input{width:110px;padding:0;cursor:pointer}
.first-run{background:#042f2e;border:1px solid var(--ac);border-radius:12px;padding:12px 14px}
.first-run ol{margin:8px 0 10px 18px}
.first-run li+li{margin-top:4px}
.hint{font-size:12px;color:var(--tx-muted);flex:1;min-width:180px}
.hint.active{color:var(--pin);font-weight:600}
.palette{max-height:none;padding:8px}
.palette button{padding:6px 10px}
.palette button:hover{background:var(--ac);color:#fff;transform:translateY(-1px)}
.workspace-container{min-height:700px;background-color:#2b3036;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:16px 16px}
#stage{position:absolute;inset:0;transform-origin:0 0;background:transparent;cursor:default}
#workspace.pan-mode #stage{cursor:grab}
.canvas-run{position:absolute;right:12px;top:12px;z-index:8;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.canvas-bg{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:2px 8px;font-weight:700}
.canvas-bg i{display:block;width:12px;height:12px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #334155;background:var(--swatch,#2b3036)}
.canvas-bg span{font-size:11px;line-height:1}
#workspace.wiring #stage{cursor:crosshair}
#workspace.panning,#workspace.panning #stage{cursor:grabbing}
.view-hud{position:absolute;right:8px;bottom:8px;z-index:6;display:flex;gap:4px}
.view-hud button,.view-hud .grid-toggle{min-width:28px;padding:2px 8px;font-size:12px;background:#111827;color:#e5e7eb;border:1px solid #334155;border-radius:6px}
.view-hud .grid-toggle{display:inline-flex;align-items:center;gap:4px;cursor:pointer;user-select:none}
.view-hud .grid-toggle input{accent-color:#10b981;margin:0}
.view-hud button.on{background:#10b981;color:#042f2e;border-color:#10b981}
.marquee{position:absolute;z-index:7;border:1px solid #38bdf8;background:rgba(56,189,248,.18);pointer-events:none}
#board-orient,.board-rotate{display:none!important}
.comp-box{cursor:grab}.comp-box:active{cursor:grabbing}
textarea#code-input{height:420px;font-size:var(--code-fs,13px)}
.serial-console{height:200px}
.statusbar{display:flex;gap:18px;flex-wrap:wrap;padding:6px 16px;font-size:12px;color:var(--tx-muted);border-top:1px solid var(--card-border);background:var(--card);position:sticky;bottom:0}
.val-lbl{font-size:11.5px;font-family:Consolas,"Cascadia Mono",ui-monospace,monospace}
dialog{margin:auto;background:var(--card);color:var(--tx);border:1px solid var(--card-border);border-radius:14px;padding:20px;max-width:480px}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog ol{margin:10px 0 14px 20px;line-height:1.8}
kbd{background:var(--bg);border:1px solid var(--card-border);border-radius:4px;padding:0 5px;font-size:12px}
input[type=range]{accent-color:var(--ac)}
/* FIX: wire layer was covering components and swallowing clicks/drags on sliders & buttons */
svg#wires-svg{pointer-events:none!important}
svg#wires-svg path{pointer-events:stroke!important}
.comp-box{z-index:3}
.comp-box input[type=range],.comp-box button{touch-action:manipulation;cursor:pointer}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes buzz { 0%,100% { transform: translateY(0); } 50% { transform: translateY(1px); } }

/* Wokwi-style chrome: drag edges, closable board, parts popover, play button */
main.lab-split{display:flex;align-items:stretch;gap:0;max-width:none}
#panel-circuit{flex:0 0 var(--circuit-w,70%);min-width:280px;width:auto}
#panel-code{flex:1 1 auto;min-width:280px;width:auto}
.split-v{flex:0 0 12px;cursor:col-resize;position:relative;touch-action:none}
.split-v::after{content:'';position:absolute;left:5px;top:18px;bottom:18px;width:2px;border-radius:2px;background:#475569}
.split-v:hover::after,.split-v.dragging::after{background:#10b981;width:3px;left:4px}
.workspace-container{height:var(--canvas-h,700px);min-height:280px}
.edge-s{height:12px;cursor:ns-resize;touch-action:none;display:flex;align-items:center;justify-content:center}
.edge-s::after{content:'';width:48px;height:4px;border-radius:4px;background:#64748b}
#canvas-resize{position:absolute;left:0;right:0;bottom:0;z-index:8}
#canvas-resize:hover::after,.edge-drag.dragging::after{background:#10b981}
.view-hud{bottom:18px}
textarea#code-input{height:var(--code-h,420px);resize:none}
.wokwi-run{width:44px;height:44px;min-width:44px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.wokwi-run{display:inline-flex;align-items:center;gap:8px}
.wokwi-run .run-word{font-weight:700}
.wokwi-run .run-glyph{width:0;height:0;border-style:solid;border-width:7px 0 7px 13px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.wokwi-run.is-stop .run-glyph{width:12px;height:12px;margin:0;border:0;background:currentColor;border-radius:2px}
.parts-plus{position:absolute;left:12px;top:12px;z-index:8;width:44px;height:44px;border-radius:50%;background:#111827;color:#fff;font-size:30px;line-height:1;padding:0;border:1px solid #334155;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.parts-plus:hover{background:#10b981;color:#042f2e;border-color:#10b981}
.board-back{position:absolute;left:64px;top:16px;z-index:8;height:36px;padding:0 12px;border-radius:18px;background:#10b981;color:#042f2e;border:none;font-weight:700}
.board-back[hidden]{display:none}
.parts-pop{position:absolute;left:12px;top:64px;z-index:9;width:min(380px,calc(100% - 24px));max-height:calc(100% - 80px);background:#111827;border:1px solid #334155;border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:0 16px 40px rgba(0,0,0,.5)}
.parts-pop[hidden]{display:none}
.parts-pop input{width:100%;background:#0b1220;color:#e5e7eb}
.parts-pop .palette{max-height:min(420px,50vh);overflow:auto}
.board-close{position:absolute;right:6px;top:6px;z-index:6;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid #52525b;background:#18181b;color:#fff;line-height:26px;font-size:16px;font-weight:400;opacity:1}
.board-rotate{position:absolute;left:8px;top:8px;z-index:6;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid #52525b;background:#111827;color:#e5e7eb;font-size:15px;line-height:1;cursor:pointer}
.board-rotate:hover{background:#10b981;color:#042f2e;border-color:#10b981}
.arduino-board.is-vertical{transform:rotate(90deg)}
.arduino-board.is-vertical .board-close,
.arduino-board.is-vertical .board-rotate{transform:rotate(-90deg)}
.board-close:hover{background:#ef4444;color:#fff;border-color:#ef4444}
.comp-box.part.side-pins:not(.seated){width:110px;min-height:40px}
.comp-box.part.side-pins:not(.seated) .terminals{position:absolute;left:0;right:0;top:18px;height:28px;pointer-events:none}
.comp-box.part.side-pins:not(.seated) .term-pin{position:absolute;top:8px;margin:0;pointer-events:auto}
.comp-box.part.side-pins:not(.seated) .term-pin::before,.comp-box.part.side-pins:not(.seated) .term-pin::after{display:none}
.comp-box.part.side-pins:not(.seated) .term-pin[data-side="l"]{left:-2px}
.comp-box.part.side-pins:not(.seated) .term-pin[data-side="r"]{right:-2px;left:auto}
.res-body,.bat-body{position:relative}
.res-body img{width:110px;height:32px}
.bat-body img{width:110px;height:36px}
.res-body .val-lbl,.bat-body .val-lbl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.82);color:#1c1917;text-shadow:none;border-radius:3px;padding:0 3px;font-size:9px;font-weight:700;pointer-events:none}
.comp-box.picked{outline:2px solid #10b981;outline-offset:3px;border-radius:8px}
.comp-box.selected,.arduino-board.selected{outline:2px solid #38bdf8;outline-offset:3px;border-radius:8px}
.prop-pop{position:absolute;z-index:12;width:230px;background:#111827;border:1px solid #334155;border-radius:10px;padding:10px;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.prop-pop[hidden]{display:none}
.prop-pop h4{margin:0 0 6px;font-size:13px}
.prop-pop label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#e5e7eb;margin-top:6px}
.prop-pop input,.prop-pop select{width:100%}
.arduino-board.is-closed{display:none}
@media(max-width:1024px){
  main.lab-split{display:block}
  .split-v{display:none}
  #panel-circuit,#panel-code{width:auto;flex:none;min-width:0}
}

/* Physical parts: body on top, metal legs down to the pins */
.comp-box.part {
  background: transparent;
  border: none;
  box-shadow: none;
  min-width: 0;
  padding: 14px 4px 12px;
  gap: 0;
  align-items: center;
  overflow: visible;
}
.part-name {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  color: #f8fafc;
  background: rgba(15, 23, 42, .8);
  border-radius: 4px;
  padding: 0 5px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
}
.comp-box.part:hover .part-name { opacity: 1; }
.comp-box.part .comp-close {
  position: absolute;
  top: 0;
  right: -4px;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #52525b;
  background: #18181b;
  color: #fff;
  line-height: 14px;
  font-size: 11px;
  opacity: 0;
  z-index: 4;
}
.comp-box.part:hover .comp-close { opacity: 1; }
.comp-box.part .comp-body { padding: 0; gap: 4px; }
.comp-box.part .terminals {
  border: none;
  margin: 0;
  padding: 0;
  gap: 16px;
  width: auto;
}
.comp-box.part .term-pin { margin-top: 18px; }
.comp-box.part .term-pin::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 3px;
  height: 20px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #fafafa, #a1a1aa 46%, #52525b);
  border-radius: 1px;
  pointer-events: none;
}
.comp-box.part .term-pin::after { color: #e5e7eb; bottom: -13px; text-shadow: 0 1px 2px #000; }
.part-ctrl { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.part-ctrl input[type=range] { width: 84px; }
.part .val-lbl { color: #e5e7eb; text-shadow: 0 1px 2px #000; font-size: 10.5px; font-weight: 600; }

.part-art, button.tact img, button.pir-dome img, button.slide img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.btn-face { position: relative; width: 88px; height: 88px; }
.btn-face .btn-art { display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.btn-face .plunger { transform-box: fill-box; transform-origin: center; transition: transform 70ms ease-out; }
.btn-face.down .plunger { transform: translateY(6px) scale(0.84); filter: brightness(0.78); }
button.tact.svg-btn.plunger-hit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
button.tact.svg-btn.plunger-hit.down { transform: translate(-50%, -50%); box-shadow: none; }
.comp-box.part-btn:not(.seated) .terminals {
  position: absolute;
  left: 4px;
  top: 14px;
  width: 88px;
  height: 88px;
  margin: 0;
  pointer-events: none;
}
.comp-box.part-btn:not(.seated) .term-pin {
  position: absolute;
  margin: 0;
  width: 22px;
  height: 16px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
.comp-box.part-btn:not(.seated) .term-pin::before,
.comp-box.part-btn:not(.seated) .term-pin::after { display: none; }
.comp-box.part-btn:not(.seated) .term-pin:hover,
.comp-box.part-btn:not(.seated) .term-pin.wire-source {
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 0 0 2px #fff;
}
.comp-box.part-btn:not(.seated) .term-pin[title="PIN1"] { left: 18.5%; top: 36%; }
.comp-box.part-btn:not(.seated) .term-pin[title="PIN2"] { left: 81.5%; top: 36%; }
.comp-box.part-btn:not(.seated) .term-pin[title="PIN3"] { left: 18.5%; top: 64%; }
.comp-box.part-btn:not(.seated) .term-pin[title="PIN4"] { left: 81.5%; top: 64%; }
.pot-svg { position: relative; width: 64px; height: 64px; }
.pot-svg .pot-knob { inset: 20px; }
.ldr-svg { width: 46px; height: auto; }
.dht-svg { width: 40px; }
.sr04-part { position: relative; width: 201px; }
.sr04-part > img { display: block; width: 100%; height: auto; }
button.pir-dome.svg-pir { width: 72px; height: auto; padding: 0; border: none; background: none; box-shadow: none; }
button.pir-dome.svg-pir img { width: 100%; height: auto; }
button.pir-dome.svg-pir.active img { filter: saturate(1.5) drop-shadow(0 0 8px #ef4444); }
.relay-svg { position: relative; width: 96px; height: 58px; }
.relay-svg .relay-switch { right: 14px; top: 12px; }
.servo-svg { position: relative; width: 280px; height: 129px; overflow: visible; }
.servo-svg svg { width: 100%; height: 100%; display: block; overflow: visible; }
.servo-svg .sv-horn { transform-box: view-box; transform-origin: 179px 108px; }
.comp-box.part-servo:not(.seated) .terminals { position: absolute; inset: 0; pointer-events: none; }
.comp-box.part-servo:not(.seated) .term-pin {
  position: absolute;
  margin: 0;
  width: 12px;
  height: 12px;
  pointer-events: auto;
}
.comp-box.part-servo:not(.seated) .term-pin::before,
.comp-box.part-servo:not(.seated) .term-pin::after { display: none; }
.comp-box.part-servo:not(.seated) .term-pin[title="PWM"] { left: 17px; top: 77px; background: #f97316; }
.comp-box.part-servo:not(.seated) .term-pin[title="VCC"] { left: 56px; top: 77px; background: #ef4444; }
.comp-box.part-servo:not(.seated) .term-pin[title="GND"] { left: 94px; top: 77px; background: #7c3e12; }
.lcd-svg { position: relative; width: 180px; height: 72px; }
.lcd-svg .lcd-screen { position: absolute; left: 45.75px; top: 11.25px; width: 123.75px; height: 50.25px; }
.oled-svg { position: relative; width: 200px; height: 163px; }
.oled-svg > img { width: 100%; height: 100%; display: block; }
/* the 128 x 64 pixels sit inside the glass of assets/svg/oled.svg (300 x 245) */
.oled-svg .oled-screen {
  position: absolute; left: 4.333%; top: 22.04%; width: 91.33%; height: 55.92%;
  margin: 0; padding: 0; border: none; background: #000;
  image-rendering: pixelated; pointer-events: none;
}
.buzz-svg { position: relative; width: 80px; }
.buzz-svg > img { display: block; width: 100%; height: auto; }
.buzz-svg.on img { filter: drop-shadow(0 0 8px #facc15); }
.bulb-svg { width: 36px; }
.fan-svg { position: relative; width: 52px; height: 52px; }
.fan-svg .fan-rotor { position: absolute; inset: 0; }
.pump-svg { position: relative; width: 64px; height: 64px; }
.pump-svg .pump-rotor { position: absolute; inset: 0; transform-origin: 50% 57.5%; }
.soil-svg { width: 46px; height: auto; }
button.slide.svg-slide { width: 64px; height: 30px; padding: 0; border: none; background: none; box-shadow: none; }
button.slide.svg-slide i { left: 8px; top: 8px; width: 20px; height: 14px; }
button.slide.svg-slide.on i { left: 34px; }
.rgb-led { width: 40px; height: 52px; }
.rgb-led .dome { fill: #3f3f46; }
.rgb-led.lit .dome { fill: var(--led); filter: drop-shadow(0 0 8px var(--led)); }
.led-part {
  position: relative;
  width: 48px;
  height: 64px;
}
.led-part img {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}
.led-part.lit img {
  position: relative;
  z-index: 1;
  filter:
    brightness(1.45)
    saturate(1.6)
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 calc(var(--glow, 12) * 1px) var(--led))
    drop-shadow(0 0 calc(var(--glow, 12) * 2.4px) var(--led));
}
/* a bright LED: a wide coloured light around it and a white-hot centre in the dome */
.led-part.lit::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 30%;
  width: calc(var(--glow, 12) * 7px);
  height: calc(var(--glow, 12) * 7px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--led) 0%, transparent 68%);
  opacity: .5;
  pointer-events: none;
}
.led-part.lit::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 29%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .55) 32%, transparent 70%);
  pointer-events: none;
}
.led-dome {
  width: 28px;
  height: 34px;
  border-radius: 14px 14px 6px 6px;
  background:
    radial-gradient(circle at 32% 22%, rgba(255,255,255,.8), transparent 22%),
    radial-gradient(circle at 50% 40%, var(--led, #ef4444) 0%, var(--led, #ef4444) 55%, #3f1515 94%);
  box-shadow: inset 0 -6px 8px rgba(0,0,0,.25);
  position: relative;
}
.led-dome.lit {
  background:
    radial-gradient(circle at 34% 18%, #fff, rgba(255,255,255,.2) 16%, transparent 34%),
    radial-gradient(circle at 50% 42%, #fff 0%, var(--led) 22%, var(--led) 62%, #1c1917 100%);
  box-shadow:
    0 0 calc(var(--glow, 24) * 1px) var(--led),
    0 0 calc(var(--glow, 24) * 2.6px) var(--led),
    inset 0 -4px 6px rgba(255,255,255,.25);
}
.led-dome::after {
  content: '';
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 5px;
  height: 8px;
  border-radius: 1px;
  background: rgba(0,0,0,.28);
}
.led-dome.lit::after { opacity: .2; }
.led-dome.rgb { width: 30px; border-radius: 15px 15px 6px 6px; }

button.tact {
  width: 38px;
  height: 34px;
  padding: 0;
  border-radius: 3px;
  border: 1px solid #000;
  background: linear-gradient(180deg, #52525b, #18181b);
  box-shadow: 0 3px 0 #09090b, inset 0 1px 0 #a1a1aa;
  position: relative;
  cursor: pointer;
}
button.tact i {
  position: absolute;
  left: 9px;
  top: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f8fafc, #d4d4d8 42%, #71717a);
  box-shadow: 0 2px 0 #27272a;
  pointer-events: none;
}
button.tact.down { transform: translateY(2px); box-shadow: 0 1px 0 #09090b, inset 0 1px 0 #a1a1aa; }
button.tact.down i { top: 7px; }
button.tact:hover { border-color: #000; }

.pot-body {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, #60a5fa, #1d4ed8 58%, #172554);
  border: 2px solid #1e3a8a;
  box-shadow: 0 2px 4px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.35);
  position: relative;
}
.pot-knob {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, #e5e7eb 40%, #94a3b8);
}
.pot-knob::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 2px;
  width: 3px;
  height: 9px;
  margin-left: -1.5px;
  background: #0f172a;
  border-radius: 1px;
}

.ldr {
  width: 36px;
  height: 26px;
  background: linear-gradient(180deg, #e7e5e4, #a8a29e);
  border: 1px solid #78716c;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ldr i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #44403c;
  background: repeating-linear-gradient(125deg, transparent 0 3px, #44403c 3px 4px);
}

.sr04 {
  width: 108px;
  height: 42px;
  background: linear-gradient(180deg, #2563eb, #1e3a8a);
  border: 1px solid #172554;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  position: relative;
}
.sr04-eye {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f8fafc, #9ca3af 28%, #27272a 60%, #111);
  box-shadow: inset 0 0 0 3px #52525b, 0 1px 2px rgba(0,0,0,.4);
}
.sr04 .silk-mini { position: absolute; left: 6px; bottom: 2px; font-size: 7px; color: #fff; font-weight: 700; letter-spacing: .3px; }

button.pir-dome {
  width: 52px;
  height: 40px;
  padding: 0;
  border-radius: 26px 26px 8px 8px;
  border: 1px solid #a1a1aa;
  background: radial-gradient(circle at 50% 28%, #fff, #e4e4e7 50%, #a1a1aa);
  box-shadow: inset 0 -8px 10px rgba(0,0,0,.12);
  cursor: pointer;
}
button.pir-dome.active {
  background: radial-gradient(circle at 50% 28%, #fee2e2, #ef4444 55%, #7f1d1d);
  box-shadow: 0 0 14px #ef4444, inset 0 -8px 10px rgba(0,0,0,.15);
  border-color: #fecaca;
}
button.pir-dome:hover { border-color: #a1a1aa; }

.relay-mod {
  width: 70px;
  height: 44px;
  background: linear-gradient(180deg, #22c55e, #15803d);
  border: 1px solid #14532d;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.relay-cube {
  width: 40px;
  height: 30px;
  background: linear-gradient(180deg, #60a5fa, #1d4ed8);
  border: 1px solid #1e3a8a;
  border-radius: 2px;
  position: relative;
}
.comp-box .relay-switch {
  position: absolute;
  left: auto;
  right: 4px;
  top: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #450a0a;
  transition: none;
}
.comp-box .relay-switch::after { display: none; content: none; }
.comp-box .relay-switch.active {
  background: #f87171;
  box-shadow: 0 0 6px #ef4444;
}

.dht {
  width: 34px;
  height: 44px;
  background: linear-gradient(180deg, #7dd3fc, #0284c7);
  border: 1px solid #075985;
  border-radius: 3px 3px 1px 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
  gap: 3px;
  color: #fff;
  font-size: 7px;
  font-weight: 800;
}
.dht-grille {
  width: 18px;
  height: 14px;
  background: repeating-linear-gradient(#0c4a6e 0 2px, transparent 2px 4px);
}

.sg90 { display: flex; flex-direction: column; align-items: center; }
.sg90-top {
  width: 30px;
  height: 30px;
  margin-bottom: -10px;
  background: radial-gradient(circle at 40% 35%, #fff, #d4d4d8);
  border: 2px solid #a1a1aa;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.sg90-body {
  width: 78px;
  height: 36px;
  background: linear-gradient(180deg, #3b82f6, #1e40af);
  border: 1px solid #1e3a8a;
  border-radius: 4px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .6px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.part-servo .term-pin:nth-child(1)::before { background: #f97316; }
.part-servo .term-pin:nth-child(2)::before { background: #ef4444; }
.part-servo .term-pin:nth-child(3)::before { background: #44403c; }

/* LCD 16x2 module: pins sit on the left header, drawn over the board pads */
.comp-box.part-lcd:not(.seated) .terminals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: none;
  margin: 0;
  padding: 0;
}
.comp-box.part-lcd:not(.seated) .term-pin {
  position: absolute;
  margin: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid #0b0f14;
  background: linear-gradient(180deg, #4b5563, #111827);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
  pointer-events: auto;
  z-index: 6;
}
.comp-box.part-lcd:not(.seated) .term-pin::before,
.comp-box.part-lcd:not(.seated) .term-pin::after { display: none; }
.comp-box.part-lcd:not(.seated) .term-pin[title="GND"] { left: 12.1px; top: 30.4px; }
.comp-box.part-lcd:not(.seated) .term-pin[title="VCC"] { left: 12.1px; top: 42.4px; }
.comp-box.part-lcd:not(.seated) .term-pin[title="SDA"] { left: 12.1px; top: 54.4px; }
.comp-box.part-lcd:not(.seated) .term-pin[title="SCL"] { left: 12.1px; top: 66.4px; }

.buzz {
  width: 38px;
  height: 30px;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 35%, #52525b, #18181b 72%);
  border: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 #71717a;
}
.buzz i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #71717a;
  box-shadow: inset 0 0 0 4px #27272a;
}
.buzz.on { box-shadow: 0 0 10px #facc15, inset 0 1px 0 #71717a; }

.bulb { display: flex; flex-direction: column; align-items: center; }
.bulb-glass {
  width: 30px;
  height: 34px;
  border-radius: 15px 15px 8px 8px;
  background: radial-gradient(circle at 35% 28%, #fffbeb, #fde68a 36%, #ca8a04 78%);
  border: 1px solid #854d0e;
}
.bulb-base {
  width: 16px;
  height: 12px;
  margin-top: -1px;
  background: repeating-linear-gradient(#e5e7eb 0 2px, #71717a 2px 3px);
  border-radius: 0 0 2px 2px;
}

.fan {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid #334155;
  position: relative;
  background: rgba(15, 23, 42, .35);
}
.fan i {
  position: absolute;
  left: 19px;
  top: 3px;
  width: 8px;
  height: 18px;
  background: linear-gradient(#7dd3fc, #0284c7);
  border-radius: 40%;
  transform-origin: 4px 20px;
}
.fan i:nth-child(2) { transform: rotate(120deg); }
.fan i:nth-child(3) { transform: rotate(240deg); }
.fan::after {
  content: '';
  position: absolute;
  left: 16px;
  top: 16px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e5e7eb, #334155);
}

button.slide {
  width: 46px;
  height: 22px;
  padding: 0;
  border-radius: 3px;
  border: 1px solid #000;
  background: #27272a;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
button.slide i {
  position: absolute;
  left: 2px;
  top: 2px;
  width: 18px;
  height: 16px;
  border-radius: 2px;
  background: #e5e7eb;
  transition: left .15s;
  pointer-events: none;
}
button.slide.on { background: #14532d; }
button.slide.on i { left: 24px; background: #86efac; }
button.slide:hover { border-color: #000; }
button.pir-dome.svg-pir,
button.pir-dome.svg-pir.active { background: none; box-shadow: none; border: none; }

.resistor {
  width: 48px;
  height: 16px;
  border-radius: 8px;
  background: linear-gradient(#f8efd4, #c4b48a);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(0,0,0,.45);
  position: relative;
}
.resistor i { width: 3px; height: 16px; background: #dc2626; display: block; }
.resistor i:nth-child(3) { background: #92400e; }
.resistor i:nth-child(4) { background: #eab308; }

.breadboard {
  position: absolute;
  z-index: 1;
  background: linear-gradient(180deg, #fbf8f2, #efe8da);
  border: 1px solid #d6d3d1;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(0,0,0,.35), inset 0 1px 0 #fff;
  cursor: grab;
  touch-action: none;
}
.breadboard.dragging { cursor: grabbing; z-index: 4; }
.breadboard.off { display: none; }
.breadboard.full {
  background: linear-gradient(180deg, #f4f4f5, #e7e5e4);
}
.breadboard.full .bb-num { width: 18px; }
.bb-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #a8a29e;
  background: #fff;
  color: #44403c;
  line-height: 14px;
  font-size: 11px;
  opacity: 0;
  z-index: 5;
  cursor: pointer;
}
.breadboard:hover .bb-close { opacity: 1; }
.bb-trench {
  position: absolute;
  background: linear-gradient(180deg, #d6d3d1, #f5f5f4 40%, #e7e5e4);
  border-radius: 2px;
  pointer-events: none;
}
.bb-silk {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #a8a29e;
  pointer-events: none;
}
.bb-line { position: absolute; height: 2px; border-radius: 1px; pointer-events: none; opacity: .85; }
.bb-lab {
  position: absolute;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 8px;
  font-weight: 600;
  color: #78716c;
  pointer-events: none;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
}
.bb-lab.bb-num { width: 14px; font-size: 7px; color: #a8a29e; }
.bb-pow.plus { color: #dc2626; font-weight: 800; }
.bb-pow.minus { color: #2563eb; font-weight: 800; }
.bb-hole {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: linear-gradient(180deg, #57534e, #1c1917);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 1px rgba(0,0,0,.4);
  cursor: crosshair;
  z-index: 2;
}
.bb-hole:hover, .bb-hole.wire-source { box-shadow: 0 0 0 2px #fff; }
.bb-hole.occupied {
  background: radial-gradient(circle at 40% 35%, #44403c, #1c1917 70%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.65);
}
.comp-box.part.seated { padding: 0; overflow: visible; }
.comp-box.part.seated .comp-body {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
.comp-box.part.seated.fit-leads .comp-body,
.comp-box.part.seated.fit-mod .comp-body {
  left: var(--art-x);
  top: var(--art-y);
  width: var(--art-w);
  height: var(--art-h);
  transform: none;
  pointer-events: none;
}
.comp-box.part.seated.fit-leads .comp-body > *,
.comp-box.part.seated.fit-mod .comp-body > *,
.comp-box.part.seated.fit-leads .led-part,
.comp-box.part.seated.fit-leads .led-part img,
.comp-box.part.seated.fit-leads .res-body,
.comp-box.part.seated.fit-leads .res-body img,
.comp-box.part.seated.fit-leads .bat-body,
.comp-box.part.seated.fit-leads .bat-body img,
.comp-box.part.seated.fit-mod .comp-body img,
.comp-box.part.seated.fit-mod .pot-svg,
.comp-box.part.seated.fit-mod .relay-svg,
.comp-box.part.seated.fit-mod .lcd-svg,
.comp-box.part.seated.fit-mod .oled-svg,
.comp-box.part.seated.fit-mod .servo-svg,
.comp-box.part.seated.fit-mod .seg-svg,
.comp-box.part.seated.fit-mod .fan-svg,
.comp-box.part.seated.fit-mod .pump-svg,
.comp-box.part.seated.fit-mod .buzz-svg,
.comp-box.part.seated.fit-mod .bulb-svg,
.comp-box.part.seated.fit-mod .rgb-led,
.comp-box.part.seated.fit-mod button.slide,
.comp-box.part.seated.fit-mod button.pir-dome {
  width: 100%;
  height: 100%;
  max-width: none;
}
.comp-box.part.seated.fit-mod .comp-body button { pointer-events: auto; }
.comp-box.part.seated.fit-btn .comp-body {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
}
.seat-btn { position: absolute; inset: 0; pointer-events: none; }
.seat-legs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.seat-btn .btn-face { position: absolute; }
.seat-btn button.tact.svg-btn.plunger-hit { pointer-events: auto; width: 78%; height: 78%; }
.comp-box.part.seated .rgb-led { height: 34px; overflow: hidden; }
.comp-box.part.seated.flat .comp-body {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  transform: none;
}
.comp-box.part.seated.flat .res-body,
.comp-box.part.seated.flat .bat-body,
.comp-box.part.seated.flat .res-body img,
.comp-box.part.seated.flat .bat-body img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.comp-box.part.seated .term-pin {
  position: absolute;
  margin: 0;
  width: 5px;
  height: 5px;
  border: none;
  border-radius: 1px;
  transform: none;
  background: linear-gradient(90deg, #f8fafc, #94a3b8 46%, #475569);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.45);
  z-index: 6;
}
.comp-box.part.seated .term-pin::after { display: none; }
.comp-box.part.seated .term-pin::before { display: none; }
.comp-box.part.seated.fit-mod .term-pin::before {
  display: block;
  content: '';
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 2px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 1px;
  background: linear-gradient(#e2e8f0, #71717a);
  pointer-events: none;
}
.comp-box.part.seated .term-pin:hover,
.comp-box.part.seated .term-pin.wire-source {
  box-shadow: 0 0 0 2px #fff;
}

.brand h1 { display: none; }
.start-bar { flex: 1 1 240px; }
#project-nav { margin-right: auto; }
#current-project { font-size: 16px; }
details.menu:not([open]) > .menu-list { display: none; }
.project-picker { width: min(440px, calc(100vw - 24px)); }
.project-picker select,
.project-picker input { width: 100%; }
.project-picker select[size] { height: 260px; }
.fold > summary { cursor: pointer; font-weight: 700; font-size: 13px; padding: 2px 0 6px; }
details.fold:not([open]) > .bill-head,
details.fold:not([open]) > .bill-list { display: none; }
.bill-head { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.bill-head strong { font-size: 13px; }
.bill-list { list-style: none; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; color: var(--tx); }
.bill-list li { padding: 6px 10px; border-radius: 8px; background: var(--bg); border: 1px solid var(--card-border); font-size: 14px; line-height: 1.3; }
.fold .wire-toolbar,
.fold .circuit-tools,
.fold .code-tools { margin-top: 8px; }

/* Phone and tablet: one tab at a time, with a tall canvas and a tall editor. The page scrolls. */
@media (max-width: 1024px) {
  body { height: auto; min-height: 100dvh; overflow-x: hidden; overflow-y: auto; }
  header { padding: 6px 8px; gap: 6px; }
  .brand { min-width: 0; }
  .brand h1 { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  header .bar { width: 100%; }
  #example-select, .example-search { max-width: 100%; }
  .menu-list { max-width: calc(100vw - 16px); }
  .tabs { padding: 6px 8px 0; }
  main.lab-split { flex: none; overflow: visible; padding: 8px; }
  main.lab-split > .panel { height: auto; overflow: visible; padding: 8px; }
  .panel-title { flex-wrap: wrap; gap: 6px; }
  .hint { flex: 1 1 100%; min-width: 0; }
  .workspace-container { flex: none; height: 72vh !important; min-height: 560px; }
  .code-editor-container { min-height: 0; }
  textarea#code-input { flex: none; height: 52vh !important; min-height: 340px; }
  .serial-console { height: 180px; min-height: 150px; flex: none; }
  .scope-panel { height: 80px; }
  .statusbar { gap: 8px 14px; padding: 6px 8px; }
  dialog { width: min(480px, calc(100vw - 24px)); }
  .canvas-bg span { display: none; }
  .view-hud { max-width: calc(100% - 12px); flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 640px) {
  .brand h1 { display: none; }
  .circuit-tools .hint { display: none; }
  .color-dot { width: 22px; height: 22px; }
  .wire-toolbar { gap: 6px; padding: 4px 6px; }
  .code-tools, .serial-tools { min-width: 0; }
  .workspace-container { height: 82vh !important; min-height: 620px; }
  textarea#code-input { height: 62vh !important; min-height: 420px; }
  .serial-console { height: 170px; min-height: 150px; }
}

.change-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #042f2e;
  color: #ecfdf5;
  border-bottom: 1px solid #10b981;
}
.change-prompt[hidden] { display: none; }
.change-prompt p { margin: 0; }
.change-prompt b { color: #6ee7b7; }
.change-prompt button { background: transparent; color: #a7f3d0; border-color: #115e59; }
/* "Attach to my post": building the circuit for a Gallery post */
.share-attach-btns { display: flex; gap: 8px; flex: none; }
.change-prompt.share-attach #share-attach-btn { background: #10b981; border-color: #10b981; color: #04241a; font-weight: 700; }
.sim-preview .share-attach, .sim-task .share-attach { display: none !important; }
.action-bar > button,
.action-bar > .menu > summary { font-weight: 700; }
.bar-run { min-width: 72px; }

.run-notice { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 16px; border-bottom: 1px solid; font-size: 14px; }
.run-notice[hidden] { display: none; }
.run-notice ul { margin: 0; padding-left: 18px; }
.run-notice li + li { margin-top: 2px; }
.run-notice button { flex: none; background: transparent; color: inherit; border-color: currentColor; }
.run-notice.is-warn { background: #422006; color: #fde68a; border-color: #b45309; }
.run-notice.is-error { background: #450a0a; color: #fecaca; border-color: #dc2626; }

/* ===== Sketch editor (js/sim/editor.js): colours under a transparent textarea ===== */
.code-wrap {
  --gutter-w: 4ch;
  --code-pad: 12px;
  position: relative;
  /* same font as the code, so the ch-based gutter width is equal in every layer */
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: var(--code-fs, 13px);
  flex: none;
  background: var(--code-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  overflow: hidden;
}
.code-wrap:focus-within { border-color: var(--ac); }
.code-wrap textarea#code-input,
.code-wrap .code-hl-text,
.code-wrap .code-lines {
  margin: 0;
  font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
  font-size: var(--code-fs, 13px);
  line-height: 1.5;
  letter-spacing: 0;
  tab-size: 2;
  white-space: pre;
  padding-top: var(--code-pad);
  padding-bottom: var(--code-pad);
}
.code-wrap textarea#code-input {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  caret-color: #f8fafc;
  padding-left: calc(var(--gutter-w) + 10px);
  padding-right: var(--code-pad);
  overflow: auto;
}
.code-wrap textarea#code-input { scrollbar-color: #334155 transparent; scrollbar-width: thin; }
.code-wrap textarea#code-input::selection { background: rgba(56, 189, 248, .32); color: transparent; }
.code-gutter {
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 0;
  width: var(--gutter-w);
  overflow: hidden;
  background: rgba(148, 163, 184, .06);
  border-right: 1px solid rgba(148, 163, 184, .14);
  user-select: none;
}
.code-lines { color: #7b8798; text-align: right; padding-right: 6px; }
.code-lines b { color: var(--err); }
.code-hl {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 var(--gutter-w);
  overflow: hidden;
  pointer-events: none;
}
.code-hl-text { color: #e2e8f0; padding-left: 10px; padding-right: var(--code-pad); will-change: transform; }
.code-err {
  position: absolute;
  left: 0;
  right: 0;
  background: rgba(239, 68, 68, .16);
  box-shadow: inset 3px 0 0 var(--err);
}
.code-err span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border-radius: 4px;
  font: 600 11px/1.4 system-ui, sans-serif;
  color: #fee2e2;
  background: rgba(127, 29, 29, .92);
}
.tk-com { color: #8b9ab0; font-style: italic; }
.tk-str { color: #fbbf24; }
.tk-pre { color: #c084fc; }
.tk-num { color: #fb7185; }
.tk-type { color: #60a5fa; }
.tk-kw { color: #f472b6; }
.tk-const { color: #fb923c; }
.tk-api { color: #34d399; }
.tk-fn { color: #fde68a; }

/* Examples picker on phones and tablets: board and search on full rows, Previous and Next
   side by side, and the list below. (An older rule gave the search box a 140px flex height.) */
@media (max-width: 1024px) {
  .project-picker { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .project-picker > * { flex: 1 1 100%; }
  .project-picker > #example-prev, .project-picker > #example-next { flex: 1 1 40%; text-align: center; }
  .project-picker .example-search { height: auto; }
}

/* Phones and tablets: two tidy header rows.
   Row 1: File, Platform, project name, run status. Row 2: the five main actions. */
@media (max-width: 1024px) {
  header { gap: 6px; padding: 6px 8px; justify-content: flex-start; }
  header .header-start, header .action-bar { display: contents; }
  header::before { content: ''; order: 5; flex: 1 0 100%; height: 0; }
  header #file-menu { order: 1; }
  header .brand { order: 2; flex: none; }
  header #project-nav { order: 3; flex: 1 1 0; min-width: 0; }
  header #current-project {
    min-width: 0; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  header #status-pill { order: 4; flex: none; }
  header .action-bar > button, header .action-bar > .menu { order: 6; flex: none; }
  header .action-bar > button, header .action-bar > .menu > summary { min-height: 40px; text-align: center; white-space: nowrap; }
  header .action-bar > .menu > summary { display: flex; align-items: center; justify-content: center; }
  /* open menus span the header width and stay on screen */
  header .action-bar > .menu, header #file-menu { position: static; }
  header .action-bar > .menu > .menu-list, header #file-menu > .menu-list {
    left: 8px; right: 8px; top: calc(100% + 4px); width: auto; min-width: 0; max-width: 560px;
    max-height: calc(100dvh - 140px); overflow-y: auto;
  }
}
/* Phones: the five actions share the row. */
@media (max-width: 640px) {
  header .action-bar > button, header .action-bar > .menu { flex: 1 1 auto; min-width: 0; }
  header .action-bar > button, header .action-bar > .menu > summary { padding: 8px 6px; font-size: 14px; }
  header .action-bar > .menu > summary { width: 100%; }
  header .action-bar > .menu > .menu-list, header #file-menu > .menu-list { max-width: none; }
}
@media (max-width: 380px) {
  header .action-bar > button, header .action-bar > .menu > summary { font-size: 13px; padding: 8px 4px; }
}

/* ===== Project guide card (js/sim/guides.js) ===== */
.project-guide {
  margin: 0 0 10px;
  border: 1px solid rgba(16, 185, 129, .35);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(16, 185, 129, .10), rgba(16, 185, 129, .04));
  font-size: 13px;
  line-height: 1.5;
}
.project-guide > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  list-style: none;
  min-height: 40px;
}
.project-guide > summary::-webkit-details-marker { display: none; }
.project-guide > summary::after {
  content: '▾';
  margin-left: auto;
  color: var(--tx-muted);
  transition: transform .15s;
}
.project-guide:not([open]) > summary::after { transform: rotate(-90deg); }
.pg-icon {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ac);
  color: #042f2e;
  font: 700 12px/1 Georgia, serif;
  font-style: italic;
}
.pg-head { flex: none; font-weight: 700; color: var(--tx); }
/* folded: the one-line summary stands in for the card */
.pg-what { min-width: 0; color: var(--tx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-guide[open] .pg-what { display: none; }
.pg-body { padding: 0 12px 10px 40px; }
.pg-full { margin: 0 0 6px; color: var(--tx); }
.pg-steps { margin: 0 0 6px; padding-left: 18px; color: var(--tx); }
.pg-steps li { margin: 2px 0; }
.pg-steps li::marker { color: var(--ac); font-weight: 700; }
.pg-learn { margin: 0; color: var(--tx-muted); }
.pg-learn b { color: #6ee7b7; font-weight: 600; }
[data-theme="light"] .pg-learn b { color: var(--ac-hover); }
@media (max-width: 640px) {
  .pg-body { padding-left: 12px; }
  .project-guide > summary { padding: 8px 10px; }
}

/* ===== Canvas run controls (js/sim/runbar.js): Start/Stop, Pause/Resume, then Add part ===== */
.canvas-fabs {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
}
.canvas-fabs .parts-plus, .canvas-fabs .board-back { position: static; }
.canvas-fabs .parts-plus { background: #1d4ed8; border-color: #1d4ed8; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.canvas-fabs .parts-plus:hover { background: #2563eb; color: #fff; border-color: #2563eb; }
.fab {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 50%;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  transition: background-color .15s, transform .1s;
}
.fab:active { transform: scale(.94); }
.fab:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.fab svg { width: 22px; height: 22px; fill: currentColor; }
.fab[hidden] { display: none; }
/* green Start, red Stop while running */
.fab-run { background: #16a34a; }
.fab-run:hover { background: #15803d; }
.fab-run .ico-stop, .fab-run.is-stop .ico-play { display: none; }
.fab-run.is-stop .ico-stop { display: block; }
.fab-run.is-stop { background: #dc2626; }
.fab-run.is-stop:hover { background: #b91c1c; }
/* grey Pause, amber Resume while paused */
.fab-pause { background: #64748b; }
.fab-pause:hover { background: #475569; }
.fab-pause .ico-play, .fab-pause.is-paused .ico-pause { display: none; }
.fab-pause.is-paused .ico-play { display: block; }
.fab-pause.is-paused { background: #d97706; animation: fab-blink 1.2s ease-in-out infinite; }
@keyframes fab-blink { 50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, .25); } }
@media (prefers-reduced-motion: reduce) { .fab-pause.is-paused { animation: none; } }
.status-pill.pause i { background: #f59e0b; }
/* Part labels on light canvas backgrounds (Studio, Light) */
.workspace-container.ink-dark .comp-box.part .term-pin::after,
.workspace-container.ink-dark .part .val-lbl { color: #1f2937; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }

/* Loose LEDs: wires connect straight to the leg tips drawn in the LED picture. */
.comp-box.part .terminals:empty { display: none; }
.comp-box.part .led-part > .term-pin {
  position: absolute;
  top: 100%;
  width: 12px;
  height: 12px;
  margin: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  z-index: 2;
}
.comp-box.part .led-part > .term-pin[title="ANODE"] { left: 30.9%; }
.comp-box.part .led-part > .term-pin[title="CATHODE"] { left: 66.2%; }
.comp-box.part .led-part > .term-pin::before { display: none; }
/* a small ring shows where the wire will attach */
.comp-box.part .led-part > .term-pin:hover, .comp-box.part .led-part > .term-pin.wire-source {
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, .25);
  box-shadow: 0 0 0 2px #10b981;
}
/* + and − sit beside the tips, away from the wire */
.comp-box.part .led-part > .term-pin::after {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.comp-box.part .led-part > .term-pin[title="ANODE"]::after { left: auto; right: 13px; }
.comp-box.part .led-part > .term-pin[title="CATHODE"]::after { left: 13px; }
.workspace-container.ink-dark .comp-box.part .led-part > .term-pin::after { color: #1f2937; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); }

/* Uno status LEDs sit on the white pads drawn in arduino-uno.svg: invisible when off, glowing when on.
   The ids are listed so these rules win over the older #led-l / #led-tx / #led-rx colours. */
.arduino-board:not(.board-esp32) > #led-on,
.arduino-board:not(.board-esp32) > #led-l,
.arduino-board:not(.board-esp32) > #led-tx,
.arduino-board:not(.board-esp32) > #led-rx {
  width: 10px;
  height: 8px;
  border-radius: 1.5px;
  background: transparent;
  box-shadow: none;
}
.arduino-board:not(.board-esp32) > #led-on.on-pow { background: #4ade80; box-shadow: 0 0 8px 2px rgba(74, 222, 128, .75); }
.arduino-board:not(.board-esp32) > #led-l.on-l,
.arduino-board:not(.board-esp32) > #led-tx.on-tx,
.arduino-board:not(.board-esp32) > #led-rx.on-tx { background: #fde047; box-shadow: 0 0 8px 2px rgba(250, 204, 21, .75); }

/* ===== Part pins: no metal ball. The wire attaches straight to the leg or hole, and hovering
   (or starting a wire) shows a green ring, the same as on the LED legs. ===== */
.comp-box.part .term-pin { background: transparent; border: none; box-shadow: none; }
.comp-box.part .term-pin:hover,
.comp-box.part .term-pin.wire-source { background: rgba(16, 185, 129, .25); box-shadow: 0 0 0 2px #10b981; }
/* the leg stub now runs down to the point where the wire attaches */
.comp-box.part:not(.seated) .term-pin::before { bottom: 5px; }

/* 7-segment: pins sit on the holes drawn on the display (common-cathode 5161 layout).
   Top row: G F COM A B. Bottom row: E D (COM) C (DP). */
.comp-box.part .seg-svg > .term-pin {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
}
.comp-box.part .seg-svg > .term-pin:hover,
.comp-box.part .seg-svg > .term-pin.wire-source { transform: translate(-50%, -50%); }
.comp-box.part .seg-svg > .term-pin::before { display: none; }
.comp-box.part .seg-svg > .term-pin[title="G"]   { left: 12%; top: 6.875%; }
.comp-box.part .seg-svg > .term-pin[title="F"]   { left: 31%; top: 6.875%; }
.comp-box.part .seg-svg > .term-pin[title="COM"] { left: 50%; top: 6.875%; }
.comp-box.part .seg-svg > .term-pin[title="A"]   { left: 69%; top: 6.875%; }
.comp-box.part .seg-svg > .term-pin[title="B"]   { left: 88%; top: 6.875%; }
.comp-box.part .seg-svg > .term-pin[title="E"]   { left: 12%; top: 93.125%; }
.comp-box.part .seg-svg > .term-pin[title="D"]   { left: 31%; top: 93.125%; }
.comp-box.part .seg-svg > .term-pin[title="C"]   { left: 69%; top: 93.125%; }
/* pin names printed on the black body, under the top holes and over the bottom ones */
.comp-box.part .seg-svg > .term-pin::after,
.workspace-container.ink-dark .comp-box.part .seg-svg > .term-pin::after {
  left: 50%;
  transform: translateX(-50%);
  font-size: 6.5px;
  line-height: 1;
  color: #a1a1aa;
  text-shadow: none;
  pointer-events: none;
}
.comp-box.part .seg-svg > .term-pin[title="G"]::after, .comp-box.part .seg-svg > .term-pin[title="F"]::after,
.comp-box.part .seg-svg > .term-pin[title="COM"]::after, .comp-box.part .seg-svg > .term-pin[title="A"]::after,
.comp-box.part .seg-svg > .term-pin[title="B"]::after { top: 11px; bottom: auto; }
.comp-box.part .seg-svg > .term-pin[title="E"]::after, .comp-box.part .seg-svg > .term-pin[title="D"]::after,
.comp-box.part .seg-svg > .term-pin[title="C"]::after { bottom: 11px; top: auto; }
/* pin names run up beside the leg so the wire never crosses them */
.comp-box.part:not(.seated) .terminals > .term-pin::after {
  left: calc(50% + 11px);
  bottom: 6px;
  transform: rotate(-90deg);
  transform-origin: 0 100%;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* ===== Potentiometer module (assets/svg/pot-body.svg): a black pointer turns on the grey knob,
   and wires plug into the GND / SIG / VCC header holes drawn on the board. ===== */
.comp-box.part .pot-svg { width: 72px; height: 72px; }
.comp-box.part .pot-svg .pot-knob {
  inset: auto;
  left: 25%;
  top: 17%;
  width: 50%;
  height: 50%;
  background: transparent;
  box-shadow: none;
}
.comp-box.part .pot-svg .pot-knob::after {
  left: 50%;
  top: 6%;
  width: 3px;
  height: 34%;
  margin-left: -1.5px;
  background: #111;
  border-radius: 2px;
}
.comp-box.part .pot-svg > .term-pin {
  position: absolute;
  top: 87%;
  width: 9px;
  height: 9px;
  margin: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 2;
}
.comp-box.part .pot-svg > .term-pin:hover,
.comp-box.part .pot-svg > .term-pin.wire-source { transform: translate(-50%, -50%); }
.comp-box.part .pot-svg > .term-pin::before,
.comp-box.part .pot-svg > .term-pin::after { display: none; }
.comp-box.part .pot-svg > .term-pin[title="GND"] { left: 35%; }
.comp-box.part .pot-svg > .term-pin[title="OUT"] { left: 50%; }
.comp-box.part .pot-svg > .term-pin[title="VCC"] { left: 65%; }
/* the value label sits above the module, away from the wires on the header */
.comp-box.part-pot:not(.seated) .comp-body { display: flex; flex-direction: column; align-items: center; }
.comp-box.part-pot:not(.seated) .comp-body > .val-lbl { order: -1; }
/* ===== HC-SR04 (assets/svg/hcsr04.svg): wires plug into the tips of the VCC / TRIG / ECHO / GND
   legs drawn in the picture. At 201px wide the legs are 14px apart, one breadboard hole each. ===== */
.comp-box.part .sr04-part > .term-pin {
  position: absolute;
  top: 98%;
  width: 10px;
  height: 10px;
  margin: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  z-index: 2;
}
.comp-box.part .sr04-part > .term-pin::before,
.comp-box.part .sr04-part > .term-pin::after { display: none; }
.comp-box.part .sr04-part > .term-pin:hover,
.comp-box.part .sr04-part > .term-pin.wire-source {
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, .25);
  box-shadow: 0 0 0 2px #10b981;
}
.comp-box.part .sr04-part > .term-pin[title="VCC"] { left: 39.58%; }
.comp-box.part .sr04-part > .term-pin[title="TRIG"] { left: 46.53%; }
.comp-box.part .sr04-part > .term-pin[title="ECHO"] { left: 53.47%; }
.comp-box.part .sr04-part > .term-pin[title="GND"] { left: 60.42%; }
/* the distance label sits above the sensor, away from the wires on the legs */
.comp-box.part-ultrasonic:not(.seated) .comp-body { display: flex; flex-direction: column; align-items: center; }
.comp-box.part-ultrasonic:not(.seated) .comp-body > .val-lbl { order: -1; }
/* ===== Buzzer (assets/svg/buzzer.svg): wires plug into the tips of the black GND leg and the
   red + leg. At 80px wide the legs are 14px apart, one breadboard hole. ===== */
.comp-box.part .buzz-svg > .term-pin {
  position: absolute;
  top: 98%;
  width: 10px;
  height: 10px;
  margin: 0;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 50%;
  z-index: 2;
}
.comp-box.part .buzz-svg > .term-pin::before,
.comp-box.part .buzz-svg > .term-pin::after { display: none; }
.comp-box.part .buzz-svg > .term-pin:hover,
.comp-box.part .buzz-svg > .term-pin.wire-source {
  transform: translate(-50%, -50%);
  background: rgba(16, 185, 129, .25);
  box-shadow: 0 0 0 2px #10b981;
}
.comp-box.part .buzz-svg > .term-pin[title="GND"] { left: 41.25%; }
.comp-box.part .buzz-svg > .term-pin[title="POS"] { left: 58.75%; }
/* the on/off label sits above the buzzer, away from the wires on the legs */
.comp-box.part-buz:not(.seated) .comp-body { display: flex; flex-direction: column; align-items: center; }
.comp-box.part-buz:not(.seated) .comp-body > .val-lbl { order: -1; }
/* seated on a breadboard: the picture is scaled so its legs end in the holes */
.comp-box.part.seated .sr04-part,
.comp-box.part.seated .sr04-part > img,
.comp-box.part.seated .buzz-svg,
.comp-box.part.seated .buzz-svg > img { width: 100%; height: 100%; }
.comp-box.part.seated.fit-leads .comp-body > .val-lbl {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ===== One-row bar above the canvas: Tools, Parts, About this project.
   Each stays folded; when opened its contents drop down over the canvas,
   so the canvas never moves. ===== */
.circuit-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  min-width: 0;
  position: relative;
  z-index: 30;
}
.circuit-bar > details { position: relative; flex: none; margin: 0; }
.circuit-bar > details > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  cursor: pointer;
  padding: 4px 10px;
  min-height: 30px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card, rgba(255,255,255,.04));
  white-space: nowrap;
}
.circuit-bar > details > summary::-webkit-details-marker { display: none; }
.circuit-bar > details > summary::after { content: '▾'; color: var(--tx-muted); font-weight: 400; }
.circuit-bar > details[open] > summary { border-color: #10b981; }
.circuit-bar > details > .fold-pop {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  width: max-content;
  max-width: min(520px, 80vw);
  max-height: 60vh;
  overflow: auto;
  margin: 0;
  padding: 10px;
  background: #111827;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
[data-theme="light"] .circuit-bar > details > .fold-pop { background: #fff; border-color: #cbd5e1; box-shadow: 0 12px 30px rgba(15,23,42,.18); }
.circuit-bar .circuit-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.circuit-bar #parts-fold > .fold-pop { min-width: 260px; }
/* the project card: flexible, shows its one-line summary while folded */
.circuit-bar > .project-guide { flex: 1 1 auto; min-width: 0; border-radius: 8px; }
.circuit-bar > .project-guide > summary { min-height: 30px; padding: 4px 10px; border: none; background: none; font-size: 12.5px; }
.circuit-bar > .project-guide > summary::after { content: none; }
.circuit-bar > .project-guide > .pg-body { width: min(460px, 80vw); padding: 10px 14px; }
.circuit-bar > .project-guide .pg-icon { width: 18px; height: 18px; font-size: 11px; }

/* ===== Wire color picker: opens next to a clicked wire ===== */
.wire-pop {
  position: absolute;
  z-index: 14;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #111827;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
.wire-pop[hidden] { display: none; }
.wire-pop-dots { display: flex; gap: 6px; }
.wire-pop .color-dot { width: 18px; height: 18px; }
.wire-pop-del { font-size: 12px; padding: 3px 8px; }
[data-theme="light"] .wire-pop { background: #fff; border-color: #cbd5e1; }
svg#wires-svg g.jumper.picked .jumper-core { stroke-width: 3.2; filter: drop-shadow(0 0 3px rgba(56, 189, 248, .9)); }

/* ===== Simulator cleanup: one Run/Stop on wide screens (the canvas button),
   Undo/Redo once in the top bar, quieter board close, Serial options in one menu. ===== */
@media (min-width: 1025px) {
  header .action-bar > #run-btn { display: none; }
}
.action-bar > .bar-icon { min-width: 36px; padding-left: 8px; padding-right: 8px; font-size: 16px; line-height: 1; }
/* the board's × shows only while the pointer is over the board (always on touch screens) */
@media (hover: hover) {
  .arduino-board > .board-close { opacity: 0; transition: opacity .15s; }
  .arduino-board:hover > .board-close,
  .arduino-board > .board-close:focus-visible { opacity: 1; }
}
.serial-tools { flex-wrap: nowrap; }
.serial-tools .serial-menu { margin-left: auto; }
.serial-tools .serial-menu > summary { padding: 2px 10px; font-size: 16px; line-height: 1.2; font-weight: 700; }
.serial-tools .serial-menu > .menu-list { left: auto; right: 0; min-width: 170px; }
.serial-tools .serial-menu label { font-size: 13px; color: var(--tx); padding: 6px 10px; cursor: pointer; }
.serial-tools .serial-menu button { font-size: 13px; padding: 6px 10px; }

/* File menu: My builds */
.menu-head { margin: 6px 10px 2px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--tx-muted); }
.menu-more { display: block; padding: 6px 10px; font-size: 13px; color: var(--ac); text-decoration: none; }

/* ===== View mode (?view=1): only the running canvas ===== */
html.sim-preview, html.sim-preview body { height: 100%; overflow: hidden; margin: 0; }
.sim-preview body > header, .sim-preview .tabs, .sim-preview .statusbar, .sim-preview #circuit-bar,
.sim-preview .canvas-fabs, .sim-preview .view-hud, .sim-preview .edge-drag, .sim-preview #panel-code,
.sim-preview #first-run, .sim-preview .parts-pop, .sim-preview .board-close, .sim-preview .board-rotate,
.sim-preview #site-header, .sim-preview .site-header, .sim-preview .back-lesson { display: none !important; }
.sim-preview main.lab-split { display: block !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
.sim-preview #panel-circuit { min-height: 0 !important; height: 100vh !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; }
.sim-preview #workspace { min-height: 0 !important; max-height: 100vh !important; height: 100vh !important; border-radius: 0 !important; border: 0 !important; }
.sim-preview details:has(#scope-canvas), .sim-preview .issues-bar, .sim-preview dialog { display: none !important; }

/* ===== Project switcher beside the project name ===== */
.project-nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
.project-nav .pn-step { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 10px; font-weight: 700; font-size: 16px; }
.project-nav .pn-step:disabled { opacity: .35; cursor: default; }
.project-nav .pn-next { background: #10b981; border-color: #10b981; color: #04241a; }
.project-nav .pn-next:hover:not(:disabled) { filter: brightness(1.1); }
.project-nav .pn-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; max-width: 340px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; }
.project-nav .pn-title:hover { border-color: #10b981; background: rgba(16, 185, 129, .1); }
.project-nav .pn-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* "2 in Gallery": the shared projects built on this simulation */
.project-nav .pn-gallery { flex: none; margin-left: 6px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(16, 185, 129, .45); color: #10b981; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.project-nav .pn-gallery:hover { background: rgba(16, 185, 129, .12); }
.project-nav .pn-gallery[hidden] { display: none; }
.pn-count { flex: none; font-size: 12px; opacity: .7; white-space: nowrap; }
.pn-caret { flex: none; font-size: 12px; opacity: .8; }
@media (max-width: 1024px) {
  .project-nav .pn-title { max-width: none; flex: 1 1 0; }
  .pn-count { display: none; }
}

/* ===== A breadboard hole holding a part's leg shows green (like Wokwi) ===== */
.bb-hole.occupied {
  background: #22c55e;
  box-shadow: 0 0 0 1px #15803d, 0 0 5px rgba(34, 197, 94, .85);
}
.comp-box.part.seated .term-pin {
  background: #22c55e;
  box-shadow: 0 0 0 1px #15803d, 0 0 5px rgba(34, 197, 94, .85);
  border-radius: 1.5px;
}

/* ===== Seated parts keep their shape: the picture fits inside its box without stretching ===== */
.comp-box.part.seated.fit-mod .comp-body img,
.comp-box.part.seated.fit-mod .comp-body svg { object-fit: contain; }
/* a seated module's value label (POT: 300, LDR: 512 ...) sits above it, clear of the pins */
.comp-box.part.seated.fit-mod .comp-body > .val-lbl {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* ===== Breadboard polish ===== */
/* a lit LED's glow goes under the parts around it (resistors stay solid), still above the board */
.comp-box.part-led_r, .comp-box.part-led_y, .comp-box.part-led_g, .comp-box.part-led_b, .comp-box.part-rgb { z-index: 2; }
/* lighter green for a hole holding a part's leg */
.bb-hole.occupied {
  background: #86efac;
  box-shadow: 0 0 0 1px #4ade80, 0 0 4px rgba(134, 239, 172, .7);
}
.comp-box.part.seated .term-pin {
  background: #86efac;
  box-shadow: 0 0 0 1px #4ade80, 0 0 4px rgba(134, 239, 172, .7);
}

/* one small green square per leg: drawn on the part's own pin marker, which sits on top of
   everything (so an LED's glow cannot tint it); the hole underneath stays dark */
.bb-hole.occupied {
  background: radial-gradient(circle at 40% 35%, #44403c, #1c1917 70%);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.65);
}
.comp-box.part.seated .term-pin {
  background: #86efac;
  box-shadow: none;
  border-radius: 1px;
  transform: scale(.8);
}
.comp-box.part.seated .term-pin:hover,
.comp-box.part.seated .term-pin.wire-source { box-shadow: 0 0 0 2px #fff; }
/* the resistor's value sits just above it, so the colour bands stay visible */
.res-body .val-lbl {
  top: auto;
  bottom: 88%;
  transform: translateX(-50%);
  background: none;
  color: #1c1917;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff;
  padding: 0;
  white-space: nowrap;
}

/* ===== OLED (assets/svg/oled.svg): wires plug into the GND / VCC / SCL / SDA header holes ===== */
.comp-box.part .oled-svg > .term-pin {
  position: absolute; top: 6.94%; width: 10px; height: 10px; margin: 0;
  transform: translate(-50%, -50%); background: transparent; border: none; box-shadow: none;
  border-radius: 50%; z-index: 2;
}
.comp-box.part .oled-svg > .term-pin::before,
.comp-box.part .oled-svg > .term-pin::after { display: none; }
.comp-box.part .oled-svg > .term-pin:hover,
.comp-box.part .oled-svg > .term-pin.wire-source {
  transform: translate(-50%, -50%); background: rgba(16, 185, 129, .25); box-shadow: 0 0 0 2px #10b981;
}
.comp-box.part .oled-svg > .term-pin[title="GND"] { left: 36%; }
.comp-box.part .oled-svg > .term-pin[title="VCC"] { left: 45.33%; }
.comp-box.part .oled-svg > .term-pin[title="SCL"] { left: 54.33%; }
.comp-box.part .oled-svg > .term-pin[title="SDA"] { left: 63.67%; }

/* ===== DHT11 (assets/svg/dht11.svg): 75px wide, so its legs are 14px apart (one breadboard hole);
   wires plug into the tips of the VCC / DATA / GND legs ===== */
.dht-part { position: relative; width: 75px; }
.dht-part > img { display: block; width: 100%; height: auto; }
.comp-box.part .dht-part > .term-pin {
  position: absolute; top: 97.6%; width: 10px; height: 10px; margin: 0;
  transform: translate(-50%, -50%); background: transparent; border: none; box-shadow: none;
  border-radius: 50%; z-index: 2;
}
.comp-box.part .dht-part > .term-pin::before,
.comp-box.part .dht-part > .term-pin::after { display: none; }
.comp-box.part .dht-part > .term-pin:hover,
.comp-box.part .dht-part > .term-pin.wire-source {
  transform: translate(-50%, -50%); background: rgba(16, 185, 129, .25); box-shadow: 0 0 0 2px #10b981;
}
.comp-box.part .dht-part > .term-pin[title="VCC"] { left: 31.25%; }
.comp-box.part .dht-part > .term-pin[title="DATA"] { left: 50%; }
.comp-box.part .dht-part > .term-pin[title="GND"] { left: 68.75%; }
/* the reading (28°C | 60%) sits above the sensor, away from the wires on the legs */
.comp-box.part-dht:not(.seated) .comp-body { display: flex; flex-direction: column; align-items: center; }
.comp-box.part-dht:not(.seated) .comp-body > .val-lbl { order: -1; }
.comp-box.part.seated .dht-part,
.comp-box.part.seated .dht-part > img { width: 100%; height: 100%; }

/* ===== Parts picker: search, then parts grouped by kind, each with its picture ===== */
.parts-pop { width: min(340px, calc(100% - 24px)); padding: 0; gap: 0; overflow: hidden; background: #262626; border-color: #3f3f46; }
.parts-search { position: relative; display: block; padding: 10px 12px; background: #1f1f1f; border-bottom: 1px solid #3f3f46; }
.parts-pop .parts-search input { width: 100%; padding: 8px 34px 8px 10px; border: none; border-bottom: 2px solid #60a5fa; border-radius: 4px 4px 0 0; background: #2f2f2f; color: #f4f4f5; font-size: 15px; }
.parts-pop .parts-search input:focus { outline: none; border-bottom-color: #93c5fd; }
.parts-search svg { position: absolute; right: 20px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: #e5e7eb; pointer-events: none; }
.parts-pop .palette.parts-palette { display: block; max-height: min(460px, 56vh); overflow-y: auto; padding: 0; background: transparent; border-radius: 0; }
.parts-group { position: sticky; top: 0; z-index: 1; margin: 0; padding: 9px 16px; background: #141414; color: #d4d4d8; font-size: 13px; font-weight: 700; }
.parts-group[hidden] { display: none; }
.parts-palette button { display: flex; width: 100%; align-items: center; gap: 14px; padding: 8px 16px; border: none; border-radius: 0; background: transparent; color: #f4f4f5; font-size: 15px; font-weight: 600; text-align: left; box-shadow: none; }
.parts-palette button:hover, .parts-palette button:focus-visible { background: #3a3a3a; color: #fff; transform: none; outline: none; }
.parts-palette button[hidden] { display: none; }
.parts-palette button img { flex: none; width: 44px; height: 34px; object-fit: contain; }
.parts-none { margin: 0; padding: 14px 16px; color: #a1a1aa; font-size: 14px; }
.parts-pop .parts-search input::-webkit-search-cancel-button { display: none; }

/* ===== Projects menu: search, groups, and each project with its part pictures ===== */
.project-picker #example-select { display: none !important; }
.project-picker { background: #262626; border-color: #3f3f46; padding: 10px; }
.project-picker .proj-search { padding: 0; background: transparent; border: none; flex: 1 1 100%; }
.project-picker .proj-search input { width: 100%; padding: 8px 34px 8px 10px; border: none; border-bottom: 2px solid #60a5fa; border-radius: 4px 4px 0 0; background: #2f2f2f; color: #f4f4f5; font-size: 15px; }
.project-picker .proj-search input:focus { outline: none; border-bottom-color: #93c5fd; }
.project-picker .proj-search input::-webkit-search-cancel-button { display: none; }
.project-picker .proj-search svg { right: 10px; }
.project-list.parts-palette { display: block; width: 100%; max-height: min(420px, 55vh); overflow-y: auto; padding: 0; margin-top: 4px; background: transparent; border-radius: 6px; }
.project-list .proj-item { display: flex; width: 100%; align-items: center; gap: 12px; padding: 7px 12px; border: none; border-radius: 0; background: transparent; color: #f4f4f5; font-size: 14px; font-weight: 600; text-align: left; box-shadow: none; }
.project-list .proj-item:hover, .project-list .proj-item:focus-visible { background: #3a3a3a; transform: none; outline: none; }
.project-list .proj-item.on { background: rgba(16, 185, 129, .22); box-shadow: inset 3px 0 0 #10b981; }
.project-list .proj-item[hidden] { display: none; }
.proj-icons { flex: none; display: flex; align-items: center; justify-content: center; gap: 2px; width: 78px; height: 32px; border-radius: 6px; background: #eef2f7; }
.proj-icons img { max-width: 24px; max-height: 28px; object-fit: contain; }
.proj-icons img:only-child { max-width: 44px; }
.proj-name { min-width: 0; }

/* ===== Task mode (?task=key): only the canvas, with Run and a "Check my wiring" bar ===== */
html.sim-task, html.sim-task body { height: 100%; overflow: hidden; margin: 0; }
.sim-task body > header, .sim-task .tabs, .sim-task .statusbar, .sim-task #circuit-bar,
.sim-task .edge-drag, .sim-task #panel-code, .sim-task #first-run, .sim-task .parts-pop,
.sim-task #parts-plus, .sim-task .board-close, .sim-task .board-rotate, .sim-task .site-header,
.sim-task .back-lesson, .sim-task details:has(#scope-canvas), .sim-task dialog { display: none !important; }
.sim-task main.lab-split { display: block !important; height: 100vh !important; margin: 0 !important; padding: 0 !important; max-width: none !important; }
.sim-task #panel-circuit { min-height: 0 !important; height: 100vh !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; }
.sim-task #workspace { min-height: 0 !important; max-height: 100vh !important; height: 100vh !important; border-radius: 0 !important; border: 0 !important; }
.task-bar { position: absolute; left: 50%; bottom: 12px; z-index: 12; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 8px 10px 8px 8px; border-radius: 12px; background: rgba(15, 23, 42, .94); color: #e2e8f0; font-size: 14px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.task-bar button { flex: none; padding: 8px 14px; border: none; border-radius: 8px; background: #10b981; color: #04241a; font-weight: 800; font-size: 14px; cursor: pointer; }
.task-bar button:hover { filter: brightness(1.1); }
#task-msg.good { color: #6ee7b7; font-weight: 700; }
#task-msg.bad { color: #fcd34d; }

/* ===== Relay module (assets/svg/relay.svg, 480 x 214): 198px wide, so the header pins are about
   one breadboard hole apart. Wires plug into the VCC / GND / IN pin tips and the COM / NO screws. ===== */
.relay-svg { position: relative; width: 198px; height: 88px; }
.relay-svg > img { display: block; width: 100%; height: 100%; }
/* the two lights on the board: PWR (power) and LED1 (relay on) */
.comp-box .relay-svg .relay-pwr, .comp-box .relay-svg .relay-switch {
  position: absolute; left: 21.25%; width: 9.2%; height: 9.3%; transform: translate(-50%, -50%);
  margin: 0; padding: 0; border: none; border-radius: 2px; background: #f1f5f9; box-shadow: none; inset: auto;
}
.comp-box .relay-svg .relay-pwr { top: 12.6%; left: 21.25%; }
.comp-box .relay-svg .relay-switch { top: 87.4%; left: 21.25%; right: auto; }
.comp-box .relay-svg .relay-pwr.on { background: #ff3b3b; box-shadow: 0 0 8px 3px rgba(255, 59, 59, .85); }
.comp-box .relay-svg .relay-switch.active { background: #ffd23f; box-shadow: 0 0 8px 3px rgba(255, 210, 63, .9); }
.comp-box.part .relay-svg > .term-pin {
  position: absolute; width: 10px; height: 10px; margin: 0;
  transform: translate(-50%, -50%); background: transparent; border: none; box-shadow: none;
  border-radius: 50%; z-index: 2;
}
.comp-box.part .relay-svg > .term-pin::before,
.comp-box.part .relay-svg > .term-pin::after { display: none; }
.comp-box.part .relay-svg > .term-pin:hover,
.comp-box.part .relay-svg > .term-pin.wire-source {
  transform: translate(-50%, -50%); background: rgba(16, 185, 129, .25); box-shadow: 0 0 0 2px #10b981;
}
.comp-box.part .relay-svg > .term-pin[title="VCC"] { left: 1%; top: 32.9%; }
.comp-box.part .relay-svg > .term-pin[title="GND"] { left: 1%; top: 48.8%; }
.comp-box.part .relay-svg > .term-pin[title="IN"] { left: 1%; top: 66.1%; }
.comp-box.part .relay-svg > .term-pin[title="COM"] { left: 88.1%; top: 51.4%; }
.comp-box.part .relay-svg > .term-pin[title="NO"] { left: 88.1%; top: 68.7%; }

/* while a wire is being drawn: how to cancel it */
#workspace.wiring::after {
  content: 'Click a pin to finish · click empty space to bend · right-click or Esc to cancel';
  position: absolute; left: 50%; top: 12px; z-index: 11; transform: translateX(-50%);
  padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, .9); color: #e2e8f0;
  font-size: 13px; white-space: nowrap; pointer-events: none;
}

/* ===== Potentiometer, side view (assets/svg/pot-body.svg, 60 x 124): 60px wide so the legs are
   one breadboard hole apart; wires plug into the GND / OUT / VCC leg tips. A light stripe on the
   shaft slides from left (0) to right (1023) as the knob turns. ===== */
.comp-box.part .pot-svg { width: 60px; height: 124px; }
.comp-box.part .pot-svg > img { display: block; width: 100%; height: 100%; }
.comp-box.part .pot-svg .pot-knob {
  position: absolute; inset: auto; left: calc(39% + var(--turn, .5) * 20%); top: 4%;
  width: 2px; height: 46%; margin: 0; border: none; border-radius: 1px;
  background: rgba(255, 255, 255, .8); box-shadow: 0 0 3px rgba(255, 255, 255, .6);
  transform: none !important; pointer-events: none;
}
.comp-box.part .pot-svg .pot-knob::after { display: none; }
.comp-box.part .pot-svg > .term-pin { top: 98.4%; width: 10px; height: 10px; background: transparent; border: none; box-shadow: none; }
.comp-box.part .pot-svg > .term-pin:hover,
.comp-box.part .pot-svg > .term-pin.wire-source { background: rgba(16, 185, 129, .25); box-shadow: 0 0 0 2px #10b981; }
.comp-box.part .pot-svg > .term-pin[title="GND"] { left: 26.67%; }
.comp-box.part .pot-svg > .term-pin[title="OUT"] { left: 50%; }
.comp-box.part .pot-svg > .term-pin[title="VCC"] { left: 73.33%; }
.comp-box.part.seated .pot-svg, .comp-box.part.seated .pot-svg > img { width: 100%; height: 100%; }

/* ===== PIR sensor (assets/svg/pir.svg, 100 x 110): a low dome on its board. 100px wide, so the legs
   are one breadboard hole apart; wires plug into the VCC / OUT / GND leg tips. Click it for motion. ===== */
.pir-part { position: relative; width: 100px; height: 110px; }
.pir-part > button.pir-dome.svg-pir { width: 100%; height: 100%; padding: 0; border: none; background: none; box-shadow: none; }
.pir-part > button.pir-dome.svg-pir img { width: 100%; height: 100%; }
.pir-part > button.pir-dome.svg-pir.active img { filter: drop-shadow(0 0 6px #ef4444) drop-shadow(0 0 14px rgba(239, 68, 68, .7)); }
.comp-box.part .pir-part > .term-pin {
  position: absolute; top: 98.2%; width: 10px; height: 10px; margin: 0;
  transform: translate(-50%, -50%); background: transparent; border: none; box-shadow: none;
  border-radius: 50%; z-index: 2;
}
.comp-box.part .pir-part > .term-pin::before,
.comp-box.part .pir-part > .term-pin::after { display: none; }
.comp-box.part .pir-part > .term-pin:hover,
.comp-box.part .pir-part > .term-pin.wire-source {
  transform: translate(-50%, -50%); background: rgba(16, 185, 129, .25); box-shadow: 0 0 0 2px #10b981;
}
.comp-box.part .pir-part > .term-pin[title="VCC"] { left: 36%; }
.comp-box.part .pir-part > .term-pin[title="OUT"] { left: 50%; }
.comp-box.part .pir-part > .term-pin[title="GND"] { left: 64%; }
.comp-box.part.seated .pir-part { width: 100%; height: 100%; }

/* ===== Make your own part ===== */
.parts-pop .make-part { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: calc(100% - 16px); margin: 8px; padding: 9px 12px; border: 1px dashed #10b981; border-radius: 8px; background: rgba(16, 185, 129, .1); color: #6ee7b7; font-weight: 700; text-align: left; cursor: pointer; }
.parts-pop .make-part small { font-weight: 400; font-size: 12px; color: #a1a1aa; }
.parts-pop .make-part:hover { background: rgba(16, 185, 129, .2); }
.parts-pop .make-part[hidden] { display: none; }
.my-parts { display: contents; }
.parts-pop .my-part { position: relative; }
.parts-pop .my-part small { display: block; font-size: 11px; color: #a1a1aa; }
.parts-pop .my-part .cx-thumb { flex: none; display: inline-grid; place-items: center; width: 34px; height: 26px; border: 1.5px solid #10b981; border-radius: 5px; color: #6ee7b7; font-size: 12px; font-weight: 800; }
.parts-pop .my-part .my-part-x { margin-left: auto; padding: 2px 6px; border-radius: 4px; font-style: normal; color: #a1a1aa; }
.parts-pop .my-part .my-part-x:hover { color: #fca5a5; background: rgba(239, 68, 68, .15); }

/* the part on the canvas */
.part-name + .comp-close + .comp-body .cx-part, .cx-part { display: flex; flex-direction: column; align-items: center; gap: 4px; width: var(--cx-w, 120px); padding: 8px 8px 6px; border: 2px solid #0f766e; border-radius: 8px; background: linear-gradient(180deg, #134e4a, #0f3b39); color: #ecfdf5; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.cx-part .cx-name { font-size: 12px; line-height: 1.2; text-align: center; word-break: break-word; }
.cx-tag { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: #99f6e4; opacity: .8; }
.cx-rows { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.cx-sw { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 999px; border: 1px solid #5eead4; background: #0b2e2c; color: #ccfbf1; font-size: 10px; font-weight: 700; }
.cx-sw i { width: 8px; height: 8px; border-radius: 50%; background: #475569; }
.cx-sw.on { background: #10b981; border-color: #10b981; color: #04241a; }
.cx-sw.on i { background: #ecfdf5; }
.cx-out { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #ccfbf1; }
.cx-led { width: 10px; height: 10px; border-radius: 50%; background: #3f3f46; border: 1px solid #18181b; }
.cx-led.on { background: #facc15; box-shadow: 0 0 calc(4px + 10px * var(--lv, 1)) rgba(250, 204, 21, calc(.4 + .6 * var(--lv, 1))); opacity: calc(.45 + .55 * var(--lv, 1)); }

/* the form */
.cx-dialog { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 40px); padding: 0; border: 1px solid #3f3f46; border-radius: 14px; background: #1f1f23; color: #f4f4f5; box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
.cx-dialog::backdrop { background: rgba(2, 6, 23, .6); }
.cx-dialog form { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.cx-dialog h3 { margin: 0; font-size: 18px; }
.cx-help { margin: 0; font-size: 13px; color: #a1a1aa; }
.cx-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.cx-field input, .cx-pin-row input, .cx-pin-row select { font: inherit; font-weight: 400; color: #f4f4f5; background: #2a2a2f; border: 1px solid #3f3f46; border-radius: 7px; padding: 7px 9px; }
.cx-field input:focus, .cx-pin-row input:focus, .cx-pin-row select:focus { outline: none; border-color: #10b981; }
.cx-count input { width: 90px; }
.cx-pins-head { display: grid; grid-template-columns: 26px 110px 1fr; gap: 8px; font-size: 12px; color: #a1a1aa; }
.cx-pins-head span:first-child { grid-column: 2; }
.cx-pins { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.cx-pin-row { display: grid; grid-template-columns: 26px 110px 1fr; gap: 8px; align-items: center; }
.cx-pin-no { color: #71717a; font-size: 12px; text-align: right; }
.cx-pin-row input { text-transform: uppercase; }
.cx-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px; border-radius: 10px; background: #e5e7eb; }
.cx-prev-box { display: flex; flex-direction: column; align-items: center; min-width: 120px; padding: 8px 14px; border: 2px solid #0f766e; border-radius: 8px; background: linear-gradient(180deg, #134e4a, #0f3b39); color: #ecfdf5; font-size: 13px; }
.cx-prev-pins { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cx-prev-pin { display: flex; flex-direction: column; align-items: center; font-size: 11px; font-weight: 700; color: #18181b; }
.cx-prev-pin i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fafafa, #9ca3af 48%, #27272a 80%); border: 1px solid #111; }
.cx-prev-pin small { font-weight: 400; font-size: 10px; color: #52525b; }
.cx-prev-pin.r-power small { color: #b91c1c; } .cx-prev-pin.r-gnd small { color: #18181b; }
.cx-prev-pin.r-ain small, .cx-prev-pin.r-din small { color: #115e59; } .cx-prev-pin.r-out small { color: #854d0e; }
.cx-tips { margin: 0; padding-left: 18px; font-size: 12px; color: #a1a1aa; }
.cx-tips b { color: #e4e4e7; }
.cx-tips code { color: #6ee7b7; }
.cx-keep { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.cx-error { min-height: 1em; margin: 0; font-size: 13px; color: #fca5a5; }
.cx-error:empty { display: none; }
.cx-actions { display: flex; gap: 8px; }
.cx-actions .btn-primary { background: #10b981; border-color: #10b981; color: #04241a; font-weight: 700; }

/* "‹ Back" beside Home: a quieter button, so Home stays the main one */
.platform-link.sim-back { background: transparent; color: #e5e7eb; border: 1px solid #3f3f46; cursor: pointer; font: inherit; }
.platform-link.sim-back:hover { background: #27272a; border-color: #10b981; }

/* File → Publish to Simulation Gallery */
.pub-pic { display: grid; place-items: center; aspect-ratio: 5 / 3; border-radius: 10px; background: #2b3036; color: #a1a1aa; font-size: 13px; overflow: hidden; }
.pub-pic img { width: 100%; height: 100%; object-fit: cover; }
.pub-based { margin: 0; font-size: 13px; color: #a7f3d0; }
.pub-done { margin: 0; padding: 10px 12px; border-radius: 8px; background: rgba(16, 185, 129, .15); color: #6ee7b7; font-weight: 600; }
.pub-done a, .cx-error a { color: #6ee7b7; }

/* "🌐 Publish" in the top bar: easy to find, quieter than Run */
.action-bar > .bar-publish { border: 1px solid #10b981; background: rgba(16, 185, 129, .12); color: #6ee7b7; }
.action-bar > .bar-publish:hover { background: rgba(16, 185, 129, .24); color: #ecfdf5; }
.cx-actions .btn-primary:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }

.pub-assign { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid #8b5cf6; background: rgba(139, 92, 246, .14); color: #ede9fe; font-size: 13px; }
.pub-assign[hidden] { display: none; }

/* ===== More parts (js/sim/moreparts.js) ===== */
.mp-art { position: relative; line-height: 0; }
.mp-art > svg { display: block; overflow: visible; }
.mp-led { fill: #3b1414; }
.mp-led.on { fill: var(--on, #ef4444); filter: drop-shadow(0 0 3px var(--on, #ef4444)); }
.mp-bar { fill: #3b1212; }
.mp-bar.on { fill: #ff4d3d; filter: drop-shadow(0 0 4px #ff4d3d); }
.mp-seg { fill: #2a0c0c; }
.mp-seg.on { fill: #ff3b30; filter: drop-shadow(0 0 3px #ff3b30); }
.comp-box.part.part-keypad .terminals, .comp-box.part.part-rfid .terminals { gap: 8px; }
.comp-box.part.part-bargraph .terminals { gap: 5px; }
.comp-box.part.part-sr595 .terminals { gap: 4px; }
/* joystick */
.mp-joy-knob { position: absolute; left: 35px; top: 23px; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 2px solid #0a0a0a; background: radial-gradient(circle at 35% 30%, #8b8b94, #3f3f46 55%, #1f1f23); box-shadow: 0 3px 6px rgba(0,0,0,.6); cursor: grab; touch-action: none; }
.mp-joy-knob.down { filter: brightness(.75); box-shadow: inset 0 2px 6px rgba(0,0,0,.7); }
/* keypad */
.mp-keypad { width: 160px; height: 172px; padding: 10px; box-sizing: border-box; background: #18181b; border-radius: 8px; border: 1px solid #000; }
.mp-keys { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 6px; height: 100%; }
.mp-key { padding: 0; border: none; border-radius: 5px; background: #e5e7eb; color: #111827; font: 700 15px/1 Arial, sans-serif; box-shadow: 0 2px 0 #9ca3af; cursor: pointer; }
.mp-key-x { background: #dc2626; color: #fff; box-shadow: 0 2px 0 #7f1d1d; }
.mp-key.down { transform: translateY(2px); box-shadow: none; filter: brightness(.85); }
/* rotary encoder */
.mp-enc-notch { transform-box: view-box; transform-origin: 52px 30px; transition: transform .1s; }
.mp-enc-turn { position: absolute; top: 18px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid #0b1220; background: #f8fafc; color: #0f172a; font: 700 15px/1 Arial, sans-serif; cursor: pointer; }
.mp-enc-turn.l { left: 2px; } .mp-enc-turn.r { right: 2px; }
.mp-enc-turn:hover { background: #10b981; color: #fff; }
.mp-enc-press { position: absolute; left: 37px; top: 15px; width: 30px; height: 30px; padding: 0; border: none; border-radius: 50%; background: transparent; cursor: pointer; }
.mp-enc-press.down { background: rgba(255,255,255,.22); }
/* slide potentiometer */
.mp-slide-handle { position: absolute; top: 6px; left: 81px; width: 18px; height: 30px; border-radius: 2px; border: 1px solid #52525b; background: linear-gradient(#f4f4f5, #a1a1aa); pointer-events: none; }
.mp-slide-handle::after { content: ''; position: absolute; left: 3px; right: 3px; top: 13px; height: 2px; background: #52525b; }
/* IR remote */
.mp-remote { width: 96px; height: 214px; padding: 22px 8px 8px; box-sizing: border-box; background: #18181b; border: 1px solid #000; border-radius: 14px; }
.mp-remote-eye { position: absolute; left: 44px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #7f1d1d; }
.mp-ir-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.mp-ir-key { height: 21px; padding: 0; border: none; border-radius: 10px; background: #3f3f46; color: #f4f4f5; font: 700 8px/1 Arial, sans-serif; cursor: pointer; }
.mp-ir-key.red { background: #dc2626; }
.mp-ir-key:hover { background: #52525b; } .mp-ir-key.red:hover { background: #ef4444; }
.mp-ir-key.down { filter: brightness(1.6); }
/* RFID cards */
.mp-cards { display: flex; justify-content: center; gap: 8px; margin-top: 5px; }
.mp-card { width: 64px; height: 22px; padding: 0; border: 1px solid #94a3b8; border-radius: 4px; background: #f8fafc; color: #0f172a; font: 700 10px/1 Arial, sans-serif; cursor: pointer; }
.mp-card.tag { background: #2563eb; color: #fff; border-color: #1e3a8a; border-radius: 11px; }
.mp-card:hover { outline: 2px solid #10b981; }
/* NeoPixels */
.mp-px { display: block; box-sizing: border-box; background: #262626; border: 2px solid #d4d4d8; transition: background .05s; }
.mp-np-strip { display: flex; gap: 4.5px; width: 204px; height: 34px; padding: 7px 8px; box-sizing: border-box; background: #111; border-radius: 4px; }
.mp-np-strip .mp-px { width: 20px; height: 20px; border-radius: 4px; }
.mp-np-ring { width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle, #050505 0 38px, #111 39px); }
.mp-np-ring .mp-px { position: absolute; width: 16px; height: 16px; border-radius: 50%; }
.mp-np-matrix { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: 152px; height: 152px; padding: 5px; box-sizing: border-box; background: #111; border-radius: 4px; }
.mp-np-matrix .mp-px { border-radius: 50%; border-width: 1.5px; }
/* LCD 20x4 */
.lcd-screen.mp-lcd4-screen { position: absolute; left: 50px; top: 17px; width: 206px; height: 76px; padding: 0 0 0 2px; font-size: 16px; line-height: 19px; }
/* MAX7219 dot matrix */
.mp-dots { position: absolute; left: 10px; top: 10px; width: 112px; height: 112px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.mp-dots i { border-radius: 50%; background: #3a0d0d; }
.mp-dots i.on { background: #ff3b30; box-shadow: 0 0 6px #ff3b30; }
/* the settings box of these parts */
.prop-pop .mp-note { margin: 8px 0 0; font-size: 11.5px; line-height: 1.45; color: #cbd5e1; }
.prop-pop .mp-sample { width: 100%; margin-top: 9px; padding: 7px 8px; border: 1px solid #10b981; border-radius: 7px; background: rgba(16,185,129,.15); color: #6ee7b7; font-weight: 700; font-size: 12px; cursor: pointer; }
.prop-pop .mp-sample:hover { background: rgba(16,185,129,.28); }

/* ===== Admins: save the canvas as a ready simulation (js/sim/siteedits.js) ===== */
.site-sim-dialog { width: min(640px, 94vw); max-height: 90vh; padding: 0; border: 1px solid var(--card-border, #334155); border-radius: 14px; background: var(--card-bg, #111827); color: inherit; }
.site-sim-dialog::backdrop { background: rgba(2, 6, 23, .6); }
.site-sim-dialog form { display: grid; gap: 12px; padding: 18px 20px; }
.site-sim-dialog h2 { margin: 0; font-size: 18px; }
.site-sim-dialog h2 small { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #92400e; color: #fff; font-size: 11px; vertical-align: middle; }
.ss-note { margin: 0; font-size: 13px; opacity: .8; }
.ss-which { display: grid; gap: 6px; margin: 0; padding: 10px 12px; border: 1px dashed #14b8a6; border-radius: 10px; font-size: 14px; }
.ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ss-grid label { display: grid; gap: 4px; font-size: 13px; }
.ss-grid .ss-wide { grid-column: 1 / -1; }
.ss-grid input, .ss-grid select, .ss-grid textarea { padding: 7px 9px; border-radius: 8px; border: 1px solid var(--card-border, #334155); background: rgba(255, 255, 255, .04); color: inherit; font: inherit; font-size: 13px; }
.ss-status { min-height: 1.2em; margin: 0; font-size: 13px; color: #fbbf24; }
.ss-actions { display: flex; gap: 8px; align-items: center; }
.ss-left { display: flex; gap: 8px; margin-right: auto; }
.ss-actions [hidden] { display: none; }
.ss-save { background: #10b981; color: #04261b; border-color: #10b981; font-weight: 700; }
.ss-danger { color: #fca5a5; border-color: #fca5a5; }

/* ===== A sensor's slider on the canvas (js/sim/quickctl.js) ===== */
/* above the part: its legs and wires are below it */
.quick-ctl { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 6; display: grid; gap: 3px;
  padding: 4px 7px; border-radius: 9px; background: rgba(15, 23, 42, .88); border: 1px solid rgba(148, 163, 184, .35);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35); white-space: nowrap; cursor: default; }
.quick-ctl label { display: grid; grid-template-columns: auto 92px auto; align-items: center; gap: 6px; margin: 0; font-size: 11px; color: #e2e8f0; }
.quick-ctl .qc-name { font-weight: 600; color: #94a3b8; }
.quick-ctl input[type="range"] { width: 92px; height: 16px; margin: 0; accent-color: #10b981; cursor: pointer; }
.quick-ctl output { min-width: 44px; font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-weight: 700; color: #6ee7b7; text-align: right; }
.sim-preview .quick-ctl, .exporting .quick-ctl { display: none; }

/* ===== Serial Monitor or Serial Plotter (js/sim/plotter.js) ===== */
.serial-view { display: inline-flex; padding: 2px; border-radius: 9px; border: 1px solid var(--card-border); background: rgba(255, 255, 255, .03); }
.serial-view button { padding: 3px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--tx-muted, #94a3b8); font-size: 12px; font-weight: 700; cursor: pointer; }
.serial-view button.on { background: rgba(16, 185, 129, .18); color: #6ee7b7; }
.serial-plot { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 180px; padding: 6px 8px 4px; }
.serial-plot[hidden], .serial-output[hidden] { display: none; }
.serial-plot canvas { flex: 1; width: 100%; min-height: 150px; }
.plot-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; min-height: 18px; font-size: 12px; color: #cbd5e1; }
.plot-legend span { display: inline-flex; align-items: center; gap: 5px; }
.plot-legend i { width: 12px; height: 3px; border-radius: 2px; }
.plot-legend b { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; color: #f8fafc; }
.plot-empty { position: absolute; inset: 40% 16px auto; margin: 0; text-align: center; font-size: 12px; color: #94a3b8; }
.plot-empty[hidden] { display: none; }
.plot-empty code { color: #6ee7b7; }

/* ===== ESP32 touch pad (js/sim/moreparts.js): press and hold the gold pad ===== */
.mp-touch { position: relative; }
.mp-touch-btn { position: absolute; left: 14px; top: 14px; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; font-size: 20px; line-height: 48px; cursor: pointer; opacity: .55; touch-action: none; }
.mp-touch-btn:hover { opacity: .9; }
.mp-touch-btn.down { opacity: 1; background: rgba(16, 185, 129, .35); box-shadow: 0 0 14px 4px rgba(52, 211, 153, .75); }
.mp-note { margin: 6px 0 0; font-size: 12px; color: #fbbf24; }

/* ===== The Phone part: the ESP32's web page and Bluetooth chat (js/sim/esp32net.js) ===== */
.mp-phone { display: flex; flex-direction: column; width: 236px; height: 440px; padding: 10px 9px 14px; box-sizing: border-box;
  border-radius: 30px; background: #111827; border: 2px solid #000; box-shadow: inset 0 0 0 2px #374151, 0 6px 18px rgba(0, 0, 0, .35); color: #111827; }
.mp-ph-top { display: flex; justify-content: space-between; padding: 0 12px 6px; font: 600 11px system-ui, sans-serif; color: #e5e7eb; }
.mp-ph-tabs { display: flex; gap: 4px; padding: 0 2px 6px; }
.mp-ph-tabs button { flex: 1; padding: 5px 0; border: 0; border-radius: 8px; background: #1f2937; color: #cbd5e1; font: 700 11px system-ui, sans-serif; cursor: pointer; }
.mp-ph-tabs button.on { background: #f8fafc; color: #111827; }
.mp-ph-web, .mp-ph-bt { flex: 1; display: flex; flex-direction: column; min-height: 0; border-radius: 14px; background: #f8fafc; overflow: hidden; }
.mp-ph-web[hidden], .mp-ph-bt[hidden] { display: none; }
.mp-ph-bar { display: flex; align-items: center; gap: 4px; padding: 5px; background: #e5e7eb; }
.mp-ph-bar button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: #fff; font-size: 14px; cursor: pointer; color: #111827; }
.mp-ph-url { flex: 1; overflow: hidden; padding: 4px 6px; border-radius: 6px; background: #fff; font: 11px Consolas, monospace; color: #374151; white-space: nowrap; text-overflow: ellipsis; }
.mp-ph-frame { flex: 1; width: 100%; border: 0; background: #fff; }
.mp-ph-frame[hidden] { display: none; }
.mp-ph-msg { margin: 0; padding: 14px 12px; font: 13px system-ui, sans-serif; color: #475569; text-align: center; }
.mp-ph-msg[hidden] { display: none; }
.mp-ph-btname { margin: 0; padding: 7px 10px; background: #dbeafe; font: 700 11px system-ui, sans-serif; color: #1e3a8a; }
.mp-ph-chat { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.mp-ph-chat p { max-width: 80%; margin: 0; padding: 6px 9px; border-radius: 12px; font: 12px system-ui, sans-serif; word-break: break-word; }
.mp-ph-chat .mp-ph-esp32 { align-self: flex-start; background: #e5e7eb; color: #111827; }
.mp-ph-chat .mp-ph-me { align-self: flex-end; background: #2563eb; color: #fff; }
.mp-ph-send { display: flex; gap: 4px; padding: 6px; border-top: 1px solid #e5e7eb; }
.mp-ph-send input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font: 12px system-ui, sans-serif; color: #111827; background: #fff; }
.mp-ph-send button { padding: 6px 10px; border: 0; border-radius: 8px; background: #2563eb; color: #fff; font: 700 12px system-ui, sans-serif; cursor: pointer; }

/* ===== Friendlier menus (a new build, as a student first sees it) ===== */
/* menus on the right of the top bar open towards the left, so they stay on the screen */
@media (min-width: 1025px) {
  header .action-bar > .menu > .menu-list { left: auto; right: 0; }
}
#projects-menu > .menu-list { max-height: calc(100vh - 90px); overflow-y: auto; }
#file-menu > .menu-list { max-height: calc(100vh - 80px); overflow-y: auto; }
/* Previous and Next are in the top bar already */
.project-picker > #example-prev, .project-picker > #example-next { display: none !important; }
.board-pick { display: flex; align-items: center; gap: 10px; flex: 1 1 100%; font-size: 13px; font-weight: 700; color: #a1a1aa; }
.board-pick select { flex: 1; }
/* small headings in the File menu */
.menu-list .menu-head { margin: 8px 8px 2px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #71717a; }
.menu-list .menu-head:first-of-type { margin-top: 4px; }
/* the add-part button: a pill that says what it does */
.canvas-fabs .parts-plus { display: inline-flex; align-items: center; gap: 6px; width: auto; padding: 0 16px 0 12px; border-radius: 22px; font-size: 15px; font-weight: 800; }
.parts-plus .pp-plus { font-size: 26px; line-height: 1; margin-top: -2px; }
.parts-plus .pp-word { white-space: nowrap; }

/* ===== The card on a new, empty build (js/sim/welcome.js) ===== */
.welcome-card { position: absolute; right: 22px; top: 70px; z-index: 7; width: 300px; padding: 18px 18px 14px; border-radius: 16px;
  background: linear-gradient(160deg, #0f2f35, #0b1f24); color: #e5f6f3; border: 1px solid rgba(110, 231, 183, .25); box-shadow: 0 16px 36px rgba(0, 0, 0, .35); }
.welcome-card[hidden] { display: none; }
.wc-close { position: absolute; right: 10px; top: 8px; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #9ccfc3; font-size: 15px; cursor: pointer; }
.wc-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.wc-kicker { margin: 0 0 4px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6ee7b7; }
.welcome-card h3 { margin: 0 0 12px; font-size: 19px; color: #fff; }
.wc-steps { display: grid; gap: 12px; margin: 0 0 12px; padding: 0; list-style: none; }
.wc-steps li { display: flex; gap: 10px; align-items: flex-start; }
.wc-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #10b981; color: #052e24; font-size: 13px; font-weight: 800; }
.wc-steps b { display: block; font-size: 14.5px; color: #fff; }
.wc-steps small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: #a7c9c2; }
.wc-btn { margin-top: 6px; padding: 7px 14px; border: 0; border-radius: 999px; background: #1d4ed8; color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.wc-btn:hover { background: #2563eb; }
.wc-more { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .1); }
.wc-more button { padding: 0; border: 0; background: none; color: #9ee7d0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.wc-more button:hover { text-decoration: underline; }
@media (max-width: 760px) { .welcome-card { left: 12px; right: 12px; width: auto; top: auto; bottom: 56px; } }

/* ===== New, saved or not, and the LED Blink guide (js/sim/welcome.js) ===== */
.action-bar > .bar-new { border: 1px solid #3b82f6; background: rgba(59, 130, 246, .14); color: #bfdbfe; font-weight: 800; }
.action-bar > .bar-new:hover { background: rgba(59, 130, 246, .3); color: #fff; }
.save-chip { margin-left: 6px; padding: 5px 11px; border-radius: 999px; border: 1px solid #3f3f46; background: transparent; color: #a1a1aa; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.save-chip[data-state="saved"] { color: #6ee7b7; border-color: rgba(16, 185, 129, .45); }
.save-chip[data-state="unsaved"], .save-chip[data-state="changed"] { color: #fde68a; border-color: rgba(245, 158, 11, .6); background: rgba(245, 158, 11, .12); }
.save-chip[data-state="unsaved"]:hover, .save-chip[data-state="changed"]:hover { background: rgba(245, 158, 11, .25); color: #fff; }
.lab-toast { position: fixed; left: 50%; bottom: 46px; z-index: 300; transform: translate(-50%, 20px); padding: 10px 18px; border-radius: 12px; background: #064e3b; color: #ecfdf5; font-weight: 700; box-shadow: 0 10px 28px rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.lab-toast.on { opacity: 1; transform: translate(-50%, 0); }
/* the "start something new" box */
.new-dlg { width: min(640px, 94vw); padding: 22px; border: 1px solid #334155; border-radius: 18px; background: #111827; color: #e5e7eb; }
.new-dlg::backdrop { background: rgba(2, 6, 23, .6); }
.new-dlg h3 { margin: 0 0 6px; font-size: 20px; }
.nd-keep { margin: 0 0 14px; font-size: 13.5px; color: #94a3b8; }
.nd-keep[hidden] { display: none; }
.nd-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.nd-choices button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border: 1px solid #334155; border-radius: 14px; background: #1f2937; color: #e5e7eb; font: inherit; cursor: pointer; text-align: center; }
.nd-choices button:hover { border-color: #10b981; background: #1e3a33; }
.nd-choices img { height: 64px; max-width: 100%; object-fit: contain; }
.nd-choices b { font-size: 14.5px; }
.nd-choices small { font-size: 12px; color: #94a3b8; }
.nd-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.nd-foot button { padding: 8px 14px; border: 1px solid #334155; border-radius: 10px; background: transparent; color: #cbd5e1; font: inherit; font-weight: 700; cursor: pointer; }
.nd-foot button:hover { background: #1f2937; }
@media (max-width: 620px) { .nd-choices { grid-template-columns: 1fr; } }
/* the guide inside the card */
.wc-guide { display: block; width: 100%; margin: 0 0 12px; padding: 10px 12px; border: 1px dashed rgba(253, 224, 71, .6); border-radius: 12px; background: rgba(250, 204, 21, .1); color: #fde68a; font: inherit; font-size: 14px; font-weight: 800; text-align: left; cursor: pointer; }
.wc-guide:hover { background: rgba(250, 204, 21, .2); }
.welcome-card.guide { width: 330px; max-height: calc(100% - 90px); overflow-y: auto; }
.wc-bar { height: 6px; margin: 2px 0 12px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.wc-bar i { display: block; height: 100%; background: #10b981; transition: width .3s; }
.wc-guide-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wc-guide-steps li { display: flex; gap: 10px; align-items: flex-start; }
.wc-guide-steps li.done b { color: #6ee7b7; text-decoration: line-through; text-decoration-color: rgba(110, 231, 183, .5); }
.wc-guide-steps li.done .wc-n { background: #065f46; color: #6ee7b7; }
.wc-guide-steps li.next { opacity: .55; }
.wc-guide-steps li.next .wc-n { background: #334155; color: #cbd5e1; }
.wc-guide-steps li.now { padding: 10px; margin: 0 -10px; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.wc-guide-steps b { display: block; font-size: 14.5px; color: #fff; }
.wc-guide-steps small { display: block; margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: #a7c9c2; }
.wc-guide-steps .wc-how { color: #fde68a; }
.wc-code { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: #020617; color: #a7f3d0; font: 12px/1.45 Consolas, "Cascadia Mono", monospace; white-space: pre; }
.wc-doit { margin-top: 8px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: transparent; color: #e5f6f3; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wc-doit:hover { background: rgba(255, 255, 255, .12); }
.welcome-card .wc-why { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #cfe7e2; }
.welcome-card .wc-why code { color: #fde68a; }
.project-nav .pn-next[hidden] { display: none; }

/* ===== Arduino | ESP32 switch in the top bar, and the wiring hint on the canvas ===== */
.board-switch { display: inline-flex; padding: 2px; border-radius: 10px; border: 1px solid #3f3f46; background: #18181b; }
.board-switch button { padding: 5px 11px; border: 0; border-radius: 8px; background: transparent; color: #a1a1aa; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.board-switch button:hover { color: #fff; }
.board-switch button.on { background: #00979d; color: #fff; }
.board-switch button[data-board="esp32"].on { background: #1d4ed8; }
/* the hint shows only while a wire is being drawn */
.workspace-container > .wire-hint { position: absolute; left: 50%; bottom: 48px; z-index: 9; transform: translateX(-50%); max-width: calc(100% - 40px); padding: 8px 14px; border-radius: 999px; background: rgba(15, 23, 42, .92); color: #fde68a; font-size: 13px; font-weight: 700; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); pointer-events: none; display: none; }
.workspace-container > .wire-hint.active { display: block; }
.menu-list button:disabled { opacity: .45; cursor: default; }
/* the board switch sits in the bar over the canvas, beside Parts list */
.circuit-bar .board-label { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.circuit-bar .board-switch { margin-right: 6px; }
.project-nav .pn-step[hidden] { display: none; }
@media (min-width: 761px) { .welcome-card.esp { top: auto; bottom: 52px; } }

/* ☰: the drawer with every page of the site (js/platform.js, css/drawer.css) */
.sim-drawer-btn { width: 40px; height: 36px; padding: 0; border: 1px solid #3f3f46; border-radius: 10px; background: transparent; color: #e5e7eb; font-size: 19px; line-height: 1; cursor: pointer; }
.sim-drawer-btn:hover { border-color: #10b981; color: #fff; }