.real-breadboard {
  width: min(80%, 416px) !important;
  aspect-ratio: 2 / 3 !important;
}

.real-breadboard > #approved-board {
  filter: none;
  opacity: 1;
  transition: .25s;
}

.real-breadboard.complete > #approved-board {
  filter: none;
  opacity: 1;
}

#placed-layers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#placed-layers { display: block; }
#chip-diagram { display: none !important; }

.component-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
.real-component {
  position: absolute;
  pointer-events: none;
  object-fit: contain;
}
.real-component.leda { left: 4.6%; top: 25.88%; width: 18.5%; height: 13%; overflow: visible; }
.real-component.a { left: 25.35%; top: 36.78%; width: 18%; height: 1.55%; object-fit: fill; }
.real-component.power { left: 60.35%; top: 36.78%; width: 34.15%; height: 1.55%; object-fit: fill; }
.real-component.ledy {
  left: 5.7%;
  top: 31.68%;
  width: 18.5%;
  height: 13%;
  overflow: visible;
}
.real-component.y {
  left: 26.3%;
  top: 39.72%;
  width: 16.45%;
  height: 1.55%;
  object-fit: fill;
}
.real-component.ground { left: 9.6%; top: 53.68%; width: 31.7%; height: 1.55%; object-fit: fill; }

.not-chip-dip14 {
  position: absolute;
  z-index: 2;
  left: 41.05%;
  top: 32.7%;
  width: 17.9%;
  height: 23.5%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.28));
}

.not-output-wire { filter: hue-rotate(290deg) saturate(1.15); }

.not-output-led { overflow: visible; }
.not-output-led-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  clip-path: polygon(62% 0,100% 0,100% 43%,62% 43%);
  transform: none;
}
.and-bulb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  clip-path: polygon(62% 0,100% 0,100% 43%,62% 43%);
}
.and-led-a .leda-body,
.or-led-a .leda-body { transform: translateX(2.6%); }
.and-bulb.one-hole-short { transform: translate(2.6%,20%); }
.and-bulb.two-hole-short { transform: translate(2.6%,40%); }
.not-output-led-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.not-output-led-leads .lead-shadow { fill:none; stroke:rgba(0,0,0,.25); stroke-width:10; stroke-linecap:round; stroke-linejoin:round; transform:translateY(2px); }
.not-output-led-leads .lead-metal { fill:none; stroke:#8f918d; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.not-output-led-leads .lead-highlight { fill:none; stroke:rgba(255,255,255,.52); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.not-output-led-leads .lead-hole { fill:#8f918d; stroke:#4e514f; stroke-width:2; }
.not-output-led-leads .short-black-shadow { fill:none; stroke:rgba(0,0,0,.26); stroke-width:18; stroke-linecap:round; stroke-linejoin:round; transform:translateY(3px); }
.not-output-led-leads .short-black { fill:none; stroke:#151a1c; stroke-width:14; stroke-linecap:round; stroke-linejoin:round; }
.not-output-led-leads .short-black-highlight { fill:none; stroke:rgba(255,255,255,.28); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }

/* 74HC08 gate-1 construction, matched to the supplied completed reference. */
.real-component.and-led-a { left: 4.6%; top: 25.88%; width: 18.5%; height: 13%; object-fit: fill; }
.real-component.and-a { left: 25.35%; top: 36.78%; width: 17.4%; height: 1.55%; object-fit: fill; }
.real-component.and-led-b { left: 4.6%; top: 28.78%; width: 18.5%; height: 13%; object-fit: fill; }
.real-component.and-b { left: 25.35%; top: 39.68%; width: 17.4%; height: 1.55%; object-fit: fill; }
.real-component.and-led-y { left: 4.6%; top: 31.68%; width: 18.5%; height: 13%; object-fit: fill; }
.real-component.and-y { left: 25.35%; top: 42.58%; width: 17.4%; height: 1.55%; object-fit: fill; filter: hue-rotate(290deg) saturate(1.15); }
.real-component.and-power { left: 59%; top: 36.78%; width: 35.08%; height: 1.55%; object-fit: fill; }
.real-component.and-ground { left: 9.6%; top: 54.08%; width: 31.8%; height: 1.55%; object-fit: fill; }

/* 74HC32 gate-1 construction uses the approved AND component geometry. */
.real-component.or-led-a { left: 4.6%; top: 25.88%; width: 18.5%; height: 13%; object-fit: fill; }
.real-component.or-a { left: 25.35%; top: 36.78%; width: 17.4%; height: 1.55%; object-fit: fill; }
.real-component.or-led-b { left: 4.6%; top: 28.78%; width: 18.5%; height: 13%; object-fit: fill; }
.real-component.or-b { left: 25.35%; top: 39.68%; width: 17.4%; height: 1.55%; object-fit: fill; }
.real-component.or-led-y { left: 4.6%; top: 31.68%; width: 18.5%; height: 13%; object-fit: fill; }
.real-component.or-y { left: 25.35%; top: 42.58%; width: 17.4%; height: 1.55%; object-fit: fill; filter: hue-rotate(290deg) saturate(1.15); }
.real-component.or-power { left: 59%; top: 36.78%; width: 35.08%; height: 1.55%; object-fit: fill; }
.real-component.or-ground { left: 9.6%; top: 54.08%; width: 31.8%; height: 1.55%; object-fit: fill; }

.and-chip-dip14,
.or-chip-dip14 {
  position: absolute;
  z-index: 2;
  left: 41.05%;
  top: 32.7%;
  width: 17.9%;
  height: 23.5%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.28));
}

.leda-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: polygon(60% 0,100% 0,100% 100%,68% 100%,68% 78%,60% 78%);
}

.leda-return-bend {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.leda-return-bend .bend-shadow {
  fill: none;
  stroke: rgba(0,0,0,.26);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(3px);
}

.leda-return-bend .bend-wire {
  fill: none;
  stroke: #151a1c;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leda-return-bend .bend-highlight {
  fill: none;
  stroke: rgba(255,255,255,.28);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leda-return-bend .bend-metal {
  fill: #8f918d;
  stroke: #4e514f;
  stroke-width: 2;
}

.leda-return-bend .bend-bridge-shadow {
  fill: none;
  stroke: rgba(0,0,0,.25);
  stroke-width: 18;
  stroke-linecap: round;
  transform: translateY(2px);
}

.leda-return-bend .bend-bridge {
  fill: none;
  stroke: #151a1c;
  stroke-width: 14;
  stroke-linecap: round;
}

.leda-return-bend .bend-bridge-highlight {
  fill: none;
  stroke: rgba(255,255,255,.28);
  stroke-width: 3;
  stroke-linecap: round;
}

.wire-label {
  position: absolute;
  z-index: 3;
  color: #111;
  font: 700 clamp(10px,1.5vw,17px)/1 Arial,sans-serif;
  pointer-events: none;
}
.label-a { left: 31.75%; top: 34.58%; }
.label-y { left: 32.2%; top: 41.7%; }
.label-power { left: 85.5%; top: 34.58%; }
.label-ground { left: 17.5%; top: 51.78%; }
.and-label-a { left: 31.5%; top: 34.85%; }
.and-label-b { left: 31.5%; top: 37.75%; }
.and-label-y { left: 16.8%; top: 43.75%; white-space: nowrap; }
.and-label-power { left: 85.8%; top: 34.85%; }
.and-label-ground { left: 17.5%; top: 52.15%; }
.or-label-a { left: 31.5%; top: 34.85%; }
.or-label-b { left: 31.5%; top: 37.75%; }
.or-label-y { left: 16.8%; top: 43.75%; white-space: nowrap; }
.or-label-power { left: 85.8%; top: 34.85%; }
.or-label-ground { left: 17.5%; top: 52.15%; }

.part-picture.real-thumb {
  width: 48px;
  height: 34px;
  object-fit: contain;
}
.part-picture.real-thumb.y { filter: hue-rotate(290deg) saturate(1.15); }

.test-circuit-host { margin-top: 14px; }
.test-real-breadboard { width: min(100%, 360px) !important; margin: 0 auto; }
.test-placed-layers { position: absolute; inset: 0; pointer-events: none; }
.test-real-breadboard .test-led-off .leda-body,
.test-real-breadboard .test-led-off .not-output-led-body,
.test-real-breadboard .test-led-off .and-bulb {
  filter: grayscale(1) brightness(.58);
  opacity: .7;
}
.test-real-breadboard .test-led-on .leda-body,
.test-real-breadboard .test-led-on .not-output-led-body,
.test-real-breadboard .test-led-on .and-bulb {
  filter: saturate(1.45) brightness(1.18) drop-shadow(0 0 8px rgba(31,255,128,.9));
  opacity: 1;
}

#large-gate.large-gate {
  width: 180px;
  height: 110px;
  padding: 8px;
  background: #f8fbff;
  border: 1px solid #b8cbe2;
  border-radius: 14px;
  color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7);
}
.test-logic-symbol { width: 100%; height: 100%; overflow: visible; }
.test-logic-symbol g {
  fill: none;
  stroke: #0878a9;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.test-logic-symbol circle { fill: #f8fbff; }

.mini-gate {
  width: 52px;
  height: 32px;
  padding: 3px;
  border-radius: 6px;
}
.mini-gate svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mini-gate svg path,
.mini-gate svg circle {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mini-gate svg circle { fill: var(--navy); }

.hero-visual { gap: 22px; padding-right: 8px; }
.hero-logic-symbol {
  display: block;
  width: 112px;
  height: 76px;
  overflow: visible;
  transform-origin: center;
  animation: logic-symbol-float 4.8s ease-in-out infinite;
}
.hero-logic-symbol path,
.hero-logic-symbol circle {
  fill: none;
  stroke: #8ee7ff;
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-logic-symbol circle { fill: #082b58; }
.hero-logic-symbol:nth-child(1) {
  filter: drop-shadow(0 0 5px rgba(92,225,255,.8)) drop-shadow(0 0 16px rgba(92,225,255,.25));
}
.hero-logic-symbol:nth-child(1) path,
.hero-logic-symbol:nth-child(1) circle { stroke: #5ce1ff; }
.hero-logic-symbol:nth-child(2) {
  width: 122px;
  height: 82px;
  animation-delay: -.8s;
  filter: drop-shadow(0 0 5px rgba(90,255,189,.78)) drop-shadow(0 0 17px rgba(90,255,189,.24));
}
.hero-logic-symbol:nth-child(2) path,
.hero-logic-symbol:nth-child(2) circle { stroke: #5affbd; }
.hero-logic-symbol:nth-child(3) {
  animation-delay: -1.6s;
  filter: drop-shadow(0 0 5px rgba(181,164,255,.8)) drop-shadow(0 0 16px rgba(181,164,255,.25));
}
.hero-logic-symbol:nth-child(3) path,
.hero-logic-symbol:nth-child(3) circle { stroke: #b5a4ff; }
.hero-logic-symbol .flow-dot {
  fill: #f7feff;
  stroke: none;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
}
.hero-logic-symbol .input-flow { color: #fff; opacity: .92; }
.hero-logic-symbol .output-flow { color: #5affbd; fill: #5affbd; }
@keyframes logic-symbol-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-logic-symbol { animation: none; }
  .hero-logic-symbol .flow-dot { display: none; }
}

#practice-lock-icon:not([hidden]) {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: 7px;
  border-radius: 50%;
  background: #fff1c7;
  border: 1px solid #d79a1f;
  box-shadow: 0 2px 8px rgba(111,72,0,.22);
  vertical-align: middle;
  font-size: .9rem;
}
#practice-lock-icon[hidden] { display: none !important; }

.part {
  position: relative;
  overflow: visible;
  background: transparent !important;
  transition: .18s;
}

.part:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: #1769db;
}

.part.placed {
  opacity: 1;
  border-color: #b9cce5;
  background: transparent;
  color: transparent;
}

.part.placed > * { visibility: hidden; }
.part.placed::after {
  content: none;
}

.coming-soon { opacity: .48; }
.board-target {
  min-height: 7px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px #1787e62b;
}
.part-picture,.wire-part,.led-part,.chip-part { background-color: transparent; }

.chip-name {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 3px 8px;
  border: 1px solid #b8c9da;
  border-radius: 6px;
  background: rgba(255,255,255,.9);
  color: #17324f;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
  pointer-events: none;
}

.chip-logic-preview {
  position: absolute;
  z-index: 4;
  left: 43.15%;
  top: 34.15%;
  width: 13.25%;
  height: 10.2%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.28));
}

.chip-logic-preview .label {
  fill: rgba(249,252,253,.97);
  stroke: #25333d;
  stroke-width: 3;
}

.chip-logic-preview .logic {
  fill: none;
  stroke: #0878a9;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chip-logic-preview .gate-fill {
  fill: rgba(10,134,184,.16);
  stroke: #0878a9;
  stroke-width: 5;
}

.preview-note {
  margin: 4px 0;
  padding: 12px;
  border: 1px solid #b9ccdc;
  border-radius: 10px;
  color: #29445e;
  background: rgba(255,255,255,.7);
  font-size: .78rem;
  line-height: 1.45;
}

.preview-part {
  display: grid;
  grid-template-columns: 52px 1fr;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 5px 2px;
  color: #17324f;
  background: transparent;
  font-size: .76rem;
  font-weight: 800;
}

.preview-part img {
  display: block;
  width: 50px;
  height: 38px;
  object-fit: contain;
  background: transparent;
}