Completed Wave 3 features:

- [X] New User Interface (Responsive)
- [X] Two's Compliment Simulator
- [X] Extended Binary Simulator (Custom bit sizes)
- [X] Unified Binary Simulator (Unsigned & Two's Completment combined)
- [X] Extended Hexadecimal Simulator
- [X] Unified Hexadecimal Simulator (For GCSE & A Level Specification)
- [X] Enhanced Gate Simulator (Truth Table Creator)
- [X] Compound Gate Simulator
- [ ] Computer Components Simulator

Signed-off-by: Alexander Lyall <alex@adcm.uk>

src/styles/logic-gates.css

@@ -0,0 +1,163 @@
+/* === LOGIC GATES CANVAS CSS === */
+.lg-workspace {
+  position: relative;
+  flex: 1;
+  width: 100%;
+  min-height: 750px;
+  background-color: transparent; 
+  background-image: radial-gradient(rgba(255,255,255,0.12) 1px, transparent 1px);
+  background-size: 24px 24px;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.lg-svg-layer {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; 
+  z-index: 1;
+}
+
+/* Wires */
+.lg-wire {
+  stroke: rgba(255,255,255,0.25);
+  stroke-width: 6;
+  fill: none;
+  stroke-linecap: round;
+  transition: stroke 0.1s ease, filter 0.1s ease, stroke-width 0.1s ease;
+  pointer-events: stroke; /* Allows wires to be clicked */
+  cursor: pointer;
+}
+.lg-wire:hover {
+  stroke: rgba(255,255,255,0.6);
+  stroke-width: 10;
+}
+.lg-wire.active {
+  stroke: #28f07a;
+  filter: drop-shadow(0 0 6px rgba(40,240,122,0.6));
+}
+.lg-wire.active:hover { stroke: #5dff9e; }
+.lg-wire.selected {
+  stroke: #ff5555 !important;
+  stroke-width: 8 !important;
+  stroke-dasharray: 8 8;
+  filter: drop-shadow(0 0 8px rgba(255,85,85,0.8)) !important;
+  animation: wireDash 1s linear infinite;
+}
+@keyframes wireDash { to { stroke-dashoffset: -16; } }
+
+.lg-wire-temp {
+  stroke: rgba(255,255,255,0.4);
+  stroke-dasharray: 8 8;
+  pointer-events: none;
+}
+
+/* Nodes (Borderless & Transparent) */
+.lg-node {
+  position: absolute;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: grab;
+  z-index: 10;
+  box-shadow: none;
+  backdrop-filter: none;
+  user-select: none;
+  transition: filter 0.2s;
+}
+.lg-node:active { cursor: grabbing; z-index: 20; }
+.lg-node.selected {
+  filter: drop-shadow(0 0 10px rgba(255,85,85,0.8));
+}
+
+/* Node Labels (Seven-Segment, +2 Sizes Bigger) */
+.lg-header {
+  font-size: 24px; 
+  color: var(--muted);
+  font-family: var(--bit-font); 
+  letter-spacing: 2px;
+  pointer-events: none;
+  margin-bottom: 6px;
+}
+
+/* Container mapping SVGs to absolutely positioned connection dots */
+.lg-gate-container {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.lg-gate-svg {
+  width: 100px; 
+  height: 50px;
+  display: block;
+}
+
+.lg-line-svg {
+  width: 30px;
+  height: 50px;
+  display: block;
+}
+
+/* Connection Ports */
+.lg-port {
+  width: 16px; height: 16px; background: #a9acb8; border-radius: 50%; cursor: crosshair;
+  border: 3px solid var(--bg); box-shadow: 0 0 0 1px rgba(255,255,255,0.2); transition: all 0.2s;
+  position: absolute; z-index: 5;
+  transform: translate(-50%, -50%); /* Centers the dot exactly over the coordinate */
+}
+.lg-port:hover { transform: translate(-50%, -50%) scale(1.3); background: #fff; }
+.lg-port.active { background: #28f07a; box-shadow: 0 0 12px rgba(40,240,122,0.8); border-color: #1f2027; }
+
+/* Draggable Toolbox Visual Gates Grid */
+.tb-icon-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+.tb-icon-box {
+  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.15);
+  border-radius: 12px; width: 100%; padding: 12px 0;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
+  cursor: grab; transition: background 0.2s, border-color 0.2s;
+}
+.tb-icon-box:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); }
+.tb-icon-label { font-family: var(--ui-font); font-size: 11px; font-weight: 800; color: var(--text); letter-spacing: 1px; text-transform: uppercase; }
+
+/* Toolbox Scroll Fix */
+.panelCol {
+  max-height: calc(100vh - var(--nav-h) - 30px) !important;
+  overflow-y: auto;
+  padding-bottom: 30px;
+  pointer-events: auto;
+}
+
+/* Truth Table */
+.tt-summary {
+  font-family: var(--ui-font); font-size: 14px; font-weight: 800;
+  color: var(--accent, #28f07a); cursor: pointer; user-select: none;
+  outline: none; margin-bottom: 10px; text-transform: uppercase;
+}
+.tt-table-wrap {
+  width: 100%; max-height: 300px; overflow-y: auto; overflow-x: auto;
+  border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.2);
+}
+.tt-table {
+  width: 100%; border-collapse: collapse; text-align: center;
+  font-family: var(--num-font); font-size: 14px; color: #e8e8ee;
+}
+.tt-table th {
+  position: sticky; top: 0; background: rgba(31,32,39,0.95);
+  padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.15);
+  color: var(--muted); font-family: var(--bit-font); font-weight: normal;
+}
+.tt-table td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.05); }
+.tt-table .tt-on { color: #28f07a; text-shadow: 0 0 8px rgba(40,240,122,0.5); }