chore(release): bump version to v26.04.15.a [skip ci]

Reviewed-on: #28

.gitea/workflows/release.yaml

@@ -93,11 +93,12 @@ jobs:
           set -e
 
           PREV_TAG="$(
-            git tag --list 'v*' \
-              | grep -E '^v[0-9]{2}\.[0-9]{2}\.[0-9]{2}[a-z]$' \
+            git for-each-ref \
+              --sort=-creatordate \
+              --format='%(refname:short)' \
+              refs/tags \
               | grep -Fxv "$TAG" \
-              | sort -V \
-              | tail -n 1 \
+              | head -n 1 \
               || true
           )"
 
@@ -198,7 +199,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v6
         with:
-          node-version: 25
+          node-version: 24
           cache: npm
 
       - name: Check Node version

dist/_astro/binary.astro_astro_type_script_index_0_lang.C_c_A3x5.js

@@ -1,12 +0,0 @@
-(()=>{const d=document.getElementById("bitsGrid"),h=document.getElementById("denaryNumber"),M=document.getElementById("binaryNumber"),f=document.getElementById("bitsInput"),m=document.getElementById("modeToggle"),E=document.getElementById("modeHint"),T=document.getElementById("lblUnsigned"),k=document.getElementById("lblTwos"),H=document.getElementById("btnCustomBinary"),G=document.getElementById("btnCustomDenary"),P=document.getElementById("btnShiftLeft"),V=document.getElementById("btnShiftRight"),q=document.getElementById("btnDec"),Z=document.getElementById("btnInc"),z=document.getElementById("btnClear"),I=document.getElementById("btnRandom"),O=document.getElementById("btnBitsUp"),W=document.getElementById("btnBitsDown"),R=document.getElementById("toolboxToggle"),w=document.getElementById("binaryPage");let i=b(Number(f?.value??8),1,64),s=new Array(i).fill(!1),u=null;function b(t,n,e){return Number.isFinite(t)?Math.max(n,Math.min(e,Math.trunc(t))):n}function l(){return!!m?.checked}function a(t){return 1n<<BigInt(t)}function y(t){return a(t)}function $(t){return a(t)-1n}function B(t){return-a(t-1)}function p(t){return a(t-1)-1n}function v(){let t=0n;for(let n=0;n<i;n++)s[n]&&(t+=a(n));return t}function g(t){const n=y(i),e=(t%n+n)%n;for(let o=0;o<i;o++)s[o]=(e>>BigInt(o)&1n)===1n}function L(){const t=v();return s[i-1]===!0?t-a(i):t}function x(t){const n=a(i);let e=t;e=(e%n+n)%n,g(e)}function j(){let t="";for(let n=i-1;n>=0;n--){t+=s[n]?"1":"0";const e=i-n;n!==0&&e%4===0&&(t+=" ")}return t.trimEnd()}function D(){E&&(l()?E.textContent="Tip: In two's complement, the left-most bit (MSB) represents a negative value.":E.textContent="Tip: In unsigned binary, all bits represent positive values.")}function A(){if(!d)return;const t=d.parentElement;if(!t)return;const n=t.getBoundingClientRect().width,o=b(Math.floor(n/100),1,12);d.style.setProperty("--cols",String(Math.min(o,i)))}function C(t){i=b(t,1,64),f&&(f.value=String(i));const n=s.slice();s=new Array(i).fill(!1);for(let e=0;e<Math.min(n.length,i);e++)s[e]=n[e];d.innerHTML="",d.classList.toggle("bitsFew",i<8);for(let e=i-1;e>=0;e--){const o=document.createElement("div");o.className="bit",o.innerHTML=`
-        <div class="bulb" id="bulb-${e}" aria-hidden="true">
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-            <path d="M12 2.25a6.75 6.75 0 0 0-6.75 6.75c0 2.537 1.393 4.75 3.493 5.922l.507.282v1.546h5.5v-1.546l.507-.282A6.75 6.75 0 0 0 12 2.25Zm-2.25 16.5v.75a2.25 2.25 0 0 0 4.5 0v-.75h-4.5Z"/>
-          </svg>
-        </div>
-        <div class="bitVal" id="bitLabel-${e}"></div>
-        <label class="switch" aria-label="Toggle bit ${e}">
-          <input type="checkbox" data-index="${e}">
-          <span class="slider"></span>
-        </label>
-      `,d.appendChild(o)}d.querySelectorAll('input[type="checkbox"]').forEach(e=>{e.addEventListener("change",()=>{const o=Number(e.dataset.index);s[o]=e.checked,r()})}),A(),r()}function J(){for(let t=0;t<i;t++){const n=document.getElementById(`bitLabel-${t}`);if(!n)continue;let e;l()&&t===i-1?e=`-${a(i-1).toString()}`:e=a(t).toString(),n.textContent=e,n.style.setProperty("--len",e.length)}}function K(){d.querySelectorAll('input[type="checkbox"]').forEach(t=>{const n=Number(t.dataset.index);t.checked=!!s[n]})}function Q(){for(let t=0;t<i;t++){const n=document.getElementById(`bulb-${t}`);n&&n.classList.toggle("on",s[t]===!0)}}function X(){!h||!M||(l()?h.textContent=L().toString():h.textContent=v().toString(),M.textContent=j())}function r(){D(),T&&k&&(T.classList.toggle("activeMode",!l()),k.classList.toggle("activeMode",l())),J(),K(),Q(),X()}function Y(t){const n=String(t??"").replace(/\s+/g,"");if(!/^[01]+$/.test(n))return!1;const e=n.slice(-i).padStart(i,"0");for(let o=0;o<i;o++){const c=e[e.length-1-o];s[o]=c==="1"}return r(),!0}function _(t){const n=String(t??"").trim();if(!n)return!1;let e;try{if(!/^-?\d+$/.test(n))return!1;e=BigInt(n)}catch{return!1}if(l()){const o=B(i),c=p(i);if(e<o||e>c)return!1;x(e)}else{if(e<0n||e>$(i))return!1;g(e)}return r(),!0}function tt(){for(let t=i-1;t>=1;t--)s[t]=s[t-1];s[0]=!1,r()}function nt(){const t=s[i-1];for(let n=0;n<i-1;n++)s[n]=s[n+1];s[i-1]=l()?t:!1,r()}function et(){s=[],m&&(m.checked=!1),C(8)}function it(){if(l()){const t=B(i),n=p(i);let e=L()+1n;e>n&&(e=t),x(e)}else{const t=y(i);g((v()+1n)%t)}r()}function ot(){if(l()){const t=B(i),n=p(i);let e=L()-1n;e<t&&(e=n),x(e)}else{const t=y(i);g((v()-1n+t)%t)}r()}function st(t){if(t<=0n)return 0n;const n=t.toString(2).length,e=Math.ceil(n/8);for(;;){const o=new Uint8Array(e);crypto.getRandomValues(o);let c=0n;for(const ct of o)c=c<<8n|BigInt(ct);const U=BigInt(e*8-n);if(U>0n&&(c=c>>U),c<t)return c}}function lt(){const t=y(i),n=st(t);g(n),r()}function N(t){I&&I.classList.toggle("btnRandomRunning",!!t)}function rt(){u&&(clearInterval(u),u=null),N(!0);const t=Date.now(),n=1125;u=setInterval(()=>{lt(),Date.now()-t>=n&&(clearInterval(u),u=null,N(!1))},80)}function S(t){const n=b(t,1,64);C(n)}function F(t){if(!w)return;w.classList.toggle("toolboxCollapsed",!!t);const n=!t;R?.setAttribute("aria-expanded",n?"true":"false")}m?.addEventListener("change",r),H?.addEventListener("click",()=>{const t=prompt(`Enter binary (spaces allowed). Current width: ${i} bits`);t!==null&&(Y(t)||alert("Invalid binary"))}),G?.addEventListener("click",()=>{const t=prompt(l()?`Enter denary (${B(i).toString()} to ${p(i).toString()}):`:`Enter denary (0 to ${$(i).toString()}):`);t!==null&&(_(t)||alert("Invalid denary for current mode/bit width"))}),P?.addEventListener("click",tt),V?.addEventListener("click",nt),Z?.addEventListener("click",it),q?.addEventListener("click",ot),z?.addEventListener("click",et),I?.addEventListener("click",rt),O?.addEventListener("click",()=>S(i+1)),W?.addEventListener("click",()=>S(i-1)),f?.addEventListener("change",()=>S(Number(f.value))),R?.addEventListener("click",()=>{const t=w?.classList.contains("toolboxCollapsed");F(!t)}),window.addEventListener("resize",()=>{A()}),D(),C(i),F(!1)})();

dist/binary/index.html

@@ -13,8 +13,81 @@
         var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
         g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
       })();
-    </script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="icon" type="image/x-icon" href="/images/favicon.ico"><link rel="stylesheet" href="/_astro/BaseLayout.DM-NXsTj.css">
-<link rel="stylesheet" href="/_astro/number-simulators.9peKc0z2.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo.webp" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap">  <div class="binaryPage" id="binaryPage"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true"> <span class="toolboxIcon" aria-hidden="true">🧰</span> <span class="toolboxText">TOOLBOX</span> </button> <section class="topGrid"> <div class="leftCol"> <div class="readout"> <div class="label">Denary</div> <div id="denaryNumber" class="num denaryValue">0</div> <div class="label">Binary</div> <div id="binaryNumber" class="num binaryValue">00000000</div> </div> <div class="divider"></div> <section class="bitsWrap" aria-label="Bit switches"> <div class="bitsGrid" id="bitsGrid"></div> </section> </div> <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox"> <div class="card"> <div class="cardTitle">Settings</div> <div class="toggleRow"> <div class="toggleLabel" id="lblUnsigned">Unsigned</div> <label class="switch" aria-label="Toggle mode"> <input id="modeToggle" type="checkbox"> <span class="slider"></span> </label> <div class="toggleLabel" id="lblTwos">Two's complement</div> </div> <div class="hint" id="modeHint">
+    </script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="icon" type="image/x-icon" href="/images/favicon.ico"><link rel="stylesheet" href="/_astro/BaseLayout.B8W3SO34.css">
+<link rel="stylesheet" href="/_astro/number-simulators.6IzVRJBu.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo-small.webp" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/">Home</a> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap">  <div class="binaryPage" id="binaryPage"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true"> <span class="toolboxIcon" aria-hidden="true">🧰</span> <span class="toolboxText">TOOLBOX</span> </button> <section class="topGrid"> <div class="leftCol"> <div class="readout"> <div class="label">Denary</div> <div id="denaryNumber" class="num denaryValue">0</div> <div class="label">Binary</div> <div id="binaryNumber" class="num binaryValue">00000000</div> </div> <div class="divider"></div> <section class="bitsWrap" aria-label="Bit switches"> <div class="bitsGrid" id="bitsGrid"></div> </section> </div> <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox"> <div class="card"> <div class="cardTitle">Settings</div> <div class="toggleRow"> <div class="toggleLabel" id="lblUnsigned">Unsigned</div> <label class="switch" aria-label="Toggle mode"> <input id="modeToggle" type="checkbox"> <span class="slider"></span> </label> <div class="toggleLabel" id="lblTwos">Two's complement</div> </div> <div class="hint" id="modeHint">
 Tip: In unsigned binary, all bits represent positive values.
-</div> <div class="subCard"> <div class="subTitle">Bit width</div> <div class="bitWidthRow"> <button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button> <div class="bitInputWrap"> <div class="bitInputLabel">Bits</div> <input id="bitsInput" class="bitInput" type="number" inputmode="numeric" min="1" max="64" step="1" value="8" aria-label="Number of bits"> </div> <button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button> </div> </div> </div> <div class="card"> <div class="cardTitle">Custom Number</div> <div class="controlsRow"> <button class="btn btnAccent btnHalf" id="btnCustomBinary" type="button">Custom Binary</button> <button class="btn btnAccent btnHalf" id="btnCustomDenary" type="button">Custom Denary</button> </div> <button class="btn btnWide" id="btnRandom" type="button">Random</button> <div class="hint">Random runs briefly then stops automatically.</div> </div> <div class="card"> <div class="cardTitle">Tools</div> <div class="toolRowCentered"> <button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button> </div> <div class="toolRow2"> <button class="btn btnHalf" id="btnShiftLeft" type="button">Left Shift</button> <button class="btn btnHalf" id="btnShiftRight" type="button">Right Shift</button> </div> <button class="btn btnReset btnWide" id="btnClear" type="button">Reset</button> </div> </aside> </section> </div> <script type="module" src="/_astro/binary.astro_astro_type_script_index_0_lang.C_c_A3x5.js"></script>  </main> <footer class="siteFooter"> <div class="footerInner"> <div style="margin-top: 5px; display: flex; justify-content: center;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> <a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a> </div> <div>Computer Science Concept Simulators</div> <div> Version:
-<a href="#" target="_blank" rel="noopener noreferrer">dev</a> • © 2026 Computing:Box • Created with ♥ by Mr A Lyall</div> </div> </footer> </body></html>
+</div> <div class="subCard"> <div class="subTitle">Bit width</div> <div class="bitWidthRow"> <button class="miniBtn" id="btnBitsDown" type="button" aria-label="Decrease bits">−</button> <div class="bitInputWrap"> <div class="bitInputLabel">Bits</div> <input id="bitsInput" class="bitInput" type="number" inputmode="numeric" min="1" max="64" step="1" value="8" aria-label="Number of bits"> </div> <button class="miniBtn" id="btnBitsUp" type="button" aria-label="Increase bits">+</button> </div> </div> </div> <div class="card"> <div class="cardTitle">Custom Number</div> <div class="controlsRow"> <button class="btn btnAccent btnHalf" id="btnCustomBinary" type="button">Custom Binary</button> <button class="btn btnAccent btnHalf" id="btnCustomDenary" type="button">Custom Denary</button> </div> <button class="btn btnWide" id="btnRandom" type="button">Random</button> <div class="hint">Random runs briefly then stops automatically.</div> </div> <div class="card"> <div class="cardTitle">Tools</div> <div class="toolRowCentered"> <button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button> </div> <div class="controlsRow"> <button class="btn btnHalf" id="btnShiftLeft" type="button">Left Shift</button> <button class="btn btnHalf" id="btnShiftRight" type="button">Right Shift</button> </div> <button class="btn btnReset btnWide" id="btnClear" type="button">Reset</button> </div> </aside> </section> </div> <script type="module" src="/_astro/binary.astro_astro_type_script_index_0_lang.CNqn-vvz.js"></script>  </main> <footer class="siteFooter"> <div class="footerInner"> <div style="margin-top: 5px; display: flex; justify-content: center;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> <a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a> </div> <div>Computer Science Concept Simulators</div> <div> Version:
+<a href="#" target="_blank" rel="noopener noreferrer">dev</a> • © 2026 Computing:Box • Created with ♥ by Mr A Lyall</div> </div> </footer> <script>
+      function setupToolboxAccordions() {
+        // Look for cards inside ANY of the three toolboxes!
+        const cards = document.querySelectorAll('.panelCol .card, .pb-toolbox .card, .lg-toolbox .card');
+        if (!cards.length) return;
+
+        // Your primary cards for each page
+        const primaryCardNames = ['settings', 'info', 'components', 'system diagnostics'];
+
+        cards.forEach(card => {
+          const titleEl = card.querySelector('.cardTitle');
+          if (!titleEl) return;
+
+          const titleText = titleEl.textContent.trim().toLowerCase();
+          const isPrimary = primaryCardNames.includes(titleText);
+
+          // 1. DYNAMICALLY WRAP THE CONTENT
+          if (!card.querySelector('.cardBody')) {
+            const body = document.createElement('div');
+            body.className = 'cardBody';
+            const inner = document.createElement('div');
+            inner.className = 'cardBodyInner';
+            body.appendChild(inner);
+
+            Array.from(card.childNodes).forEach(node => {
+              if (node !== titleEl) {
+                inner.appendChild(node);
+              }
+            });
+            card.appendChild(body);
+          }
+
+          // 2. APPLY DEFAULT STATE
+          if (isPrimary) {
+            card.classList.remove('collapsed'); 
+          } else {
+            card.classList.add('collapsed');
+          }
+
+          // 3. CLICK LISTENERS
+          if (card.dataset.accordionInit) return;
+          card.dataset.accordionInit = "true";
+
+          titleEl.addEventListener('click', () => {
+            const isCollapsing = !card.classList.contains('collapsed');
+
+            if (isCollapsing) {
+              card.classList.add('collapsed');
+            } else {
+              if (isPrimary) {
+                cards.forEach(c => { 
+                  // Only close cards that share the same parent toolbox
+                  if (c !== card && c.closest(card.parentElement.tagName) === card.closest(card.parentElement.tagName)) {
+                    c.classList.add('collapsed'); 
+                  }
+                });
+              } else {
+                cards.forEach(c => {
+                  if (c.closest(card.parentElement.tagName) !== card.closest(card.parentElement.tagName)) return;
+                  const cTitle = c.querySelector('.cardTitle')?.textContent.trim().toLowerCase() || '';
+                  if (primaryCardNames.includes(cTitle)) {
+                    c.classList.add('collapsed');
+                  }
+                });
+              }
+              card.classList.remove('collapsed');
+            }
+          });
+        });
+      }
+
+      setupToolboxAccordions();
+      document.addEventListener('astro:page-load', setupToolboxAccordions);
+    </script> </body> </html>

dist/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>

dist/hexadecimal/index.html

@@ -13,8 +13,81 @@
         var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
         g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
       })();
-    </script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="icon" type="image/x-icon" href="/images/favicon.ico"><link rel="stylesheet" href="/_astro/BaseLayout.DM-NXsTj.css">
-<link rel="stylesheet" href="/_astro/number-simulators.9peKc0z2.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo.webp" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap">  <div class="binaryPage" id="hexPage"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true"> <span class="toolboxIcon" aria-hidden="true">🧰</span> <span class="toolboxText">TOOLBOX</span> </button> <section class="topGrid"> <div class="leftCol"> <div class="readout"> <div class="label">Denary</div> <div id="denaryNumber" class="num denaryValue">0</div> <div class="label">Hexadecimal</div> <div id="hexNumber" class="num hexValue">00</div> <div class="label">Binary</div> <div id="binaryNumber" class="num binaryValue">00000000</div> </div> <div class="divider"></div> <section class="bitsWrap" aria-label="Hexadecimal sliders"> <div class="hexGrid" id="hexGrid"></div> </section> </div> <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox"> <div class="card"> <div class="cardTitle">Settings</div> <div class="hint" style="margin-top: 0; margin-bottom: 14px;">
+    </script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="icon" type="image/x-icon" href="/images/favicon.ico"><link rel="stylesheet" href="/_astro/BaseLayout.B8W3SO34.css">
+<link rel="stylesheet" href="/_astro/number-simulators.6IzVRJBu.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo-small.webp" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/">Home</a> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap">  <div class="binaryPage" id="hexPage"> <button id="toolboxToggle" class="toolboxToggle" type="button" aria-expanded="true"> <span class="toolboxIcon" aria-hidden="true">🧰</span> <span class="toolboxText">TOOLBOX</span> </button> <section class="topGrid"> <div class="leftCol"> <div class="readout"> <div class="label">Denary</div> <div id="denaryNumber" class="num denaryValue">0</div> <div class="label">Hexadecimal</div> <div id="hexNumber" class="num hexValue">00</div> <div class="label">Binary</div> <div id="binaryNumber" class="num binaryValue">00000000</div> </div> <div class="divider"></div> <section class="bitsWrap" aria-label="Hexadecimal sliders"> <div class="hexGrid" id="hexGrid"></div> </section> </div> <aside id="toolboxPanel" class="panelCol" aria-label="Toolbox"> <div class="card"> <div class="cardTitle">Settings</div> <div class="hint" style="margin-top: 0; margin-bottom: 14px;">
 Hexadecimal represents numbers using base 16 (0-9, A-F).
 </div> <div class="subCard"> <div class="subTitle">Digit width</div> <div class="bitWidthRow"> <button class="miniBtn" id="btnDigitsDown" type="button" aria-label="Decrease digits">−</button> <div class="bitInputWrap"> <div class="bitInputLabel">Digits</div> <input id="digitsInput" class="bitInput" type="number" inputmode="numeric" min="1" max="16" step="1" value="2" aria-label="Number of hex digits"> </div> <button class="miniBtn" id="btnDigitsUp" type="button" aria-label="Increase digits">+</button> </div> </div> </div> <div class="card"> <div class="cardTitle">Custom Number</div> <div class="controlsRow"> <button class="btn btnAccent btnHalf" id="btnCustomHex" type="button">Custom Hex</button> <button class="btn btnAccent btnHalf" id="btnCustomDenary" type="button">Custom Denary</button> </div> <div class="controlsRow"> <button class="btn btnAccent btnWide" id="btnCustomBinary" type="button">Custom Binary</button> </div> <button class="btn btnWide" id="btnRandom" type="button">Random</button> <div class="hint">Random runs briefly then stops automatically.</div> </div> <div class="card"> <div class="cardTitle">Tools</div> <div class="toolRowCentered"> <button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button> <button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button> </div> <button class="btn btnReset btnWide" id="btnClear" type="button">Reset</button> </div> </aside> </section> </div> <script type="module" src="/_astro/hexadecimal.astro_astro_type_script_index_0_lang.C4Wx7oaX.js"></script>  </main> <footer class="siteFooter"> <div class="footerInner"> <div style="margin-top: 5px; display: flex; justify-content: center;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> <a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a> </div> <div>Computer Science Concept Simulators</div> <div> Version:
-<a href="#" target="_blank" rel="noopener noreferrer">dev</a> • © 2026 Computing:Box • Created with ♥ by Mr A Lyall</div> </div> </footer> </body></html>
+<a href="#" target="_blank" rel="noopener noreferrer">dev</a> • © 2026 Computing:Box • Created with ♥ by Mr A Lyall</div> </div> </footer> <script>
+      function setupToolboxAccordions() {
+        // Look for cards inside ANY of the three toolboxes!
+        const cards = document.querySelectorAll('.panelCol .card, .pb-toolbox .card, .lg-toolbox .card');
+        if (!cards.length) return;
+
+        // Your primary cards for each page
+        const primaryCardNames = ['settings', 'info', 'components', 'system diagnostics'];
+
+        cards.forEach(card => {
+          const titleEl = card.querySelector('.cardTitle');
+          if (!titleEl) return;
+
+          const titleText = titleEl.textContent.trim().toLowerCase();
+          const isPrimary = primaryCardNames.includes(titleText);
+
+          // 1. DYNAMICALLY WRAP THE CONTENT
+          if (!card.querySelector('.cardBody')) {
+            const body = document.createElement('div');
+            body.className = 'cardBody';
+            const inner = document.createElement('div');
+            inner.className = 'cardBodyInner';
+            body.appendChild(inner);
+
+            Array.from(card.childNodes).forEach(node => {
+              if (node !== titleEl) {
+                inner.appendChild(node);
+              }
+            });
+            card.appendChild(body);
+          }
+
+          // 2. APPLY DEFAULT STATE
+          if (isPrimary) {
+            card.classList.remove('collapsed'); 
+          } else {
+            card.classList.add('collapsed');
+          }
+
+          // 3. CLICK LISTENERS
+          if (card.dataset.accordionInit) return;
+          card.dataset.accordionInit = "true";
+
+          titleEl.addEventListener('click', () => {
+            const isCollapsing = !card.classList.contains('collapsed');
+
+            if (isCollapsing) {
+              card.classList.add('collapsed');
+            } else {
+              if (isPrimary) {
+                cards.forEach(c => { 
+                  // Only close cards that share the same parent toolbox
+                  if (c !== card && c.closest(card.parentElement.tagName) === card.closest(card.parentElement.tagName)) {
+                    c.classList.add('collapsed'); 
+                  }
+                });
+              } else {
+                cards.forEach(c => {
+                  if (c.closest(card.parentElement.tagName) !== card.closest(card.parentElement.tagName)) return;
+                  const cTitle = c.querySelector('.cardTitle')?.textContent.trim().toLowerCase() || '';
+                  if (primaryCardNames.includes(cTitle)) {
+                    c.classList.add('collapsed');
+                  }
+                });
+              }
+              card.classList.remove('collapsed');
+            }
+          });
+        });
+      }
+
+      setupToolboxAccordions();
+      document.addEventListener('astro:page-load', setupToolboxAccordions);
+    </script> </body> </html>

dist/index.html

@@ -13,7 +13,80 @@
         var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
         g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
       })();
-    </script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="icon" type="image/x-icon" href="/images/favicon.ico"><link rel="stylesheet" href="/_astro/BaseLayout.DM-NXsTj.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo.webp" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap">  <div style="display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 60vh; padding: 40px 0;"> <div style="flex: 1;"> <p style="color: var(--accent); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px;">Version 2.0 Now Live</p> <h1 class="brandName" style="font-size: 48px; line-height: 1.1; margin-bottom: 24px;">Understand Computing concepts better.</h1> <p style="font-size: 18px; color: var(--muted);">
+    </script><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700;800;900&display=swap" rel="stylesheet"><link rel="icon" type="image/x-icon" href="/images/favicon.ico"><link rel="stylesheet" href="/_astro/BaseLayout.B8W3SO34.css"></head> <body> <header class="siteNav"> <div class="navInner"> <a class="brand" href="/"> <img class="brandLogo" src="/images/computing-box-logo-small.webp" alt="Computing:Box logo"> <span class="brandName">Computing:Box</span> </a> <nav class="navLinks" aria-label="Site navigation"> <a href="/">Home</a> <a href="/about">About</a> <a href="/binary">Binary</a> <a href="/hexadecimal">Hexadecimal</a> <a href="/hex-colours">Hex Colours</a> <a href="/logic-gates">Logic Gates</a> <a href="/pc-builder">PC Components</a> </nav> </div> </header> <main class="pageWrap">  <div style="display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 60vh; padding: 40px 0;"> <div style="flex: 1;"> <p style="color: var(--accent); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px;">Version 2.0 Now Live</p> <h1 class="brandName" style="font-size: 48px; line-height: 1.1; margin-bottom: 24px;">Understand Computing concepts better.</h1> <p style="font-size: 18px; color: var(--muted);">
 Interactive simulators for Binary, Hexadecimal, Logic Gates, and Computer Components designed for the UK curriculum.
 </p> <div style="display: flex; gap: 16px; margin-top: 32px;"> <a href="/about" class="btn btnAccent" style="text-decoration: none; padding: 14px 28px;">Learn More</a> <a href="/binary" class="btn" style="text-decoration: none; padding: 14px 28px;">Get Started</a> </div> </div> <div style="flex: 1; text-align: right;"> <img src="/images/computing-box-logo.webp" alt="Computing Box Logo" style="width: 100%; max-width: 450px; filter: drop-shadow(0 0 50px rgba(40, 240, 122, 0.15));"> </div> </div>  </main> <footer class="siteFooter"> <div class="footerInner"> <div style="margin-top: 5px; display: flex; justify-content: center;"> <a href="/copyright" style="color: var(--muted); text-decoration: underline;">Copyright Notice</a> <a href="/legal-code" style="margin-left: 32px; color: var(--muted); text-decoration: underline;">Legal Code</a> </div> <div>Computer Science Concept Simulators</div> <div> Version:
-<a href="#" target="_blank" rel="noopener noreferrer">dev</a> • © 2026 Computing:Box • Created with ♥ by Mr A Lyall</div> </div> </footer> </body></html>
+<a href="#" target="_blank" rel="noopener noreferrer">dev</a> • © 2026 Computing:Box • Created with ♥ by Mr A Lyall</div> </div> </footer> <script>
+      function setupToolboxAccordions() {
+        // Look for cards inside ANY of the three toolboxes!
+        const cards = document.querySelectorAll('.panelCol .card, .pb-toolbox .card, .lg-toolbox .card');
+        if (!cards.length) return;
+
+        // Your primary cards for each page
+        const primaryCardNames = ['settings', 'info', 'components', 'system diagnostics'];
+
+        cards.forEach(card => {
+          const titleEl = card.querySelector('.cardTitle');
+          if (!titleEl) return;
+
+          const titleText = titleEl.textContent.trim().toLowerCase();
+          const isPrimary = primaryCardNames.includes(titleText);
+
+          // 1. DYNAMICALLY WRAP THE CONTENT
+          if (!card.querySelector('.cardBody')) {
+            const body = document.createElement('div');
+            body.className = 'cardBody';
+            const inner = document.createElement('div');
+            inner.className = 'cardBodyInner';
+            body.appendChild(inner);
+
+            Array.from(card.childNodes).forEach(node => {
+              if (node !== titleEl) {
+                inner.appendChild(node);
+              }
+            });
+            card.appendChild(body);
+          }
+
+          // 2. APPLY DEFAULT STATE
+          if (isPrimary) {
+            card.classList.remove('collapsed'); 
+          } else {
+            card.classList.add('collapsed');
+          }
+
+          // 3. CLICK LISTENERS
+          if (card.dataset.accordionInit) return;
+          card.dataset.accordionInit = "true";
+
+          titleEl.addEventListener('click', () => {
+            const isCollapsing = !card.classList.contains('collapsed');
+
+            if (isCollapsing) {
+              card.classList.add('collapsed');
+            } else {
+              if (isPrimary) {
+                cards.forEach(c => { 
+                  // Only close cards that share the same parent toolbox
+                  if (c !== card && c.closest(card.parentElement.tagName) === card.closest(card.parentElement.tagName)) {
+                    c.classList.add('collapsed'); 
+                  }
+                });
+              } else {
+                cards.forEach(c => {
+                  if (c.closest(card.parentElement.tagName) !== card.closest(card.parentElement.tagName)) return;
+                  const cTitle = c.querySelector('.cardTitle')?.textContent.trim().toLowerCase() || '';
+                  if (primaryCardNames.includes(cTitle)) {
+                    c.classList.add('collapsed');
+                  }
+                });
+              }
+              card.classList.remove('collapsed');
+            }
+          });
+        });
+      }
+
+      setupToolboxAccordions();
+      document.addEventListener('astro:page-load', setupToolboxAccordions);
+    </script> </body> </html>

package-lock.json

@@ -1,14 +1,14 @@
 {
   "name": "computing-box",
-  "version": "26.3.2-1.g",
+  "version": "26.4.1-5.a",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "computing-box",
-      "version": "26.3.2-1.g",
+      "version": "26.4.1-5.a",
       "dependencies": {
-        "astro": "^6.0.8"
+        "astro": "^6.1.1"
       }
     },
     "node_modules/@astrojs/compiler": {
@@ -27,9 +27,9 @@
       }
     },
     "node_modules/@astrojs/markdown-remark": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-7.0.1.tgz",
-      "integrity": "sha512-zAfLJmn07u9SlDNNHTpjv0RT4F8D4k54NR7ReRas8CO4OeGoqSvOuKwqCFg2/cqN3wHwdWlK/7Yv/lMXlhVIaw==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@astrojs/markdown-remark/-/markdown-remark-7.1.0.tgz",
+      "integrity": "sha512-P+HnCsu2js3BoTc8kFmu+E9gOcFeMdPris75g+Zl4sY8+bBRbSQV6xzcBDbZ27eE7yBGEGQoqjpChx+KJYIPYQ==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/internal-helpers": "0.8.0",
@@ -45,6 +45,7 @@
         "remark-parse": "^11.0.0",
         "remark-rehype": "^11.1.2",
         "remark-smartypants": "^3.0.2",
+        "retext-smartypants": "^6.2.0",
         "shiki": "^4.0.0",
         "smol-toml": "^1.6.0",
         "unified": "^11.0.5",
@@ -1710,17 +1711,17 @@
       }
     },
     "node_modules/astro": {
-      "version": "6.0.8",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-6.0.8.tgz",
-      "integrity": "sha512-DCPeb8GKOoFWh+8whB7Qi/kKWD/6NcQ9nd1QVNzJFxgHkea3WYrNroQRq4whmBdjhkYPTLS/1gmUAl2iA2Es2g==",
+      "version": "6.1.7",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-6.1.7.tgz",
+      "integrity": "sha512-pvZysIUV2C2nRv8N7cXAkCLcfDQz/axAxF09SqiTz1B+xnvbhy6KzL2I6J15ZBXk8k0TfMD75dJ151QyQmAqZA==",
       "license": "MIT",
       "dependencies": {
-        "@astrojs/compiler": "^3.0.0",
+        "@astrojs/compiler": "^3.0.1",
         "@astrojs/internal-helpers": "0.8.0",
-        "@astrojs/markdown-remark": "7.0.1",
+        "@astrojs/markdown-remark": "7.1.0",
         "@astrojs/telemetry": "3.3.0",
         "@capsizecss/unpack": "^4.0.0",
-        "@clack/prompts": "^1.0.1",
+        "@clack/prompts": "^1.1.0",
         "@oslojs/encoding": "^1.1.0",
         "@rollup/pluginutils": "^5.3.0",
         "aria-query": "^5.3.2",
@@ -1731,7 +1732,6 @@
         "cookie": "^1.1.1",
         "devalue": "^5.6.3",
         "diff": "^8.0.3",
-        "dlv": "^1.1.3",
         "dset": "^3.1.4",
         "es-module-lexer": "^2.0.0",
         "esbuild": "^0.27.3",
@@ -1753,11 +1753,11 @@
         "picomatch": "^4.0.3",
         "rehype": "^13.0.2",
         "semver": "^7.7.4",
-        "shiki": "^4.0.0",
+        "shiki": "^4.0.2",
         "smol-toml": "^1.6.0",
-        "svgo": "^4.0.0",
-        "tinyclip": "^0.1.6",
-        "tinyexec": "^1.0.2",
+        "svgo": "^4.0.1",
+        "tinyclip": "^0.1.12",
+        "tinyexec": "^1.0.4",
         "tinyglobby": "^0.2.15",
         "tsconfck": "^3.1.6",
         "ultrahtml": "^1.6.0",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "computing-box",
   "type": "module",
-  "version": "26.3.2-1.g",
+  "version": "26.4.1-5.a",
   "scripts": {
     "dev": "astro dev",
     "build": "astro build",
@@ -9,6 +9,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^6.0.8"
+    "astro": "^6.1.1"
   }
 }

public/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>

renovate.json

@@ -1,3 +1,30 @@
 {
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json"
+  "assignAutomerge": true,
+  "assigneesFromCodeOwners": true,
+  "dependencyDashboardAutoclose": true,
+  "extends": ["config:recommended"],
+  "ignorePaths": ["**/.archive/**"],
+  "labels": ["type/dependencies"],
+  "platformCommit": "enabled",
+  "rebaseWhen": "behind-base-branch",
+  "rollbackPrs": true,
+  "vulnerabilityAlerts": {
+    "commitMessagePrefix": "[SECURITY] ",
+    "enabled": true,
+    "labels": ["security"],
+    "prCreation": "immediate"
+  },
+  "lockFileMaintenance": {
+    "enabled": false
+  },
+  "packageRules": [
+    {
+      "matchUpdateTypes": ["minor", "patch"],
+      "automerge": true
+    },
+    {  
+      "matchUpdateTypes": ["major"],
+      "automerge": false
+    }
+  ]
 }

src/layouts/BaseLayout.astro

@@ -39,11 +39,12 @@ const { title = "Computing:Box" } = Astro.props;
     <header class="siteNav">
       <div class="navInner">
         <a class="brand" href="/">
-          <img class="brandLogo" src="/images/computing-box-logo.webp" alt="Computing:Box logo" />
+          <img class="brandLogo" src="/images/computing-box-logo-small.webp" alt="Computing:Box logo" />
           <span class="brandName">Computing:Box</span>
         </a>
 
         <nav class="navLinks" aria-label="Site navigation">
+          <a href="/">Home</a>
           <a href="/about">About</a>
           <a href="/binary">Binary</a>
           <a href="/hexadecimal">Hexadecimal</a>
@@ -69,5 +70,81 @@ const { title = "Computing:Box" } = Astro.props;
     <a href={releaseUrl} target="_blank" rel="noopener noreferrer">{version}</a> • © {new Date().getFullYear()} Computing:Box • Created with ♥ by Mr A Lyall</div>
       </div>
     </footer>
+
+<script is:inline>
+      function setupToolboxAccordions() {
+        // Look for cards inside ANY of the three toolboxes!
+        const cards = document.querySelectorAll('.panelCol .card, .pb-toolbox .card, .lg-toolbox .card');
+        if (!cards.length) return;
+
+        // Your primary cards for each page
+        const primaryCardNames = ['settings', 'info', 'components', 'system diagnostics'];
+
+        cards.forEach(card => {
+          const titleEl = card.querySelector('.cardTitle');
+          if (!titleEl) return;
+
+          const titleText = titleEl.textContent.trim().toLowerCase();
+          const isPrimary = primaryCardNames.includes(titleText);
+
+          // 1. DYNAMICALLY WRAP THE CONTENT
+          if (!card.querySelector('.cardBody')) {
+            const body = document.createElement('div');
+            body.className = 'cardBody';
+            const inner = document.createElement('div');
+            inner.className = 'cardBodyInner';
+            body.appendChild(inner);
+
+            Array.from(card.childNodes).forEach(node => {
+              if (node !== titleEl) {
+                inner.appendChild(node);
+              }
+            });
+            card.appendChild(body);
+          }
+
+          // 2. APPLY DEFAULT STATE
+          if (isPrimary) {
+            card.classList.remove('collapsed'); 
+          } else {
+            card.classList.add('collapsed');
+          }
+
+          // 3. CLICK LISTENERS
+          if (card.dataset.accordionInit) return;
+          card.dataset.accordionInit = "true";
+
+          titleEl.addEventListener('click', () => {
+            const isCollapsing = !card.classList.contains('collapsed');
+
+            if (isCollapsing) {
+              card.classList.add('collapsed');
+            } else {
+              if (isPrimary) {
+                cards.forEach(c => { 
+                  // Only close cards that share the same parent toolbox
+                  if (c !== card && c.closest(card.parentElement.tagName) === card.closest(card.parentElement.tagName)) {
+                    c.classList.add('collapsed'); 
+                  }
+                });
+              } else {
+                cards.forEach(c => {
+                  if (c.closest(card.parentElement.tagName) !== card.closest(card.parentElement.tagName)) return;
+                  const cTitle = c.querySelector('.cardTitle')?.textContent.trim().toLowerCase() || '';
+                  if (primaryCardNames.includes(cTitle)) {
+                    c.classList.add('collapsed');
+                  }
+                });
+              }
+              card.classList.remove('collapsed');
+            }
+          });
+        });
+      }
+
+      setupToolboxAccordions();
+      document.addEventListener('astro:page-load', setupToolboxAccordions);
+    </script>
+
   </body>
 </html>

src/pages/binary.astro

@@ -88,7 +88,7 @@ import "../styles/number-simulators.css";
             <button class="toolBtn toolSpin toolDec" id="btnDec" type="button" aria-label="Decrement">▼</button>
             <button class="toolBtn toolSpin toolInc" id="btnInc" type="button" aria-label="Increment">▲</button>
           </div>
-          <div class="toolRow2">
+          <div class="controlsRow">
             <button class="btn btnHalf" id="btnShiftLeft" type="button">Left Shift</button>
             <button class="btn btnHalf" id="btnShiftRight" type="button">Right Shift</button>
           </div>

src/pages/logic-gates.astro

@@ -39,11 +39,10 @@ import "../styles/logic-gates.css";
       </div>
       <div class="card">
       <div class="cardTitle">Live Truth Table</div>
-        <details open>
-          <summary class="tt-summary">Show / Hide Table</summary>
-          <div style="font-family: var(--ui-font); font-size: 12px; color: var(--muted); margin-bottom: 12px;">Auto-generates based on current wiring. (Max 6 inputs)</div>
-          <div class="tt-table-wrap" id="truthTableContainer"></div>
-        </details>
+      <div style="font-family: var(--ui-font); font-size: 12px; color: var(--muted); margin-bottom: 12px;">Auto-generates based on current wiring.</div>
+      <div id="truthTableContainer"> <div class="tt-table-wrap">
+          </div>
+      </div>
       </div>
       <div class="card">
         <div class="cardTitle">Tools</div>

src/pages/pc-builder.astro

@@ -31,20 +31,25 @@ import "../styles/pc-builder.css";
     </div>
     
     <aside id="toolboxPanel" class="pb-toolbox" aria-label="Toolbox">
-      <div class="card">
-        <div class="cardTitle">Inventory</div>
-        <div class="tb-icon-grid" id="toolboxGrid"></div>
-      </div>
-
       <div class="card">
         <div class="cardTitle">System Diagnostics</div>
         <div style="font-family: var(--ui-font); font-size: 12px; color: var(--muted); margin-bottom: 12px;">Live pre-flight boot analysis.</div>
         <div class="specs-panel" id="buildSpecsContainer"></div>
       </div>
 
+      <div class="card">
+        <div class="cardTitle">Inventory</div>
+        <div class="tb-icon-grid" id="toolboxGrid"></div>
+      </div>
+
       <div class="card">
         <div class="cardTitle">Tools</div>
-        <button class="btn btnReset btnWide" id="btnClearBoard" type="button" style="margin-bottom:0;">Disassemble PC</button>
+        <div style="display:grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px;">
+          <button class="btn btnWide" id="btnAssembleHDD" type="button">Assemble (HDD Build)</button>
+          <button class="btn btnWide" id="btnAssembleSATA" type="button">Assemble (SSD Build)</button>
+          <button class="btn btnWide" id="btnAssembleM2" type="button">Assemble (NVMe Build)</button>
+        </div>
+        <button class="btn btnReset btnWide" id="btnClearBoard" type="button">Disassemble PC</button>
       </div>
     </aside>
 

src/scripts/binary.js

@@ -375,7 +375,7 @@
 
     setRandomRunning(true);
     const start = Date.now();
-    const durationMs = 1125; 
+    const durationMs = 1500; 
     const tickMs = 80;
 
     randomTimer = setInterval(() => {

src/scripts/logicGates.js

@@ -33,6 +33,7 @@
   
   let nextNodeId = 1;
   let nextWireId = 1;
+  let discoveredStates = new Set();
 
   // Interaction State
   let isDraggingNode = null;
@@ -200,40 +201,96 @@
 
   /* --- Truth Table Generation --- */
 function generateTruthTable() {
-    if (!ttContainer) return;
+    // 1. Find the target container
+    let container = document.getElementById("truthTableContainer");
     
-    const inNodes = Object.values(nodes).filter(n => n.type === 'INPUT').sort((a,b) => a.label.localeCompare(b.label));
-    const outNodes = Object.values(nodes).filter(n => n.type === 'OUTPUT').sort((a,b) => a.label.localeCompare(b.label));
+    // Fail-safe: Find the card if the specific ID is missing
+    if (!container) {
+      const cards = document.querySelectorAll('.card');
+      const ttCard = Array.from(cards).find(c => c.innerText.includes('LIVE TRUTH TABLE'));
+      if (ttCard) {
+        container = ttCard.querySelector('.cardBodyInner') || ttCard;
+      }
+    }
 
+    if (!container) return;
+
+    // 2. Identify and sort Inputs and Outputs
+    const inNodes = Object.values(nodes)
+      .filter(n => n.type === 'INPUT')
+      .sort((a,b) => a.label.localeCompare(b.label));
+    const outNodes = Object.values(nodes)
+      .filter(n => n.type === 'OUTPUT')
+      .sort((a,b) => a.label.localeCompare(b.label));
+
+    // 3. Handle Empty State
     if (inNodes.length === 0 || outNodes.length === 0) {
-      ttContainer.innerHTML = '<div style="padding: 16px; color: var(--muted); text-align:center;">Add inputs and outputs to generate table.</div>'; return;
-    }
-    if (inNodes.length > 6) {
-      ttContainer.innerHTML = '<div style="padding: 16px; color: var(--muted); text-align:center;">Maximum 6 inputs supported.</div>'; return;
+      container.innerHTML = '<div style="padding: 20px; color: var(--muted); text-align:center; font-family: var(--bit-font); font-size: 12px; letter-spacing: 1px;">CONNECT INPUTS & OUTPUTS</div>'; 
+      return;
     }
 
-    let html = '<table class="tt-table"><thead><tr>';
+    // 4. Build Table within the styled wrapper
+    let html = '<div class="tt-table-wrap"><table class="tt-table"><thead><tr>';
+    
+    // Headers
     inNodes.forEach(n => html += `<th>${n.label}</th>`);
-    outNodes.forEach(n => html += `<th style="color:var(--text);">${n.label}</th>`);
+    outNodes.forEach(n => html += `<th style="color:var(--text); border-left: 1px solid rgba(255,255,255,0.1);">${n.label}</th>`);
     html += '</tr></thead><tbody>';
 
+    // 5. Generate Rows
     const numRows = Math.pow(2, inNodes.length);
     for (let i = 0; i < numRows; i++) {
       let override = {};
-      inNodes.forEach((n, idx) => { override[n.id] = ((i >> (inNodes.length - 1 - idx)) & 1) === 1; });
-      let outStates = evaluateGraph(override);
+      let stateArr = [];
+      
+      // Calculate binary state for this row
+      inNodes.forEach((n, idx) => { 
+        let val = ((i >> (inNodes.length - 1 - idx)) & 1) === 1;
+        override[n.id] = val; 
+        stateArr.push(val ? '1' : '0');
+      });
+      
+      let stateStr = stateArr.join('');
+      let isFound = discoveredStates.has(stateStr);
+      let outResults = evaluateGraph(override); // Simulate the board logic for this state
 
       html += '<tr>';
-      inNodes.forEach(n => { let val = override[n.id]; html += `<td class="${val ? 'tt-on' : ''}">${val ? 1 : 0}</td>`; });
-      outNodes.forEach(n => { let val = outStates[n.id]; html += `<td class="${val ? 'tt-on' : ''}" style="font-weight:bold;">${val ? 1 : 0}</td>`; });
+      
+      // Input Cells
+      inNodes.forEach(n => { 
+        let v = override[n.id]; 
+        html += `<td class="${v ? 'tt-on' : ''}">${v ? 1 : 0}</td>`; 
+      });
+      
+      // Output Cells (Discovery Logic)
+      outNodes.forEach(n => { 
+        if (isFound) {
+          let v = outResults[n.id]; 
+          html += `<td class="${v ? 'tt-on' : ''}" style="font-weight:bold; border-left: 1px solid rgba(255,255,255,0.05);">${v ? 1 : 0}</td>`; 
+        } else {
+          html += `<td style="color: #444; border-left: 1px solid rgba(255,255,255,0.05); opacity: 0.6;">?</td>`; 
+        }
+      });
       html += '</tr>';
     }
-    html += '</tbody></table>';
-    ttContainer.innerHTML = html;
+    
+    html += '</tbody></table></div>';
+    container.innerHTML = html;
   }
 
-  function runSimulation() {
+  function runSimulation(topologyChanged = false) {
+    // If you add/remove wires, reset the table memory because the logic changed
+    if (topologyChanged) discoveredStates.clear();
+
     evaluateGraph();
+    
+    // Check the current board state (e.g., "10") and save it to memory
+    const inNodes = Object.values(nodes).filter(n => n.type === 'INPUT').sort((a,b) => a.label.localeCompare(b.label));
+    if (inNodes.length > 0) {
+      let currentStateStr = inNodes.map(n => n.value ? '1' : '0').join('');
+      discoveredStates.add(currentStateStr);
+    }
+
     renderWires();
     generateTruthTable();
   }
@@ -289,18 +346,17 @@
     node.el = el;
 
 if (node.type === 'INPUT') {
-      el.querySelector('.switch').addEventListener('click', (e) => {
-        const dist = Math.hypot(e.clientX - clickStartX, e.clientY - clickStartY);
-        if (dist > 3) {
-          e.preventDefault(); // Prevents toggle if it was a drag motion
-        } else {
+      const sw = el.querySelector('.switch');
+      sw.addEventListener('click', (e) => {
+        // ... (keep your clickStartX/Y drag check) ...
+
         node.value = !node.value;
-          el.querySelector('.switch').classList.toggle('active-sim', node.value);
-          el.querySelector('.slider').style.background = node.value ? 'rgba(40,240,122,.25)' : '';
-          el.querySelector('.slider').style.borderColor = node.value ? 'rgba(40,240,122,.30)' : '';
-          el.querySelector('.slider').innerHTML = node.value ? `<style>#logicPage [data-id="${node.id}"] .slider::before { transform: translateX(28px); }</style>` : '';
+        
+        // This targets the exact class your CSS needs for the glow and move
+        sw.classList.toggle('active-sim', node.value);
+        
+        // This ensures the table and logic update
         runSimulation(); 
-        }
       });
     }
     return el;
@@ -312,7 +368,8 @@
     if (type === 'OUTPUT') label = getNextOutputLabel();
     if (type === 'GATE') label = gateType;
 
-    const id = `node_${nextNodeId++}`;
+    // Double check this line in logicGates.js
+    const id = `node_${Date.now()}_${nextNodeId++}`;
     const offset = Math.floor(Math.random() * 40);
     const x = dropX !== null ? dropX : (type === 'INPUT' ? 50 : (type === 'OUTPUT' ? 600 : 300) + offset);
     const y = dropY !== null ? dropY : 150 + offset;
@@ -320,7 +377,8 @@
     const node = { id, type, gateType, label, x, y, value: false, el: null };
     nodes[id] = node;
     createNodeElement(node);
-    runSimulation();
+// Change the very last line to:
+    runSimulation(true);
   }
 
   /* --- Global Interaction Handlers --- */
@@ -433,8 +491,9 @@
           connections.push({ id: `conn_${nextWireId++}`, fromNode: wiringStart.node, fromPort: 'out', toNode: targetNodeId, toPort: targetPortId });
         }
       }
+      // Change the very last line of the if(wiringStart) block to:
       wiringStart = null; tempWirePath = null;
-      runSimulation();
+      runSimulation(true);
     }
   });
 
@@ -451,7 +510,8 @@
           viewport.removeChild(nodes[selectedNodeId].el);
         }
         delete nodes[selectedNodeId];
-        clearSelection(); runSimulation();
+        // Change the two deletion triggers to:
+        clearSelection(); runSimulation(true);
       }
     }
   });
@@ -473,8 +533,15 @@
   /* --- Init --- */
 btnClearBoard?.addEventListener('click', () => {
     viewport.querySelectorAll('.lg-node').forEach(el => el.remove());
-    nodes = {}; connections = [];
-    runSimulation();
+    
+    // Target your specific SVG layer class
+    const svgLayer = document.querySelector('.lg-svg-layer');
+    if (svgLayer) svgLayer.innerHTML = ''; 
+
+    nodes = {}; 
+    connections = []; 
+    discoveredStates.clear();
+    runSimulation(true); 
   });
 
   toolboxToggle?.addEventListener("click", () => {

src/scripts/pcBuilder.js

@@ -11,7 +11,7 @@
   const toolboxToggle = document.getElementById("toolboxToggle");
   const pcPage = document.getElementById("pcPage");
 
-  /* --- Extensive PC Component Library --- */
+  /* --- ULTRA-REALISTIC COMPONENT LIBRARY --- */
   const PC_PARTS = {
     'CASE': {
       name: 'ATX PC Case', w: 600, h: 550, z: 5, ports: [],
@@ -29,8 +29,7 @@
       name: 'Motherboard', w: 360, h: 400, z: 10,
       ports: [
         { id: 'atx_pwr', x: 340, y: 150 }, { id: 'sata1', x: 340, y: 300 }, { id: 'sata2', x: 340, y: 330 },
-        { id: 'usb1', x: 10, y: 40 }, { id: 'usb2', x: 10, y: 70 }, { id: 'usb3', x: 10, y: 100 }, { id: 'usb4', x: 10, y: 130 },
-        { id: 'audio', x: 10, y: 170 }, { id: 'disp', x: 10, y: 210 }
+        { id: 'usb1', x: 10, y: 40 }, { id: 'usb2', x: 10, y: 70 }, { id: 'audio', x: 10, y: 170 }, { id: 'disp', x: 10, y: 210 }
       ],
       slots: {
         'CPU1': { x: 120, y: 40, accepts: 'CPU' },
@@ -40,21 +39,56 @@
         'M2_1': { x: 120, y: 170, accepts: 'M2_SSD' }, 'M2_2': { x: 120, y: 250, accepts: 'M2_SSD' },
         'PCIE1': { x: 40, y: 200, accepts: 'GPU' }, 'PCIE2': { x: 40, y: 300, accepts: 'GPU' }
       },
-      // Uses a lighter slate grey #2C303A to stand out from the case
-      svg: `<rect width="360" height="400" fill="#2C303A" rx="8" stroke="#4b5060" stroke-width="3"/><rect x="120" y="40" width="80" height="80" fill="#1f2229" stroke="#4b5060"/><rect x="230" y="30" width="15" height="100" fill="#1f2229"/><rect x="250" y="30" width="15" height="100" fill="#1f2229"/><rect x="270" y="30" width="15" height="100" fill="#1f2229"/><rect x="290" y="30" width="15" height="100" fill="#1f2229"/><rect x="40" y="200" width="280" height="15" fill="#15171c"/><rect x="40" y="300" width="280" height="15" fill="#15171c"/><rect x="120" y="170" width="80" height="15" fill="#1f2229"/><rect x="120" y="250" width="80" height="15" fill="#1f2229"/>`
+      svg: `<rect width="360" height="400" fill="#2C303A" rx="8" stroke="#4b5060" stroke-width="3"/><rect x="120" y="40" width="80" height="80" fill="#1f2229" stroke="#4b5060"/><rect x="230" y="30" width="15" height="100" fill="#1f2229"/><rect x="250" y="30" width="15" height="100" fill="#1f2229"/><rect x="270" y="30" width="15" height="100" fill="#1f2229"/><rect x="290" y="30" width="15" height="100" fill="#1f2229"/><rect x="40" y="200" width="280" height="15" fill="#15171c"/><rect x="40" y="300" width="280" height="15" fill="#15171c"/><rect x="120" y="170" width="80" height="15" fill="#1f2229" stroke="#4b5060" stroke-dasharray="2 2"/><text x="160" y="182" fill="#555" font-size="10" font-family="sans-serif" text-anchor="middle">M.2_1</text><rect x="120" y="250" width="80" height="15" fill="#1f2229" stroke="#4b5060" stroke-dasharray="2 2"/><text x="160" y="262" fill="#555" font-size="10" font-family="sans-serif" text-anchor="middle">M.2_2</text>`
     },
-    'CPU': { name: 'Processor', w: 80, h: 80, z: 20, ports: [], slots: {}, svg: `<rect width="80" height="80" fill="#0b381a"/><rect x="10" y="10" width="60" height="60" rx="4" fill="#d4d4d4"/><polygon points="5,75 15,75 5,65" fill="#ffd700"/><text x="40" y="45" fill="#555" font-family="sans-serif" font-size="14" font-weight="bold" text-anchor="middle">CPU</text>` },
-    'COOLER': { name: 'CPU Fan', w: 120, h: 120, z: 30, ports: [], slots: {}, svg: `<rect width="120" height="120" rx="60" fill="#1a1c23" stroke="#aaa" stroke-width="3"/><circle cx="60" cy="60" r="50" fill="#111"/><path d="M60,15 A45,45 0 0,1 105,60 L60,60 Z" fill="#444"/><path d="M105,60 A45,45 0 0,1 60,105 L60,60 Z" fill="#555"/><path d="M60,105 A45,45 0 0,1 15,60 L60,60 Z" fill="#444"/><path d="M15,60 A45,45 0 0,1 60,15 L60,60 Z" fill="#555"/><circle cx="60" cy="60" r="20" fill="#222"/>` },
-    'RAM': { name: 'DDR4 Memory', w: 15, h: 100, z: 20, ports: [], slots: {}, svg: `<rect width="15" height="100" fill="#111"/><rect x="2" y="5" width="11" height="80" fill="#2a2a2a"/><rect x="0" y="90" width="15" height="10" fill="#ffd700"/>` },
-    'GPU': { name: 'Graphics Card', w: 280, h: 60, z: 40, slots: {}, ports: [{ id: 'pwr_in', x: 270, y: 10 }, { id: 'disp_out', x: 10, y: 30 }], svg: `<rect width="280" height="60" rx="5" fill="#1a1a1a"/><circle cx="70" cy="30" r="22" fill="#111" stroke="#333" stroke-width="2"/><circle cx="140" cy="30" r="22" fill="#111" stroke="#333" stroke-width="2"/><circle cx="210" cy="30" r="22" fill="#111" stroke="#333" stroke-width="2"/><rect x="20" y="55" width="80" height="5" fill="#ffd700"/>` },
-    'M2_SSD': { name: 'M.2 NVMe SSD', w: 80, h: 15, z: 20, ports: [], slots: {}, svg: `<rect width="80" height="15" rx="1" fill="#000"/><rect x="10" y="2" width="20" height="11" fill="#1a1a1a"/><rect x="35" y="2" width="20" height="11" fill="#1a1a1a"/><rect x="60" y="2" width="10" height="11" fill="#ccc"/><rect x="0" y="0" width="4" height="15" fill="#ffd700"/>` },
-    'SATA_SSD': { name: '2.5" SATA SSD', w: 100, h: 70, z: 20, slots: {}, ports: [{id:'data', x:90, y:20}, {id:'pwr', x:90, y:50}], svg: `<rect width="100" height="70" fill="#111" rx="4" stroke="#444"/><rect x="10" y="10" width="80" height="50" fill="#1a1a1a" rx="2" stroke="#222"/><text x="50" y="40" fill="#888" font-family="sans-serif" font-size="14" font-weight="bold" text-anchor="middle">SSD</text>` },
-    'HDD': { name: '3.5" Mech HDD', w: 120, h: 140, z: 20, slots: {}, ports: [{id:'data', x:110, y:20}, {id:'pwr', x:110, y:120}], svg: `<rect width="120" height="140" fill="#d0d0d0" rx="4" stroke="#888"/><rect x="10" y="10" width="100" height="100" fill="#e0e0e0" rx="50"/><circle cx="60" cy="60" r="35" fill="#ddd" stroke="#aaa"/><circle cx="60" cy="60" r="10" fill="#999"/><rect x="30" y="120" width="60" height="10" fill="#111"/>` },
-    'PSU': { name: 'Power Supply', w: 160, h: 90, z: 20, slots: {}, ports: [{id:'out1',x:150,y:20}, {id:'out2',x:150,y:40}, {id:'out3',x:150,y:60}, {id:'out4',x:150,y:80}], svg: `<rect width="160" height="90" rx="4" fill="#1a1a1a" stroke="#333" stroke-width="2"/><circle cx="80" cy="45" r="35" fill="#0a0a0a" stroke="#222" stroke-width="2"/><line x1="80" y1="10" x2="80" y2="80" stroke="#333" stroke-width="2"/><line x1="45" y1="45" x2="115" y2="45" stroke="#333" stroke-width="2"/><circle cx="80" cy="45" r="10" fill="#222"/>` },
-    'MONITOR': { name: 'Monitor', w: 240, h: 160, z: 30, slots: {}, ports: [{id:'disp', x:120, y:140}], svg: `<rect width="240" height="160" fill="#111" rx="5"/><rect x="10" y="10" width="220" height="120" fill="#000"/><rect x="100" y="140" width="40" height="20" fill="#222"/><rect x="60" y="150" width="120" height="10" fill="#222"/>` },
-    'KEYBOARD': { name: 'Keyboard', w: 180, h: 60, z: 30, slots: {}, ports: [{id:'usb', x:90, y:10}], svg: `<rect width="180" height="60" fill="#111" rx="3"/><rect x="5" y="5" width="170" height="50" fill="#222" rx="2" stroke="#333" stroke-dasharray="8 8"/>` },
-    'MOUSE': { name: 'Mouse', w: 30, h: 50, z: 30, slots: {}, ports: [{id:'usb', x:15, y:5}], svg: `<rect width="30" height="50" fill="#111" rx="15"/><line x1="15" y1="0" x2="15" y2="20" stroke="#333" stroke-width="2"/><circle cx="15" cy="15" r="4" fill="#333"/>` },
-    'SPEAKER': { name: 'Speakers', w: 40, h: 80, z: 30, slots: {}, ports: [{id:'audio', x:20, y:10}], svg: `<rect width="40" height="80" fill="#111" rx="4"/><circle cx="20" cy="25" r="12" fill="#222"/><circle cx="20" cy="60" r="16" fill="#222"/>` }
+    'CPU': { 
+      name: 'Processor', w: 80, h: 80, z: 20, ports: [], slots: {}, 
+      svg: `<rect width="80" height="80" fill="#0c4a22" rx="4"/><rect x="2" y="2" width="76" height="76" fill="none" stroke="#ffd700" stroke-width="1" stroke-dasharray="2 4"/><rect x="12" y="12" width="56" height="56" fill="#e0e4e8" rx="6" stroke="#b0b5b9" stroke-width="2"/><text x="40" y="35" fill="#666" font-family="sans-serif" font-size="10" font-weight="900" text-anchor="middle">INTEL</text><text x="40" y="50" fill="#555" font-family="sans-serif" font-size="16" font-weight="900" text-anchor="middle">CORE i9</text><text x="40" y="60" fill="#777" font-family="sans-serif" font-size="7" font-weight="bold" text-anchor="middle">14900K</text><polygon points="5,75 15,75 5,65" fill="#ffd700"/>` 
+    },
+    'COOLER': { 
+      name: 'Liquid AIO', w: 120, h: 120, z: 30, ports: [], slots: {}, 
+      svg: `<circle cx="60" cy="60" r="55" fill="#15171e" stroke="#2d313d" stroke-width="4"/><circle cx="60" cy="60" r="45" fill="#050505"/><text x="60" y="55" fill="#28f07a" font-family="var(--num-font)" font-size="20" font-weight="bold" text-anchor="middle">32°C</text><text x="60" y="75" fill="#55aaff" font-family="var(--ui-font)" font-size="10" text-anchor="middle">2400 RPM</text><path d="M 110 40 Q 140 40 140 10 M 110 80 Q 150 80 150 110" fill="none" stroke="#111" stroke-width="12" stroke-linecap="round"/><circle cx="60" cy="60" r="50" fill="none" stroke="cyan" stroke-width="2" opacity="0.8"/>` 
+    },
+    'RAM': { 
+      name: 'RGB Memory', w: 15, h: 100, z: 20, ports: [], slots: {}, 
+      svg: `<rect width="15" height="100" fill="#111" rx="2"/><rect x="0" y="90" width="15" height="10" fill="#ffd700"/><rect x="0" y="94" width="15" height="1" fill="#b8860b"/><path d="M -2 15 L 17 15 L 17 85 L -2 85 Z" fill="#2d313d" stroke="#111"/><path d="M 0 20 L 15 30 L 15 80 L 0 70 Z" fill="#1a1c23"/><path d="M -2 2 L 17 2 L 17 15 L -2 15 Z" fill="#ff0055"/><path d="M 0 2 L 5 10 L 10 2 L 15 10" fill="none" stroke="#fff" stroke-width="1" opacity="0.5"/>` 
+    },
+    'GPU': { 
+      name: 'Graphics Card', w: 280, h: 80, z: 40, slots: {}, ports: [{ id: 'pwr_in', x: 270, y: 10 }, { id: 'disp_out', x: 10, y: 40 }], 
+      svg: `<rect width="280" height="80" rx="8" fill="#15171e" stroke="#333742" stroke-width="2"/><rect x="5" y="5" width="270" height="70" rx="6" fill="#0f1015"/><path d="M 20 5 L 60 75 M 110 5 L 150 75 M 200 5 L 240 75" stroke="#1a1c23" stroke-width="4"/><g transform="translate(50, 40)"><circle r="32" fill="#111" stroke="#2d313d" stroke-width="2"/><circle r="10" fill="#222"/><path d="M0 -10 L15 -28 L25 -20 Z M0 10 L-15 28 L-25 20 Z M-10 0 L-28 -15 L-20 -25 Z M10 0 L28 15 L20 25 Z" fill="#1a1c23"/></g><g transform="translate(140, 40)"><circle r="32" fill="#111" stroke="#2d313d" stroke-width="2"/><circle r="10" fill="#222"/><path d="M0 -10 L15 -28 L25 -20 Z M0 10 L-15 28 L-25 20 Z M-10 0 L-28 -15 L-20 -25 Z M10 0 L28 15 L20 25 Z" fill="#1a1c23"/></g><g transform="translate(230, 40)"><circle r="32" fill="#111" stroke="#2d313d" stroke-width="2"/><circle r="10" fill="#222"/><path d="M0 -10 L15 -28 L25 -20 Z M0 10 L-15 28 L-25 20 Z M-10 0 L-28 -15 L-20 -25 Z M10 0 L28 15 L20 25 Z" fill="#1a1c23"/></g><rect x="20" y="80" width="160" height="8" fill="#ffd700" rx="2"/><rect x="100" y="32" width="80" height="16" fill="#000" rx="2" opacity="0.8"/><text x="140" y="43" fill="#28f07a" font-family="sans-serif" font-size="10" font-weight="900" text-anchor="middle">GEFORCE RTX</text>` 
+    },
+    'M2_SSD': { 
+      name: 'M.2 NVMe SSD', w: 80, h: 22, z: 20, ports: [], slots: {}, 
+      svg: `<rect width="80" height="22" fill="#111" rx="2"/><rect x="0" y="0" width="5" height="22" fill="#ffd700"/><rect x="3" y="14" width="3" height="4" fill="#111"/><rect x="15" y="4" width="18" height="14" fill="#1a1c23" rx="1"/><rect x="38" y="4" width="18" height="14" fill="#1a1c23" rx="1"/><rect x="60" y="6" width="10" height="10" fill="#2d313d" rx="1"/><rect x="10" y="8" width="50" height="6" fill="#fff" opacity="0.8"/><text x="35" y="13" fill="#000" font-family="sans-serif" font-size="4" font-weight="bold" text-anchor="middle">990 PRO 2TB</text><circle cx="76" cy="11" r="3" fill="#222"/>` 
+    },
+    'SATA_SSD': { 
+      name: '2.5" SATA SSD', w: 100, h: 70, z: 20, slots: {}, ports: [{id:'data', x:90, y:20}, {id:'pwr', x:90, y:50}], 
+      svg: `<rect width="100" height="70" fill="#1a1c23" rx="4" stroke="#4b5162" stroke-width="1"/><rect x="2" y="2" width="96" height="66" fill="#2d313d" rx="2"/><rect x="15" y="15" width="70" height="40" fill="#111" rx="2"/><rect x="15" y="45" width="70" height="10" fill="#e74c3c"/><text x="50" y="35" fill="#fff" font-family="sans-serif" font-size="14" font-weight="900" text-anchor="middle" letter-spacing="1px">SAMSUNG</text><circle cx="5" cy="5" r="1.5" fill="#111"/><circle cx="95" cy="5" r="1.5" fill="#111"/><circle cx="5" cy="65" r="1.5" fill="#111"/><circle cx="95" cy="65" r="1.5" fill="#111"/>` 
+    },
+    'HDD': { 
+      name: '3.5" Mech HDD', w: 120, h: 140, z: 20, slots: {}, ports: [{id:'data', x:110, y:20}, {id:'pwr', x:110, y:120}], 
+      svg: `<rect width="120" height="140" fill="#bdc3c7" rx="4" stroke="#7f8c8d" stroke-width="2"/><path d="M 5 5 L 115 5 L 115 110 C 80 120, 40 120, 5 110 Z" fill="#e0e4e8" stroke="#95a5a6" stroke-width="1"/><circle cx="60" cy="55" r="45" fill="none" stroke="#bdc3c7" stroke-width="2"/><circle cx="60" cy="55" r="12" fill="#bdc3c7" stroke="#95a5a6"/><circle cx="100" cy="100" r="8" fill="#bdc3c7" stroke="#95a5a6"/><path d="M 100 100 L 70 60" stroke="#7f8c8d" stroke-width="6" stroke-linecap="round"/><rect x="30" y="80" width="60" height="30" fill="#fff" rx="2"/><text x="60" y="92" fill="#000" font-family="sans-serif" font-size="8" font-weight="bold" text-anchor="middle">WD BLACK</text><text x="60" y="102" fill="#333" font-family="sans-serif" font-size="6" text-anchor="middle">12TB HDD</text><rect x="20" y="120" width="80" height="15" fill="#0b3d21" rx="2"/>` 
+    },
+    'PSU': { 
+      name: 'Power Supply', w: 160, h: 90, z: 20, slots: {}, ports: [{id:'out1',x:150,y:20}, {id:'out2',x:150,y:40}, {id:'out3',x:150,y:60}, {id:'out4',x:150,y:80}], 
+      svg: `<rect width="160" height="90" fill="#15171e" rx="4" stroke="#333742" stroke-width="2"/><rect x="40" y="5" width="80" height="80" fill="#0a0a0a" rx="40"/><circle cx="80" cy="45" r="38" fill="none" stroke="#2d313d" stroke-width="2"/><circle cx="80" cy="45" r="28" fill="none" stroke="#2d313d" stroke-width="2"/><circle cx="80" cy="45" r="18" fill="none" stroke="#2d313d" stroke-width="2"/><path d="M 80 5 L 80 85 M 40 45 L 120 45 M 52 20 L 108 70 M 108 20 L 52 70" stroke="#2d313d" stroke-width="2"/><circle cx="80" cy="45" r="8" fill="#111" stroke="#e74c3c"/><rect x="145" y="10" width="15" height="70" fill="#0a0a0a"/><rect x="5" y="15" width="25" height="60" fill="#333742" rx="2"/><text x="17" y="45" fill="#fff" font-family="sans-serif" font-size="10" font-weight="bold" text-anchor="middle" transform="rotate(-90 17,45)">1200W</text>` 
+    },
+    'MONITOR': { 
+      name: 'Monitor', w: 240, h: 180, z: 30, slots: {}, ports: [{id:'disp', x:120, y:140}], 
+      svg: `<rect width="240" height="160" fill="#1a1a1a" rx="6" stroke="#333"/><rect x="8" y="8" width="224" height="124" fill="#000" id="screen-bg"/><g id="boot-content"></g><rect x="6" y="140" width="228" height="15" fill="#1a1c23"/><text x="120" y="150" fill="#fff" font-family="sans-serif" font-size="6" text-anchor="middle">ASUS</text><circle cx="220" cy="147" r="2" fill="#28f07a"/><path d="M 100 160 L 110 180 L 130 180 L 140 160 Z" fill="#222"/><rect x="80" y="180" width="80" height="5" fill="#333" rx="2"/>` 
+    },
+    'KEYBOARD': { 
+      name: 'Keyboard', w: 180, h: 60, z: 30, slots: {}, ports: [{id:'usb', x:90, y:10}], 
+      svg: `<rect width="180" height="60" fill="#15171e" rx="4" stroke="#2d313d" stroke-width="2"/><rect x="0" y="45" width="180" height="15" fill="#111" rx="2"/><rect x="5" y="5" width="170" height="36" fill="#0a0a0a" rx="2"/><g fill="#222" stroke="#111" stroke-width="1"><rect x="8" y="8" width="10" height="10" rx="2"/><rect x="20" y="8" width="10" height="10" rx="2"/><rect x="32" y="8" width="10" height="10" rx="2"/><rect x="44" y="8" width="10" height="10" rx="2"/><rect x="56" y="8" width="10" height="10" rx="2"/><rect x="68" y="8" width="10" height="10" rx="2"/><rect x="80" y="8" width="10" height="10" rx="2"/><rect x="92" y="8" width="10" height="10" rx="2"/><rect x="104" y="8" width="10" height="10" rx="2"/><rect x="116" y="8" width="10" height="10" rx="2"/><rect x="128" y="8" width="10" height="10" rx="2"/><rect x="140" y="8" width="18" height="10" rx="2"/><rect x="8" y="20" width="14" height="10" rx="2"/><rect x="24" y="20" width="10" height="10" rx="2"/><rect x="36" y="20" width="10" height="10" rx="2"/><rect x="48" y="20" width="10" height="10" rx="2"/><rect x="60" y="20" width="10" height="10" rx="2"/><rect x="72" y="20" width="10" height="10" rx="2"/><rect x="84" y="20" width="10" height="10" rx="2"/><rect x="96" y="20" width="10" height="10" rx="2"/><rect x="108" y="20" width="10" height="10" rx="2"/><rect x="120" y="20" width="10" height="10" rx="2"/><rect x="132" y="20" width="26" height="10" rx="2"/></g><rect x="56" y="32" width="60" height="10" fill="#222" stroke="#111" rx="2"/><rect x="4" y="4" width="172" height="38" fill="none" stroke="cyan" stroke-width="1" opacity="0.3"/>` 
+    },
+    'MOUSE': { 
+      name: 'Mouse', w: 30, h: 54, z: 30, slots: {}, ports: [{id:'usb', x:15, y:5}], 
+      svg: `<rect width="30" height="54" fill="#15171e" rx="15" stroke="#2d313d" stroke-width="2"/><path d="M 15 0 L 15 20 M 5 25 Q 15 30 25 25" stroke="#0a0a0a" stroke-width="2" fill="none"/><rect x="13" y="6" width="4" height="10" fill="#111" rx="2"/><rect x="14" y="7" width="2" height="8" fill="#28f07a"/><path d="M 10 45 Q 15 50 20 45" stroke="cyan" stroke-width="2" fill="none" opacity="0.8"/><path d="M 0 15 Q 4 25 0 35 M 30 15 Q 26 25 30 35" stroke="#111" stroke-width="2" fill="none"/>` 
+    },
+    'SPEAKER': { 
+      name: 'Speakers', w: 46, h: 90, z: 30, slots: {}, ports: [{id:'audio', x:23, y:10}], 
+      svg: `<rect width="46" height="90" fill="#1a1c23" rx="4" stroke="#333742" stroke-width="2"/><rect x="4" y="4" width="38" height="82" fill="#111" rx="2"/><circle cx="23" cy="22" r="10" fill="#2d313d" stroke="#0a0a0a" stroke-width="2"/><circle cx="23" cy="22" r="4" fill="#15171e"/><circle cx="23" cy="58" r="16" fill="#2d313d" stroke="#0a0a0a" stroke-width="3"/><circle cx="23" cy="58" r="6" fill="#15171e"/><circle cx="23" cy="80" r="4" fill="#000"/>` 
+    }
   };
 
   let nodes = {}; 
@@ -66,27 +100,22 @@
   let selectedWireId = null, selectedNodeId = null;
 
   let panX = 0, panY = 0, zoom = 1;
-  let isPanning = false, panStart = { x: 0, y: 0 };
+  let isPanning = false, panStart = { x: 0, y: 0 }, isSystemBooted = false;
 
-  /* --- Setup Toolbox --- */
+  /* --- Toolbox & Base Init --- */
   function initToolbox() {
     if(!toolboxGrid) return;
     let html = '';
     Object.keys(PC_PARTS).forEach(partKey => {
-      html += `
-        <div draggable="true" data-spawn="${partKey}" class="drag-item tb-icon-box" title="${PC_PARTS[partKey].name}">
+      html += `<div draggable="true" data-spawn="${partKey}" class="drag-item tb-icon-box" title="${PC_PARTS[partKey].name}">
            <svg viewBox="0 0 ${PC_PARTS[partKey].w} ${PC_PARTS[partKey].h}" style="max-width:80%; max-height:40px; pointer-events:none;">${PC_PARTS[partKey].svg}</svg>
-           <div class="tb-icon-label">${partKey}</div>
-        </div>
-      `;
+           <div class="tb-icon-label">${partKey}</div></div>`;
     });
     toolboxGrid.innerHTML = html;
-    document.querySelectorAll('.drag-item').forEach(item => {
-      item.addEventListener('dragstart', (e) => { e.dataTransfer.setData('spawnType', item.dataset.spawn); });
-    });
+    document.querySelectorAll('.drag-item').forEach(item => { item.addEventListener('dragstart', (e) => { e.dataTransfer.setData('spawnType', item.dataset.spawn); }); });
   }
 
-  /* --- Camera Math --- */
+  /* --- Viewport Math --- */
   function updateViewport() {
     viewport.style.transform = `translate(${panX}px, ${panY}px) scale(${zoom})`;
     workspace.style.backgroundSize = `${32 * zoom}px ${32 * zoom}px`;
@@ -94,63 +123,58 @@
   }
   function zoomWorkspace(factor, mouseX, mouseY) {
     const newZoom = Math.min(Math.max(0.1, zoom * factor), 2);
-    panX = mouseX - (mouseX - panX) * (newZoom / zoom);
-    panY = mouseY - (mouseY - panY) * (newZoom / zoom);
+    panX = mouseX - (mouseX - panX) * (newZoom / zoom); panY = mouseY - (mouseY - panY) * (newZoom / zoom);
     zoom = newZoom; updateViewport();
   }
   function getPortCoords(nodeId, portDataAttr) {
-    const node = nodes[nodeId];
-    if (!node || !node.el) return {x:0, y:0};
-    const portEl = node.el.querySelector(`[data-port="${portDataAttr}"]`);
-    if (!portEl) return {x:0, y:0};
-    const wsRect = workspace.getBoundingClientRect();
-    const portRect = portEl.getBoundingClientRect();
-    return {
-      x: (portRect.left - wsRect.left - panX + portRect.width / 2) / zoom,
-      y: (portRect.top - wsRect.top - panY + portRect.height / 2) / zoom
-    };
-  }
-  function drawBezier(x1, y1, x2, y2) {
-    const cpDist = Math.abs(x2 - x1) * 0.6 + 20; 
-    return `M ${x1} ${y1} C ${x1 + cpDist} ${y1}, ${x2 - cpDist} ${y2}, ${x2} ${y2}`;
+    const node = nodes[nodeId]; if (!node || !node.el) return {x:0, y:0};
+    const portEl = node.el.querySelector(`[data-port="${portDataAttr}"]`); if (!portEl) return {x:0, y:0};
+    const wsRect = workspace.getBoundingClientRect(); const portRect = portEl.getBoundingClientRect();
+    return { x: (portRect.left - wsRect.left - panX + portRect.width / 2) / zoom, y: (portRect.top - wsRect.top - panY + portRect.height / 2) / zoom };
   }
+  function drawBezier(x1, y1, x2, y2) { const cpDist = Math.abs(x2 - x1) * 0.6 + 20; return `M ${x1} ${y1} C ${x1 + cpDist} ${y1}, ${x2 - cpDist} ${y2}, ${x2} ${y2}`; }
 
   /* --- Rendering --- */
   function renderWires() {
     let svgHTML = '';
     connections.forEach(conn => {
-      const from = getPortCoords(conn.fromNode, conn.fromPort);
-      const to = getPortCoords(conn.toNode, conn.toPort);
-      const isSelected = conn.id === selectedWireId;
-      svgHTML += `<path class="pb-wire active ${isSelected ? 'selected' : ''}" d="${drawBezier(from.x, from.y, to.x, to.y)}" data-conn-id="${conn.id}" />`;
+      const from = getPortCoords(conn.fromNode, conn.fromPort); const to = getPortCoords(conn.toNode, conn.toPort);
+      svgHTML += `<path class="pb-wire active ${conn.id === selectedWireId ? 'selected' : ''}" d="${drawBezier(from.x, from.y, to.x, to.y)}" data-conn-id="${conn.id}" />`;
     });
-    if (wiringStart && tempWirePath) {
-      svgHTML += `<path class="pb-wire pb-wire-temp" d="${drawBezier(wiringStart.x, wiringStart.y, tempWirePath.x, tempWirePath.y)}" />`;
-    }
+    if (wiringStart && tempWirePath) svgHTML += `<path class="pb-wire pb-wire-temp" d="${drawBezier(wiringStart.x, wiringStart.y, tempWirePath.x, tempWirePath.y)}" />`;
     wireLayer.innerHTML = svgHTML;
   }
+  function updateNodePositions() { Object.values(nodes).forEach(n => { if (n.el) { n.el.style.left = `${n.x}px`; n.el.style.top = `${n.y}px`; } }); renderWires(); }
+  function clearSelection() { selectedWireId = null; selectedNodeId = null; document.querySelectorAll('.pb-node.selected').forEach(el => el.classList.remove('selected')); renderWires(); }
 
-  function updateNodePositions() {
-    Object.values(nodes).forEach(n => {
-      if (n.el) { n.el.style.left = `${n.x}px`; n.el.style.top = `${n.y}px`; }
-    });
-    renderWires();
+  /* --- Node Logic --- */
+  function createNodeElement(node) {
+    const el = document.createElement('div'); el.className = `pb-node`; el.dataset.id = node.id;
+    el.style.left = `${node.x}px`; el.style.top = `${node.y}px`;
+    el.style.width = `${PC_PARTS[node.type].w}px`; el.style.height = `${PC_PARTS[node.type].h}px`; el.style.zIndex = PC_PARTS[node.type].z;
+    let innerHTML = `<svg class="pb-part-svg" viewBox="0 0 ${PC_PARTS[node.type].w} ${PC_PARTS[node.type].h}">${PC_PARTS[node.type].svg}</svg>`;
+    PC_PARTS[node.type].ports.forEach(p => { innerHTML += `<div class="pb-port" data-port="${p.id}" style="left: ${p.x}px; top: ${p.y}px;"></div>`; });
+    el.innerHTML = innerHTML; viewport.appendChild(el); node.el = el; return el;
   }
 
-  function clearSelection() {
-    selectedWireId = null; selectedNodeId = null;
-    document.querySelectorAll('.pb-node.selected').forEach(el => el.classList.remove('selected'));
-    renderWires();
+  function spawnNode(type, dropX = null, dropY = null) {
+    const id = `node_${nextNodeId++}`;
+    const x = dropX !== null ? dropX : 300 + Math.random()*40; const y = dropY !== null ? dropY : 150 + Math.random()*40;
+    const node = { id, type, x, y, snappedTo: null, el: null };
+    if (PC_PARTS[type].slots) { node.slots = { ...PC_PARTS[type].slots }; for(let k in node.slots) { node.slots[k] = null; } }
+    nodes[id] = node; createNodeElement(node); evaluateBuild(); return id;
   }
 
-  /* --- Seven-Segment Diagnostics Engine --- */
+  function moveNodeRecursive(nodeId, dx, dy) {
+    const n = nodes[nodeId]; if(!n) return; n.x += dx; n.y += dy;
+    if(n.slots) { Object.keys(n.slots).forEach(k => { if(typeof n.slots[k] === 'string') moveNodeRecursive(n.slots[k], dx, dy); }); }
+  }
+
+  /* --- SYSTEM DIAGNOSTICS & VARIABLE BOOT SPEED --- */
   function evaluateBuild() {
     if(!specsContainer) return;
-
-    let hasCase = false, hasMB = false, hasCPU = false, hasCooler = false, hasRAM = false, hasPSU = false;
-    let hasStorage = false, hasGPU = false;
-    let mbPwr = false, gpuPwr = false;
-    let usbCount = 0, dispConn = false, audConn = false;
+    let hasCase=false, hasMB=false, hasCPU=false, hasCooler=false, hasRAM=false, hasPSU=false, hasStorage=false, hasGPU=false;
+    let mbPwr=false, gpuPwr=false, storPwr=false, storData=false, dispConn=false, usbCount=0;
 
     let caseNode = Object.values(nodes).find(n => n.type === 'CASE');
     let mbNode = Object.values(nodes).find(n => n.type === 'MB');
@@ -160,145 +184,92 @@
       if (caseNode.slots['MB1']) hasMB = true;
       if (caseNode.slots['PSU1']) hasPSU = true;
       if (caseNode.slots['HDD1'] || caseNode.slots['HDD2'] || caseNode.slots['SATA_SSD1'] || caseNode.slots['SATA_SSD2']) hasStorage = true;
-    } else if (mbNode) {
-      hasMB = true; // Motherboard exists outside case
-    }
+    } else if (mbNode) { hasMB = true; }
 
     if (mbNode) {
       if (mbNode.slots['CPU1']) hasCPU = true;
       if (mbNode.slots['COOLER1']) hasCooler = true;
       if (mbNode.slots['RAM1'] || mbNode.slots['RAM2'] || mbNode.slots['RAM3'] || mbNode.slots['RAM4']) hasRAM = true;
       if (mbNode.slots['PCIE1'] || mbNode.slots['PCIE2']) hasGPU = true;
-      if (mbNode.slots['M2_1'] || mbNode.slots['M2_2']) hasStorage = true;
+      if (mbNode.slots['M2_1'] || mbNode.slots['M2_2']) { hasStorage = true; storPwr = true; storData = true; }
     }
 
-    // Check Cables
     connections.forEach(c => {
-      let n1 = nodes[c.fromNode], n2 = nodes[c.toNode];
-      if(!n1 || !n2) return;
-      let types = [n1.type, n2.type];
+      let n1 = nodes[c.fromNode], n2 = nodes[c.toNode]; if(!n1 || !n2) return;
+      let types = [n1.type, n2.type], ports = [c.fromPort, c.toPort];
       
       if(types.includes('MB') && types.includes('PSU')) mbPwr = true;
       if(types.includes('GPU') && types.includes('PSU')) gpuPwr = true;
-      if(types.includes('MB') && ['KEYBOARD','MOUSE','WEBCAM','MIC','PRINTER'].some(t => types.includes(t))) usbCount++;
-      if(types.includes('MB') && types.includes('SPEAKER')) audConn = true;
+      if(types.includes('PSU') && (types.includes('HDD') || types.includes('SATA_SSD')) && ports.includes('pwr')) storPwr = true;
+      if(types.includes('MB') && (types.includes('HDD') || types.includes('SATA_SSD')) && ports.includes('data')) storData = true;
+      if(types.includes('MB') && ['KEYBOARD','MOUSE'].some(t => types.includes(t))) usbCount++;
       if((types.includes('MB') || types.includes('GPU')) && types.includes('MONITOR')) dispConn = true;
     });
 
     const isBootable = (hasMB && hasCPU && hasCooler && hasRAM && hasPSU && hasStorage && mbPwr && (hasGPU ? gpuPwr : true) && dispConn);
     
+    // Determine the Boot Speed based on the connected drive
+    let bootSpeed = 8000; // Default slow HDD
+    let activeDrive = 'HDD';
+    if (mbNode && (mbNode.slots['M2_1'] || mbNode.slots['M2_2'])) {
+        activeDrive = 'M2_SSD';
+    } else {
+        Object.values(nodes).forEach(n => {
+            if ((n.type === 'SATA_SSD' || n.type === 'HDD') && n.snappedTo) activeDrive = n.type;
+        });
+    }
+    
+    if (activeDrive === 'M2_SSD') bootSpeed = 1500;
+    else if (activeDrive === 'SATA_SSD') bootSpeed = 3500;
+
+    // Auto-Trigger the Boot Animation
+    if (isBootable && !isSystemBooted) { isSystemBooted = true; triggerBootSequence(bootSpeed); } 
+    else if (!isBootable) { isSystemBooted = false; resetMonitor(); }
+
     specsContainer.innerHTML = `
-      <div class="diag-cat">Core System</div>
+      <div class="diag-cat">CORE SYSTEM</div>
       <div class="diag-row"><span>CHASSIS</span><span style="color: ${hasCase ? '#28f07a' : '#ff5555'}">${hasCase ? 'OK' : 'ERR'}</span></div>
       <div class="diag-row"><span>MOTHERBOARD</span><span style="color: ${hasMB ? '#28f07a' : '#ff5555'}">${hasMB ? 'OK' : 'ERR'}</span></div>
       <div class="diag-row"><span>CPU</span><span style="color: ${hasCPU ? '#28f07a' : '#ff5555'}">${hasCPU ? 'OK' : 'ERR'}</span></div>
       <div class="diag-row"><span>COOLING</span><span style="color: ${hasCooler ? '#28f07a' : '#ff5555'}">${hasCooler ? 'OK' : 'ERR'}</span></div>
       <div class="diag-row"><span>MEMORY</span><span style="color: ${hasRAM ? '#28f07a' : '#ff5555'}">${hasRAM ? 'OK' : 'ERR'}</span></div>
       <div class="diag-row"><span>POWER SPLY</span><span style="color: ${hasPSU ? '#28f07a' : '#ff5555'}">${hasPSU ? 'OK' : 'ERR'}</span></div>
-      <div class="diag-cat">Connections</div>
+      <div class="diag-cat">CONNECTIONS</div>
       <div class="diag-row"><span>MB POWER</span><span style="color: ${mbPwr ? '#28f07a' : '#ff5555'}">${mbPwr ? 'OK' : 'ERR'}</span></div>
-      <div class="diag-row"><span>STORAGE</span><span style="color: ${hasStorage ? '#28f07a' : '#ff5555'}">${hasStorage ? 'OK' : 'ERR'}</span></div>
+      <div class="diag-row"><span>STORAGE</span><span style="color: ${(hasStorage && storPwr && storData) ? '#28f07a' : '#ff5555'}">${(hasStorage && storPwr && storData) ? 'OK' : 'ERR'}</span></div>
       <div class="diag-row"><span>GPU POWER</span><span style="color: ${!hasGPU ? '#888' : (gpuPwr ? '#28f07a' : '#ff5555')}">${!hasGPU ? 'N/A' : (gpuPwr ? 'OK' : 'ERR')}</span></div>
       <div class="diag-row"><span>DISPLAY</span><span style="color: ${dispConn ? '#28f07a' : '#ff5555'}">${dispConn ? 'OK' : 'ERR'}</span></div>
       <div class="diag-row"><span>USB DEVS</span><span style="color: #55aaff">${usbCount}</span></div>
       <hr style="border-color: rgba(255,255,255,0.1); margin: 12px 0 8px 0;">
-      <div style="text-align:center; font-size: 28px; color: ${isBootable ? '#28f07a' : '#ff5555'}; font-family: var(--bit-font); letter-spacing: 2px;">
-        ${isBootable ? 'BOOTING...' : 'HALTED'}
-      </div>
+      <div style="text-align:center; font-size: 28px; color: ${isBootable ? '#28f07a' : '#ff5555'}; font-family: var(--bit-font); letter-spacing: 2px;">${isBootable ? 'BOOTING...' : 'HALTED'}</div>
     `;
   }
 
-  /* --- Node Creation & Snapping --- */
-  function createNodeElement(node) {
-    const el = document.createElement('div');
-    el.className = `pb-node`; el.dataset.id = node.id;
-    el.style.left = `${node.x}px`; el.style.top = `${node.y}px`;
-    el.style.width = `${PC_PARTS[node.type].w}px`; el.style.height = `${PC_PARTS[node.type].h}px`;
-    el.style.zIndex = PC_PARTS[node.type].z;
+  function triggerBootSequence(duration) {
+    const monitor = Object.values(nodes).find(n => n.type === 'MONITOR'); if (!monitor) return;
+    const bootContent = monitor.el.querySelector('#boot-content');
+    const durSeconds = (duration / 1000).toFixed(1);
     
-    let innerHTML = `<svg class="pb-part-svg" viewBox="0 0 ${PC_PARTS[node.type].w} ${PC_PARTS[node.type].h}">${PC_PARTS[node.type].svg}</svg>`;
-    PC_PARTS[node.type].ports.forEach(p => {
-      innerHTML += `<div class="pb-port" data-port="${p.id}" style="left: ${p.x}px; top: ${p.y}px;"></div>`;
-    });
+    bootContent.innerHTML = `<text x="120" y="70" fill="white" font-family="sans-serif" font-size="12" text-anchor="middle">Starting Windows</text><rect x="85" y="85" width="0" height="4" fill="#28f07a" rx="2"><animate attributeName="width" from="0" to="70" dur="${durSeconds}s" fill="freeze" /></rect>`;
     
-    // Debug Labels for bare parts
-    if(node.type !== 'CASE' && node.type !== 'MB') {
-       innerHTML += `<div style="position:absolute; top:-20px; font-family:var(--ui-font); font-size:12px; color:var(--muted);">${node.type}</div>`;
+    setTimeout(() => { 
+        bootContent.innerHTML = `<image href="/Microsoft_Nostalgic_Windows_Wallpaper_4k.jpg" x="10" y="10" width="220" height="120" preserveAspectRatio="xMidYMid slice" />`; 
+    }, duration + 300); // Small buffer to let the bar finish
   }
 
-    el.innerHTML = innerHTML;
-    viewport.appendChild(el);
-    node.el = el;
-    return el;
-  }
+  function resetMonitor() { const monitor = Object.values(nodes).find(n => n.type === 'MONITOR'); if (monitor) monitor.el.querySelector('#boot-content').innerHTML = ''; }
 
-  function spawnNode(type, dropX = null, dropY = null) {
-    const id = `node_${nextNodeId++}`;
-    const x = dropX !== null ? dropX : 300 + Math.random()*40;
-    const y = dropY !== null ? dropY : 150 + Math.random()*40;
 
-    const node = { id, type, x, y, snappedTo: null, el: null };
-    if (PC_PARTS[type].slots) node.slots = { ...PC_PARTS[type].slots }; // Copy slots schema, values will be filled with IDs
-    
-    // Reset slot values to null
-    if(node.slots) {
-       for(let k in node.slots) { node.slots[k] = null; }
-    }
-
-    nodes[id] = node;
-    createNodeElement(node);
-    evaluateBuild();
-  }
-
-  // Recursive movement to handle nested snaps (MB inside CASE inside ...)
-  function moveNodeRecursive(nodeId, dx, dy) {
-    const n = nodes[nodeId];
-    if(!n) return;
-    n.x += dx; n.y += dy;
-    if(n.slots) {
-       Object.keys(n.slots).forEach(k => {
-          if(typeof n.slots[k] === 'string') moveNodeRecursive(n.slots[k], dx, dy);
-       });
-    }
-  }
-
-  /* --- Inspect Mode --- */
-  let inspectZoom = 1, inspectRotX = 0, inspectRotY = 0;
-  workspace.addEventListener('dblclick', (e) => {
-    const nodeEl = e.target.closest('.pb-node');
-    if (nodeEl) {
-      const node = nodes[nodeEl.dataset.id];
-      document.getElementById('inspectModal').classList.add('active');
-      document.getElementById('inspectObject').innerHTML = `<svg viewBox="0 0 ${PC_PARTS[node.type].w} ${PC_PARTS[node.type].h}" style="width:100%; height:100%;">${PC_PARTS[node.type].svg}</svg>`;
-      document.getElementById('inspectName').innerText = PC_PARTS[node.type].name;
-      inspectZoom = 1.5; inspectRotX = 0; inspectRotY = 0; updateInspectTransform(); clearSelection();
-    }
-  });
-  document.getElementById('inspectStage')?.addEventListener('mousemove', (e) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    inspectRotY = (e.clientX - rect.left - rect.width/2) / 5;
-    inspectRotX = -(e.clientY - rect.top - rect.height/2) / 5;
-    updateInspectTransform();
-  });
-  document.getElementById('inspectStage')?.addEventListener('wheel', (e) => {
-    e.preventDefault(); inspectZoom += e.deltaY < 0 ? 0.1 : -0.1;
-    inspectZoom = Math.max(0.5, Math.min(inspectZoom, 4)); updateInspectTransform();
-  });
-  function updateInspectTransform() { const obj = document.getElementById('inspectObject'); if(obj) obj.style.transform = `scale(${inspectZoom}) rotateX(${inspectRotX}deg) rotateY(${inspectRotY}deg)`; }
-  document.getElementById('inspectClose')?.addEventListener('click', () => { document.getElementById('inspectModal').classList.remove('active'); });
-
-  /* --- Interaction --- */
+  /* --- INTERACTION (Drag, Drop, Snap, Wire) --- */
   document.getElementById("btnZoomIn")?.addEventListener('click', () => { const r = workspace.getBoundingClientRect(); zoomWorkspace(1.2, r.width/2, r.height/2); });
   document.getElementById("btnZoomOut")?.addEventListener('click', () => { const r = workspace.getBoundingClientRect(); zoomWorkspace(1/1.2, r.width/2, r.height/2); });
   document.getElementById("btnZoomReset")?.addEventListener('click', () => { panX = 0; panY = 0; zoom = 1; updateViewport(); });
-
   workspace.addEventListener('wheel', (e) => { e.preventDefault(); const wsRect = workspace.getBoundingClientRect(); zoomWorkspace(e.deltaY < 0 ? 1.1 : (1/1.1), e.clientX - wsRect.left, e.clientY - wsRect.top); });
   
   workspace.addEventListener('mousedown', (e) => {
     const port = e.target.closest('.pb-port');
     if (port) {
-      const nodeEl = port.closest('.pb-node');
-      const portId = port.dataset.port;
+      const nodeEl = port.closest('.pb-node'); const portId = port.dataset.port;
       const existingIdx = connections.findIndex(c => (c.toNode === nodeEl.dataset.id && c.toPort === portId) || (c.fromNode === nodeEl.dataset.id && c.fromPort === portId));
       if (existingIdx !== -1) { connections.splice(existingIdx, 1); evaluateBuild(); renderWires(); return; }
       const coords = getPortCoords(nodeEl.dataset.id, portId);
@@ -314,18 +285,14 @@
       clearSelection(); selectedNodeId = nodeEl.dataset.id; nodeEl.classList.add('selected'); isDraggingNode = nodeEl.dataset.id;
       const rect = nodeEl.getBoundingClientRect(); dragOffset = { x: (e.clientX - rect.left) / zoom, y: (e.clientY - rect.top) / zoom };
 
-      // Unsnap from parent when picked up
       const node = nodes[isDraggingNode];
       if (node.snappedTo) {
         const parent = nodes[node.snappedTo.id];
         if (parent && parent.slots[node.snappedTo.key] === node.id) parent.slots[node.snappedTo.key] = null; 
-        node.snappedTo = null;
-        node.el.style.zIndex = PC_PARTS[node.type].z; // Reset Z
-        evaluateBuild();
+        node.snappedTo = null; node.el.style.zIndex = PC_PARTS[node.type].z; evaluateBuild();
       }
       return;
     }
-
     clearSelection(); isPanning = true; panStart = { x: e.clientX - panX, y: e.clientY - panY };
   });
 
@@ -334,20 +301,16 @@
     if (isPanning) { panX = e.clientX - panStart.x; panY = e.clientY - panStart.y; updateViewport(); return; }
     if (isDraggingNode) {
       const node = nodes[isDraggingNode];
-      let newX = (e.clientX - wsRect.left - panX) / zoom - dragOffset.x;
-      let newY = (e.clientY - wsRect.top - panY) / zoom - dragOffset.y;
-      moveNodeRecursive(node.id, newX - node.x, newY - node.y);
-      updateNodePositions();
+      let newX = (e.clientX - wsRect.left - panX) / zoom - dragOffset.x; let newY = (e.clientY - wsRect.top - panY) / zoom - dragOffset.y;
+      moveNodeRecursive(node.id, newX - node.x, newY - node.y); updateNodePositions();
     }
     if (wiringStart) { tempWirePath = { x: (e.clientX - wsRect.left - panX) / zoom, y: (e.clientY - wsRect.top - panY) / zoom }; renderWires(); }
   });
 
   window.addEventListener('mouseup', (e) => {
     if (isDraggingNode) {
-      const node = nodes[isDraggingNode];
-      let snapped = false;
+      const node = nodes[isDraggingNode]; let snapped = false;
 
-      // Check all other nodes for compatible slots
       Object.values(nodes).forEach(target => {
         if (target.slots && !snapped && target.id !== node.id) {
            for(let slotKey in target.slots) {
@@ -358,7 +321,7 @@
                       moveNodeRecursive(node.id, tX - node.x, tY - node.y);
                       node.snappedTo = { id: target.id, key: slotKey };
                       target.slots[slotKey] = node.id;
-                      node.el.style.zIndex = PC_PARTS[target.type].z + 5; // Layer above parent
+                      node.el.style.zIndex = PC_PARTS[target.type].z + 5;
                       snapped = true; break;
                   }
               }
@@ -371,8 +334,7 @@
     if (wiringStart) {
       const port = e.target.closest('.pb-port');
       if (port) {
-        const targetNodeId = port.closest('.pb-node').dataset.id;
-        const targetPortId = port.dataset.port;
+        const targetNodeId = port.closest('.pb-node').dataset.id; const targetPortId = port.dataset.port;
         if (targetNodeId !== wiringStart.node) { connections.push({ id: `conn_${nextWireId++}`, fromNode: wiringStart.node, fromPort: wiringStart.port, toNode: targetNodeId, toPort: targetPortId }); }
       }
       wiringStart = null; tempWirePath = null; evaluateBuild(); renderWires();
@@ -380,7 +342,8 @@
     isPanning = false;
   });
 
-  /* --- Deletion (Recursive) --- */
+
+  /* --- Deletion & Toolbox UI --- */
   function deleteNodeRecursive(id) {
       const n = nodes[id]; if(!n) return;
       if(n.slots) { Object.keys(n.slots).forEach(k => { if(typeof n.slots[k] === 'string') deleteNodeRecursive(n.slots[k]); }); }
@@ -390,28 +353,17 @@
   }
 
   window.addEventListener('keydown', (e) => {
-    if ((e.key === 'Delete' || e.key === 'Backspace') && selectedNodeId) {
-      deleteNodeRecursive(selectedNodeId); clearSelection(); evaluateBuild(); renderWires();
-    }
-    if ((e.key === 'Delete' || e.key === 'Backspace') && selectedWireId) {
-      connections = connections.filter(c => c.id !== selectedWireId); clearSelection(); evaluateBuild(); renderWires();
-    }
+    if ((e.key === 'Delete' || e.key === 'Backspace') && selectedNodeId) { deleteNodeRecursive(selectedNodeId); clearSelection(); evaluateBuild(); renderWires(); }
+    if ((e.key === 'Delete' || e.key === 'Backspace') && selectedWireId) { connections = connections.filter(c => c.id !== selectedWireId); clearSelection(); evaluateBuild(); renderWires(); }
   });
 
   workspace.addEventListener('dragover', (e) => { e.preventDefault(); });
   workspace.addEventListener('drop', (e) => {
-    e.preventDefault();
-    const type = e.dataTransfer.getData('spawnType');
-    if (type) {
-      const r = workspace.getBoundingClientRect();
-      spawnNode(type, (e.clientX - r.left - panX) / zoom - (PC_PARTS[type].w / 2), (e.clientY - r.top - panY) / zoom - (PC_PARTS[type].h / 2));
-    }
+    e.preventDefault(); const type = e.dataTransfer.getData('spawnType');
+    if (type) { const r = workspace.getBoundingClientRect(); spawnNode(type, (e.clientX - r.left - panX) / zoom - (PC_PARTS[type].w / 2), (e.clientY - r.top - panY) / zoom - (PC_PARTS[type].h / 2)); }
   });
 
-  btnClearBoard?.addEventListener('click', () => {
-    viewport.querySelectorAll('.pb-node').forEach(el => el.remove());
-    nodes = {}; connections = []; evaluateBuild(); renderWires();
-  });
+  btnClearBoard?.addEventListener('click', () => { viewport.querySelectorAll('.pb-node').forEach(el => el.remove()); nodes = {}; connections = []; evaluateBuild(); renderWires(); });
 
   toolboxToggle?.addEventListener("click", () => {
     const c = pcPage?.classList.contains("toolboxCollapsed");
@@ -419,5 +371,29 @@
     toolboxToggle?.setAttribute("aria-expanded", c ? "true" : "false");
   });
 
+  /* --- Auto-Assemble Engine --- */
+  function autoAssemble(sT) {
+    btnClearBoard.click(); 
+    const mId = spawnNode('MONITOR', 200, 100), kId = spawnNode('KEYBOARD', 230, 320), moId = spawnNode('MOUSE', 450, 330), spId = spawnNode('SPEAKER', 150, 300);
+    const cId = spawnNode('CASE', 550, 100), mbId = spawnNode('MB', 1250, 250), pId = spawnNode('PSU', 1250, 100), cpId = spawnNode('CPU', 1450, 100), coId = spawnNode('COOLER', 1450, 250), rId = spawnNode('RAM', 1600, 100), gId = spawnNode('GPU', 1450, 400), stId = spawnNode(sT, 1600, 250);
+    
+    const plan = [{c:mbId,p:cId,s:'MB1'},{c:pId,p:cId,s:'PSU1'},{c:cpId,p:mbId,s:'CPU1'},{c:coId,p:mbId,s:'COOLER1'},{c:rId,p:mbId,s:'RAM1'},{c:gId,p:mbId,s:'PCIE1'}];
+    if(sT==='HDD') plan.push({c:stId,p:cId,s:'HDD1'}); if(sT==='SATA_SSD') plan.push({c:stId,p:cId,s:'SATA_SSD1'}); if(sT==='M2_SSD') plan.push({c:stId,p:mbId,s:'M2_1'});
+    
+    plan.forEach(s => { const ch = nodes[s.c], p = nodes[s.p]; const sD = PC_PARTS[p.type].slots[s.s]; moveNodeRecursive(ch.id, (p.x + sD.x) - ch.x, (p.y + sD.y) - ch.y); ch.snappedTo = { id: p.id, key: s.s }; p.slots[s.s] = ch.id; ch.el.style.zIndex = PC_PARTS[p.type].z + 5; });
+    
+    const conn = (n1, p1, n2, p2) => connections.push({ id: `conn_${nextWireId++}`, fromNode: n1, fromPort: p1, toNode: n2, toPort: p2 });
+    conn(pId, 'out1', mbId, 'atx_pwr'); conn(pId, 'out2', gId, 'pwr_in'); 
+    if (sT !== 'M2_SSD') { conn(pId, 'out3', stId, 'pwr'); conn(mbId, 'sata1', stId, 'data'); } 
+    conn(gId, 'disp_out', mId, 'disp'); conn(mbId, 'usb1', kId, 'usb'); conn(mbId, 'usb2', moId, 'usb'); conn(mbId, 'audio', spId, 'audio'); 
+    
+    updateNodePositions(); 
+    evaluateBuild(); 
+  }
+
+  document.getElementById('btnAssembleHDD')?.addEventListener('click', () => autoAssemble('HDD'));
+  document.getElementById('btnAssembleSATA')?.addEventListener('click', () => autoAssemble('SATA_SSD'));
+  document.getElementById('btnAssembleM2')?.addEventListener('click', () => autoAssemble('M2_SSD'));
+
   initToolbox(); evaluateBuild();
 })();

src/styles/global.css

@@ -37,7 +37,7 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--
 .siteNav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(0,0,0,.10); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); margin-bottom: 25px; }
 .navInner { height: 90px; max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
 .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
-.brandLogo { width: 2.5em; height: 2.5em; image-rendering: pixelated; }
+.brandLogo { width: 75px; height: 75px; image-rendering: pixelated; }
 .brandName { letter-spacing: .12em; font-weight: 900; font-size: 18px; }
 .navLinks { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
 .navLinks a { color: var(--muted); text-decoration: none; font-weight: 800; letter-spacing: .12em; font-size: 16px; }
@@ -89,7 +89,7 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--
 .switch input { display: none; }
 .slider { position: absolute; inset: 0; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; transition: .2s ease; }
 .slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 2px; background: rgba(255,255,255,.92); border-radius: 999px; transition: .2s ease; pointer-events: none; }
-.switch input:checked + .slider { background: rgba(40,240,122,.25); border-color: rgba(40,240,122,.30); }
+.switch input:checked + .slider { background: rgba(40,240,122,.30); border-color: rgba(40,240,122,.30); }
 .switch input:checked + .slider::before { transform: translateX(28px); }
 
 /* --- HEXADECIMAL --- */
@@ -226,3 +226,147 @@ body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--
   line-height: 150%;
   margin: 0 0 2em 2em;
 }
+
+.btnRandomRunning {
+  background: rgba(40,240,122,.18) !important;
+  border-color: rgba(40,240,122,.35) !important;
+  color: rgba(232,232,238,.95) !important; /* Added this so the text pops like the reset button */
+  animation: randomPulse 750ms ease-in-out infinite;
+}
+
+@keyframes randomPulse {
+  0% { box-shadow: 0 0 0 rgba(40,240,122,0); }
+  50% { box-shadow: 0 0 22px rgba(40,240,122,.38); } /* Matched the .38 opacity peak */
+  100% { box-shadow: 0 0 0 rgba(40,240,122,0); }
+}
+
+.btnReset { color: rgba(232,232,238,.95); }
+.btnReset:hover {
+  background: rgba(255,80,80,.18);
+  border-color: rgba(255,80,80,.35);
+  animation: resetPulse 750ms ease-in-out infinite;
+}
+
+@keyframes resetPulse {
+  0% { box-shadow: 0 0 0 rgba(255,80,80,0); }
+  50% { box-shadow: 0 0 22px rgba(255,80,80,.38); }
+  100% { box-shadow: 0 0 0 rgba(255,80,80,0); }
+}
+
+/* --- ACCORDION ANIMATIONS FOR ALL TOOLBOXES --- */
+.panelCol .cardTitle,
+.pb-toolbox .cardTitle,
+.lg-toolbox .cardTitle {
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  user-select: none;
+}
+
+.panelCol .cardTitle::after,
+.pb-toolbox .cardTitle::after,
+.lg-toolbox .cardTitle::after {
+  content: '▼';
+  font-size: 0.7em;
+  opacity: 0.6;
+  transition: transform 0.25s ease;
+}
+
+.panelCol .card.collapsed .cardTitle::after,
+.pb-toolbox .card.collapsed .cardTitle::after,
+.lg-toolbox .card.collapsed .cardTitle::after {
+  transform: rotate(90deg);
+}
+
+.panelCol .cardBody,
+.pb-toolbox .cardBody,
+.lg-toolbox .cardBody {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 350ms cubic-bezier(0.2, 0.9, 0.2, 1);
+  margin-top: 12px;
+}
+
+.panelCol .card.collapsed .cardBody,
+.pb-toolbox .card.collapsed .cardBody,
+.lg-toolbox .card.collapsed .cardBody {
+  grid-template-rows: 0fr;
+  margin-top: 0;
+}
+
+.panelCol .cardBodyInner,
+.pb-toolbox .cardBodyInner,
+.lg-toolbox .cardBodyInner {
+  overflow: hidden;
+  opacity: 1;
+  transition: opacity 250ms ease 100ms, visibility 0s 0s; 
+}
+
+.panelCol .card.collapsed .cardBodyInner,
+.pb-toolbox .card.collapsed .cardBodyInner,
+.lg-toolbox .card.collapsed .cardBodyInner {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 200ms ease 0s, visibility 0s 200ms;
+}
+
+/* --- BASE STATE: Lock the scale so it never stretches --- */
+.btnRandom, #btnRandom, 
+.btnReset, #btnReset {
+    transform: scale(1) !important;
+    transition: transform 0.1s ease-out, border-color 0.2s ease-out, color 0.2s ease-out !important;
+}
+
+/* --- THE PULSE ANIMATIONS --- */
+@keyframes neonPulseGreen {
+    0%, 100% {
+        background-color: rgba(40, 240, 122, 0.05);
+        box-shadow: inset 0 0 10px rgba(40, 240, 122, 0.4), 
+                    0 0 5px rgba(40, 240, 122, 0.2);
+    }
+    50% {
+        background-color: rgba(40, 240, 122, 0.15);
+        box-shadow: inset 0 0 22px rgba(40, 240, 122, 0.8), 
+                    0 0 12px rgba(40, 240, 122, 0.5);
+    }
+}
+
+@keyframes neonPulseRed {
+    0%, 100% {
+        background-color: rgba(255, 85, 85, 0.05);
+        box-shadow: inset 0 0 10px rgba(255, 85, 85, 0.4), 
+                    0 0 5px rgba(255, 85, 85, 0.2);
+    }
+    50% {
+        background-color: rgba(255, 85, 85, 0.15);
+        box-shadow: inset 0 0 22px rgba(255, 85, 85, 0.8), 
+                    0 0 12px rgba(255, 85, 85, 0.5);
+    }
+}
+
+/* --- HOVER STATES: Trigger the infinite pulse --- */
+.btnRandom:hover, .btnRandom:focus, .btnRandom.active,
+#btnRandom:hover, #btnRandom:focus, #btnRandom.active {
+    border-color: #28f07a !important;
+    color: #28f07a !important;
+    /* 1.5s cycle, infinite loop, smooth easing */
+    animation: neonPulseGreen 1.5s infinite ease-in-out !important;
+}
+
+.btnReset:hover, .btnReset:focus, .btnReset.active,
+#btnReset:hover, #btnReset:focus, #btnReset.active {
+    border-color: #ff5555 !important;
+    color: #ff5555 !important;
+    /* 1.5s cycle, infinite loop, smooth easing */
+    animation: neonPulseRed 1.5s infinite ease-in-out !important;
+}
+
+/* --- CLICK STATE: Interrupt the pulse and shrink --- */
+.btnRandom:active, #btnRandom:active,
+.btnReset:active, #btnReset:active {
+    transform: scale(0.96) !important; 
+    animation: none !important; /* Immediately kill the pulse while clicked */
+    background-color: transparent !important;
+    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.8) !important; 
+}

src/styles/logic-gates.css

@@ -68,32 +68,65 @@ body:has(#logicPage) .pageWrap {
 }
 .lg-zoom-btn:hover { background: rgba(255,255,255,0.1); border-color: #28f07a; color: #28f07a; }
 
+/* Update the SVG layer to sit ON TOP of nodes */
+/* Move the wire layer behind the nodes */
 .lg-svg-layer {
-  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1; /* Lower than nodes */
+  pointer-events: none; 
 }
 
 /* Wires */
+/* Wires - allow them to be clickable even behind the 'hit area' of ports */
 .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; cursor: pointer;
+    stroke: #ffffff40;
+    stroke-width: 6;
+    fill: none;
+    stroke-linecap: round;
+    transition: stroke .1s ease,filter .1s ease,stroke-width .1s ease;
+    pointer-events: stroke;
+    cursor: pointer;
+    z-index: 1;
+}
+.lg-wire:hover {
+    stroke: #fff9;
+    stroke-width: 10
+}
+.lg-wire.active {
+    stroke: #28f07a;
+    filter: drop-shadow(0 0 6px rgba(40,240,122,.6))
+}
+.lg-wire.active:hover {
+    stroke: #5dff9e
 }
-.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;
+    stroke: #f55!important;
+    stroke-width: 8!important;
+    stroke-dasharray: 8 8;
+    filter: drop-shadow(0 0 8px rgba(255,85,85,.8))!important;
+    animation: wireDash 1s linear infinite
+}
+@keyframes wireDash {
+    to {
+        stroke-dashoffset: -16
+    }
+}
+.lg-wire-temp {
+    stroke: #fff6;
+    stroke-dasharray: 8 8;
+    pointer-events: none
 }
-@keyframes wireDash { to { stroke-dashoffset: -16; } }
-.lg-wire-temp { stroke: rgba(255,255,255,0.4); stroke-dasharray: 8 8; pointer-events: none; }
 
 /* Nodes */
+/* Nodes - move them in front of wires */
 .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; user-select: none; transition: filter 0.2s;
-  pointer-events: auto; /* Re-enables interaction inside the viewport */
+  position: absolute;
+  z-index: 10; /* Higher than wires */
+  pointer-events: auto;
+  user-select: none;
 }
 .lg-node:active { cursor: grabbing; z-index: 20; }
 .lg-node.selected { filter: drop-shadow(0 0 10px rgba(255,85,85,0.8)); }
@@ -108,13 +141,24 @@ body:has(#logicPage) .pageWrap {
 .lg-line-svg { width: 30px; height: 50px; display: block; }
 
 /* Connection Ports */
+/* Update ports to sit even higher so they stay clickable */
+/* Ports - Ensure the dots are the top-most layer */
 .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%); 
+  width: 12px; /* Balanced size */
+  height: 12px;
+  background: #a9acb8;
+  border: 2px solid #1f2027; /* Dark border helps it 'pop' over glowing wires */
+  border-radius: 50%;
+  position: absolute;
+  z-index: 100; /* Absolute top */
+  transform: translate(-50%, -50%);
+  cursor: crosshair;
 }
 .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; }
+.lg-port.active {
+  background: #28f07a;
+  box-shadow: 0 0 8px rgba(40,240,122,.45);
+}
 
 /* === FLOATING TOOLBOX === */
 .toolboxToggle {
@@ -163,3 +207,14 @@ body:has(#logicPage) .pageWrap {
 .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); }
+
+
+/* Ensure the active-sim class actually changes the color */
+.active-sim .slider {
+  background-color: rgba(40,240,122,.25) !important; /* Bright Green */
+  box-shadow: 0 0 15px rgba(40, 240, 122, 0.5);
+}
+
+.active-sim .slider::before {
+  transform: translateX(28px) !important;
+}

src/styles/number-simulators.css

@@ -63,7 +63,38 @@
 .hexColWeight { font-family: var(--bit-font); font-size: 40px; color: rgba(232,232,238,.6); margin-top: 14px; }
 
 /* --- TOOLBOX COMPONENTS FOR NUMBERS --- */
-.panelCol { position: fixed; top: var(--toolbox-top); right: 22px; width: var(--toolbox-w); z-index: 80; display: flex; flex-direction: column; gap: 16px; transform: translateX(0); opacity: 1; transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease; }
+.panelCol {
+  /* Your original layout and animations */
+  position: fixed; 
+  top: var(--toolbox-top); 
+  right: 22px; 
+  width: var(--toolbox-w); 
+  z-index: 80; 
+  display: flex; 
+  flex-direction: column; 
+  gap: 16px; 
+  transform: translateX(0); 
+  opacity: 1; 
+  transition: transform 420ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease; 
+
+  /* THE FIX: Push the bottom edge higher up the screen */
+  /* If your footer is ~140px tall, 170px gives you a perfect 30px safe gap */
+  bottom: 110px; 
+  
+  /* Let the inside scroll smoothly */
+  overflow-y: auto; 
+  scrollbar-width: none; 
+}
+
+/* Hide the scrollbar in Chrome/Safari */
+.panelCol::-webkit-scrollbar {
+  display: none;
+}
+
+.panelCol .card {
+  flex-shrink: 0;
+}
+
 .binaryPage.toolboxCollapsed .panelCol { transform: translateX(calc(var(--toolbox-w) + 32px)); opacity: 0; pointer-events: none; }
 
 .toggleRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

src/styles/pc-builder.css

@@ -39,13 +39,15 @@ body:has(#pcPage) .pageWrap {
 .pb-zoom-btn:hover { background: rgba(255,255,255,0.1); border-color: #55aaff; color: #55aaff; }
 
 /* Wires sit at the VERY FRONT so they are never hidden in the case */
-.pb-svg-layer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }
+/* Wire layer - sits above case but below ports */
+/* Wire layer - Physically on TOP of components */
+.pb-svg-layer { z-index: 100 !important; pointer-events: none; position: absolute; inset: 0; width: 100%; height: 100%; }
 
 /* Cables */
-.pb-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; cursor: pointer;
-}
+/* Cables - make sure they have a width and color */
+/* Cables - Styled for visibility */
+.pb-wire { stroke: #55aaff; stroke-width: 6; fill: none; pointer-events: stroke; }
+
 .pb-wire:hover { stroke: rgba(255,255,255,0.6); stroke-width: 10; }
 .pb-wire.active { stroke: #55aaff; filter: drop-shadow(0 0 6px rgba(85,170,255,0.6)); }
 .pb-wire.active:hover { stroke: #88ccff; }
@@ -58,6 +60,7 @@ body:has(#pcPage) .pageWrap {
   position: absolute; background: transparent; border: none; border-radius: 0; padding: 0;
   display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: grab;
   user-select: none; transition: filter 0.2s; pointer-events: auto;
+  z-index: 10;
 }
 .pb-node:active { cursor: grabbing; }
 .pb-node.selected { filter: drop-shadow(0 0 10px rgba(255,85,85,0.8)); }
@@ -67,7 +70,7 @@ body:has(#pcPage) .pageWrap {
 .pb-port {
   width: 14px; height: 14px; background: #222; border-radius: 50%; cursor: crosshair;
   border: 2px solid #55aaff; box-shadow: 0 0 0 1px rgba(255,255,255,0.2); transition: all 0.2s;
-  position: absolute; z-index: 200; transform: translate(-50%, -50%); pointer-events: auto;
+  position: absolute; z-index: 200 !important; transform: translate(-50%, -50%); pointer-events: auto;
 }
 .pb-port:hover { transform: translate(-50%, -50%) scale(1.4); background: #fff; }
 .pb-port.active { background: #55aaff; box-shadow: 0 0 12px rgba(85,170,255,0.8); }