Recent Changes:

- Make the navigation bar 3 times it's current height - The navbar needs the Computing:Box logo to the left of the site name - Move the toolbox button to appear below the navigation bar - Make the background of the random button glow/pulse green when random is running - Make Random run a little longer (like 25% more) - Rename the "Custom" card to "Custom Number"
2025-12-16 19:56:40 +00:00
parent ae91944cb4
commit 8b3c58c8d9
4 changed files with 1318 additions and 239 deletions
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -1,5 +1,7 @@
 ---
-const { title = "Computing:Box" } = Astro.props;
+const {
+  title = "Computing:Box",
+} = Astro.props;
 ---

 <!doctype html>
@@ -8,34 +10,124 @@ const { title = "Computing:Box" } = Astro.props;
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>{title}</title>
-    <link rel="stylesheet" href="/src/styles/site.css" />
+    <meta name="color-scheme" content="dark" />
  </head>

  <body>
-    <header class="site-header">
-      <div class="site-header__inner">
-        <div class="brand">Computing:Box</div>
+    <header class="siteHeader">
+      <div class="siteHeaderInner">
+        <a class="brand" href="/">
+          <!-- Put your logo file here -->
+          <img
+            class="brandLogo"
+            src="../images/computing-box-logo.svg"
+            alt="Computing:Box logo"
+            width="28"
+            height="28"
+          />
+          <span class="brandName">Computing:Box</span>
+        </a>

-        <nav class="nav">
-          <a class="nav__link" href="/binary">Binary</a>
-          <a class="nav__link" href="/hexadecimal">Hexadecimal</a>
-          <a class="nav__link" href="/hex-colours">Hex Colours</a>
-          <a class="nav__link" href="/logic-gates">Logic Gates</a>
-          <a class="nav__link" href="/about">About</a>
+        <nav class="siteNav" aria-label="Main 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>
        </nav>
      </div>
    </header>

-    <main class="site-main">
-      <slot />
-    </main>
+    <slot />

-    <footer class="site-footer">
-      <div class="site-footer__inner">
-        <div>Computer Science Concept Simulators</div>
-        <div>© 2025 Computing:Box · Created with 💜 by Mr Lyall</div>
-        <div>Powered by ADCM Networks</div>
-      </div>
-    </footer>
+    <style>
+      :root{
+        /* 3× navbar height */
+        --nav-height: 96px;
+        --nav-pad-x: 22px;
+        --bg: #1f2027;
+        --text: #e8e8ee;
+        --muted: #a9acb8;
+        --line: rgba(255,255,255,.10);
+      }
+
+      body{
+        margin:0;
+        background: var(--bg);
+        color: var(--text);
+      }
+
+      .siteHeader{
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        height: var(--nav-height);
+        display:flex;
+        align-items:center;
+        background: rgba(0,0,0,.15);
+        border-bottom: 1px solid var(--line);
+        backdrop-filter: blur(10px);
+      }
+
+      .siteHeaderInner{
+        width: 100%;
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 0 var(--nav-pad-x);
+        display:flex;
+        align-items:center;
+        justify-content:space-between;
+        gap: 18px;
+      }
+
+      .brand{
+        display:flex;
+        align-items:center;
+        gap: 10px;
+        text-decoration:none;
+        color: var(--text);
+        font-weight: 800;
+        letter-spacing: .08em;
+        text-transform: uppercase;
+      }
+
+      .brandLogo{
+        display:block;
+        width: 28px;
+        height: 28px;
+      }
+
+      .brandName{
+        font-size: 14px;
+        opacity: .95;
+      }
+
+      .siteNav{
+        display:flex;
+        gap: 18px;
+        align-items:center;
+      }
+
+      .siteNav a{
+        color: var(--muted);
+        text-decoration:none;
+        font-weight: 700;
+        letter-spacing: .08em;
+        text-transform: uppercase;
+        font-size: 11px;
+        padding: 10px 8px;
+        border-radius: 10px;
+      }
+
+      .siteNav a:hover{
+        color: var(--text);
+        background: rgba(255,255,255,.06);
+      }
+
+      @media (max-width: 860px){
+        .siteNav{ gap: 10px; }
+        .siteNav a{ font-size: 10px; padding: 8px 6px; }
+      }
+    </style>
  </body>
 </html>
--- a/src/scripts/binary.js
+++ b/src/scripts/binary.js
@@ -1,6 +1,5 @@
 // src/scripts/binary.js
-// Computing:Box — Binary Simulator logic (Unsigned + Two's Complement)
-// Matches IDs/classes in binary.astro
+// Computing:Box — Binary page logic (Unsigned + Two's Complement)

 (() => {
  /* -----------------------------
@@ -13,8 +12,6 @@

  const modeToggle = document.getElementById("modeToggle");
  const modeHint = document.getElementById("modeHint");
-  const lblUnsigned = document.getElementById("lblUnsigned");
-  const lblTwos = document.getElementById("lblTwos");

  const btnCustomBinary = document.getElementById("btnCustomBinary");
  const btnCustomDenary = document.getElementById("btnCustomDenary");
@@ -29,18 +26,15 @@
  const btnBitsUp = document.getElementById("btnBitsUp");
  const btnBitsDown = document.getElementById("btnBitsDown");

-  const toolbox = document.getElementById("toolbox");
  const toolboxToggle = document.getElementById("toolboxToggle");
+  const toolboxPanel = document.getElementById("toolboxPanel");

  /* -----------------------------
     STATE
  ----------------------------- */
  let bitCount = clampInt(Number(bitsInput?.value ?? 8), 1, 64);
-
-  // bits[i] is bit value 2^i (LSB at i=0)
  let bits = new Array(bitCount).fill(false);

-  // Random run timer (brief)
  let randomTimer = null;

  /* -----------------------------
@@ -60,7 +54,7 @@
  }

  function unsignedMaxExclusive(nBits) {
-    return pow2Big(nBits); // 2^n
+    return pow2Big(nBits);
  }

  function unsignedMaxValue(nBits) {
@@ -95,18 +89,16 @@
    const u = bitsToUnsignedBigInt();
    const signBit = bits[bitCount - 1] === true;
    if (!signBit) return u;
-    return u - pow2Big(bitCount); // negative: u - 2^n
+    return u - pow2Big(bitCount);
  }

  function signedBigIntToBitsTwos(vSigned) {
-    const span = pow2Big(bitCount); // 2^n
-    // convert to unsigned representative: v mod 2^n
-    const v = ((vSigned % span) + span) % span;
+    const span = pow2Big(bitCount);
+    let v = ((vSigned % span) + span) % span;
    unsignedBigIntToBits(v);
  }

  function formatBinaryGrouped() {
-    // MSB..LSB with space every 4 bits
    let s = "";
    for (let i = bitCount - 1; i >= 0; i--) {
      s += bits[i] ? "1" : "0";
@@ -118,11 +110,9 @@

  function updateModeHint() {
    if (!modeHint) return;
-    if (isTwosMode()) {
-      modeHint.textContent = "Tip: In two’s complement, the left-most bit (MSB) represents a negative value.";
-    } else {
-      modeHint.textContent = "Tip: In unsigned binary, all bits represent positive values.";
-    }
+    modeHint.textContent = isTwosMode()
+      ? "Tip: In two’s complement, the left-most bit (MSB) represents a negative value."
+      : "Tip: In unsigned binary, all bits represent positive values.";
  }

  /* -----------------------------
@@ -132,32 +122,27 @@
    bitCount = clampInt(count, 1, 64);
    if (bitsInput) bitsInput.value = String(bitCount);

-    // preserve existing LSBs where possible
    const oldBits = bits.slice();
    bits = new Array(bitCount).fill(false);
    for (let i = 0; i < Math.min(oldBits.length, bitCount); i++) bits[i] = oldBits[i];

    bitsGrid.innerHTML = "";

-    // Render MSB..LSB left-to-right
    for (let i = bitCount - 1; i >= 0; i--) {
      const bitEl = document.createElement("div");
      bitEl.className = "bit";
-
      bitEl.innerHTML = `
-        <div class="bulb" id="bulb-${i}" aria-hidden="true"></div>
+        <div class="bulb" id="bulb-${i}" aria-hidden="true">💡</div>
        <div class="bitVal" id="bitLabel-${i}"></div>
        <label class="switch" aria-label="Toggle bit ${i}">
          <input type="checkbox" data-index="${i}">
          <span class="slider"></span>
        </label>
      `;
-
      bitsGrid.appendChild(bitEl);
    }

-    // Hook switches (only the bit switches, not the mode toggle)
-    bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
+    bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => {
      input.addEventListener("change", () => {
        const i = Number(input.dataset.index);
        bits[i] = input.checked;
@@ -176,6 +161,9 @@
      const label = document.getElementById(`bitLabel-${i}`);
      if (!label) continue;

+      // Keep label on ONE LINE (no wrapping)
+      label.style.whiteSpace = "nowrap";
+
      if (isTwosMode() && i === bitCount - 1) {
        label.textContent = `-${pow2Big(bitCount - 1).toString()}`;
      } else {
@@ -185,7 +173,7 @@
  }

  function syncSwitchesToBits() {
-    bitsGrid.querySelectorAll('input[type="checkbox"][data-index]').forEach((input) => {
+    bitsGrid.querySelectorAll('input[type="checkbox"]').forEach((input) => {
      const i = Number(input.dataset.index);
      input.checked = !!bits[i];
    });
@@ -201,12 +189,7 @@

  function updateReadout() {
    if (!denaryEl || !binaryEl) return;
-
-    if (isTwosMode()) {
-      denaryEl.textContent = bitsToSignedBigIntTwos().toString();
-    } else {
-      denaryEl.textContent = bitsToUnsignedBigInt().toString();
-    }
+    denaryEl.textContent = (isTwosMode() ? bitsToSignedBigIntTwos() : bitsToUnsignedBigInt()).toString();
    binaryEl.textContent = formatBinaryGrouped();
  }

@@ -219,12 +202,11 @@
  }

  /* -----------------------------
-     SET FROM INPUTS
+     INPUT SETTERS
  ----------------------------- */
  function setFromBinaryString(binStr) {
    const clean = String(binStr ?? "").replace(/\s+/g, "");
    if (!/^[01]+$/.test(clean)) return false;
-
    const padded = clean.slice(-bitCount).padStart(bitCount, "0");
    for (let i = 0; i < bitCount; i++) {
      const charFromRight = padded[padded.length - 1 - i];
@@ -265,21 +247,19 @@
     SHIFTS
  ----------------------------- */
  function shiftLeft() {
-    for (let i = bitCount - 1; i >= 1; i--) {
-      bits[i] = bits[i - 1];
-    }
+    for (let i = bitCount - 1; i >= 1; i--) bits[i] = bits[i - 1];
    bits[0] = false;
    updateUI();
  }

  function shiftRight() {
-    // ✅ Arithmetic Right Shift in two's complement: preserve MSB (sign bit)
-    const preserveMSB = isTwosMode() ? bits[bitCount - 1] : false;
+    // Unsigned: logical right shift (MSB becomes 0)
+    // Two's complement: arithmetic right shift (MSB preserved)
+    const msb = bits[bitCount - 1];

-    for (let i = 0; i < bitCount - 1; i++) {
-      bits[i] = bits[i + 1];
-    }
-    bits[bitCount - 1] = preserveMSB;
+    for (let i = 0; i < bitCount - 1; i++) bits[i] = bits[i + 1];
+
+    bits[bitCount - 1] = isTwosMode() ? msb : false;
    updateUI();
  }

@@ -296,7 +276,7 @@
      const min = twosMin(bitCount);
      const max = twosMax(bitCount);
      let v = bitsToSignedBigIntTwos() + 1n;
-      if (v > max) v = min; // wrap
+      if (v > max) v = min;
      signedBigIntToBitsTwos(v);
    } else {
      const span = unsignedMaxExclusive(bitCount);
@@ -311,7 +291,7 @@
      const min = twosMin(bitCount);
      const max = twosMax(bitCount);
      let v = bitsToSignedBigIntTwos() - 1n;
-      if (v < min) v = max; // wrap
+      if (v < min) v = max;
      signedBigIntToBitsTwos(v);
    } else {
      const span = unsignedMaxExclusive(bitCount);
@@ -322,7 +302,7 @@
  }

  /* -----------------------------
-     RANDOM (crypto, BigInt-safe)
+     RANDOM (with running pulse + longer run)
  ----------------------------- */
  function cryptoRandomBigInt(maxExclusive) {
    if (maxExclusive <= 0n) return 0n;
@@ -346,26 +326,22 @@

  function setRandomOnce() {
    const span = unsignedMaxExclusive(bitCount); // 2^n
-    const u = cryptoRandomBigInt(span); // 0..2^n-1
+    const u = cryptoRandomBigInt(span);
    unsignedBigIntToBits(u);
    updateUI();
  }

-  function stopRandomPulse() {
-    btnRandom?.classList.remove("running");
-  }
-
  function runRandomBriefly() {
-    // stop any existing run first
    if (randomTimer) {
      clearInterval(randomTimer);
      randomTimer = null;
    }

-    btnRandom?.classList.add("running");
+    // pulse while running
+    btnRandom?.classList.add("is-running");

    const start = Date.now();
-    const durationMs = 900;
+    const durationMs = 1125; // 25% longer than 900ms
    const tickMs = 80;

    randomTimer = setInterval(() => {
@@ -373,7 +349,7 @@
      if (Date.now() - start >= durationMs) {
        clearInterval(randomTimer);
        randomTimer = null;
-        stopRandomPulse();
+        btnRandom?.classList.remove("is-running");
      }
    }, tickMs);
  }
@@ -382,28 +358,22 @@
     BIT WIDTH
  ----------------------------- */
  function setBitWidth(n) {
-    const v = clampInt(n, 1, 64);
-    buildBits(v);
+    buildBits(clampInt(n, 1, 64));
  }

  /* -----------------------------
-     TOOLBOX TOGGLE
+     TOOLBOX VISIBILITY
  ----------------------------- */
-  function setToolboxHidden(hidden) {
-    if (!toolbox) return;
-    toolbox.style.display = hidden ? "none" : "";
-    toolboxToggle?.setAttribute("aria-expanded", hidden ? "false" : "true");
+  function setToolboxVisible(isVisible) {
+    if (!toolboxPanel) return;
+    toolboxPanel.style.display = isVisible ? "flex" : "none";
+    toolboxToggle?.setAttribute("aria-expanded", String(isVisible));
  }

-  toolboxToggle?.addEventListener("click", () => {
-    const hidden = toolbox?.style.display === "none";
-    setToolboxHidden(!hidden);
-  });
-
  /* -----------------------------
     EVENTS
  ----------------------------- */
-  modeToggle?.addEventListener("change", () => updateUI());
+  modeToggle?.addEventListener("change", updateUI);

  btnCustomBinary?.addEventListener("click", () => {
    const v = prompt(`Enter binary (spaces allowed). Current width: ${bitCount} bits`);
@@ -428,7 +398,6 @@
  btnDec?.addEventListener("click", decrement);

  btnClear?.addEventListener("click", clearAll);
-
  btnRandom?.addEventListener("click", runRandomBriefly);

  btnBitsUp?.addEventListener("click", () => setBitWidth(bitCount + 1));
@@ -436,10 +405,15 @@

  bitsInput?.addEventListener("change", () => setBitWidth(Number(bitsInput.value)));

+  toolboxToggle?.addEventListener("click", () => {
+    const isOpen = toolboxToggle.getAttribute("aria-expanded") !== "false";
+    setToolboxVisible(!isOpen);
+  });
+
  /* -----------------------------
     INIT
  ----------------------------- */
  updateModeHint();
  buildBits(bitCount);
-  setToolboxHidden(false);
+  setToolboxVisible(true);
 })();
--- a/src/styles/binary.css
+++ b/src/styles/binary.css
@@ -8,6 +8,7 @@
  --line: rgba(255,255,255,.12);
 }

+/* NUMBERS font */
@font-face{
  font-family: "DSEG7ClassicRegular";
  src:
@@ -18,8 +19,9 @@
  font-display: swap;
 }

+/* TEXT font */
@font-face{
-  font-family: "Seven-Segment";
+  font-family: "SevenSegment";
  src:
    url("/fonts/Seven-Segment.woff2") format("woff2"),
    url("/fonts/Seven-Segment.woff") format("woff");
@@ -30,24 +32,50 @@

 body{
  margin:0;
+  font-family: "SevenSegment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
-  font-family: "Seven-Segment", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
 }

 .wrap{
-  max-width: 1200px;
+  max-width: 1400px;
  margin: 0 auto;
-  padding: 32px 20px 60px;
+  padding: 26px 22px 60px;
 }

+/* MAIN GRID */
 .topGrid{
  display:grid;
-  grid-template-columns: 1fr 340px;
+  grid-template-columns: 1fr 360px;
  gap: 28px;
  align-items:start;
 }

+/* Toolbox toggle BELOW navbar */
+.toolboxToggle{
+  position: sticky;
+  top: calc(var(--nav-height) + 10px);
+  z-index: 900;
+  float: right;
+
+  display:inline-flex;
+  align-items:center;
+  gap: 10px;
+
+  background: rgba(255,255,255,.06);
+  border: 1px solid rgba(255,255,255,.14);
+  color: #fff;
+  padding: 10px 14px;
+  border-radius: 12px;
+  font-weight: 900;
+  cursor: pointer;
+  letter-spacing: .10em;
+  text-transform: uppercase;
+  font-size: 12px;
+}
+.toolboxToggle:hover{ background: rgba(255,255,255,.09); }
+
+/* Readout */
 .readout{
  text-align:center;
  padding: 10px 10px 0;
@@ -55,10 +83,10 @@ body{

 .label{
  letter-spacing: .18em;
-  font-weight: 700;
+  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
-  font-size: 14px;
+  font-size: 13px;
  margin-top: 10px;
 }

@@ -70,13 +98,13 @@ body{
 }

 .denaryValue{
-  font-size: 52px; /* smaller than earlier */
+  font-size: 52px;
  line-height: 1.0;
  margin: 6px 0 10px;
 }

 .binaryValue{
-  font-size: 40px; /* smaller than earlier */
+  font-size: 46px;
  letter-spacing: .14em;
  line-height: 1.05;
  margin: 6px 0 14px;
@@ -89,37 +117,11 @@ body{
  border-top: 1px solid var(--line);
 }

-/* TOOLBOX BUTTON (must never disappear) */
-.toolboxToggle{
-  position: fixed;
-  top: 16px;
-  right: 16px;
-  z-index: 9999;
-  display: inline-flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  border-radius: 12px;
-  background: rgba(255,255,255,.06);
-  border: 1px solid rgba(255,255,255,.14);
-  color: #fff;
-  cursor: pointer;
-  font-weight: 800;
-}
-.toolboxLabel{
-  letter-spacing: .12em;
-}
-.toolboxIcon{
-  filter: saturate(1.1);
-}
-
-/* Toolbox column */
+/* RIGHT COLUMN */
 .panelCol{
  display:flex;
  flex-direction:column;
  gap: 14px;
-  position: sticky;
-  top: 16px;
 }

 .card{
@@ -131,13 +133,30 @@ body{

 .cardTitle{
  letter-spacing: .18em;
-  font-weight: 800;
+  font-weight: 900;
  color: var(--muted);
  text-transform: uppercase;
  font-size: 12px;
  margin: 0 0 10px;
 }

+.subCard{
+  margin-top: 12px;
+  background: rgba(255,255,255,.04);
+  border: 1px solid rgba(255,255,255,.10);
+  border-radius: 12px;
+  padding: 12px;
+}
+
+.subTitle{
+  letter-spacing: .18em;
+  font-weight: 900;
+  color: var(--muted);
+  text-transform: uppercase;
+  font-size: 11px;
+  margin: 0 0 10px;
+}
+
 .hint{
  color: var(--muted);
  font-size: 12px;
@@ -154,8 +173,10 @@ body{

 .toggleLabel{
  color: var(--text);
-  font-weight: 700;
-  font-size: 14px;
+  font-weight: 900;
+  font-size: 13px;
+  letter-spacing: .08em;
+  text-transform: uppercase;
 }

 /* Switch */
@@ -166,11 +187,7 @@ body{
  display:inline-block;
  flex: 0 0 auto;
 }
-.switch input{
-  opacity:0;
-  width:0;
-  height:0;
-}
+.switch input{ opacity:0; width:0; height:0; }
 .slider{
  position:absolute;
  inset:0;
@@ -206,38 +223,91 @@ body{
  color: #fff;
  padding: 12px 14px;
  border-radius: 12px;
-  font-weight: 800;
+  font-weight: 900;
  cursor: pointer;
+  letter-spacing: .10em;
+  text-transform: uppercase;
+  font-size: 12px;
 }
 .btn:active{ transform: translateY(1px); }
+
 .btnAccent{
  background: rgba(51,255,122,.18);
  border-color: rgba(51,255,122,.45);
 }

-.twoBtnRow{
+.customRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
+  margin-bottom: 10px;
 }

-/* Sub card */
-.subCard{
-  margin-top: 12px;
-  background: rgba(255,255,255,.03);
-  border: 1px solid rgba(255,255,255,.08);
-  border-radius: 12px;
-  padding: 12px;
+.btnRandom{
+  width: 100%;
 }
-.subTitle{
-  font-size: 12px;
-  font-weight: 900;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: .18em;
+
+/* Random pulse ONLY while running */
+@keyframes pulseGreen {
+  0%   { box-shadow: 0 0 0 rgba(51,255,122,0); }
+  50%  { box-shadow: 0 0 18px rgba(51,255,122,.55), 0 0 28px rgba(51,255,122,.25); }
+  100% { box-shadow: 0 0 0 rgba(51,255,122,0); }
+}
+.btnRandom.is-running{
+  animation: pulseGreen 0.9s ease-in-out infinite;
+}
+
+/* Tools */
+.toolRowCenter{
+  display:flex;
+  justify-content:center;
+  gap: 10px;
  margin-bottom: 10px;
 }

+.toolBtn{
+  height: 48px;
+  width: 66px;
+  border-radius: 12px;
+  background: rgba(255,255,255,.06);
+  border: 1px solid rgba(255,255,255,.14);
+  color: #fff;
+  cursor: pointer;
+  font-weight: 900;
+  font-size: 22px;
+}
+
+.toolDec{
+  background: rgba(255,0,0,.18);
+  border-color: rgba(255,0,0,.35);
+}
+.toolInc{
+  background: rgba(51,255,122,.18);
+  border-color: rgba(51,255,122,.35);
+}
+
+.shiftRow{
+  display:grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+/* Reset full-width + red hover pulse/background */
+.btnReset{
+  width: 100%;
+}
+
+@keyframes pulseRedBg {
+  0%   { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.14); }
+  50%  { box-shadow: 0 0 18px rgba(255,0,0,.45), 0 0 28px rgba(255,0,0,.20); background: rgba(255,0,0,.28); }
+  100% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.14); }
+}
+.btnReset:hover{
+  border-color: rgba(255,0,0,.45);
+  animation: pulseRedBg 0.9s ease-in-out infinite;
+}
+
 /* Bit width control */
 .bitWidthRow{
  display:grid;
@@ -245,6 +315,7 @@ body{
  gap: 10px;
  align-items:center;
 }
+
 .miniBtn{
  height:44px;
  width:44px;
@@ -256,6 +327,7 @@ body{
  font-weight:900;
  font-size:18px;
 }
+
 .bitInputWrap{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
@@ -265,7 +337,6 @@ body{
  align-items:center;
  justify-content:space-between;
  gap:12px;
-  min-width: 140px; /* ensures 2 digits fits comfortably */
 }
 .bitInputLabel{
  color:var(--muted);
@@ -275,7 +346,7 @@ body{
  text-transform:uppercase;
 }
 .bitInput{
-  width:60px;
+  width: 86px;
  text-align:right;
  background:transparent;
  border:none;
@@ -290,74 +361,14 @@ body{
  margin:0;
 }

-/* Tools layout */
-.toolsTopRow{
-  display:flex;
-  justify-content:center;
-  gap: 10px;
-  margin-bottom: 10px;
-}
-
-.toolBtn{
-  height: 48px;
-  border-radius: 12px;
-  background: rgba(255,255,255,.06);
-  border: 1px solid rgba(255,255,255,.14);
-  color: #fff;
-  cursor: pointer;
-  font-weight: 900;
-  letter-spacing: .08em;
-}
-
-.toolWide{
-  width: 100%;
-  margin-top: 10px;
-}
-
-.toolArrow{
-  width: 72px;
-  font-size: 22px;
-}
-
-.toolDown{
-  background: rgba(255,0,0,.16);
-  border-color: rgba(255,0,0,.30);
-}
-.toolUp{
-  background: rgba(51,255,122,.16);
-  border-color: rgba(51,255,122,.30);
-}
-
-/* Random pulses only while running (class added via JS) */
-@keyframes pulseGreen {
-  0%   { box-shadow: 0 0 0 rgba(51,255,122,0); }
-  50%  { box-shadow: 0 0 18px rgba(51,255,122,.45); }
-  100% { box-shadow: 0 0 0 rgba(51,255,122,0); }
-}
-.toolRandom.running{
-  animation: pulseGreen .9s ease-in-out infinite;
-  border-color: rgba(51,255,122,.55);
-}
-
-/* Reset pulses red on hover INCLUDING background */
-@keyframes pulseRed {
-  0%   { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); }
-  50%  { box-shadow: 0 0 18px rgba(255,0,0,.35); background: rgba(255,0,0,.22); }
-  100% { box-shadow: 0 0 0 rgba(255,0,0,0); background: rgba(255,0,0,.08); }
-}
-.toolReset:hover{
-  animation: pulseRed .85s ease-in-out infinite;
-  border-color: rgba(255,0,0,.40);
-}
-
-/* Bits */
+/* Bits grid */
 .bitsWrap{ margin-top: 22px; }

 .bitsGrid{
  display:grid;
  gap: 18px;
  justify-content:center;
-  grid-template-columns: repeat(8, minmax(90px, 1fr));
+  grid-template-columns: repeat(8, minmax(92px, 1fr));
  padding-top: 18px;
 }

@@ -370,47 +381,32 @@ body{
  text-align:center;
 }

-/* Bulb (25% bigger) */
+/* Bulb 25% bigger */
 .bulb{
-  width: 42px;
-  height: 42px;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  font-size: 26px;
+  font-size: 32px; /* was ~26 */
  line-height: 1;
-  opacity: .55;
-  background: transparent;
-  border: none;
-}
-.bulb::before{
-  content:"💡";
+  opacity: .45;
  filter: grayscale(1);
 }
 .bulb.on{
  opacity: 1;
+  filter: grayscale(0);
  text-shadow: 0 0 14px rgba(255,216,107,.75), 0 0 26px rgba(255,216,107,.45);
 }
-.bulb.on::before{
-  filter: grayscale(0);
-}

-/* Bit values MUST NOT WRAP */
 .bitVal{
  font-family:"DSEG7ClassicRegular", ui-monospace, monospace;
  font-size: 28px;
  color: var(--text);
  opacity: .95;
-  line-height: 1;
+  line-height: 1.05;
  min-height: 32px;
-  white-space: nowrap; /* IMPORTANT FIX */
+
+  /* prevent “run together” when huge values */
+  white-space: nowrap;
 }

-/* Responsive */
@media (max-width: 980px){
  .topGrid{ grid-template-columns: 1fr; }
-  .panelCol{ position: static; }
-}
-@media (max-width: 520px){
-  .bitsGrid{ grid-template-columns: repeat(4, minmax(90px, 1fr)); }
+  .toolboxToggle{ float:none; }
 }